aeon-ui-engine 1.0.0 → 1.0.2

package/packages/react/src/floating/FloatingPositioner.tsx

@@ -0,0 +1,59 @@
+import { partAttrs } from '@aeon-ui/core'
+import { forwardRef, type HTMLAttributes, type ReactNode, type RefObject } from 'react'
+import { useAnchorPosition, type AnchorPlacement } from '../hooks/use-anchor-position.js'
+import { renderPortalled, usePortalledMount } from '../hooks/use-portalled.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+export interface FloatingPositionerProps extends HTMLAttributes<HTMLDivElement> {
+  open: boolean
+  scope: string
+  part: string
+  triggerRef: RefObject<HTMLElement | null>
+  positionerRef: RefObject<HTMLDivElement | null>
+  portalled?: boolean
+  placement?: AnchorPlacement
+  matchAnchorWidth?: boolean
+  children?: ReactNode
+}
+
+export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerProps>(
+  function FloatingPositioner(
+    {
+      open,
+      scope,
+      part,
+      triggerRef,
+      positionerRef,
+      portalled = true,
+      placement = 'bottom-start',
+      matchAnchorWidth = false,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    const mounted = usePortalledMount()
+    useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
+      matchWidth: matchAnchorWidth,
+    })
+
+    if (!open) return null
+
+    const node = (
+      <div
+        ref={(el) => {
+          positionerRef.current = el
+          if (typeof ref === 'function') ref(el)
+          else if (ref) ref.current = el
+        }}
+        className={className}
+        {...mergeProps(partAttrs(scope, part, { state: 'open' }), rest)}
+      >
+        {children}
+      </div>
+    )
+
+    return renderPortalled(node, portalled, mounted)
+  },
+)

package/packages/react/src/hooks/use-anchor-position.ts

@@ -1,11 +1,22 @@
 import { useEffect, type RefObject } from 'react'
 
-/** Pin floating listbox to trigger rect (for portalled selects). */
+export type AnchorPlacement = 'bottom-start' | 'top-start'
+
+export interface AnchorPositionOptions {
+  /** Match floating width to anchor (select listboxes). */
+  matchWidth?: boolean
+}
+
+/** Pin floating surface to trigger rect (for portalled overlays). */
 export function useAnchorPosition(
   anchorRef: RefObject<HTMLElement | null>,
   floatingRef: RefObject<HTMLElement | null>,
   active: boolean,
+  placement: AnchorPlacement = 'bottom-start',
+  options: AnchorPositionOptions = {},
 ) {
+  const { matchWidth = false } = options
+
   useEffect(() => {
     if (!active || !anchorRef.current || !floatingRef.current) return
 
@@ -13,21 +24,38 @@ export function useAnchorPosition(
       const anchor = anchorRef.current
       const floating = floatingRef.current
       if (!anchor || !floating) return
+
       const rect = anchor.getBoundingClientRect()
       floating.style.position = 'fixed'
-      floating.style.top = `${rect.bottom + 4}px`
       floating.style.left = `${rect.left}px`
-      floating.style.width = `${rect.width}px`
-      floating.style.minWidth = `${rect.width}px`
+      floating.style.bottom = ''
+      floating.style.right = ''
       floating.style.zIndex = '50'
+
+      if (matchWidth) {
+        floating.style.width = `${rect.width}px`
+        floating.style.minWidth = `${rect.width}px`
+      } else {
+        floating.style.width = ''
+        floating.style.minWidth = ''
+      }
+
+      if (placement === 'top-start') {
+        const height = floating.offsetHeight || floating.getBoundingClientRect().height
+        floating.style.top = `${rect.top - height - 4}px`
+      } else {
+        floating.style.top = `${rect.bottom + 4}px`
+      }
     }
 
     update()
+    requestAnimationFrame(update)
+
     window.addEventListener('resize', update)
     window.addEventListener('scroll', update, true)
     return () => {
       window.removeEventListener('resize', update)
       window.removeEventListener('scroll', update, true)
     }
-  }, [active, anchorRef, floatingRef])
+  }, [active, anchorRef, floatingRef, placement, matchWidth])
 }

package/packages/react/src/hooks/use-prefers-hover.ts

@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react'
+
+/** True when the primary input supports hover (typical mouse/trackpad). */
+export function usePrefersHover() {
+  const [prefersHover, setPrefersHover] = useState(true)
+
+  useEffect(() => {
+    const mq = window.matchMedia('(hover: hover) and (pointer: fine)')
+    const update = () => setPrefersHover(mq.matches)
+    update()
+    mq.addEventListener('change', update)
+    return () => mq.removeEventListener('change', update)
+  }, [])
+
+  return prefersHover
+}

package/packages/react/src/index.ts

@@ -3,6 +3,11 @@ export * from './switch/index.js'
 export * from './checkbox/index.js'
 export * from './dialog/index.js'
 export * from './tabs/index.js'
+export * from './separator/index.js'
+export * from './progress/index.js'
+export * from './radio-group/index.js'
+export * from './slider/index.js'
+export * from './pin-input/index.js'
 export * from './accordion/index.js'
 export * from './async/index.js'
 export * from './field/index.js'

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

@@ -15,15 +15,19 @@ import {
   type MouseEvent,
   type ReactNode,
 } from 'react'
+import { FloatingPositioner } from '../floating/FloatingPositioner.js'
 import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { useOutsideClick } from '../hooks/use-outside-click.js'
 import { mergeProps } from '../utils/merge-props.js'
+import type { AnchorPlacement } from '../hooks/use-anchor-position.js'
 
 interface MenuContextValue {
   open: boolean
   send: ReturnType<typeof useAeonMachine<typeof popoverMachine>>[1]
   triggerId: string
   menuId: string
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  positionerRef: React.RefObject<HTMLDivElement | null>
 }
 
 const MenuCtx = createContext<MenuContextValue | null>(null)
@@ -49,6 +53,8 @@ const Root = forwardRef<HTMLDivElement, MenuRootProps>(function MenuRoot(
   const [snapshot, send] = useAeonMachine(popoverMachine, { input: { open: defaultOpen } })
   const resolvedOpen = open ?? snapshot.context.open
   const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const positionerRef = useRef<HTMLDivElement>(null)
   const triggerId = useId()
   const menuId = useId()
 
@@ -61,10 +67,10 @@ const Root = forwardRef<HTMLDivElement, MenuRootProps>(function MenuRoot(
   }, [open, send])
 
   const close = useCallback(() => send({ type: 'CLOSE' }), [send])
-  useOutsideClick([rootRef], resolvedOpen, close)
+  useOutsideClick([rootRef, positionerRef], resolvedOpen, close)
 
   const value = useMemo(
-    () => ({ open: resolvedOpen, send, triggerId, menuId }),
+    () => ({ open: resolvedOpen, send, triggerId, menuId, triggerRef, positionerRef }),
     [resolvedOpen, send, triggerId, menuId],
   )
 
@@ -92,10 +98,14 @@ const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonEle
   { onClick, ...rest },
   ref,
 ) {
-  const { open, send, triggerId, menuId } = useMenuCtx()
+  const { open, send, triggerId, menuId, triggerRef } = useMenuCtx()
   return (
     <button
-      ref={ref}
+      ref={(node) => {
+        triggerRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
       type="button"
       id={triggerId}
       aria-haspopup="menu"
@@ -115,17 +125,34 @@ const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonEle
   )
 })
 
-const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function MenuPositioner(
-  props,
+export interface MenuPositionerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Mount menu in document.body (default true). */
+  portalled?: boolean
+  placement?: AnchorPlacement
+  children?: ReactNode
+}
+
+const Positioner = forwardRef<HTMLDivElement, MenuPositionerProps>(function MenuPositioner(
+  { portalled = true, placement = 'bottom-start', children, className, ...rest },
   ref,
 ) {
-  const { open } = useMenuCtx()
-  if (!open) return null
+  const { open, triggerRef, positionerRef } = useMenuCtx()
+
   return (
-    <div
+    <FloatingPositioner
       ref={ref}
-      {...mergeProps(partAttrs(menuAnatomy.scope, menuAnatomy.positioner, { state: 'open' }), props)}
-    />
+      open={open}
+      scope={menuAnatomy.scope}
+      part={menuAnatomy.positioner}
+      triggerRef={triggerRef}
+      positionerRef={positionerRef}
+      portalled={portalled}
+      placement={placement}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </FloatingPositioner>
   )
 })
 

package/packages/react/src/pin-input/index.tsx

@@ -0,0 +1,223 @@
+import { partAttrs, partOnlyAttrs, pinInputAnatomy } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ClipboardEvent,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface PinInputContextValue {
+  length: number
+  values: string[]
+  disabled: boolean
+  type: 'numeric' | 'alphanumeric'
+  setChar: (index: number, char: string) => void
+  focusInput: (index: number) => void
+  registerInput: (index: number, el: HTMLInputElement | null) => void
+}
+
+const PinInputCtx = createContext<PinInputContextValue | null>(null)
+
+function usePinInputCtx() {
+  const ctx = useContext(PinInputCtx)
+  if (!ctx) throw new Error('PinInput parts must be used within PinInput.Root')
+  return ctx
+}
+
+function normalizePinValue(raw: string, length: number) {
+  return raw.replace(/\s/g, '').slice(0, length).split('')
+}
+
+export interface PinInputRootProps {
+  length?: number
+  value?: string
+  defaultValue?: string
+  disabled?: boolean
+  onValueChange?: (value: string) => void
+  onComplete?: (value: string) => void
+  type?: 'numeric' | 'alphanumeric'
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, PinInputRootProps>(function PinInputRoot(
+  {
+    length = 4,
+    value,
+    defaultValue = '',
+    disabled = false,
+    onValueChange,
+    onComplete,
+    type = 'numeric',
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const [uncontrolled, setUncontrolled] = useState(() => normalizePinValue(defaultValue, length))
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([])
+  const controlled = value !== undefined
+  const chars = controlled ? normalizePinValue(value, length) : uncontrolled
+  while (chars.length < length) chars.push('')
+
+  const resolved = chars.slice(0, length).join('')
+
+  useEffect(() => {
+    onValueChange?.(resolved)
+    if (resolved.length === length && !resolved.includes('')) onComplete?.(resolved)
+  }, [resolved, length, onValueChange, onComplete])
+
+  const setChars = useCallback(
+    (next: string[]) => {
+      const joined = next.slice(0, length).join('')
+      if (!controlled) setUncontrolled(next.slice(0, length))
+      onValueChange?.(joined)
+      if (joined.length === length && !joined.includes('')) onComplete?.(joined)
+    },
+    [controlled, length, onValueChange, onComplete],
+  )
+
+  const setChar = useCallback(
+    (index: number, char: string) => {
+      const next = [...chars.slice(0, length)]
+      while (next.length < length) next.push('')
+      next[index] = char
+      setChars(next)
+    },
+    [chars, length, setChars],
+  )
+
+  const focusInput = useCallback((index: number) => {
+    const el = inputRefs.current[index]
+    el?.focus()
+    el?.select()
+  }, [])
+
+  const registerInput = useCallback((index: number, el: HTMLInputElement | null) => {
+    inputRefs.current[index] = el
+  }, [])
+
+  const ctx = useMemo(
+    () => ({ length, values: chars.slice(0, length), disabled, type, setChar, focusInput, registerInput }),
+    [length, chars, disabled, type, setChar, focusInput, registerInput],
+  )
+
+  return (
+    <PinInputCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(pinInputAnatomy.scope, pinInputAnatomy.root, {
+            state: resolved.length === length && !resolved.includes('') ? 'complete' : 'idle',
+            disabled,
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </PinInputCtx.Provider>
+  )
+})
+
+export interface PinInputInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+  index: number
+  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
+}
+
+const Input = forwardRef<HTMLInputElement, PinInputInputProps>(function PinInputInput(
+  { index, onKeyDown, onChange, onPaste, ...rest },
+  ref,
+) {
+  const { length, values, disabled, type, setChar, focusInput, registerInput } = usePinInputCtx()
+  const value = values[index] ?? ''
+  const pattern = type === 'numeric' ? /^[0-9]$/ : /^[0-9a-zA-Z]$/
+
+  const acceptChar = (raw: string) => {
+    if (!raw) return ''
+    const char = raw.slice(-1)
+    return pattern.test(char) ? char : ''
+  }
+
+  return (
+    <input
+      ref={(node) => {
+        registerInput(index, node)
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      type="text"
+      inputMode={type === 'numeric' ? 'numeric' : 'text'}
+      autoComplete={rest.autoComplete ?? 'one-time-code'}
+      maxLength={1}
+      value={value}
+      disabled={disabled}
+      aria-label={`Character ${index + 1} of ${length}`}
+      {...mergeProps(partOnlyAttrs(pinInputAnatomy.input, { state: value ? 'filled' : 'empty' }), rest, {
+        onChange: (e: ChangeEvent<HTMLInputElement>) => {
+          onChange?.(e)
+          const char = acceptChar(e.target.value)
+          setChar(index, char)
+          if (char && index < length - 1) focusInput(index + 1)
+        },
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => {
+          onKeyDown?.(e)
+          if (e.key === 'Backspace' && !value && index > 0) {
+            e.preventDefault()
+            setChar(index - 1, '')
+            focusInput(index - 1)
+          }
+          if (e.key === 'ArrowLeft' && index > 0) {
+            e.preventDefault()
+            focusInput(index - 1)
+          }
+          if (e.key === 'ArrowRight' && index < length - 1) {
+            e.preventDefault()
+            focusInput(index + 1)
+          }
+        },
+        onPaste: (e: ClipboardEvent<HTMLInputElement>) => {
+          onPaste?.(e)
+          e.preventDefault()
+          const text = e.clipboardData.getData('text').replace(/\s/g, '').slice(0, length - index)
+          if (!text) return
+          for (let i = 0; i < text.length && index + i < length; i++) {
+            const char = acceptChar(text[i]!)
+            if (char) setChar(index + i, char)
+          }
+          focusInput(Math.min(index + text.length, length - 1))
+        },
+      })}
+    />
+  )
+})
+
+/** Convenience row — renders `length` inputs. */
+const Group = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { inputClassName?: string }>(
+  function PinInputGroup({ inputClassName, className, ...rest }, ref) {
+    const { length } = usePinInputCtx()
+    return (
+      <div ref={ref} className={className} {...rest}>
+        {Array.from({ length }, (_, index) => (
+          <Input key={index} index={index} className={inputClassName} />
+        ))}
+      </div>
+    )
+  },
+)
+
+export const PinInput = { Root, Input, Group }

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

@@ -15,15 +15,19 @@ import {
   type MouseEvent,
   type ReactNode,
 } from 'react'
+import { FloatingPositioner } from '../floating/FloatingPositioner.js'
 import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { useOutsideClick } from '../hooks/use-outside-click.js'
 import { mergeProps } from '../utils/merge-props.js'
+import type { AnchorPlacement } from '../hooks/use-anchor-position.js'
 
 interface PopoverContextValue {
   open: boolean
   send: ReturnType<typeof useAeonMachine<typeof popoverMachine>>[1]
   triggerId: string
   contentId: string
+  triggerRef: React.RefObject<HTMLButtonElement | null>
+  positionerRef: React.RefObject<HTMLDivElement | null>
 }
 
 const PopoverCtx = createContext<PopoverContextValue | null>(null)
@@ -51,6 +55,8 @@ const Root = forwardRef<HTMLDivElement, PopoverRootProps>(function PopoverRoot(
   })
   const resolvedOpen = open ?? snapshot.context.open
   const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const positionerRef = useRef<HTMLDivElement>(null)
   const triggerId = useId()
   const contentId = useId()
 
@@ -63,10 +69,10 @@ const Root = forwardRef<HTMLDivElement, PopoverRootProps>(function PopoverRoot(
   }, [open, send])
 
   const close = useCallback(() => send({ type: 'CLOSE' }), [send])
-  useOutsideClick([rootRef], resolvedOpen, close)
+  useOutsideClick([rootRef, positionerRef], resolvedOpen, close)
 
   const value = useMemo(
-    () => ({ open: resolvedOpen, send, triggerId, contentId }),
+    () => ({ open: resolvedOpen, send, triggerId, contentId, triggerRef, positionerRef }),
     [resolvedOpen, send, triggerId, contentId],
   )
 
@@ -96,10 +102,14 @@ const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonEle
   { onClick, ...rest },
   ref,
 ) {
-  const { open, send, triggerId, contentId } = usePopoverCtx()
+  const { open, send, triggerId, contentId, triggerRef } = usePopoverCtx()
   return (
     <button
-      ref={ref}
+      ref={(node) => {
+        triggerRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
       type="button"
       id={triggerId}
       aria-expanded={open}
@@ -118,17 +128,34 @@ const Trigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonEle
   )
 })
 
-const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PopoverPositioner(
-  props,
+export interface PopoverPositionerProps extends HTMLAttributes<HTMLDivElement> {
+  /** Mount panel in document.body (default true). */
+  portalled?: boolean
+  placement?: AnchorPlacement
+  children?: ReactNode
+}
+
+const Positioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(function PopoverPositioner(
+  { portalled = true, placement = 'bottom-start', children, className, ...rest },
   ref,
 ) {
-  const { open } = usePopoverCtx()
-  if (!open) return null
+  const { open, triggerRef, positionerRef } = usePopoverCtx()
+
   return (
-    <div
+    <FloatingPositioner
       ref={ref}
-      {...mergeProps(partAttrs(popoverAnatomy.scope, popoverAnatomy.positioner, { state: 'open' }), props)}
-    />
+      open={open}
+      scope={popoverAnatomy.scope}
+      part={popoverAnatomy.positioner}
+      triggerRef={triggerRef}
+      positionerRef={positionerRef}
+      portalled={portalled}
+      placement={placement}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </FloatingPositioner>
   )
 })
 

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

@@ -0,0 +1,110 @@
+import { partAttrs, partOnlyAttrs, progressAnatomy } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+type ProgressState = 'idle' | 'loading' | 'complete'
+
+interface ProgressContextValue {
+  value: number
+  max: number
+  indeterminate: boolean
+  state: ProgressState
+}
+
+const ProgressCtx = createContext<ProgressContextValue | null>(null)
+
+function useProgressCtx() {
+  const ctx = useContext(ProgressCtx)
+  if (!ctx) throw new Error('Progress parts must be used within Progress.Root')
+  return ctx
+}
+
+function resolveProgressState(value: number, max: number, indeterminate: boolean): ProgressState {
+  if (indeterminate) return 'loading'
+  if (value >= max) return 'complete'
+  return 'idle'
+}
+
+export interface ProgressRootProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number
+  max?: number
+  indeterminate?: boolean
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, ProgressRootProps>(function ProgressRoot(
+  { value = 0, max = 100, indeterminate = false, children, className, ...rest },
+  ref,
+) {
+  const clampedValue = Math.min(Math.max(value, 0), max)
+  const state = resolveProgressState(clampedValue, max, indeterminate)
+  const ctx = useMemo(
+    () => ({ value: clampedValue, max, indeterminate, state }),
+    [clampedValue, max, indeterminate, state],
+  )
+
+  return (
+    <ProgressCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-valuenow={indeterminate ? undefined : clampedValue}
+        aria-busy={indeterminate || undefined}
+        {...mergeProps(
+          partAttrs(progressAnatomy.scope, progressAnatomy.root, { state }),
+          rest,
+        )}
+      >
+        {children}
+      </div>
+    </ProgressCtx.Provider>
+  )
+})
+
+const Track = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ProgressTrack(
+  props,
+  ref,
+) {
+  return (
+    <div ref={ref} {...mergeProps(partOnlyAttrs(progressAnatomy.track), props)} />
+  )
+})
+
+const Range = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ProgressRange(
+  { style, ...rest },
+  ref,
+) {
+  const { value, max, indeterminate } = useProgressCtx()
+  const width = indeterminate ? undefined : `${(value / max) * 100}%`
+
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partOnlyAttrs(progressAnatomy.range), rest, {
+        style: { ...style, width },
+      })}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ProgressLabel(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partOnlyAttrs(progressAnatomy.label), props)} />
+  )
+})
+
+export const Progress = { Root, Track, Range, Label }