aeon-ui-engine 1.0.0

package/packages/svelte/src/Switch.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { setContext } from 'svelte'
+  import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+  import { toggleMachine } from '@aeon-ui/primitives'
+  import { useAeonMachine } from './hooks/use-aeon-machine.js'
+  import { SWITCH_CTX, type SwitchContext } from './switch-context.js'
+
+  let {
+    checked = undefined,
+    defaultChecked = false,
+    disabled = false,
+    onCheckedChange = undefined,
+    class: className = '',
+    children,
+  }: {
+    checked?: boolean
+    defaultChecked?: boolean
+    disabled?: boolean
+    onCheckedChange?: (checked: boolean) => void
+    class?: string
+    children?: import('svelte').Snippet
+  } = $props()
+
+  const { send, subscribe, getSnapshot } = useAeonMachine(toggleMachine, {
+    input: { checked: defaultChecked, disabled },
+  })
+
+  let snap = $state(getSnapshot())
+  $effect(() => subscribe((s) => (snap = s)))
+
+  const controlled = $derived(checked !== undefined)
+  const resolvedChecked = $derived(checked ?? snap.context.checked)
+  const pressState = $derived(snap.matches({ interaction: 'pressed' }) ? 'pressed' : 'idle')
+
+  $effect(() => {
+    if (checked !== undefined) send({ type: 'SET_CHECKED', checked })
+  })
+
+  $effect(() => {
+    if (!controlled) onCheckedChange?.(resolvedChecked)
+  })
+
+  function toggle() {
+    if (disabled) return
+    const next = !resolvedChecked
+    if (controlled) onCheckedChange?.(next)
+    else send({ type: 'TOGGLE' })
+  }
+
+  setContext<SwitchContext>(SWITCH_CTX, {
+    get checked() {
+      return resolvedChecked
+    },
+    get disabled() {
+      return disabled
+    },
+    get controlled() {
+      return controlled
+    },
+    onCheckedChange,
+    send,
+    get pressState() {
+      return pressState
+    },
+  })
+
+  const rootAttrs = $derived(
+    partAttrs(switchAnatomy.scope, switchAnatomy.root, {
+      state: `${resolvedChecked ? 'checked' : 'unchecked'} ${pressState}`,
+      disabled,
+    }),
+  )
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<label
+  {...rootAttrs}
+  class={className}
+  onclick={(e) => {
+    const target = e.target as HTMLElement
+    if (target.closest(`[data-aeon-part="${switchAnatomy.control}"]`)) return
+    toggle()
+  }}
+>
+  {@render children?.()}
+</label>

package/packages/svelte/src/SwitchControl.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+  import { SWITCH_CTX, type SwitchContext } from './switch-context.js'
+
+  let { ...rest }: Record<string, unknown> = $props()
+  const ctx = getContext<SwitchContext>(SWITCH_CTX)
+
+  function toggle() {
+    if (ctx.disabled) return
+    const next = !ctx.checked
+    if (ctx.controlled) ctx.onCheckedChange?.(next)
+    else ctx.send({ type: 'TOGGLE' })
+  }
+
+  const attrs = $derived(
+    partAttrs(switchAnatomy.scope, switchAnatomy.control, {
+      state: `${ctx.checked ? 'checked' : 'unchecked'} ${ctx.pressState}`,
+      disabled: ctx.disabled,
+    }),
+  )
+</script>
+
+<span
+  {...attrs}
+  {...rest}
+  role="switch"
+  aria-checked={ctx.checked}
+  tabindex={ctx.disabled ? -1 : 0}
+  onclick={(e) => {
+    toggle()
+    e.stopPropagation()
+  }}
+  onpointerdown={() => {
+    if (!ctx.disabled) ctx.send({ type: 'POINTER_DOWN' })
+  }}
+  onpointerup={() => ctx.send({ type: 'POINTER_UP' })}
+  onpointerleave={() => ctx.send({ type: 'POINTER_LEAVE' })}
+  onkeydown={(e) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault()
+      toggle()
+    }
+  }}
+></span>

package/packages/svelte/src/SwitchHiddenInput.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+  import { SWITCH_CTX, type SwitchContext } from './switch-context.js'
+
+  let { ...rest }: Record<string, unknown> = $props()
+  const ctx = getContext<SwitchContext>(SWITCH_CTX)
+
+  const attrs = partAttrs(switchAnatomy.scope, switchAnatomy.hiddenInput)
+</script>
+
+<input type="checkbox" checked={ctx.checked} readonly tabindex={-1} aria-hidden {...attrs} {...rest} />

package/packages/svelte/src/SwitchLabel.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+
+  let { children, ...rest }: { children?: import('svelte').Snippet } & Record<string, unknown> = $props()
+
+  const attrs = partAttrs(switchAnatomy.scope, switchAnatomy.label)
+</script>
+
+<span {...attrs} {...rest}>{@render children?.()}</span>

package/packages/svelte/src/SwitchThumb.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { getContext } from 'svelte'
+  import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+  import { SWITCH_CTX, type SwitchContext } from './switch-context.js'
+
+  let { ...rest }: Record<string, unknown> = $props()
+  const ctx = getContext<SwitchContext>(SWITCH_CTX)
+
+  const attrs = $derived(
+    partAttrs(switchAnatomy.scope, switchAnatomy.thumb, {
+      state: `${ctx.checked ? 'checked' : 'unchecked'} ${ctx.pressState}`,
+    }),
+  )
+</script>
+
+<span {...attrs} {...rest}></span>

package/packages/svelte/src/hooks/use-aeon-machine.ts

@@ -0,0 +1,23 @@
+import { createActor, type AnyStateMachine, type Actor, type Subscription } from 'xstate'
+
+export interface AeonMachineHandle<M extends AnyStateMachine> {
+  actor: Actor<M>
+  send: Actor<M>['send']
+  getSnapshot: () => ReturnType<Actor<M>['getSnapshot']>
+  subscribe: (listener: (snapshot: ReturnType<Actor<M>['getSnapshot']>) => void) => Subscription
+}
+
+/** XState actor wired for Svelte 5 runes ($effect + $state). */
+export function useAeonMachine<M extends AnyStateMachine>(
+  machine: M,
+  options?: Parameters<typeof createActor<M>>[1],
+): AeonMachineHandle<M> {
+  const actor = createActor(machine, options)
+  actor.start()
+  return {
+    actor,
+    send: actor.send.bind(actor),
+    getSnapshot: () => actor.getSnapshot(),
+    subscribe: (listener) => actor.subscribe(listener),
+  }
+}

package/packages/svelte/src/index.ts

@@ -0,0 +1,2 @@
+export { useAeonMachine } from './hooks/use-aeon-machine.js'
+export type { AeonMachineHandle } from './hooks/use-aeon-machine.js'

package/packages/svelte/src/switch-context.ts

@@ -0,0 +1,13 @@
+import type { toggleMachine } from '@aeon-ui/primitives'
+import type { useAeonMachine } from './hooks/use-aeon-machine.js'
+
+export type SwitchContext = {
+  checked: boolean
+  disabled: boolean
+  controlled: boolean
+  onCheckedChange?: (checked: boolean) => void
+  send: ReturnType<typeof useAeonMachine<typeof toggleMachine>>['send']
+  pressState: string
+}
+
+export const SWITCH_CTX = Symbol('aeon-switch')

package/packages/svelte/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/packages/ui/README.md

@@ -0,0 +1,63 @@
+# @aeon-ui/ui
+
+**Styled compound components** — `@aeon-ui/react` + Panda `aeon*` recipes.
+
+Fastest path for apps that want the Aeon look and state-driven styling.
+
+## Install
+
+```bash
+pnpm add @aeon-ui/ui @aeon-ui/react
+```
+
+Import CSS once (see [INTEGRATION.md](../../INTEGRATION.md)):
+
+```tsx
+import '@aeon-ui/panda/styles.css'
+import '@aeon-ui/panda/theme-runtime.css'
+```
+
+## Usage
+
+```tsx
+import { Dialog, Button, Async, Field } from '@aeon-ui/ui'
+
+<Async.Root>
+  <Async.Track />
+  <Async.Readout>Ready</Async.Readout>
+  <Async.Actions>
+    <Button.Root size="sm">Fetch</Button.Root>
+  </Async.Actions>
+</Async.Root>
+```
+
+## Exports
+
+`Button`, `Switch`, `Checkbox`, `Dialog`, `Tabs`, `Accordion`, `Badge`, `Scroll`, `Select`, `Combobox`, `Menu`, `Popover`, `Tooltip`, `Toast`, `useToast`, `Async`, `Field`, `cn`.
+
+## Implementation pattern
+
+Each file in `src/<component>.tsx`:
+
+1. Import headless from `@aeon-ui/react`
+2. Import `aeon*` recipe from `@aeon-ui/panda/styled-system/recipes`
+3. `className={cn(recipe({ variant, size }), className)}`
+4. Forward `status`, `variant`, `size` to headless
+
+Example: `src/button.tsx`.
+
+## Customize
+
+- **Tokens/themes:** `packages/panda/src/theme/themes.config.ts` + codegen
+- **Recipes:** edit panda recipes, codegen, rebuild ui
+- **Replace styles entirely:** use `@aeon-ui/react` + your CSS on `data-aeon-*`
+
+## Agents
+
+Do not add non-Panda styling inside this package.  
+Workflow: [docs/COMPONENT_CHECKLIST.md](../../docs/COMPONENT_CHECKLIST.md).
+
+## Related
+
+- [COMPONENTS.md](../../COMPONENTS.md)
+- [STATES.md](../../STATES.md)

package/packages/ui/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@aeon-ui/ui",
+  "version": "0.1.0",
+  "description": "Styled Aeon UI components (Panda CSS recipes)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GenericCPU/aeon-ui.git",
+    "directory": "packages/ui"
+  },
+  "publishConfig": { "access": "public" },
+  "files": ["dist", "src/styles.css", "README.md"],
+  "keywords": ["aeon-ui", "react", "components", "design-system"],
+  "type": "module",
+  "sideEffects": ["**/*.css"],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": {
+      "default": "./src/styles.css"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react --external react-dom --external @aeon-ui/panda/styled-system/css --external @aeon-ui/panda/styled-system/recipes",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aeon-ui/panda": "workspace:*",
+    "@aeon-ui/react": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3"
+  }
+}

package/packages/ui/src/accordion.tsx

@@ -0,0 +1,27 @@
+import { Accordion as Headless } from '@aeon-ui/react'
+import { css } from '@aeon-ui/panda/styled-system/css'
+import { aeonAccordion } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const accordion = aeonAccordion()
+const triggerLabel = css({ flex: '1', minW: '0', pr: 'gapSm' })
+
+export const Accordion = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(accordion.root, className)} {...props} />
+  ),
+  Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => (
+    <Headless.Item className={cn(accordion.item, className)} {...props} />
+  ),
+  ItemTrigger: ({ className, children, ...props }: ComponentProps<typeof Headless.ItemTrigger>) => (
+    <Headless.ItemTrigger className={cn(accordion.itemTrigger, className)} {...props}>
+      <span className={triggerLabel}>{children}</span>
+      <Headless.ItemIndicator className={accordion.itemIndicator}>▾</Headless.ItemIndicator>
+    </Headless.ItemTrigger>
+  ),
+  ItemContent: ({ className, ...props }: ComponentProps<typeof Headless.ItemContent>) => (
+    <Headless.ItemContent className={cn(accordion.itemContent, className)} {...props} />
+  ),
+  ItemIndicator: Headless.ItemIndicator,
+}

package/packages/ui/src/async.tsx

@@ -0,0 +1,43 @@
+import { Async as Headless, useAsyncContext } from '@aeon-ui/react'
+import { aeonAsync } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const styles = () => aeonAsync()
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type TrackProps = ComponentProps<typeof Headless.Track>
+type ReadoutProps = ComponentProps<typeof Headless.Readout>
+type ActionsProps = ComponentProps<typeof Headless.Actions>
+
+export const Async = {
+  Root: ({ className, ...props }: RootProps) => {
+    const s = styles()
+    return <Headless.Root className={cn(s.root, 'machine-console', className)} {...props} />
+  },
+  Track: ({ className, ...props }: TrackProps) => {
+    const s = styles()
+    return <Headless.Track className={cn(s.track, 'state-track', className)} {...props} />
+  },
+  Readout: ({ className, children, ...props }: ReadoutProps) => {
+    const s = styles()
+    const { status } = useAsyncContext()
+    const tone = ['idle', 'loading', 'success', 'failure', 'empty'].includes(status)
+      ? status
+      : 'idle'
+    return (
+      <Headless.Readout
+        className={cn(s.readout, 'live-status', `live-status--${tone}`, className)}
+        {...props}
+      >
+        {children}
+      </Headless.Readout>
+    )
+  },
+  Actions: ({ className, ...props }: ActionsProps) => {
+    const s = styles()
+    return <Headless.Actions className={cn(s.actions, className)} {...props} />
+  },
+  Provider: Headless.Provider,
+  useContext: useAsyncContext,
+}

package/packages/ui/src/badge.tsx

@@ -0,0 +1,18 @@
+import { aeonBadge } from '@aeon-ui/panda/styled-system/recipes'
+import type { HTMLAttributes } from 'react'
+import { cn } from './cn.js'
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'accent' | 'danger'
+}
+
+export function Badge({ className, variant = 'default', ...props }: BadgeProps) {
+  return (
+    <span
+      data-aeon-scope="badge"
+      data-aeon-part="root"
+      className={cn(aeonBadge({ variant }), className)}
+      {...props}
+    />
+  )
+}

package/packages/ui/src/button.tsx

@@ -0,0 +1,38 @@
+import { Button as Headless } from '@aeon-ui/react'
+import { aeonButton, aeonButtonGroup } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type ButtonProps = ComponentProps<typeof Headless.Root> & {
+  status?: ComponentProps<typeof Headless.Root>['status']
+}
+type ButtonGroupProps = ComponentProps<typeof Headless.Group> & {
+  orientation?: 'horizontal' | 'vertical'
+  gap?: 'sm' | 'md' | 'lg'
+}
+
+export const Button = {
+  Root: ({ className, variant = 'solid', size = 'md', status = 'idle', ...props }: ButtonProps) => (
+    <Headless.Root
+      className={cn(aeonButton({ variant, size }), className)}
+      data-aeon-size={size}
+      variant={variant}
+      size={size}
+      status={status}
+      {...props}
+    />
+  ),
+  Group: ({
+    className,
+    orientation = 'horizontal',
+    gap = 'sm',
+    ...props
+  }: ButtonGroupProps) => (
+    <Headless.Group
+      className={cn(aeonButtonGroup({ orientation, gap }), className)}
+      {...props}
+    />
+  ),
+  Label: Headless.Label,
+  Icon: Headless.Icon,
+}

package/packages/ui/src/checkbox.tsx

@@ -0,0 +1,24 @@
+import { Checkbox as Headless } from '@aeon-ui/react'
+import { aeonCheckbox } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const checkbox = aeonCheckbox()
+
+export const Checkbox = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(checkbox.root, className)} {...props} />
+  ),
+  Control: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => (
+    <Headless.Control className={cn(checkbox.control, className)} {...props} />
+  ),
+  Indicator: ({ className, children, ...props }: ComponentProps<typeof Headless.Indicator>) => (
+    <Headless.Indicator className={cn(checkbox.indicator, className)} {...props}>
+      {children ?? '✓'}
+    </Headless.Indicator>
+  ),
+  Label: ({ className, ...props }: ComponentProps<typeof Headless.Label>) => (
+    <Headless.Label className={cn(checkbox.label, className)} {...props} />
+  ),
+  HiddenInput: Headless.HiddenInput,
+}

package/packages/ui/src/cn.ts

@@ -0,0 +1 @@
+export { cx as cn } from '@aeon-ui/panda/styled-system/css'

package/packages/ui/src/combobox.tsx

@@ -0,0 +1,29 @@
+import { Combobox as Headless } from '@aeon-ui/react'
+import { aeonCombobox } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const styles = () => aeonCombobox()
+
+export const Combobox = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => {
+    const s = styles()
+    return <Headless.Root className={cn(s.root, className)} {...props} />
+  },
+  Input: ({ className, ...props }: ComponentProps<typeof Headless.Input>) => {
+    const s = styles()
+    return <Headless.Input className={cn(s.input, className)} {...props} />
+  },
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => {
+    const s = styles()
+    return <Headless.Content className={cn(s.content, className)} {...props} />
+  },
+  Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => {
+    const s = styles()
+    return <Headless.Item className={cn(s.item, className)} {...props} />
+  },
+  Empty: ({ className, ...props }: ComponentProps<typeof Headless.Empty>) => {
+    const s = styles()
+    return <Headless.Empty className={cn(s.empty, className)} {...props} />
+  },
+}

package/packages/ui/src/dialog.tsx

@@ -0,0 +1,32 @@
+import { Dialog as Headless } from '@aeon-ui/react'
+import { aeonDialog } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const dialog = aeonDialog()
+
+export const Dialog = {
+  Root: Headless.Root,
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => (
+    <Headless.Trigger className={cn(dialog.trigger, className)} {...props} />
+  ),
+  Portal: Headless.Portal,
+  Backdrop: ({ className, ...props }: ComponentProps<typeof Headless.Backdrop>) => (
+    <Headless.Backdrop className={cn(dialog.backdrop, className)} {...props} />
+  ),
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => (
+    <Headless.Positioner className={cn(dialog.positioner, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => (
+    <Headless.Content className={cn(dialog.content, className)} {...props} />
+  ),
+  Title: ({ className, ...props }: ComponentProps<typeof Headless.Title>) => (
+    <Headless.Title className={cn(dialog.title, className)} {...props} />
+  ),
+  Description: ({ className, ...props }: ComponentProps<typeof Headless.Description>) => (
+    <Headless.Description className={cn(dialog.description, className)} {...props} />
+  ),
+  CloseTrigger: ({ className, ...props }: ComponentProps<typeof Headless.CloseTrigger>) => (
+    <Headless.CloseTrigger className={cn(dialog.closeTrigger, className)} {...props} />
+  ),
+}

package/packages/ui/src/field.tsx

@@ -0,0 +1,33 @@
+import { Field as Headless } from '@aeon-ui/react'
+import { aeonField } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const styles = () => aeonField()
+
+export const Field = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => {
+    const s = styles()
+    return <Headless.Root className={cn(s.root, className)} {...props} />
+  },
+  Label: ({ className, ...props }: ComponentProps<typeof Headless.Label>) => {
+    const s = styles()
+    return <Headless.Label className={cn(s.label, className)} {...props} />
+  },
+  Control: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => {
+    const s = styles()
+    return <Headless.Control className={cn(s.control, className)} {...props} />
+  },
+  Textarea: ({ className, ...props }: ComponentProps<typeof Headless.Textarea>) => {
+    const s = styles()
+    return <Headless.Textarea className={cn(s.textarea, className)} {...props} />
+  },
+  Message: ({ className, ...props }: ComponentProps<typeof Headless.Message>) => {
+    const s = styles()
+    return <Headless.Message className={cn(s.message, className)} {...props} />
+  },
+  Hint: ({ className, ...props }: ComponentProps<typeof Headless.Hint>) => {
+    const s = styles()
+    return <Headless.Hint className={cn(s.hint, className)} {...props} />
+  },
+}

package/packages/ui/src/index.ts

@@ -0,0 +1,17 @@
+export { Button } from './button.js'
+export { Async } from './async.js'
+export { Field } from './field.js'
+export { Switch } from './switch.js'
+export { Checkbox } from './checkbox.js'
+export { Dialog } from './dialog.js'
+export { Tabs } from './tabs.js'
+export { Accordion } from './accordion.js'
+export { Badge } from './badge.js'
+export { Scroll } from './scroll.js'
+export { Select } from './select.js'
+export { Combobox } from './combobox.js'
+export { Menu } from './menu.js'
+export { Popover } from './popover.js'
+export { Tooltip } from './tooltip.js'
+export { Toast, useToast } from './toast.js'
+export { cn } from './cn.js'

package/packages/ui/src/menu.tsx

@@ -0,0 +1,25 @@
+import { Menu as Headless } from '@aeon-ui/react'
+import { aeonMenu } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const menu = aeonMenu()
+
+export const Menu = {
+  Root: Headless.Root,
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => (
+    <Headless.Trigger className={cn(menu.trigger, className)} {...props} />
+  ),
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => (
+    <Headless.Positioner className={cn(menu.positioner, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => (
+    <Headless.Content className={cn(menu.content, className)} {...props} />
+  ),
+  Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => (
+    <Headless.Item className={cn(menu.item, className)} {...props} />
+  ),
+  Separator: ({ className, ...props }: ComponentProps<typeof Headless.Separator>) => (
+    <Headless.Separator className={cn(menu.separator, className)} {...props} />
+  ),
+}

package/packages/ui/src/popover.tsx

@@ -0,0 +1,22 @@
+import { Popover as Headless } from '@aeon-ui/react'
+import { aeonPopover } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const popover = aeonPopover()
+
+export const Popover = {
+  Root: Headless.Root,
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => (
+    <Headless.Trigger className={cn(popover.trigger, className)} {...props} />
+  ),
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => (
+    <Headless.Positioner className={cn(popover.positioner, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => (
+    <Headless.Content className={cn(popover.content, className)} {...props} />
+  ),
+  CloseTrigger: ({ className, ...props }: ComponentProps<typeof Headless.CloseTrigger>) => (
+    <Headless.CloseTrigger className={cn(popover.closeTrigger, className)} {...props} />
+  ),
+}