@adea-ai/ui 0.60.3 → 0.61.0

package/src/components/ui/menubar/menubar.tsx

@@ -0,0 +1,190 @@
+import { Menubar as KobalteMenubar } from '@kobalte/core/menubar'
+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'
+
+/**
+ * Menubar.
+ *
+ * A persistent row of menus at the top of a surface — the desktop application
+ * pattern. Each trigger opens its own menu, and the arrow keys move *between*
+ * menus once one is open, which is what makes a menubar a single control rather
+ * than five menus that happen to be adjacent.
+ *
+ * This is for a window-level command surface. For actions on one thing, use
+ * DropdownMenu; a menubar on a row would be a menu pretending to be chrome.
+ */
+export function Menubar(props: ComponentProps<typeof KobalteMenubar>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteMenubar
+      class={cn(
+        'flex items-center gap-0.5 rounded-md border border-border bg-card p-0.5',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * One top-level menu: a trigger and the panel it opens.
+ *
+ * Required, and the reason the component is not just a row of triggers — the
+ * menubar's arrow keys move *between* menus, which only works when each trigger
+ * belongs to a menu the bar knows about. `value` names it.
+ */
+export function MenubarMenu(props: ComponentProps<typeof KobalteMenubar.Menu>) {
+  return <KobalteMenubar.Menu {...props} />
+}
+
+export function MenubarTrigger(props: ComponentProps<typeof KobalteMenubar.Trigger>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteMenubar.Trigger
+      class={cn(
+        'flex items-center rounded-sm px-2 py-1 text-sm font-medium select-none',
+        'transition-colors ease-out outline-none',
+        'data-[expanded]:bg-surface-active',
+        'data-[highlighted]:bg-surface-hover',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function MenubarContent(props: ComponentProps<typeof KobalteMenubar.Content>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <KobalteMenubar.Portal>
+      <KobalteMenubar.Content
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[10rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      >
+        <KobalteMenubar.Arrow aria-hidden="true" class={popoverArrow} />
+        {local.children}
+      </KobalteMenubar.Content>
+    </KobalteMenubar.Portal>
+  )
+}
+
+export function MenubarItem(
+  props: ComponentProps<typeof KobalteMenubar.Item> & {
+    variant?: 'default' | 'destructive'
+    shortcut?: string
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'shortcut', 'children'])
+  return (
+    <KobalteMenubar.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}
+    </KobalteMenubar.Item>
+  )
+}
+
+export function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.CheckboxItem>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Check class="size-4" />
+      </KobalteMenubar.ItemIndicator>
+    </KobalteMenubar.CheckboxItem>
+  )
+}
+
+export function MenubarRadioGroup(props: ComponentProps<typeof KobalteMenubar.RadioGroup>) {
+  return <KobalteMenubar.RadioGroup {...props} />
+}
+
+export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.RadioItem>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      {local.children}
+      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+        <Circle class="size-2 fill-current" />
+      </KobalteMenubar.ItemIndicator>
+    </KobalteMenubar.RadioItem>
+  )
+}
+
+export function MenubarLabel(props: ComponentProps<typeof KobalteMenubar.GroupLabel>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteMenubar.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
+}
+
+export function MenubarGroup(props: ComponentProps<typeof KobalteMenubar.Group>) {
+  return <KobalteMenubar.Group {...props} />
+}
+
+export function MenubarSeparator(props: ComponentProps<typeof KobalteMenubar.Separator>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteMenubar.Separator class={cn(menuSeparator, local.class)} {...rest} />
+}
+
+export function MenubarSub(props: ComponentProps<typeof KobalteMenubar.Sub>) {
+  return <KobalteMenubar.Sub {...props} />
+}
+
+export function MenubarSubTrigger(props: ComponentProps<typeof KobalteMenubar.SubTrigger>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <KobalteMenubar.SubTrigger class={cn(menuItem, local.class)} {...rest}>
+      {local.children}
+      <ChevronRight class="ms-auto size-4" />
+    </KobalteMenubar.SubTrigger>
+  )
+}
+
+export function MenubarSubContent(props: ComponentProps<typeof KobalteMenubar.SubContent>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteMenubar.Portal>
+      <KobalteMenubar.SubContent
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'z-(--z-menu) min-w-[8rem] origin-(--kb-menu-content-transform-origin) overflow-hidden',
+          menuContentPadding,
+          local.class
+        )}
+        {...rest}
+      />
+    </KobalteMenubar.Portal>
+  )
+}

package/src/components/ui/modal-dialog/index.ts

@@ -0,0 +1 @@
+export { ModalDialog, type ModalDialogProps } from './modal-dialog'

package/src/components/ui/modal-dialog/modal-dialog.tsx

@@ -0,0 +1,95 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, createEffect, createSignal, onCleanup, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../dialog/dialog'
+
+/**
+ * ModalDialog.
+ *
+ * A dialog that owns three things `Dialog` leaves to its caller, each of which is a
+ * real defect when it is missed:
+ *
+ *   1. **It unmounts while closed.** An always-mounted dialog that closes as a side
+ *      effect of an async action can leave Kobalte's `aria-hidden` bookkeeping behind,
+ *      which hides the rest of the application from assistive technology. Unmounting
+ *      the whole owner makes cleanup the only way the layer can end.
+ *   2. **It marks the background `inert`.** `inert` keeps the background out of the
+ *      tab order and the accessibility tree without depending on that bookkeeping, and
+ *      it restores exactly the elements that did not already have it — so a nested
+ *      dialog does not un-inert its parent.
+ *   3. **It labels itself explicitly.** The title registers its id for
+ *      `aria-labelledby` in a mount effect; if that registration is ever lost, the
+ *      dialog renders with a heading and no name. Passing the label as well costs
+ *      nothing and removes the race.
+ *
+ * Use `Dialog` directly when you need its composition; use this when you want a
+ * dialog that is correct by default.
+ */
+export type ModalDialogProps = Omit<ComponentProps<typeof DialogContent>, 'children'> & {
+  open: boolean
+  onClose: () => void
+  title: string
+  description?: string
+  /** A mark or icon drawn before the title. */
+  headerLeading?: JSX.Element
+  children?: JSX.Element
+}
+
+export function ModalDialog(props: ModalDialogProps) {
+  const [local, rest] = splitProps(props, [
+    'open',
+    'onClose',
+    'title',
+    'description',
+    'headerLeading',
+    'class',
+    'children',
+  ])
+
+  const [content, setContent] = createSignal<HTMLElement>()
+
+  createEffect(() => {
+    if (!local.open) return
+    const element = content()
+    if (!element) return
+
+    const background = [...document.body.children].filter(
+      (child): child is HTMLElement => child instanceof HTMLElement && !child.contains(element)
+    )
+    const wasInert = background.map((node) => node.hasAttribute('inert'))
+    for (const node of background) node.setAttribute('inert', '')
+
+    onCleanup(() => {
+      background.forEach((node, index) => {
+        // Only the elements that were not already inert are restored, so a nested
+        // dialog closing does not undo its parent's containment.
+        if (!wasInert[index]) node.removeAttribute('inert')
+      })
+    })
+  })
+
+  return (
+    <Show when={local.open}>
+      <Dialog open onOpenChange={(next) => !next && local.onClose()}>
+        <DialogContent ref={setContent} class={cn('gap-4', local.class)} {...rest}>
+          <DialogHeader>
+            <DialogTitle class="flex items-center gap-2">
+              <Show when={local.headerLeading}>{local.headerLeading}</Show>
+              {local.title}
+            </DialogTitle>
+            <Show when={local.description}>
+              <DialogDescription>{local.description}</DialogDescription>
+            </Show>
+          </DialogHeader>
+          {local.children}
+        </DialogContent>
+      </Dialog>
+    </Show>
+  )
+}

package/src/components/ui/navigation-menu/index.ts

@@ -0,0 +1,13 @@
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuGroup,
+  NavigationMenuGroupLabel,
+  NavigationMenuItem,
+  NavigationMenuMenu,
+  NavigationMenuSeparator,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  type NavigationMenuItemProps,
+  type NavigationMenuProps,
+} from './navigation-menu'

package/src/components/ui/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,229 @@
+import { splitProps, type ComponentProps, type JSX } from 'solid-js'
+import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'
+import { ChevronDown } from 'lucide-solid'
+import { cn } from '#lib/utils'
+import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '#lib/overlay'
+
+/**
+ * NavigationMenu.
+ *
+ * A site-style menu bar: top-level triggers that open panels of links. It is the
+ * header pattern — a documentation site, a marketing page, an application with
+ * several top-level destinations — and it is deliberately *not* a `Menubar`.
+ * `Menubar` is a row of application menus (File, Edit, View) whose items are
+ * commands; this is a row of destinations whose panels are links. The two have
+ * different roles, different keyboard models, and different semantics.
+ *
+ * ## Composition
+ *
+ * Kobalte's primitive has an unusual shape, and getting it wrong is why this took
+ * three attempts to port. The structure is:
+ *
+ * ```tsx
+ * <NavigationMenu>
+ *   <NavigationMenuMenu>
+ *     <NavigationMenuTrigger>Destinations</NavigationMenuTrigger>
+ *     <NavigationMenuContent>
+ *       <NavigationMenuItem href="/x">X</NavigationMenuItem>
+ *     </NavigationMenuContent>
+ *   </NavigationMenuMenu>
+ *   <NavigationMenuViewport />
+ * </NavigationMenu>
+ * ```
+ *
+ * Three facts that are not obvious from the prop types:
+ *
+ * - `Menu` renders **nothing**. It is a context provider — one per top-level
+ *   entry, naming it so the bar's arrow keys can move between entries. A menu
+ *   without one cannot be reached by keyboard.
+ * - `Trigger` renders `<li role="presentation"><button>`. It is already the list
+ *   item, so wrapping it in your own `<li>` produces a `<ul>` inside a `<ul>`.
+ * - `Content` must be a direct child of `Menu`, and the `Viewport` is a **sibling
+ *   of the menus** — not inside them. All the panels share one viewport, which is
+ *   what lets the bar animate between them instead of each panel popping in place.
+ *
+ * The wrapper enforces the last of those by rendering the `Viewport` itself, so a
+ * caller cannot forget it and get a menu whose panels never appear.
+ */
+
+export type NavigationMenuProps = ComponentProps<typeof KobalteNavigationMenu.Root> & {
+  /** The accessible name for the navigation landmark. */
+  label?: string
+}
+
+export function NavigationMenu(props: NavigationMenuProps) {
+  const [local, rest] = splitProps(props, ['label', 'class', 'children'])
+
+  return (
+    <KobalteNavigationMenu.Root
+      class={cn(
+        'relative flex max-w-max flex-1 items-center justify-center',
+        '[&>nav>ul]:flex [&>nav>ul]:items-center [&>nav>ul]:gap-1',
+        local.class
+      )}
+      aria-label={local.label ?? 'Main'}
+      {...rest}
+    >
+      {local.children}
+      {/*
+        The shared panel surface. Rendered here rather than left to the caller:
+        every panel animates through this one element, and a menu bar without it
+        opens panels that never paint.
+      */}
+      <NavigationMenuViewport />
+    </KobalteNavigationMenu.Root>
+  )
+}
+
+/**
+ * One top-level entry. Renders nothing itself — see the note above — and exists
+ * so a caller cannot build a bar whose entries the keyboard cannot reach.
+ */
+export function NavigationMenuMenu(props: ComponentProps<typeof KobalteNavigationMenu.Menu>) {
+  return <KobalteNavigationMenu.Menu {...props} />
+}
+
+export function NavigationMenuTrigger(props: ComponentProps<typeof KobalteNavigationMenu.Trigger>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteNavigationMenu.Trigger
+      class={cn(
+        'inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-muted-foreground',
+        'transition-colors ease-out outline-none select-none',
+        'hover:bg-muted hover:text-foreground',
+        'data-[expanded]:bg-muted data-[expanded]:text-foreground',
+        'data-[highlighted]:bg-muted data-[highlighted]:text-foreground',
+        'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <ChevronDown
+        aria-hidden="true"
+        class="size-3.5 transition-transform duration-200 ease-out [[data-expanded]_&]:rotate-180"
+      />
+    </KobalteNavigationMenu.Trigger>
+  )
+}
+
+export function NavigationMenuContent(props: ComponentProps<typeof KobalteNavigationMenu.Content>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobalteNavigationMenu.Content
+      class={cn(
+        'grid w-max gap-1 p-2',
+        // A two-column panel is the shape most menu bars want, and it is opt-in
+        // through this hook rather than a prop because the column count is a
+        // layout decision the caller's content makes.
+        'data-[wide]:grid-cols-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </KobalteNavigationMenu.Content>
+  )
+}
+
+/**
+ * The shared panel surface. One per menu bar, and the wrapper supplies it — but
+ * exported so a caller with an unusual layout can place it themselves.
+ */
+export function NavigationMenuViewport(
+  props: ComponentProps<typeof KobalteNavigationMenu.Viewport>
+) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteNavigationMenu.Viewport
+      class={cn(
+        'absolute top-full left-0 isolate z-(--z-menu) mt-1.5 flex justify-center overflow-hidden',
+        'h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width)',
+        'origin-top transition-[width,height] duration-200 ease-out',
+        local.class
+      )}
+      {...rest}
+    >
+      <div
+        class={cn(
+          overlaySurface,
+          overlayMotion,
+          'w-full rounded-lg border border-border bg-popover p-1 shadow-lg'
+        )}
+      >
+        <KobalteNavigationMenu.Content />
+      </div>
+    </KobalteNavigationMenu.Viewport>
+  )
+}
+
+/**
+ * A link inside a panel. `href` is the point of the component, so it is a link
+ * rather than a button — and the accessible name comes from its text, which is
+ * why there is no `aria-label` here.
+ */
+export type NavigationMenuItemProps = ComponentProps<typeof KobalteNavigationMenu.Item> & {
+  /** A one-line description, shown under the label. */
+  description?: string
+  /** A leading icon. */
+  icon?: JSX.Element
+}
+
+export function NavigationMenuItem(props: NavigationMenuItemProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'description', 'icon'])
+
+  return (
+    <KobalteNavigationMenu.Item
+      class={cn(
+        menuItem,
+        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',
+        local.description && 'grid-rows-[auto_auto] py-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.icon}
+      <span class="font-medium">{local.children}</span>
+      {local.description && (
+        <span class="col-start-2 text-xs text-muted-foreground">{local.description}</span>
+      )}
+    </KobalteNavigationMenu.Item>
+  )
+}
+
+export function NavigationMenuSeparator(
+  props: ComponentProps<typeof KobalteNavigationMenu.Separator>
+) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteNavigationMenu.Separator
+      class={cn('-mx-1 my-1 h-px bg-border', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/** A non-interactive caption above a group of items. */
+export function NavigationMenuGroupLabel(
+  props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>
+) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteNavigationMenu.GroupLabel
+      class={cn(
+        menuContentPadding,
+        'text-2xs font-semibold text-muted-foreground uppercase',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteNavigationMenu.Group class={cn('grid gap-0.5', local.class)} {...rest} />
+}

package/src/components/ui/pagination/index.ts

@@ -0,0 +1,8 @@
+export {
+  Pagination,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+  type PaginationProps,
+} from './pagination'

package/src/components/ui/pagination/pagination.tsx

@@ -0,0 +1,144 @@
+import {
+  Pagination as KobaltePagination,
+  type PaginationRootOptions,
+} from '@kobalte/core/pagination'
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Pagination.
+ *
+ * Page navigation for a list the server pages, not for a list the client already
+ * holds — slicing an array you have is a filter, and it should not spend a round
+ * trip.
+ *
+ * Kobalte computes the visible page window and the ellipsis positions and emits
+ * `aria-current="page"`, so the control announces which page is active instead of
+ * leaving it to colour alone.
+ *
+ * The item and ellipsis renderers are *supplied here*, not required of the caller.
+ * Kobalte's root makes them mandatory because it has no opinion about how a page
+ * number should look; a design system does, so the only thing a caller has to pass
+ * is `count` — while still being able to override either renderer when a view
+ * needs to.
+ */
+export type PaginationProps = Omit<PaginationRootOptions, 'itemComponent' | 'ellipsisComponent'> & {
+  itemComponent?: PaginationRootOptions['itemComponent']
+  ellipsisComponent?: PaginationRootOptions['ellipsisComponent']
+  class?: string
+  children?: JSX.Element
+}
+
+const paginationControl = cn(
+  'inline-flex h-control-md min-w-(--control-height-md) items-center justify-center gap-1 rounded-md border border-transparent px-2 text-sm tabular-nums',
+  'transition-colors ease-out outline-none select-none',
+  'hover:bg-surface-hover',
+  'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+  'disabled:pointer-events-none disabled:opacity-50',
+  '[&_svg]:pointer-events-none [&_svg]:size-4'
+)
+
+export function Pagination(props: PaginationProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'itemComponent',
+    'ellipsisComponent',
+    'children',
+  ])
+
+  return (
+    <KobaltePagination
+      itemComponent={
+        local.itemComponent ??
+        ((itemProps) => <PaginationItem page={itemProps.page}>{itemProps.page}</PaginationItem>)
+      }
+      ellipsisComponent={local.ellipsisComponent ?? (() => <PaginationEllipsis />)}
+      class={cn('flex w-full items-center justify-center gap-1', local.class)}
+      {...rest}
+    >
+      <Show when={local.children} fallback={<DefaultPaginationControls />}>
+        {local.children}
+      </Show>
+    </KobaltePagination>
+  )
+}
+
+/** Previous, the numbered run, next: the arrangement every list view wants. */
+function DefaultPaginationControls() {
+  return (
+    <>
+      <PaginationPrevious />
+      <KobaltePagination.Items />
+      <PaginationNext />
+    </>
+  )
+}
+
+export function PaginationPrevious(props: ComponentProps<typeof KobaltePagination.Previous>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobaltePagination.Previous class={cn(paginationControl, 'ps-1.5', local.class)} {...rest}>
+      {local.children ?? (
+        <>
+          <ChevronLeft class="size-4" />
+          <span class="hidden sm:inline">Previous</span>
+        </>
+      )}
+    </KobaltePagination.Previous>
+  )
+}
+
+export function PaginationNext(props: ComponentProps<typeof KobaltePagination.Next>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobaltePagination.Next class={cn(paginationControl, 'pe-1.5', local.class)} {...rest}>
+      {local.children ?? (
+        <>
+          <span class="hidden sm:inline">Next</span>
+          <ChevronRight class="size-4" />
+        </>
+      )}
+    </KobaltePagination.Next>
+  )
+}
+
+export function PaginationItem(props: ComponentProps<typeof KobaltePagination.Item>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobaltePagination.Item
+      class={cn(
+        paginationControl,
+        'data-[current]:border-border data-[current]:bg-surface-active data-[current]:font-medium',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </KobaltePagination.Item>
+  )
+}
+
+export function PaginationEllipsis(
+  props: ComponentProps<typeof KobaltePagination.Ellipsis> & { children?: JSX.Element }
+) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <KobaltePagination.Ellipsis
+      class={cn('flex size-control-md items-center justify-center', local.class)}
+      {...rest}
+    >
+      {local.children ?? (
+        <>
+          <MoreHorizontal class="size-4" />
+          <span class="visually-hidden">More pages</span>
+        </>
+      )}
+    </KobaltePagination.Ellipsis>
+  )
+}

package/src/components/ui/popover/index.ts

@@ -0,0 +1,10 @@
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverDescription,
+  PopoverTitle,
+  PopoverTrigger,
+  type PopoverContentProps,
+} from './popover'