aeon-ui-engine 1.0.0

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

@@ -0,0 +1,140 @@
+import { partAttrs, tabsAnatomy } from '@aeon-ui/core'
+import { tabsMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface TabsContextValue {
+  value: string
+  send: ReturnType<typeof useAeonMachine<typeof tabsMachine>>[1]
+}
+
+const TabsCtx = createContext<TabsContextValue | null>(null)
+
+function useTabsCtx() {
+  const ctx = useContext(TabsCtx)
+  if (!ctx) throw new Error('Tabs parts must be used within Tabs.Root')
+  return ctx
+}
+
+export interface TabsRootProps {
+  value?: string
+  defaultValue?: string
+  onValueChange?: (value: string) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, TabsRootProps>(function TabsRoot(
+  { value, defaultValue = '', onValueChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(tabsMachine, {
+    input: { value: defaultValue, disabled: false },
+  })
+
+  const resolvedValue = value ?? snapshot.context.value
+
+  useEffect(() => {
+    onValueChange?.(resolvedValue)
+  }, [resolvedValue, onValueChange])
+
+  useEffect(() => {
+    if (value !== undefined) send({ type: 'SET_VALUE', value })
+  }, [value, send])
+
+  const ctx = useMemo(() => ({ value: resolvedValue, send }), [resolvedValue, send])
+
+  return (
+    <TabsCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(partAttrs(tabsAnatomy.scope, tabsAnatomy.root), rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+    </TabsCtx.Provider>
+  )
+})
+
+const List = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TabsList(props, ref) {
+  return <div ref={ref} role="tablist" {...mergeProps(partAttrs(tabsAnatomy.scope, tabsAnatomy.list), props)} />
+})
+
+export interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+}
+
+const Trigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTrigger(
+  { value: triggerValue, onClick, ...rest },
+  ref,
+) {
+  const { value, send } = useTabsCtx()
+  const selected = value === triggerValue
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      role="tab"
+      aria-selected={selected}
+      data-selected={selected ? '' : undefined}
+      {...mergeProps(
+        partAttrs(tabsAnatomy.scope, tabsAnatomy.trigger, {
+          state: selected ? 'selected' : 'unselected',
+          highlighted: selected,
+        }),
+        {
+          onClick: (e: MouseEvent<HTMLButtonElement>) => {
+            onClick?.(e)
+            send({ type: 'SELECT', value: triggerValue })
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string
+}
+
+const Content = forwardRef<HTMLDivElement, TabsContentProps>(function TabsContent(
+  { value: contentValue, ...rest },
+  ref,
+) {
+  const { value } = useTabsCtx()
+  if (value !== contentValue) return null
+
+  return (
+    <div
+      ref={ref}
+      role="tabpanel"
+      {...mergeProps(
+        partAttrs(tabsAnatomy.scope, tabsAnatomy.content, { state: 'active' }),
+        rest,
+      )}
+    />
+  )
+})
+
+const Indicator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TabsIndicator(
+  props,
+  ref,
+) {
+  return <div ref={ref} {...mergeProps(partAttrs(tabsAnatomy.scope, tabsAnatomy.indicator), props)} />
+})
+
+export const Tabs = { Root, List, Trigger, Content, Indicator }

package/packages/react/src/toast/context.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+export type ToastPublishOptions = {
+  id?: string
+  title?: ReactNode
+  description?: ReactNode
+  /** Auto-dismiss after ms (0 = no auto dismiss). Default 5000. */
+  durationMs?: number
+}
+
+export type ToastRecord = ToastPublishOptions & { id: string }
+
+export type ToastStore = {
+  items: ToastRecord[]
+  publish: (options: ToastPublishOptions) => string
+  dismiss: (id: string) => void
+  dismissAll: () => void
+}
+
+export const ToastStoreCtx = createContext<ToastStore | null>(null)
+
+export function useToastStore(): ToastStore {
+  const ctx = useContext(ToastStoreCtx)
+  if (!ctx) {
+    throw new Error('useToast must be used within Toast.Provider')
+  }
+  return ctx
+}

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

@@ -0,0 +1,20 @@
+import { CloseTrigger, Description, Root, Show, Title } from './primitives.js'
+import { ToastProvider, ToastViewport, useToast } from './provider.js'
+
+export type { ToastRootProps } from './primitives.js'
+export type { ToastPublishOptions, ToastRecord, ToastStore } from './context.js'
+export type { ToastPlacement, ToastProviderProps, ToastViewportProps } from './provider.js'
+export { useToastStore } from './context.js'
+export { ToastItem } from './toast-item.js'
+
+export const Toast = {
+  Provider: ToastProvider,
+  Viewport: ToastViewport,
+  Root,
+  Title,
+  Description,
+  CloseTrigger,
+  Show,
+}
+
+export { useToast }

package/packages/react/src/toast/primitives.tsx

@@ -0,0 +1,129 @@
+import { toastAnatomy, partAttrs } from '@aeon-ui/core'
+import { toastMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface ToastContextValue {
+  visible: boolean
+  send: ReturnType<typeof useAeonMachine<typeof toastMachine>>[1]
+  titleId: string
+}
+
+const ToastCtx = createContext<ToastContextValue | null>(null)
+
+function useToastCtx() {
+  const ctx = useContext(ToastCtx)
+  if (!ctx) throw new Error('Toast parts must be used within Toast.Root')
+  return ctx
+}
+
+export interface ToastRootProps {
+  durationMs?: number
+  defaultVisible?: boolean
+  onVisibleChange?: (visible: boolean) => void
+  children?: ReactNode
+  className?: string
+}
+
+export const Root = forwardRef<HTMLDivElement, ToastRootProps>(function ToastRoot(
+  { durationMs = 5000, defaultVisible = false, onVisibleChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(toastMachine, { input: { durationMs } })
+  const visible = snapshot.matches('visible')
+  const titleId = useId()
+
+  useEffect(() => {
+    if (defaultVisible) send({ type: 'SHOW' })
+  }, [defaultVisible, send])
+
+  useEffect(() => {
+    onVisibleChange?.(visible)
+  }, [visible, onVisibleChange])
+
+  const value = useMemo(() => ({ visible, send, titleId }), [visible, send, titleId])
+
+  return (
+    <ToastCtx.Provider value={value}>
+      <div
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        {...mergeProps(
+          partAttrs(toastAnatomy.scope, toastAnatomy.root, { state: visible ? 'visible' : 'hidden' }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+        className={className}
+        hidden={!visible}
+      >
+        {visible ? children : null}
+      </div>
+    </ToastCtx.Provider>
+  )
+})
+
+export const Title = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(function ToastTitle(
+  props,
+  ref,
+) {
+  const { titleId } = useToastCtx()
+  return (
+    <p ref={ref} id={titleId} {...mergeProps(partAttrs(toastAnatomy.scope, toastAnatomy.title), props)} />
+  )
+})
+
+export const Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function ToastDescription(props, ref) {
+    return <p ref={ref} {...mergeProps(partAttrs(toastAnatomy.scope, toastAnatomy.description), props)} />
+  },
+)
+
+export const CloseTrigger = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function ToastCloseTrigger({ onClick, children, ...rest }, ref) {
+    const { send } = useToastCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label={typeof children === 'string' ? undefined : 'Dismiss'}
+        {...mergeProps(
+          partAttrs(toastAnatomy.scope, toastAnatomy.closeTrigger),
+          {
+            onClick: (e: MouseEvent<HTMLButtonElement>) => {
+              onClick?.(e)
+              send({ type: 'DISMISS' })
+            },
+          },
+          rest,
+        )}
+      >
+        {children ?? 'Dismiss'}
+      </button>
+    )
+  },
+)
+
+/** Programmatically show a declarative Toast.Root instance. */
+export function Show({ durationMs }: { durationMs?: number }) {
+  const { send } = useToastCtx()
+  useEffect(() => {
+    send({ type: 'SHOW' })
+    if (durationMs !== undefined) {
+      return () => send({ type: 'DISMISS' })
+    }
+  }, [send, durationMs])
+  return null
+}

package/packages/react/src/toast/provider.tsx

@@ -0,0 +1,111 @@
+import { toastAnatomy, partAttrs } from '@aeon-ui/core'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { createPortal } from 'react-dom'
+import { mergeProps } from '../utils/merge-props.js'
+import {
+  ToastStoreCtx,
+  type ToastPublishOptions,
+  type ToastRecord,
+  useToastStore,
+} from './context.js'
+import { ToastItem } from './toast-item.js'
+
+export type ToastPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'
+
+const PLACEMENT_ATTR: Record<ToastPlacement, string> = {
+  'top-start': 'top-start',
+  'top-end': 'top-end',
+  'bottom-start': 'bottom-start',
+  'bottom-end': 'bottom-end',
+}
+
+function nextToastId(): string {
+  return `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+export interface ToastProviderProps {
+  children?: ReactNode
+  /** Max simultaneous toasts (oldest removed). Default 5. */
+  limit?: number
+}
+
+export function ToastProvider({ children, limit = 5 }: ToastProviderProps) {
+  const [items, setItems] = useState<ToastRecord[]>([])
+
+  const dismiss = useCallback((id: string) => {
+    setItems((prev) => prev.filter((t) => t.id !== id))
+  }, [])
+
+  const dismissAll = useCallback(() => {
+    setItems([])
+  }, [])
+
+  const publish = useCallback(
+    (options: ToastPublishOptions) => {
+      const id = options.id ?? nextToastId()
+      const record: ToastRecord = { ...options, id }
+      setItems((prev) => {
+        const without = prev.filter((t) => t.id !== id)
+        const next = [...without, record]
+        return next.length > limit ? next.slice(-limit) : next
+      })
+      return id
+    },
+    [limit],
+  )
+
+  const value = useMemo(
+    () => ({ items, publish, dismiss, dismissAll }),
+    [items, publish, dismiss, dismissAll],
+  )
+
+  return <ToastStoreCtx.Provider value={value}>{children}</ToastStoreCtx.Provider>
+}
+
+export interface ToastViewportProps extends HTMLAttributes<HTMLDivElement> {
+  placement?: ToastPlacement
+}
+
+export function ToastViewport({ placement = 'bottom-end', className, ...rest }: ToastViewportProps) {
+  const { items, dismiss } = useToastStore()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) return null
+
+  return createPortal(
+    <div
+      {...mergeProps(
+        partAttrs(toastAnatomy.scope, toastAnatomy.viewport, {
+          state: items.length > 0 ? 'active' : 'idle',
+        }),
+        {
+          'data-placement': PLACEMENT_ATTR[placement],
+        },
+        rest,
+      )}
+      className={className}
+    >
+      {items.map((item) => (
+        <ToastItem key={item.id} item={item} onExited={dismiss} />
+      ))}
+    </div>,
+    document.body,
+  )
+}
+
+/** Imperative toast API — requires `Toast.Provider` ancestor. */
+export function useToast() {
+  const { publish, dismiss, dismissAll } = useToastStore()
+  return { publish, dismiss, dismissAll }
+}

package/packages/react/src/toast/toast-item.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import type { ToastRecord } from './context.js'
+import { CloseTrigger, Description, Root, Title } from './primitives.js'
+
+export type ToastItemProps = HTMLAttributes<HTMLDivElement> & {
+  item: ToastRecord
+  onExited: (id: string) => void
+}
+
+export const ToastItem = forwardRef<HTMLDivElement, ToastItemProps>(function ToastItem(
+  { item, onExited, className, ...rest },
+  ref,
+) {
+  const { id, title, description, durationMs } = item
+
+  return (
+    <Root
+      ref={ref}
+      className={className}
+      defaultVisible
+      durationMs={durationMs ?? 5000}
+      onVisibleChange={(visible) => {
+        if (!visible) onExited(id)
+      }}
+      {...rest}
+    >
+      {title ? <Title>{title}</Title> : null}
+      {description ? <Description>{description}</Description> : null}
+      <CloseTrigger />
+    </Root>
+  )
+})

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

@@ -0,0 +1,191 @@
+import { tooltipAnatomy, partAttrs } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface TooltipContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  triggerId: string
+  contentId: string
+  scheduleShow: () => void
+  scheduleHide: () => void
+  hideNow: () => void
+  showOnFocus: boolean
+}
+
+const TooltipCtx = createContext<TooltipContextValue | null>(null)
+
+function useTooltipCtx() {
+  const ctx = useContext(TooltipCtx)
+  if (!ctx) throw new Error('Tooltip parts must be used within Tooltip.Root')
+  return ctx
+}
+
+export interface TooltipRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  openDelay?: number
+  closeDelay?: number
+  /** Focus after click/tap can leave tooltips open; disable for dense click targets. */
+  showOnFocus?: boolean
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
+  {
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    openDelay = 400,
+    closeDelay = 100,
+    showOnFocus = true,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen)
+  const resolvedOpen = open ?? uncontrolled
+  const showTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const triggerId = useId()
+  const contentId = useId()
+
+  const setOpen = (next: boolean) => {
+    if (open === undefined) setUncontrolled(next)
+    onOpenChange?.(next)
+  }
+
+  useEffect(() => {
+    onOpenChange?.(resolvedOpen)
+  }, [resolvedOpen, onOpenChange])
+
+  const hideNow = () => {
+    if (showTimer.current !== undefined) clearTimeout(showTimer.current)
+    if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
+    setOpen(false)
+  }
+
+  const scheduleShow = () => {
+    if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
+    showTimer.current = setTimeout(() => setOpen(true), openDelay)
+  }
+
+  const scheduleHide = () => {
+    if (showTimer.current !== undefined) clearTimeout(showTimer.current)
+    if (closeDelay <= 0) {
+      setOpen(false)
+      return
+    }
+    hideTimer.current = setTimeout(() => setOpen(false), closeDelay)
+  }
+
+  const value = useMemo(
+    () => ({
+      open: resolvedOpen,
+      setOpen,
+      triggerId,
+      contentId,
+      scheduleShow,
+      scheduleHide,
+      hideNow,
+      showOnFocus,
+    }),
+    [resolvedOpen, triggerId, contentId, openDelay, closeDelay, showOnFocus],
+  )
+
+  return (
+    <TooltipCtx.Provider value={value}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(tooltipAnatomy.scope, tooltipAnatomy.root, {
+            state: resolvedOpen ? 'open' : 'closed',
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </TooltipCtx.Provider>
+  )
+})
+
+const Trigger = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function TooltipTrigger(
+  props,
+  ref,
+) {
+  const { open, triggerId, contentId, scheduleShow, scheduleHide, hideNow, showOnFocus } =
+    useTooltipCtx()
+  return (
+    <span
+      ref={ref}
+      id={triggerId}
+      tabIndex={0}
+      aria-describedby={open ? contentId : undefined}
+      {...mergeProps(
+        partAttrs(tooltipAnatomy.scope, tooltipAnatomy.trigger, { state: open ? 'open' : 'closed' }),
+        {
+          onMouseEnter: scheduleShow,
+          onMouseLeave: scheduleHide,
+          onFocus: showOnFocus ? scheduleShow : undefined,
+          onBlur: showOnFocus ? scheduleHide : undefined,
+          /* Dismiss on press only for focus-driven tooltips; on dense click targets
+             pointerdown-dismiss races the child button click and drops the event. */
+          onPointerDown: showOnFocus ? hideNow : undefined,
+        },
+        props,
+      )}
+    />
+  )
+})
+
+const Positioner = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TooltipPositioner(
+  props,
+  ref,
+) {
+  const { open } = useTooltipCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(tooltipAnatomy.scope, tooltipAnatomy.positioner, { state: 'open' }), props)}
+    />
+  )
+})
+
+const Content = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TooltipContent(props, ref) {
+  const { open, contentId } = useTooltipCtx()
+  if (!open) return null
+  return (
+    <div
+      ref={ref}
+      id={contentId}
+      role="tooltip"
+      {...mergeProps(partAttrs(tooltipAnatomy.scope, tooltipAnatomy.content, { state: 'open' }), props)}
+    />
+  )
+})
+
+const Arrow = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function TooltipArrow(props, ref) {
+  const { open } = useTooltipCtx()
+  if (!open) return null
+  return <div ref={ref} {...mergeProps(partAttrs(tooltipAnatomy.scope, tooltipAnatomy.arrow), props)} />
+})
+
+export const Tooltip = { Root, Trigger, Positioner, Content, Arrow }

package/packages/react/src/utils/merge-props.ts

@@ -0,0 +1,24 @@
+export function mergeProps(...parts: Array<object | undefined>): Record<string, unknown> {
+  const result: Record<string, unknown> = {}
+  for (const props of parts) {
+    if (!props) continue
+    for (const [key, value] of Object.entries(props)) {
+      if (key === 'className') {
+        result.className = [result.className, value].filter(Boolean).join(' ')
+      } else if (
+        key.startsWith('on') &&
+        typeof value === 'function' &&
+        typeof result[key] === 'function'
+      ) {
+        const prev = result[key] as (...args: unknown[]) => void
+        result[key] = (...args: unknown[]) => {
+          prev(...args)
+          ;(value as (...args: unknown[]) => void)(...args)
+        }
+      } else {
+        result[key] = value
+      }
+    }
+  }
+  return result
+}

package/packages/react/tsconfig.json

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

package/packages/react/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    include: ['src/**/*.test.tsx'],
+    setupFiles: ['./vitest.setup.ts'],
+  },
+})

package/packages/react/vitest.setup.ts

@@ -0,0 +1,5 @@
+import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(() => cleanup())