@adea-ai/ui 0.60.3 → 0.61.0

package/src/components/composites/account-menu/account-menu.tsx

@@ -0,0 +1,150 @@
+import {
+  CircleHelp,
+  Info,
+  LogIn,
+  LogOut,
+  Megaphone,
+  RefreshCw,
+  Settings2,
+  Smartphone,
+  UserRound,
+} from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Button } from '../../ui/button/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu/dropdown-menu'
+
+/**
+ * AccountMenu.
+ *
+ * The trailing control in a rail or a top bar: the account, the way into settings,
+ * and the way out. Every desktop application has one and they are all the same menu,
+ * which is why it belongs here rather than being redrawn per app.
+ *
+ * ## The items are the caller's
+ *
+ * The menu takes a list rather than hard-coding one. An application adds and removes
+ * entries — a mobile hand-off that only makes sense on desktop, a feedback link that
+ * only exists once there is somewhere to send it — and a component that decided the
+ * list could not be used by two products.
+ *
+ * `disabled` on an item is deliberately visible rather than hidden: a greyed "Help
+ * Center" says the destination is coming, while an absent one says it does not exist.
+ */
+export type AccountMenuItem = {
+  id: string
+  label: string
+  icon?: JSX.Element
+  /** A chord drawn at the trailing edge, e.g. `⌘,`. */
+  shortcut?: string
+  disabled?: boolean
+  /** Render only on this platform. Omit to always render. */
+  platform?: 'desktop' | 'web'
+  onSelect?: () => void
+}
+
+export type AccountMenuProps = {
+  class?: string
+  /** The entries above the separator. */
+  items: readonly AccountMenuItem[]
+  /** Which platform this is rendered on, for items that declare one. */
+  platform?: 'desktop' | 'web'
+  /** Whether a session exists. Decides the sign-in/sign-out row. */
+  authenticated: boolean
+  /** Disable the session row while a sign-in or sign-out is in flight. */
+  busy?: boolean
+  /** The name shown on the trigger's accessible label. */
+  label?: string
+  onSignIn?: () => void
+  onSignOut?: () => void
+  /** Fires on hover or focus of the trigger — a chance to prefetch. */
+  onIntent?: () => void
+}
+
+const FALLBACK_ICONS: Record<string, typeof Settings2> = {
+  mobile: Smartphone,
+  settings: Settings2,
+  about: Info,
+  help: CircleHelp,
+  feedback: Megaphone,
+  updates: RefreshCw,
+}
+
+export function AccountMenu(props: AccountMenuProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'items',
+    'platform',
+    'authenticated',
+    'busy',
+    'label',
+    'onSignIn',
+    'onSignOut',
+    'onIntent',
+  ])
+
+  const visible = () =>
+    local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger
+        as={Button}
+        variant="ghost"
+        size="icon-md"
+        class={cn('text-muted-foreground', local.class)}
+        aria-label={local.label ?? 'Account and settings'}
+        onFocus={() => local.onIntent?.()}
+        onPointerEnter={() => local.onIntent?.()}
+        {...rest}
+      >
+        <UserRound aria-hidden="true" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent side="top" align="start" class="min-w-56">
+        <DropdownMenuGroup>
+          <For each={visible()}>
+            {(item) => (
+              <DropdownMenuItem
+                disabled={item.disabled}
+                onSelect={() => item.onSelect?.()}
+                shortcut={item.shortcut}
+              >
+                {item.icon ?? renderFallbackIcon(item.id)}
+                <span>{item.label}</span>
+              </DropdownMenuItem>
+            )}
+          </For>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            disabled={local.busy}
+            onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+          >
+            <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
+              <LogOut aria-hidden="true" />
+            </Show>
+            <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+/**
+ * A known item id gets its conventional glyph, so a caller that only wants the
+ * standard menu does not have to import six icons to get it.
+ */
+function renderFallbackIcon(id: string): JSX.Element {
+  const Icon = FALLBACK_ICONS[id]
+  return Icon ? <Icon aria-hidden="true" /> : null
+}

package/src/components/composites/account-menu/index.ts

@@ -0,0 +1 @@
+export { AccountMenu, type AccountMenuItem, type AccountMenuProps } from './account-menu'

package/src/components/composites/list-row/index.ts

@@ -0,0 +1 @@
+export { ListGroup, ListRow, type ListRowProps } from './list-row'

package/src/components/composites/list-row/list-row.tsx

@@ -0,0 +1,116 @@
+import type { PolymorphicProps } from '@kobalte/core/polymorphic'
+import { Polymorphic } from '@kobalte/core/polymorphic'
+import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * ListRow.
+ *
+ * One row in a list of like things: a project, a session, a file, a person. It
+ * is the highest-frequency component in an application of this shape, and the
+ * one where a half-pixel of drift is most visible — twenty rows of a sidebar
+ * make any inconsistency in height or padding obvious.
+ *
+ * The structure is fixed at four slots — `leading`, `children`, `meta`,
+ * `trailing` — so rows that show an avatar, an icon, a status dot, a timestamp
+ * and an overflow menu all sit at the same height without the caller doing
+ * arithmetic.
+ *
+ * A row is only interactive when it is given an `as` that can be activated
+ * (an anchor, a button) or an `onClick`. Without either it renders as a
+ * `div` with no hover treatment, because a hover state on something that does
+ * nothing is a lie.
+ */
+export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
+  T,
+  {
+    class?: string
+    /** Marks the row as current. Sets `aria-current` for a link row. */
+    selected?: boolean
+    /** Draw the row at the compact height. */
+    dense?: boolean
+    /** Leading slot: an avatar, an icon, a checkbox. */
+    leading?: JSX.Element
+    /** Trailing slot: a count, a menu trigger, a timestamp. */
+    trailing?: JSX.Element
+    /** A dimmed second line under the main content. */
+    description?: string
+  }
+>
+
+export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
+  const [local, rest] = splitProps(props as ListRowProps, [
+    'class',
+    'selected',
+    'dense',
+    'leading',
+    'trailing',
+    'description',
+    'children',
+  ])
+
+  return (
+    <Polymorphic
+      as="div"
+      aria-current={local.selected ? 'true' : undefined}
+      data-selected={local.selected ? '' : undefined}
+      class={cn(
+        'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
+        'transition-colors ease-out outline-none',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        { 'h-row-sm': local.dense, 'h-row-md': !local.dense },
+        {
+          'bg-primary-subtle text-foreground': local.selected,
+          'hover:bg-surface-hover': !local.selected,
+        },
+        local.class
+      )}
+      {...(rest as ComponentProps<'div'>)}
+    >
+      <Show when={local.leading}>
+        <span class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4">
+          {local.leading}
+        </span>
+      </Show>
+      <span class="flex min-w-0 flex-1 flex-col">
+        <span class="truncate">{local.children}</span>
+        <Show when={local.description}>
+          <span class="text-muted-foreground truncate text-xs">{local.description}</span>
+        </Show>
+      </span>
+      <Show when={local.trailing}>
+        <span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">
+          {local.trailing}
+        </span>
+      </Show>
+    </Polymorphic>
+  )
+}
+
+/**
+ * A group of rows with an optional heading and a scrolling body. The heading is
+ * a plain label rather than a control: grouping is for reading, and a
+ * disclosure on a list of five rows costs more attention than it saves.
+ */
+export function ListGroup(props: ComponentProps<'div'> & { label?: string; action?: JSX.Element }) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'action', 'children'])
+
+  return (
+    <div data-slot="list-group" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
+      <Show when={local.label}>
+        <div class="group/list-header flex items-center gap-1 px-2 py-1">
+          <span class="min-w-0 flex-1 truncate text-2xs font-medium tracking-wide text-muted-foreground uppercase">
+            {local.label}
+          </span>
+          <Show when={local.action}>
+            <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/list-header:opacity-100 focus-within:opacity-100">
+              {local.action}
+            </span>
+          </Show>
+        </div>
+      </Show>
+      <div class="flex flex-col gap-0.5">{local.children}</div>
+    </div>
+  )
+}

package/src/components/composites/settings/index.ts

@@ -0,0 +1 @@
+export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'

package/src/components/composites/settings/settings.tsx

@@ -0,0 +1,142 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * SettingsSection and SettingsRow.
+ *
+ * A settings page is the most repetitive surface in any application, and the
+ * one where drift is most visible: label sizes, control widths and description
+ * placement all wander unless something fixes them.
+ *
+ * The row is a two-column layout at a fixed label width, so controls line up
+ * down the page regardless of how long the labels are. That alignment is the
+ * difference between a settings page that reads as designed and one that reads
+ * as a form.
+ *
+ * `SettingsRow` puts the control on the trailing side and the label leading;
+ * `SettingsField` stacks them for a control too wide for a row (a textarea, a
+ * list). Both share the same label and description treatment.
+ */
+export function SettingsSection(
+  props: ComponentProps<'section'> & {
+    title: string
+    description?: string
+    /** A control for the section as a whole, e.g. a master toggle. */
+    action?: JSX.Element
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'title', 'description', 'action', 'children'])
+
+  return (
+    <section
+      data-slot="settings-section"
+      class={cn('flex flex-col gap-4 px-5 py-5', local.class)}
+      {...rest}
+    >
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex min-w-0 flex-col gap-0.5">
+          <h2 class="text-base font-semibold tracking-tight">{local.title}</h2>
+          <Show when={local.description}>
+            <p class="max-w-prose text-sm text-muted-foreground text-pretty">{local.description}</p>
+          </Show>
+        </div>
+        <Show when={local.action}>
+          <div class="flex shrink-0 items-center gap-2">{local.action}</div>
+        </Show>
+      </div>
+      <div class="divide-y divide-border rounded-xl border border-border">{local.children}</div>
+    </section>
+  )
+}
+
+/**
+ * One setting: a label and description on the leading side, a control on the
+ * trailing side.
+ *
+ * `label` is wired to the control through `aria-labelledby` when the control is
+ * not already labelled, so a caller can pass a bare `Switch` and still get an
+ * accessible name. The row does not invent an id per render — it derives one
+ * from the label, which is stable across renders and readable in a snapshot.
+ */
+export function SettingsRow(
+  props: ComponentProps<'div'> & {
+    label: string
+    description?: string
+    /** Render a vertical stack when the control needs the full width. */
+    orientation?: 'horizontal' | 'vertical'
+    /** Hide the divider this row would otherwise contribute. */
+    bare?: boolean
+  }
+) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'label',
+    'description',
+    'orientation',
+    'bare',
+    'children',
+  ])
+
+  return (
+    <div
+      data-slot="settings-row"
+      class={cn(
+        'flex gap-4 p-4',
+        local.orientation === 'vertical'
+          ? 'flex-col'
+          : 'flex-col sm:flex-row sm:items-center sm:justify-between',
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="flex min-w-0 flex-col gap-0.5">
+        <div data-slot="settings-row-label" class="text-sm font-medium">
+          {local.label}
+        </div>
+        <Show when={local.description}>
+          <p class="max-w-prose text-sm text-muted-foreground text-pretty">{local.description}</p>
+        </Show>
+      </div>
+      <div
+        data-slot="settings-row-control"
+        class={cn('shrink-0', local.orientation === 'vertical' && 'w-full')}
+      >
+        {local.children}
+      </div>
+    </div>
+  )
+}
+
+/** A stacked label-and-control pair, for a control too wide for a row. */
+export function SettingsField(
+  props: ComponentProps<'div'> & { label: string; description?: string; htmlFor?: string }
+) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'description', 'htmlFor', 'children'])
+
+  return (
+    <div data-slot="settings-field" class={cn('flex flex-col gap-2 p-4', local.class)} {...rest}>
+      <div class="flex flex-col gap-0.5">
+        <label for={local.htmlFor} class="text-sm font-medium">
+          {local.label}
+        </label>
+        <Show when={local.description}>
+          <p class="max-w-prose text-sm text-muted-foreground text-pretty">{local.description}</p>
+        </Show>
+      </div>
+      <div>{local.children}</div>
+    </div>
+  )
+}
+
+/** A settings page's scrolling body, with the header sticky at the top. */
+export function SettingsPage(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="settings-page"
+      class={cn('flex min-h-0 flex-1 flex-col overflow-y-auto', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/composites/stat/index.ts

@@ -0,0 +1,9 @@
+export {
+  PropertyList,
+  PropertyRow,
+  PropertyTerm,
+  PropertyValue,
+  Stat,
+  StatGroup,
+  type StatProps,
+} from './stat'

package/src/components/composites/stat/stat.tsx

@@ -0,0 +1,155 @@
+import { ArrowDownRight, ArrowUpRight } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { cn } from '#lib/utils'
+
+/**
+ * Stat.
+ *
+ * A single measured number with its label and, optionally, its change. The
+ * whole component is a decision about honesty: a value shown without its
+ * comparison is not information, so `delta` carries the direction, the amount
+ * and — through `deltaTone` — whether the direction is *good*. A rising number
+ * is not always a rising outcome, and only the caller knows which way is which.
+ *
+ * `tabular-nums` on the value is what lets two stats in a row be compared
+ * without the digits shifting under the reader.
+ */
+export type StatProps = ComponentProps<'div'> & {
+  label: string
+  value: JSX.Element
+  /** A unit or qualifier after the value, e.g. "ms", "of 10". */
+  unit?: string
+  /** The change, e.g. "+12% from last week". */
+  delta?: string
+  /** Whether the change is an improvement. Decides the arrow and the colour. */
+  deltaTone?: 'up' | 'down' | 'neutral'
+  /** Draws the leading accent rule used for a row of headline numbers. */
+  accent?: boolean
+}
+
+export function Stat(props: StatProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'label',
+    'value',
+    'unit',
+    'delta',
+    'deltaTone',
+    'accent',
+    'children',
+  ])
+
+  return (
+    <div
+      data-slot="stat"
+      class={cn(
+        'flex min-w-0 flex-col gap-1 rounded-lg border border-border bg-card p-3',
+        { 'border-t-2 border-t-primary': local.accent },
+        local.class
+      )}
+      {...rest}
+    >
+      <div class="text-muted-foreground truncate text-xs font-medium">{local.label}</div>
+      <div class="flex items-baseline gap-1">
+        <span class="text-xl font-semibold tabular-nums tracking-tight">{local.value}</span>
+        <Show when={local.unit}>
+          <span class="text-muted-foreground text-xs">{local.unit}</span>
+        </Show>
+      </div>
+      <Show when={local.delta}>
+        <div
+          class={cn('flex items-center gap-1 text-xs', {
+            'text-success': local.deltaTone === 'up',
+            'text-destructive': local.deltaTone === 'down',
+            'text-muted-foreground': local.deltaTone === undefined || local.deltaTone === 'neutral',
+          })}
+        >
+          <Show when={local.deltaTone === 'up' || local.deltaTone === 'down'}>
+            <Dynamic
+              component={local.deltaTone === 'down' ? ArrowDownRight : ArrowUpRight}
+              aria-hidden="true"
+              class="size-3"
+            />
+          </Show>
+          <span class="tabular-nums">{local.delta}</span>
+        </div>
+      </Show>
+      {local.children}
+    </div>
+  )
+}
+
+/** A row of stats that shares one gap and wraps as the window narrows. */
+export function StatGroup(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="stat-group"
+      class={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-4', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * PropertyList.
+ *
+ * A definition list for read-only metadata: the details of a file, a session, a
+ * build. This is a `<dl>`, not a table and not a grid of divs, because the
+ * relationship being expressed is term-and-definition and the platform has an
+ * element for exactly that.
+ *
+ * Values are selectable by default. Metadata is the thing users copy most and
+ * get the least often: a commit hash behind a drag-to-select gesture is a small
+ * daily failure.
+ */
+export function PropertyList(props: ComponentProps<'dl'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <dl
+      data-slot="property-list"
+      class={cn('grid grid-cols-[auto_1fr] items-baseline gap-x-4 gap-y-2 text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PropertyTerm(props: ComponentProps<'dt'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <dt
+      data-slot="property-term"
+      class={cn('text-muted-foreground whitespace-nowrap', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function PropertyValue(props: ComponentProps<'dd'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <dd
+      data-slot="property-value"
+      class={cn('min-w-0 break-words select-text', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** A single term/value pair, for a list built one row at a time. */
+export function PropertyRow(props: ComponentProps<'div'> & { term: string }) {
+  const [local, rest] = splitProps(props, ['class', 'term', 'children'])
+
+  return (
+    <div
+      data-slot="property-row"
+      class={cn('flex items-baseline justify-between gap-4 text-sm', local.class)}
+      {...rest}
+    >
+      <span class="text-muted-foreground shrink-0">{local.term}</span>
+      <span class="min-w-0 truncate text-end select-text">{local.children}</span>
+    </div>
+  )
+}

package/src/components/composites/update-dialog/index.ts

@@ -0,0 +1,7 @@
+export {
+  UpdateDialog,
+  type UpdateAdapter,
+  type UpdateDialogProps,
+  type UpdatePhase,
+  type UpdateState,
+} from './update-dialog'