aeon-ui-engine 1.0.3 → 1.2.0

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/prompt/index.tsx

@@ -0,0 +1,161 @@
+import { partAttrs, promptAnatomy, scopeAttrs } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { Dialog } from '../dialog/index.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type PromptStatus = 'pending' | 'confirming' | 'dismissed' | 'confirmed'
+
+interface PromptContextValue {
+  status: PromptStatus
+}
+
+const PromptCtx = createContext<PromptContextValue | null>(null)
+
+function usePromptCtx() {
+  const ctx = useContext(PromptCtx)
+  if (!ctx) throw new Error('Prompt parts must be used within Prompt.Root')
+  return ctx
+}
+
+export interface PromptRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Projected onto data-aeon-state (default: pending when open). */
+  status?: PromptStatus
+  children?: ReactNode
+  className?: string
+}
+
+/**
+ * Prompt — confirm / permission / “restart to update” dialog.
+ * Composes Dialog (portal, focus trap, escape) with product-facing parts.
+ */
+const Root = forwardRef<HTMLDivElement, PromptRootProps>(function PromptRoot(
+  { status = 'pending', children, className, ...dialogProps },
+  ref,
+) {
+  const value = useMemo(() => ({ status }), [status])
+  return (
+    <PromptCtx.Provider value={value}>
+      <Dialog.Root {...dialogProps}>
+        <div
+          ref={ref}
+          className={className}
+          {...scopeAttrs(promptAnatomy.scope, promptAnatomy.root, { state: status })}
+        >
+          {children}
+        </div>
+      </Dialog.Root>
+    </PromptCtx.Provider>
+  )
+})
+
+const Eyebrow = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PromptEyebrow(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <p
+        ref={ref}
+        {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.eyebrow, { state: status }), props)}
+      />
+    )
+  },
+)
+
+const Meta = forwardRef<HTMLDListElement, HTMLAttributes<HTMLDListElement>>(function PromptMeta(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <dl
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.meta, { state: status }), props)}
+    />
+  )
+})
+
+const Amount = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PromptAmount(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.amount, { state: status }), props)}
+    />
+  )
+})
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PromptActions(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.actions, { state: status }), props)}
+    />
+  )
+})
+
+const Primary = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PromptPrimary(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...mergeProps(
+          partAttrs(promptAnatomy.scope, promptAnatomy.primary, { state: status }),
+          props,
+        )}
+      />
+    )
+  },
+)
+
+const Secondary = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PromptSecondary(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...mergeProps(
+          partAttrs(promptAnatomy.scope, promptAnatomy.secondary, { state: status }),
+          props,
+        )}
+      />
+    )
+  },
+)
+
+export const Prompt = {
+  Root,
+  Trigger: Dialog.Trigger,
+  Portal: Dialog.Portal,
+  Backdrop: Dialog.Backdrop,
+  Positioner: Dialog.Positioner,
+  Content: Dialog.Content,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  CloseTrigger: Dialog.CloseTrigger,
+  Eyebrow,
+  Meta,
+  Amount,
+  Actions,
+  Primary,
+  Secondary,
+}

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)

package/packages/react/src/status-banner/index.tsx

@@ -0,0 +1,84 @@
+import { partAttrs, scopeAttrs, statusBannerAnatomy } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type StatusBannerTone = 'info' | 'success' | 'warning' | 'danger'
+
+export interface StatusBannerRootProps extends HTMLAttributes<HTMLDivElement> {
+  tone?: StatusBannerTone
+  /** Machine-ish status string projected to data-aeon-state (e.g. ready, downloading). */
+  status?: string
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, StatusBannerRootProps>(function StatusBannerRoot(
+  { tone = 'info', status, children, ...rest },
+  ref,
+) {
+  const state = [tone, status].filter(Boolean).join(' ')
+  return (
+    <div
+      ref={ref}
+      role="status"
+      {...mergeProps(scopeAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.root, { state }), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+const Copy = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatusBannerCopy(
+  props,
+  ref,
+) {
+  return <div ref={ref} {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.copy), props)} />
+})
+
+const Title = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function StatusBannerTitle(
+  props,
+  ref,
+) {
+  return (
+    <strong
+      ref={ref as never}
+      {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.title), props)}
+    />
+  )
+})
+
+const Body = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function StatusBannerBody(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.body), props)} />
+  )
+})
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatusBannerActions(
+  props,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.actions), props)}
+    />
+  )
+})
+
+const Action = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function StatusBannerAction(props, ref) {
+    return <button ref={ref} type="button" {...props} />
+  },
+)
+
+/** Non-blocking top-of-app notice (updates, sync, offline). */
+export const StatusBanner = {
+  Root,
+  Copy,
+  Title,
+  Body,
+  Actions,
+  Action,
+}