aeon-ui-engine 1.0.3 → 1.1.0

package/packages/ui/src/app-shell.tsx

@@ -0,0 +1,44 @@
+import { AppShell as Headless } from '@aeon-ui/react'
+import { aeonAppShell } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type ContentAlign = 'start' | 'center'
+type RootProps = ComponentProps<typeof Headless.Root>
+type PartProps = ComponentProps<typeof Headless.Content>
+type ContentProps = PartProps & { contentAlign?: ContentAlign }
+
+export const AppShell = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Header: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Header className={cn(styles.header, className)} {...props} />
+  },
+  Subheader: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Subheader className={cn(styles.subheader, className)} {...props} />
+  },
+  Content: ({ className, contentAlign = 'start', ...props }: ContentProps) => {
+    const styles = aeonAppShell({ contentAlign })
+    return <Headless.Content className={cn(styles.content, className)} {...props} />
+  },
+  Aside: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Aside className={cn(styles.aside, className)} {...props} />
+  },
+  Footer: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Footer className={cn(styles.footer, className)} {...props} />
+  },
+  Dock: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Dock className={cn(styles.dock, className)} {...props} />
+  },
+  Scrim: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Scrim className={cn(styles.scrim, className)} {...props} />
+  },
+}

package/packages/ui/src/async.tsx

@@ -13,8 +13,9 @@ 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} />
+    return <Headless.Root className={cn(s.root, className)} {...props} />
   },
+  /** Totality / diagram rail — prefer Content faces in product Instant UIs. */
   Track: ({ className, ...props }: TrackProps) => {
     const s = styles()
     return <Headless.Track className={cn(s.track, 'state-track', className)} {...props} />

package/packages/ui/src/avatar.tsx

@@ -0,0 +1,35 @@
+import { Avatar as Headless } from '@aeon-ui/react'
+import { aeonAvatar } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: AvatarSize
+}
+
+export const Avatar = {
+  Root: ({ className, size = 'md', ...props }: RootProps) => {
+    const styles = aeonAvatar({ size })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        data-aeon-size={size}
+        {...props}
+      />
+    )
+  },
+  Image: ({ className, ...props }: ComponentProps<typeof Headless.Image>) => {
+    const styles = aeonAvatar()
+    return <Headless.Image className={cn(styles.image, className)} {...props} />
+  },
+  Fallback: ({ className, ...props }: ComponentProps<typeof Headless.Fallback>) => {
+    const styles = aeonAvatar()
+    return <Headless.Fallback className={cn(styles.fallback, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: ComponentProps<typeof Headless.Badge>) => {
+    const styles = aeonAvatar()
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}

package/packages/ui/src/bar.tsx

@@ -0,0 +1,34 @@
+import { Bar as Headless } from '@aeon-ui/react'
+import { aeonBar } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type BarSize = 'xs' | 'sm' | 'md' | 'lg'
+type BarCollapse = 'shrink' | 'wrap' | 'collapse-center'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: BarSize
+  sticky?: boolean
+  collapse?: BarCollapse
+}
+
+type ZoneProps = ComponentProps<typeof Headless.Leading>
+
+export const Bar = {
+  Root: ({ className, size, sticky, collapse, ...props }: RootProps) => {
+    const styles = aeonBar({ size, sticky, collapse })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Center: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Center className={cn(styles.center, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/composer.tsx

@@ -0,0 +1,27 @@
+import { Composer as Headless } from '@aeon-ui/react'
+import { aeonComposer } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type InputProps = ComponentProps<typeof Headless.Input>
+type PartProps = ComponentProps<typeof Headless.Actions>
+
+export const Composer = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonComposer()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Input: ({ className, ...props }: InputProps) => {
+    const styles = aeonComposer()
+    return <Headless.Input className={cn(styles.input, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: PartProps) => {
+    const styles = aeonComposer()
+    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  },
+  Send: ({ className, ...props }: PartProps) => {
+    const styles = aeonComposer()
+    return <Headless.Send className={cn(styles.send, className)} {...props} />
+  },
+}

package/packages/ui/src/content.tsx

@@ -0,0 +1,43 @@
+import { Content as Headless } from '@aeon-ui/react'
+import { aeonContent } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Align = 'start' | 'center'
+type RootProps = ComponentProps<typeof Headless.Root> & { align?: Align }
+type PartProps = ComponentProps<typeof Headless.Body>
+
+export const Content = {
+  Root: ({ className, align = 'start', ...props }: RootProps) => {
+    const styles = aeonContent({ align })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Toolbar: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Toolbar className={cn(styles.toolbar, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Pending: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Pending className={cn(styles.pending, className)} {...props} />
+  },
+  Empty: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Empty className={cn(styles.empty, className)} {...props} />
+  },
+  Error: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Error className={cn(styles.error, className)} {...props} />
+  },
+  Success: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Success className={cn(styles.success, className)} {...props} />
+  },
+  Sentinel: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Sentinel className={cn(styles.sentinel, className)} {...props} />
+  },
+}

package/packages/ui/src/conversation.tsx

@@ -0,0 +1,43 @@
+import { Conversation as Headless } from '@aeon-ui/react'
+import { aeonConversation } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type ItemProps = ComponentProps<typeof Headless.Item>
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Conversation = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonConversation()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Item: ({ className, ...props }: ItemProps) => {
+    const styles = aeonConversation()
+    return <Headless.Item className={cn(styles.item, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Preview: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Preview className={cn(styles.preview, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}

package/packages/ui/src/entry.tsx

@@ -0,0 +1,76 @@
+import { Entry as Headless } from '@aeon-ui/react'
+import { aeonEntry } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Density = 'compact' | 'cozy'
+type Layout = 'stack' | 'split'
+
+type ListProps = ComponentProps<typeof Headless.List> & {
+  density?: Density
+  layout?: Layout
+}
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  density?: Density
+  layout?: Layout
+}
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Entry = {
+  List: ({ className, density = 'compact', layout = 'stack', ...props }: ListProps) => {
+    const styles = aeonEntry({ density, layout })
+    return <Headless.List className={cn(styles.list, className)} {...props} />
+  },
+  Root: ({ className, density = 'compact', layout = 'stack', ...props }: RootProps) => {
+    const styles = aeonEntry({ density, layout })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Header: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Header className={cn(styles.header, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Heading: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Heading className={cn(styles.heading, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Subtitle: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Subtitle className={cn(styles.subtitle, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Media: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Media className={cn(styles.media, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Values: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Values className={cn(styles.values, className)} {...props} />
+  },
+  Value: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Value className={cn(styles.value, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  },
+  Footer: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Footer className={cn(styles.footer, className)} {...props} />
+  },
+}

package/packages/ui/src/field.tsx

@@ -18,6 +18,11 @@ export const Field = {
     const s = styles()
     return <Headless.Control className={cn(s.control, className)} {...props} />
   },
+  /** Alias for Control — preferred name in app forms. */
+  Input: ({ 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} />

package/packages/ui/src/identity.tsx

@@ -0,0 +1,35 @@
+import { Identity as Headless } from '@aeon-ui/react'
+import { aeonIdentity } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Size = 'sm' | 'md' | 'lg'
+type RootProps = ComponentProps<typeof Headless.Root> & { size?: Size }
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Identity = {
+  Root: ({ className, size = 'md', ...props }: RootProps) => {
+    const styles = aeonIdentity({ size })
+    return <Headless.Root className={cn(styles.root, className)} size={size} {...props} />
+  },
+  Avatar: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Avatar className={cn(styles.avatar, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Subtitle: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Subtitle className={cn(styles.subtitle, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/index.ts

@@ -1,4 +1,13 @@
 export { Button } from './button.js'
+export { Avatar } from './avatar.js'
+export { Identity } from './identity.js'
+export { MetricStrip } from './metric-strip.js'
+export { ListRow } from './list-row.js'
+export { Entry } from './entry.js'
+export { Conversation } from './conversation.js'
+export { Thread } from './thread.js'
+export { Composer } from './composer.js'
+export { ProfileHeader } from './profile-header.js'
 export { Async } from './async.js'
 export { Field } from './field.js'
 export { Switch } from './switch.js'
@@ -12,6 +21,12 @@ export { Slider } from './slider.js'
 export { PinInput } from './pin-input.js'
 export { Accordion } from './accordion.js'
 export { Badge } from './badge.js'
+export { Bar } from './bar.js'
+export { Panel } from './panel.js'
+export { AppShell } from './app-shell.js'
+export { Content } from './content.js'
+export { Nav } from './nav.js'
+export { StickyBar } from './sticky-bar.js'
 export { Scroll } from './scroll.js'
 export { Select } from './select.js'
 export { Combobox } from './combobox.js'
@@ -19,4 +34,5 @@ export { Menu } from './menu.js'
 export { Popover } from './popover.js'
 export { Tooltip } from './tooltip.js'
 export { Toast, useToast } from './toast.js'
+export { ThemeSwitcher } from './theme-switcher.js'
 export { cn } from './cn.js'

package/packages/ui/src/list-row.tsx

@@ -0,0 +1,30 @@
+import { ListRow as Headless } from '@aeon-ui/react'
+import { aeonListRow } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type PartProps = ComponentProps<typeof Headless.Label>
+
+export const ListRow = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonListRow()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+  Description: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Description className={cn(styles.description, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/metric-strip.tsx

@@ -0,0 +1,29 @@
+import { MetricStrip as Headless } from '@aeon-ui/react'
+import { aeonMetricStrip } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Density = 'cluster' | 'loose'
+type RootProps = ComponentProps<typeof Headless.Root> & { density?: Density }
+type PartProps = ComponentProps<typeof Headless.Chip>
+
+export const MetricStrip = {
+  Root: ({ className, density = 'cluster', ...props }: RootProps) => {
+    const styles = aeonMetricStrip({ density })
+    return (
+      <Headless.Root className={cn(styles.root, className)} density={density} {...props} />
+    )
+  },
+  Chip: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Chip className={cn(styles.chip, className)} {...props} />
+  },
+  Value: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Value className={cn(styles.value, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+}

package/packages/ui/src/nav.tsx

@@ -0,0 +1,46 @@
+import { Nav as Headless } from '@aeon-ui/react'
+import { aeonNav } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type NavSize = 'sm' | 'md' | 'lg'
+type NavLayout = 'inline' | 'dock'
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: NavSize
+  layout?: NavLayout
+}
+type ItemProps = ComponentProps<typeof Headless.Item>
+type PartProps = ComponentProps<typeof Headless.Label>
+
+export const Nav = {
+  Root: ({ className, size, layout = 'inline', ...props }: RootProps) => {
+    const styles = aeonNav({ size, layout })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        data-aeon-layout={layout}
+        {...props}
+      />
+    )
+  },
+  Item: ({ className, ...props }: ItemProps) => {
+    const styles = aeonNav({})
+    return <Headless.Item className={cn(styles.item, className)} {...props} />
+  },
+  Indicator: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Indicator className={cn(styles.indicator, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+  Icon: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Icon className={cn(styles.icon, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}

package/packages/ui/src/panel.tsx

@@ -0,0 +1,39 @@
+import { Panel as Headless } from '@aeon-ui/react'
+import { aeonPanel } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type PanelSize = 'md' | 'lg'
+
+type GroupProps = ComponentProps<typeof Headless.Group>
+type RootProps = ComponentProps<typeof Headless.Root> & { size?: PanelSize }
+type TriggerProps = ComponentProps<typeof Headless.Trigger>
+type LabelProps = ComponentProps<typeof Headless.Label>
+type ContentProps = ComponentProps<typeof Headless.Content>
+
+/**
+ * Panel — collapsible split-view region for Aeon layouts.
+ * Collapsed exposes a vertical upright label rail; expanded shows content.
+ */
+export const Panel = {
+  Group: ({ className, ...props }: GroupProps) => {
+    const styles = aeonPanel({})
+    return <Headless.Group className={cn(styles.group, className)} {...props} />
+  },
+  Root: ({ className, size, ...props }: RootProps) => {
+    const styles = aeonPanel({ size })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Trigger: ({ className, ...props }: TriggerProps) => {
+    const styles = aeonPanel({})
+    return <Headless.Trigger className={cn(styles.trigger, className)} {...props} />
+  },
+  Label: ({ className, ...props }: LabelProps) => {
+    const styles = aeonPanel({})
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+  Content: ({ className, ...props }: ContentProps) => {
+    const styles = aeonPanel({})
+    return <Headless.Content className={cn(styles.content, className)} {...props} />
+  },
+}

package/packages/ui/src/profile-header.tsx

@@ -0,0 +1,35 @@
+import { ProfileHeader as Headless } from '@aeon-ui/react'
+import { aeonProfileHeader } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Align = 'start' | 'center'
+type RootProps = ComponentProps<typeof Headless.Root> & { align?: Align }
+type PartProps = ComponentProps<typeof Headless.Body>
+
+export const ProfileHeader = {
+  Root: ({ className, align = 'start', ...props }: RootProps) => {
+    const styles = aeonProfileHeader({ align })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Media: ({ className, ...props }: PartProps) => {
+    const styles = aeonProfileHeader()
+    return <Headless.Media className={cn(styles.media, className)} {...props} />
+  },
+  Identity: ({ className, ...props }: PartProps) => {
+    const styles = aeonProfileHeader()
+    return <Headless.Identity className={cn(styles.identity, className)} {...props} />
+  },
+  Metrics: ({ className, ...props }: PartProps) => {
+    const styles = aeonProfileHeader()
+    return <Headless.Metrics className={cn(styles.metrics, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: PartProps) => {
+    const styles = aeonProfileHeader()
+    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonProfileHeader()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+}

package/packages/ui/src/sticky-bar.tsx

@@ -0,0 +1,42 @@
+import { StickyBar as Headless } from '@aeon-ui/react'
+import { aeonBar } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type BarSize = 'xs' | 'sm' | 'md' | 'lg'
+type Placement = 'top' | 'bottom' | 'inline'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: BarSize
+  placement?: Placement
+}
+type ZoneProps = ComponentProps<typeof Headless.Leading>
+
+export const StickyBar = {
+  Root: ({ className, size, placement = 'top', ...props }: RootProps) => {
+    const styles = aeonBar({ size, placement })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        placement={placement}
+        {...props}
+      />
+    )
+  },
+  Leading: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Center: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Center className={cn(styles.center, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+  Seam: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Seam className={cn(styles.seam, className)} {...props} />
+  },
+}

package/packages/ui/src/switch.tsx

@@ -1,14 +1,27 @@
 import { Switch as Headless } from '@aeon-ui/react'
 import { aeonSwitch } from '@aeon-ui/panda/styled-system/recipes'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { cn } from './cn.js'
 
 const switchStyles = aeonSwitch()
 
+type RootProps = ComponentProps<typeof Headless.Root>
+
 export const Switch = {
-  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
-    <Headless.Root className={cn(switchStyles.root, className)} {...props} />
-  ),
+  Root: ({ className, children, ...props }: RootProps) => {
+    const styles = switchStyles
+    const body: ReactNode =
+      children ?? (
+        <Headless.Control className={styles.control}>
+          <Headless.Thumb className={styles.thumb} />
+        </Headless.Control>
+      )
+    return (
+      <Headless.Root className={cn(styles.root, className)} {...props}>
+        {body}
+      </Headless.Root>
+    )
+  },
   Control: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => (
     <Headless.Control className={cn(switchStyles.control, className)} {...props} />
   ),