aeon-ui-engine 1.0.2 → 1.1.0

package/packages/react/src/metric-strip/index.tsx

@@ -0,0 +1,88 @@
+import { metricStripAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { createContext, forwardRef, useContext, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface MetricStripContextValue {
+  density: 'cluster' | 'loose'
+}
+
+const MetricCtx = createContext<MetricStripContextValue | null>(null)
+
+function useMetricCtx() {
+  const ctx = useContext(MetricCtx)
+  if (!ctx) throw new Error('MetricStrip parts must be used within MetricStrip.Root')
+  return ctx
+}
+
+export interface MetricStripRootProps extends HTMLAttributes<HTMLElement> {
+  /** cluster = ultra-dense chips; loose = columnar stats */
+  density?: 'cluster' | 'loose'
+  children?: ReactNode
+}
+
+/**
+ * MetricStrip — dense value/label chips (generic stats, not product wallets).
+ */
+const Root = forwardRef<HTMLElement, MetricStripRootProps>(function MetricStripRoot(
+  { density = 'cluster', children, ...rest },
+  ref,
+) {
+  return (
+    <MetricCtx.Provider value={{ density }}>
+      <div
+        ref={ref as never}
+        data-aeon-density={density}
+        role="group"
+        {...mergeProps(scopeAttrs(metricStripAnatomy.scope, metricStripAnatomy.root), rest)}
+      >
+        {children}
+      </div>
+    </MetricCtx.Provider>
+  )
+})
+
+const Chip = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function MetricChip(
+  props,
+  ref,
+) {
+  useMetricCtx()
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(metricStripAnatomy.scope, metricStripAnatomy.chip), props)}
+    />
+  )
+})
+
+const Value = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function MetricValue(
+  props,
+  ref,
+) {
+  useMetricCtx()
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(metricStripAnatomy.scope, metricStripAnatomy.value), props)}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function MetricLabel(
+  props,
+  ref,
+) {
+  useMetricCtx()
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(metricStripAnatomy.scope, metricStripAnatomy.label), props)}
+    />
+  )
+})
+
+export const MetricStrip = {
+  Root,
+  Chip,
+  Value,
+  Label,
+}

package/packages/react/src/nav/index.tsx

@@ -0,0 +1,155 @@
+import { navAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { tabsMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface NavContextValue {
+  value: string
+  send: ReturnType<typeof useAeonMachine<typeof tabsMachine>>[1]
+  onValueChange?: (value: string) => void
+}
+
+const NavCtx = createContext<NavContextValue | null>(null)
+
+function useNavCtx() {
+  const ctx = useContext(NavCtx)
+  if (!ctx) throw new Error('Nav parts must be used within Nav.Root')
+  return ctx
+}
+
+export interface NavRootProps extends HTMLAttributes<HTMLElement> {
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  as?: 'nav' | 'div'
+  orientation?: 'horizontal' | 'vertical'
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLElement, NavRootProps>(function NavRoot(
+  {
+    defaultValue = '',
+    value,
+    onValueChange,
+    as: Tag = 'nav',
+    orientation = 'horizontal',
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(tabsMachine, {
+    input: { value: defaultValue, disabled: false },
+  })
+  const resolvedValue = value ?? snapshot.context.value
+
+  useEffect(() => {
+    if (value !== undefined) send({ type: 'SET_VALUE', value })
+  }, [value, send])
+
+  const ctx = useMemo(
+    () => ({ value: resolvedValue, send, onValueChange }),
+    [resolvedValue, send, onValueChange],
+  )
+
+  return (
+    <NavCtx.Provider value={ctx}>
+      <Tag
+        ref={ref as never}
+        data-aeon-orientation={orientation}
+        {...mergeProps(scopeAttrs(navAnatomy.scope, navAnatomy.root), rest)}
+      >
+        {children}
+      </Tag>
+    </NavCtx.Provider>
+  )
+})
+
+export interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+}
+
+const Item = forwardRef<HTMLButtonElement, NavItemProps>(function NavItem(
+  { value, disabled, onClick, children, ...rest },
+  ref,
+) {
+  const { value: selected, send, onValueChange } = useNavCtx()
+  const active = selected === value
+  const state = disabled ? 'disabled' : active ? 'active' : 'inactive'
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled}
+      aria-current={active ? 'page' : undefined}
+      data-aeon-value={value}
+      onClick={(e) => {
+        onClick?.(e)
+        if (disabled || e.defaultPrevented) return
+        send({ type: 'SELECT', value })
+        onValueChange?.(value)
+      }}
+      {...mergeProps(partAttrs(navAnatomy.scope, navAnatomy.item, { state, disabled }), rest)}
+    >
+      {children}
+    </button>
+  )
+})
+
+const Indicator = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function NavIndicator(
+  props,
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      aria-hidden
+      {...mergeProps(partAttrs(navAnatomy.scope, navAnatomy.indicator), props)}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function NavLabel(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...mergeProps(partAttrs(navAnatomy.scope, navAnatomy.label), props)} />
+})
+
+const Icon = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function NavIcon(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...mergeProps(partAttrs(navAnatomy.scope, navAnatomy.icon), props)} />
+})
+
+const Badge = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function NavBadge(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...mergeProps(partAttrs(navAnatomy.scope, navAnatomy.badge), props)} />
+})
+
+/**
+ * Nav — navigational collection (top links, bottom tabs, side rail).
+ * Selection: tabsMachine. Item states: inactive | active | disabled.
+ */
+export const Nav = {
+  Root,
+  Item,
+  Indicator,
+  Label,
+  Icon,
+  Badge,
+}

package/packages/react/src/panel/index.tsx

@@ -0,0 +1,267 @@
+import { panelAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { panelMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+type PanelState = 'expanded' | 'collapsed'
+
+interface PanelContextValue {
+  state: PanelState
+  expanded: boolean
+  collapsible: boolean
+  label: string
+  contentId: string
+  send: ReturnType<typeof useAeonMachine<typeof panelMachine>>[1]
+}
+
+const PanelCtx = createContext<PanelContextValue | null>(null)
+
+function usePanelCtx() {
+  const ctx = useContext(PanelCtx)
+  if (!ctx) throw new Error('Panel parts must be used within Panel.Root')
+  return ctx
+}
+
+/* ------------------------------------------------------------------ */
+/*  Group — horizontal/vertical split of Panel.Root siblings           */
+/* ------------------------------------------------------------------ */
+
+export interface PanelGroupProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical'
+  children?: ReactNode
+}
+
+const Group = forwardRef<HTMLDivElement, PanelGroupProps>(function PanelGroup(
+  { orientation = 'horizontal', children, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={className}
+      data-aeon-orientation={orientation}
+      {...mergeProps(partAttrs(panelAnatomy.scope, panelAnatomy.group), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Root                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface PanelRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** Accessible name; also the collapsed vertical rail text. */
+  label: string
+  /** Start expanded (default true). */
+  defaultExpanded?: boolean
+  /** Controlled expanded state. */
+  expanded?: boolean
+  /** Whether the panel can collapse (default true). */
+  collapsible?: boolean
+  onExpandedChange?: (expanded: boolean) => void
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, PanelRootProps>(function PanelRoot(
+  {
+    label,
+    defaultExpanded = true,
+    expanded: expandedProp,
+    collapsible = true,
+    onExpandedChange,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const contentId = useId().replace(/:/g, '')
+  const [snapshot, send] = useAeonMachine(panelMachine, {
+    input: { expanded: defaultExpanded },
+  })
+
+  const machineExpanded = snapshot.value === 'expanded'
+  const expanded = expandedProp ?? machineExpanded
+  const state: PanelState = expanded ? 'expanded' : 'collapsed'
+
+  useEffect(() => {
+    onExpandedChange?.(expanded)
+  }, [expanded, onExpandedChange])
+
+  useEffect(() => {
+    if (expandedProp === undefined) return
+    send({ type: 'SET_EXPANDED', expanded: expandedProp })
+  }, [expandedProp, send])
+
+  const ctx = useMemo(
+    () => ({
+      state,
+      expanded,
+      collapsible,
+      label,
+      contentId: `aeon-panel-${contentId}`,
+      send,
+    }),
+    [state, expanded, collapsible, label, contentId, send],
+  )
+
+  return (
+    <PanelCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          scopeAttrs(panelAnatomy.scope, panelAnatomy.root, { state }),
+          {
+            'data-aeon-collapsible': collapsible ? 'true' : undefined,
+          },
+          rest,
+        )}
+      >
+        {children}
+      </div>
+    </PanelCtx.Provider>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Trigger                                                            */
+/* ------------------------------------------------------------------ */
+
+export interface PanelTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const Trigger = forwardRef<HTMLButtonElement, PanelTriggerProps>(function PanelTrigger(
+  { children, onClick, ...rest },
+  ref,
+) {
+  const { expanded, collapsible, contentId, send, label } = usePanelCtx()
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-expanded={expanded}
+      aria-controls={contentId}
+      disabled={!collapsible}
+      {...mergeProps(
+        partAttrs(panelAnatomy.scope, panelAnatomy.trigger, {
+          state: expanded ? 'expanded' : 'collapsed',
+        }),
+        rest,
+      )}
+      onClick={(e) => {
+        onClick?.(e)
+        if (!e.defaultPrevented && collapsible) send({ type: 'TOGGLE' })
+      }}
+    >
+      {children ?? (expanded ? 'Collapse' : `Expand ${label}`)}
+    </button>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Label — vertical upright letters when collapsed                    */
+/* ------------------------------------------------------------------ */
+
+export interface PanelLabelProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Override root label text. */
+  children?: ReactNode
+}
+
+const Label = forwardRef<HTMLSpanElement, PanelLabelProps>(function PanelLabel(
+  { children, onClick, ...rest },
+  ref,
+) {
+  const { label, state, collapsible, send, expanded, contentId } = usePanelCtx()
+  const text = typeof children === 'string' || children == null ? String(children ?? label) : null
+
+  return (
+    <span
+      ref={ref}
+      role={collapsible ? 'button' : undefined}
+      tabIndex={collapsible ? 0 : undefined}
+      aria-expanded={collapsible ? expanded : undefined}
+      aria-controls={collapsible ? contentId : undefined}
+      {...mergeProps(partAttrs(panelAnatomy.scope, panelAnatomy.label, { state }), rest)}
+      onClick={(e) => {
+        onClick?.(e)
+        if (!e.defaultPrevented && collapsible) send({ type: 'TOGGLE' })
+      }}
+      onKeyDown={(e) => {
+        if (!collapsible) return
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          send({ type: 'TOGGLE' })
+        }
+      }}
+    >
+      {text != null ? (
+        state === 'collapsed' ? (
+          text.split('').map((ch, i) =>
+            ch === ' ' ? (
+              <span key={`sp-${i}`} data-aeon-part="label-gap" aria-hidden>
+                {' '}
+              </span>
+            ) : (
+              <span key={`${ch}-${i}`} data-aeon-part="label-char">
+                {ch}
+              </span>
+            ),
+          )
+        ) : (
+          text
+        )
+      ) : (
+        children
+      )}
+    </span>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Content                                                            */
+/* ------------------------------------------------------------------ */
+
+export interface PanelContentProps extends HTMLAttributes<HTMLDivElement> {
+  /** Prefer Scroll.Root inside for overflow regions. */
+  children?: ReactNode
+}
+
+const Content = forwardRef<HTMLDivElement, PanelContentProps>(function PanelContent(
+  { children, ...rest },
+  ref,
+) {
+  const { expanded, contentId, state } = usePanelCtx()
+
+  return (
+    <div
+      ref={ref}
+      id={contentId}
+      hidden={!expanded}
+      {...mergeProps(partAttrs(panelAnatomy.scope, panelAnatomy.content, { state }), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+export const Panel = {
+  Group,
+  Root,
+  Trigger,
+  Label,
+  Content,
+}

package/packages/react/src/profile-header/index.tsx

@@ -0,0 +1,91 @@
+import { profileHeaderAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export interface ProfileHeaderRootProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode
+}
+
+/**
+ * ProfileHeader — dense account surface (identity + metrics + actions).
+ * Compose Identity / MetricStrip / Bar actions — not a dating hero.
+ */
+const Root = forwardRef<HTMLElement, ProfileHeaderRootProps>(function ProfileHeaderRoot(
+  { children, ...rest },
+  ref,
+) {
+  return (
+    <header
+      ref={ref as never}
+      {...mergeProps(scopeAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.root), rest)}
+    >
+      {children}
+    </header>
+  )
+})
+
+const Media = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ProfileHeaderMedia(
+  props,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.media), props)}
+    />
+  )
+})
+
+const IdentitySlot = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ProfileHeaderIdentity(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.identity), props)}
+      />
+    )
+  },
+)
+
+const Metrics = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ProfileHeaderMetrics(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.metrics), props)}
+      />
+    )
+  },
+)
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ProfileHeaderActions(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.actions), props)}
+      />
+    )
+  },
+)
+
+const Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ProfileHeaderBody(
+  props,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(profileHeaderAnatomy.scope, profileHeaderAnatomy.body), props)}
+    />
+  )
+})
+
+export const ProfileHeader = {
+  Root,
+  Media,
+  Identity: IdentitySlot,
+  Metrics,
+  Actions,
+  Body,
+}

package/packages/react/src/radio-group/index.tsx

@@ -3,6 +3,7 @@ import { tabsMachine } from '@aeon-ui/primitives'
 import {
   createContext,
   forwardRef,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -18,6 +19,7 @@ import { mergeProps } from '../utils/merge-props.js'
 interface RadioGroupContextValue {
   value: string
   send: ReturnType<typeof useAeonMachine<typeof tabsMachine>>[1]
+  selectValue: (next: string) => void
 }
 
 const RadioGroupCtx = createContext<RadioGroupContextValue | null>(null)
@@ -58,16 +60,26 @@ const Root = forwardRef<HTMLDivElement, RadioGroupRootProps>(function RadioGroup
   })
 
   const resolvedValue = value ?? snapshot.context.value
+  const controlled = value !== undefined
+
+  const selectValue = useCallback(
+    (next: string) => {
+      if (controlled) onValueChange?.(next)
+      else send({ type: 'SELECT', value: next })
+    },
+    [controlled, onValueChange, send],
+  )
 
   useEffect(() => {
-    onValueChange?.(resolvedValue)
-  }, [resolvedValue, onValueChange])
+    if (controlled) return
+    onValueChange?.(snapshot.context.value)
+  }, [snapshot.context.value, controlled, onValueChange])
 
   useEffect(() => {
     if (value !== undefined) send({ type: 'SET_VALUE', value })
   }, [value, send])
 
-  const ctx = useMemo(() => ({ value: resolvedValue, send }), [resolvedValue, send])
+  const ctx = useMemo(() => ({ value: resolvedValue, send, selectValue }), [resolvedValue, send, selectValue])
 
   return (
     <RadioGroupCtx.Provider value={ctx}>
@@ -119,10 +131,10 @@ const ItemControl = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanEle
   { onClick, onKeyDown, ...rest },
   ref,
 ) {
-  const { send } = useRadioGroupCtx()
+  const { selectValue } = useRadioGroupCtx()
   const { value: itemValue, selected } = useRadioGroupItemCtx()
 
-  const select = () => send({ type: 'SELECT', value: itemValue })
+  const select = () => selectValue(itemValue)
 
   return (
     <span
@@ -176,7 +188,7 @@ const ItemLabel = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(f
   { onClick, ...rest },
   ref,
 ) {
-  const { send } = useRadioGroupCtx()
+  const { selectValue } = useRadioGroupCtx()
   const { value: itemValue } = useRadioGroupItemCtx()
 
   return (
@@ -187,7 +199,7 @@ const ItemLabel = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(f
         {
           onClick: (e: MouseEvent<HTMLSpanElement>) => {
             onClick?.(e)
-            send({ type: 'SELECT', value: itemValue })
+            selectValue(itemValue)
           },
         },
         rest,

package/packages/react/src/slider/index.tsx

@@ -201,7 +201,7 @@ const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(funct
   { onKeyDown, onPointerDown, style, ...rest },
   ref,
 ) {
-  const { value, min, max, step, disabled, dragging, send } = useSliderCtx()
+  const { value, min, max, step, disabled, dragging, send, setValueFromClientX } = useSliderCtx()
 
   return (
     <span
@@ -220,7 +220,9 @@ const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(funct
             onPointerDown?.(e)
             if (disabled || e.button !== 0) return
             e.stopPropagation()
+            e.currentTarget.setPointerCapture(e.pointerId)
             send({ type: 'POINTER_DOWN' })
+            setValueFromClientX(e.clientX)
           },
           onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
             onKeyDown?.(e)