@adea-ai/ui 0.61.0 → 0.62.0

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,203 @@
+import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import {
+  menuContentPadding,
+  menuItem,
+  menuLabel,
+  menuSeparator,
+  overlayMotion,
+  overlaySurface,
+  popoverArrow,
+} from '../../../lib/overlay'
+import { cn } from '../../../lib/utils'
+
+/**
+ * DropdownMenu.
+ *
+ * A list of actions on a trigger. This is the right home for "what can I do
+ * with this thing": rename, duplicate, export, delete. It is not a Select
+ * (which holds a *value* the user is choosing) and not a Popover (which holds
+ * arbitrary content).
+ *
+ * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
+ * highlight, Escape to close and return focus — which is exactly what a
+ * hand-rolled `div` with click handlers gets wrong.
+ *
+ * The `destructive` variant on an item is a *colour*, not a confirmation.
+ * Pairing it with an AlertDialog is the caller's job.
+ */
+export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
+  return <KobalteDropdownMenu {...props} />
+}
+
+export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {
+  return <KobalteDropdownMenu.Trigger {...props} />
+}
+
+export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownMenu.Portal>) {
+  return <KobalteDropdownMenu.Portal {...props} />
+}
+
+export type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {
+  hideArrow?: boolean
+}
+
+export function DropdownMenuContent(props: DropdownMenuContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+
+  return (
+    <KobalteDropdownMenu.Portal>
+      <KobalteDropdownMenu.Content
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      >
+        {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden="true" class={popoverArrow} />}
+        {local.children}
+      </KobalteDropdownMenu.Content>
+    </KobalteDropdownMenu.Portal>
+  )
+}
+
+export function DropdownMenuItem(
+  props: ComponentProps<typeof KobalteDropdownMenu.Item> & {
+    /** Colour the row as a destructive action. Confirm it separately. */
+    variant?: 'default' | 'destructive'
+    /** Draw a shortcut hint at the trailing edge of the row. */
+    shortcut?: string
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])
+
+  return (
+    <KobalteDropdownMenu.Item
+      class={cn(
+        menuItem,
+        {
+          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':
+            local.variant === 'destructive',
+        },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      {local.shortcut ? (
+        <span class="text-muted-foreground ms-auto font-mono text-2xs tracking-widest">
+          {local.shortcut}
+        </span>
+      ) : null}
+    </KobalteDropdownMenu.Item>
+  )
+}
+
+/**
+ * The chord drawn at a row's trailing edge.
+ *
+ * A component as well as the `shortcut` prop on an item, because a caller composing
+ * a row by hand needs the same treatment — and because the alternative is every
+ * caller inventing the same mono-and-dimmed span.
+ */
+export function DropdownMenuShortcut(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      class={cn('text-muted-foreground ms-auto font-mono text-2xs tracking-widest', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function DropdownMenuCheckboxItem(
+  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>
+) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteDropdownMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Check class="size-4" />
+      </KobalteDropdownMenu.ItemIndicator>
+    </KobalteDropdownMenu.CheckboxItem>
+  )
+}
+
+export function DropdownMenuRadioGroup(
+  props: ComponentProps<typeof KobalteDropdownMenu.RadioGroup>
+) {
+  return <KobalteDropdownMenu.RadioGroup {...props} />
+}
+
+export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteDropdownMenu.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Circle class="size-2 fill-current" />
+      </KobalteDropdownMenu.ItemIndicator>
+    </KobalteDropdownMenu.RadioItem>
+  )
+}
+
+export function DropdownMenuLabel(props: ComponentProps<typeof KobalteDropdownMenu.GroupLabel>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteDropdownMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
+}
+
+export function DropdownMenuGroup(props: ComponentProps<typeof KobalteDropdownMenu.Group>) {
+  return <KobalteDropdownMenu.Group {...props} />
+}
+
+export function DropdownMenuSeparator(props: ComponentProps<typeof KobalteDropdownMenu.Separator>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteDropdownMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />
+}
+
+export function DropdownMenuSub(props: ComponentProps<typeof KobalteDropdownMenu.Sub>) {
+  return <KobalteDropdownMenu.Sub {...props} />
+}
+
+export function DropdownMenuSubTrigger(
+  props: ComponentProps<typeof KobalteDropdownMenu.SubTrigger>
+) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteDropdownMenu.SubTrigger class={cn(menuItem, local.class)} {...rest}>
+      {local.children}
+      <ChevronRight class="ms-auto size-4" />
+    </KobalteDropdownMenu.SubTrigger>
+  )
+}
+
+export function DropdownMenuSubContent(
+  props: ComponentProps<typeof KobalteDropdownMenu.SubContent>
+) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteDropdownMenu.Portal>
+      <KobalteDropdownMenu.SubContent
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      />
+    </KobalteDropdownMenu.Portal>
+  )
+}

package/dist/r/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,18 @@
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from './dropdown-menu'

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

@@ -0,0 +1,104 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Empty.
+ *
+ * The state of a region that has nothing to show yet, or after a filter
+ * removed everything. It exists as a component because an empty state is where
+ * apps most often improvise: a bare grey sentence in one view and a centred
+ * illustration with two buttons in another.
+ *
+ * The shape is fixed — media, title, description, actions — so the only
+ * decisions a caller makes are which parts to include. A region with an
+ * action to offer must give `EmptyContent` something focusable, otherwise the
+ * state is a dead end.
+ */
+export function Empty(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      data-slot="empty"
+      class={cn(
+        'flex min-h-40 w-full flex-col items-center justify-center gap-4 rounded-lg px-6 py-10 text-center text-balance',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function EmptyHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="empty-header"
+      class={cn('flex max-w-sm flex-col items-center gap-1.5', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export type EmptyMediaProps = ComponentProps<'div'> & {
+  variant?: 'icon' | 'image'
+}
+
+export function EmptyMedia(props: EmptyMediaProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant'])
+
+  return (
+    <div
+      data-slot="empty-media"
+      class={cn(
+        'flex shrink-0 items-center justify-center',
+        {
+          'bg-muted text-muted-foreground size-9 rounded-lg [&_svg]:size-4':
+            local.variant !== 'image',
+          'size-24 rounded-xl [&_img]:size-full [&_img]:object-contain': local.variant === 'image',
+        },
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function EmptyTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="empty-title"
+      class={cn('text-sm font-medium tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function EmptyDescription(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="empty-description"
+      class={cn(
+        'text-muted-foreground text-sm [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function EmptyContent(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="empty-content"
+      class={cn('flex max-w-sm flex-col items-center gap-2', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export type EmptyProps = ComponentProps<'div'> & { children?: JSX.Element }

package/dist/r/src/components/ui/empty/index.ts

@@ -0,0 +1,10 @@
+export {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+  type EmptyMediaProps,
+  type EmptyProps,
+} from './empty'

package/dist/r/src/components/ui/entity-icon/entity-icon.tsx

@@ -0,0 +1,154 @@
+import { Show, splitProps, type Component, type ComponentProps, type JSX } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+import { cva, type VariantProps } from '../../../lib/variants'
+import { cn } from '../../../lib/utils'
+
+/**
+ * EntityIcon.
+ *
+ * A tile that stands for a thing: a room, a project, an agent, an installed
+ * plugin, a workspace. Its job is to be identifiable in a column of its
+ * siblings, which is a different job from `Avatar`'s (identifying a *person*) and
+ * the reason the two are separate components rather than one with a `round` prop.
+ *
+ * Three decisions are baked in because getting them wrong is what makes icon
+ * grids look messy:
+ *
+ * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
+ *    empty box. `fallback` takes the name and returns the glyph, so a caller can
+ *    choose initials, a domain letter, or a kind icon.
+ * 2. **The tile owns its own contrast.** `tone` tints the background and the
+ *    glyph together, so a caller never picks a colour pair and never ships an
+ *    icon that disappears against its tile.
+ * 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a
+ *    tile in a detail header are the same two or three sizes every other
+ *    interactive element uses.
+ *
+ * `shape="rounded"` is the default because a rounded square reads as an object
+ * and a circle reads as a person; use `circle` only when the tile really does
+ * hold a face.
+ */
+export const entityIconVariants = cva(
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden border font-semibold select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      shape: {
+        rounded: 'rounded-lg',
+        circle: 'rounded-full',
+        square: 'rounded-none',
+      },
+      size: {
+        xs: 'size-5 text-2xs [&_svg]:size-3',
+        sm: 'size-6 text-2xs [&_svg]:size-3.5',
+        md: 'size-8 text-xs [&_svg]:size-4',
+        lg: 'size-10 text-sm [&_svg]:size-5',
+        xl: 'size-12 text-base [&_svg]:size-6',
+      },
+      tone: {
+        /** Neutral: an inset tile with a hairline edge — the default. */
+        neutral: 'border-border bg-muted text-muted-foreground',
+        /** On the brand: for a thing the application itself owns. */
+        primary: 'border-transparent bg-primary-subtle text-primary',
+        /** Bare: no fill and no edge, for a tile that already sits on a surface. */
+        bare: 'border-transparent bg-transparent text-foreground',
+        success: 'border-transparent bg-success-subtle text-success',
+        warning: 'border-transparent bg-warning-subtle text-warning',
+        danger: 'border-transparent bg-destructive-subtle text-destructive',
+        info: 'border-transparent bg-info-subtle text-info',
+      },
+    },
+    defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },
+  }
+)
+
+type EntityIconVariantProps = VariantProps<typeof entityIconVariants>
+
+export type EntityIconProps = Omit<ComponentProps<'span'>, 'children'> &
+  EntityIconVariantProps & {
+    /** The entity's name. Used for the accessible label and, via `fallback`, the monogram. */
+    name: string
+    /**
+     * A logo or icon — a Lucide icon reference (`icon={Wrench}`) or an element
+     * (`icon={<Wrench />}`). Both are accepted because both are what a caller
+     * naturally writes, and the difference is an implementation detail they should
+     * not have to know.
+     */
+    icon?: Component | JSX.Element
+    /** Glyph for an entity with no icon. Defaults to the name's first two letters. */
+    fallback?: (name: string) => JSX.Element
+    /** A corner badge: a status dot, an unread count, an installed tick. */
+    badge?: JSX.Element
+    /** A second edge, drawn outside the tile — an active or selected ring. */
+    ring?: boolean
+  }
+
+/**
+ * Two letters from a name, chosen so the result is stable and readable: the
+ * first letter of the first two words when there are two ("Agent HQ" → "AH"),
+ * otherwise the first two characters ("Kitchen" → "Ki").
+ */
+export function monogram(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean)
+  if (words.length >= 2) return (words[0]![0]! + words[1]![0]!).toUpperCase()
+  return name.trim().slice(0, 2)
+}
+
+/**
+ * A glyph is either a component reference or an element, and the two render
+ * differently — `Dynamic` for the first, the element itself for the second. The
+ * union is discriminated so the branch is checked rather than cast.
+ */
+type Glyph = { kind: 'component'; value: Component } | { kind: 'element'; value: JSX.Element }
+
+function Glyph(props: { glyph: Glyph }) {
+  return props.glyph.kind === 'component' ? (
+    <Dynamic component={props.glyph.value} />
+  ) : (
+    props.glyph.value
+  )
+}
+
+export function EntityIcon(props: EntityIconProps) {
+  const [local, rest] = splitProps(props, [
+    'name',
+    'icon',
+    'fallback',
+    'badge',
+    'ring',
+    'shape',
+    'size',
+    'tone',
+    'class',
+  ])
+
+  const glyph = (): Glyph | undefined => {
+    const icon = local.icon
+    if (!icon) return undefined
+    return typeof icon === 'function'
+      ? { kind: 'component', value: icon as Component }
+      : { kind: 'element', value: icon as JSX.Element }
+  }
+
+  return (
+    <span
+      class={cn(
+        entityIconVariants({ shape: local.shape, size: local.size, tone: local.tone }),
+        local.ring && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
+        local.class
+      )}
+      role="img"
+      aria-label={local.name}
+      {...rest}
+    >
+      <Show
+        when={glyph()}
+        fallback={local.fallback ? local.fallback(local.name) : monogram(local.name)}
+      >
+        {(value) => <Glyph glyph={value()} />}
+      </Show>
+      <Show when={local.badge}>
+        <span class="absolute right-0 bottom-0 translate-x-1/4 translate-y-1/4">{local.badge}</span>
+      </Show>
+    </span>
+  )
+}

package/dist/r/src/components/ui/entity-icon/index.ts

@@ -0,0 +1 @@
+export { EntityIcon, entityIconVariants, monogram, type EntityIconProps } from './entity-icon'

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

@@ -0,0 +1,131 @@
+import { TextField as KobalteTextField } from '@kobalte/core/text-field'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Field.
+ *
+ * The wrapper that makes a form control describable and validatable: a label,
+ * a description, an error message, and the ARIA relationships between them.
+ *
+ * It is built on Kobalte's TextField specifically so `aria-describedby`,
+ * `aria-invalid` and `aria-errormessage` are wired by construction. Those three
+ * attributes are the difference between "this field is required and empty" and
+ * a red border that only a sighted user can perceive — and they are also the
+ * first thing a hand-rolled form drops.
+ *
+ * `Field` owns the description and the error slot, so a form's controls line up
+ * and its messages land in the same place regardless of which control is used.
+ * Compose it with any control: `Field` wraps, `Label`/`Input`/`Select` fill it.
+ */
+export function Field(props: ComponentProps<typeof KobalteTextField>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteTextField class={cn('flex flex-col gap-1.5', local.class)} {...rest} />
+}
+
+export function FieldLabel(props: ComponentProps<typeof KobalteTextField.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteTextField.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />
+  )
+}
+
+export function FieldDescription(props: ComponentProps<typeof KobalteTextField.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteTextField.Description
+      class={cn('text-muted-foreground text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteTextField.ErrorMessage class={cn('text-destructive text-sm', local.class)} {...rest} />
+  )
+}
+
+export function FieldInput(props: ComponentProps<typeof KobalteTextField.Input>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteTextField.Input
+      class={cn(
+        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'transition-[color,box-shadow,border-color] ease-out outline-none',
+        'placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function FieldTextArea(props: ComponentProps<typeof KobalteTextField.TextArea>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteTextField.TextArea
+      class={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',
+        'transition-[color,box-shadow,border-color] ease-out outline-none resize-y',
+        'placeholder:text-muted-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * A labelled group of fields with a single legend, for a real `<fieldset>`.
+ * Grouping is what lets a screen reader announce "Shipping address, group"
+ * before reading the four fields inside it.
+ */
+export function FieldSet(props: ComponentProps<'fieldset'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <fieldset class={cn('flex flex-col gap-4', local.class)} {...rest} />
+}
+
+export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  const [local, rest] = splitProps(props, ['class', 'variant'])
+  return (
+    <legend
+      class={cn(
+        'mb-1',
+        local.variant === 'label'
+          ? 'text-sm font-medium'
+          : 'text-base font-semibold tracking-tight',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/** A horizontal rule with a word in it, for "or continue with" separators. */
+export function FieldSeparator(props: {
+  class?: string
+  children?: ComponentProps<'span'>['children']
+}) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <div class={cn('relative flex items-center gap-3 py-1', local.class)} {...rest}>
+      <span class="bg-border h-px flex-1" />
+      <Show when={local.children}>
+        <span class="text-muted-foreground text-2xs tracking-wide uppercase">{local.children}</span>
+      </Show>
+      <span class="bg-border h-px flex-1" />
+    </div>
+  )
+}

package/dist/r/src/components/ui/field/index.ts

@@ -0,0 +1,11 @@
+export {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldInput,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTextArea,
+} from './field'

package/dist/r/src/components/ui/hover-card/hover-card.tsx

@@ -0,0 +1,48 @@
+import { HoverCard as KobalteHoverCard } from '@kobalte/core/hover-card'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { overlaySurface, popoverArrow } from '../../../lib/overlay'
+import { cn } from '../../../lib/utils'
+
+/**
+ * HoverCard.
+ *
+ * A rich preview shown on hover: a user's profile, a file's summary, a link's
+ * destination. The difference from Tooltip is that this may be hovered *into*
+ * — the pointer can leave the trigger, cross the gap, and read the card.
+ *
+ * Because it only opens on hover, its content must also be reachable another
+ * way (clicking the trigger, for instance). A hover card that holds the only
+ * route to something is unreachable by keyboard and by touch.
+ */
+export function HoverCard(props: ComponentProps<typeof KobalteHoverCard>) {
+  return <KobalteHoverCard {...props} />
+}
+
+export function HoverCardTrigger(props: ComponentProps<typeof KobalteHoverCard.Trigger>) {
+  return <KobalteHoverCard.Trigger {...props} />
+}
+
+export function HoverCardContent(props: ComponentProps<typeof KobalteHoverCard.Content>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteHoverCard.Portal>
+      <KobalteHoverCard.Content
+        class={cn(
+          overlaySurface,
+          'z-(--z-menu) w-64 p-3',
+          'origin-(--kb-hover-card-content-transform-origin)',
+          '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}
+        <KobalteHoverCard.Arrow aria-hidden="true" class={popoverArrow} />
+      </KobalteHoverCard.Content>
+    </KobalteHoverCard.Portal>
+  )
+}

package/dist/r/src/components/ui/hover-card/index.ts

@@ -0,0 +1 @@
+export { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card'