aeon-ui-engine 1.0.0

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

@@ -0,0 +1,122 @@
+import { avatarAnatomy, partAttrs } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type ReactNode,
+  type SyntheticEvent,
+} from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type AvatarStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+interface AvatarContextValue {
+  status: AvatarStatus
+  setStatus: (status: AvatarStatus) => void
+}
+
+const AvatarCtx = createContext<AvatarContextValue | null>(null)
+
+function useAvatarCtx() {
+  const ctx = useContext(AvatarCtx)
+  if (!ctx) throw new Error('Avatar parts must be used within Avatar.Root')
+  return ctx
+}
+
+export interface AvatarRootProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLSpanElement, AvatarRootProps>(function AvatarRoot(
+  { children, className, ...rest },
+  ref,
+) {
+  const [status, setStatus] = useState<AvatarStatus>('idle')
+  const value = useMemo(() => ({ status, setStatus }), [status])
+
+  return (
+    <AvatarCtx.Provider value={value}>
+      <span
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(avatarAnatomy.scope, avatarAnatomy.root, { state: status }),
+          rest,
+        )}
+      >
+        {children}
+      </span>
+    </AvatarCtx.Provider>
+  )
+})
+
+const Image = forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement>>(function AvatarImage(
+  { src, alt, onLoad, onError, className, ...rest },
+  ref,
+) {
+  const { status, setStatus } = useAvatarCtx()
+
+  useEffect(() => {
+    if (!src) setStatus('idle')
+    else setStatus('loading')
+  }, [src, setStatus])
+
+  const handleLoad = useCallback(
+    (e: SyntheticEvent<HTMLImageElement>) => {
+      onLoad?.(e)
+      setStatus('loaded')
+    },
+    [onLoad, setStatus],
+  )
+
+  const handleError = useCallback(
+    (e: SyntheticEvent<HTMLImageElement>) => {
+      onError?.(e)
+      setStatus('error')
+    },
+    [onError, setStatus],
+  )
+
+  return (
+    <img
+      ref={ref}
+      src={src}
+      alt={alt}
+      hidden={status !== 'loaded'}
+      {...partAttrs(avatarAnatomy.scope, avatarAnatomy.image, { state: status })}
+      className={className}
+      {...mergeProps(rest, { onLoad: handleLoad, onError: handleError })}
+    />
+  )
+})
+
+const Fallback = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function AvatarFallback(
+  { className, ...rest },
+  ref,
+) {
+  const { status } = useAvatarCtx()
+  const show = status !== 'loaded'
+
+  return (
+    <span
+      ref={ref}
+      hidden={!show}
+      {...partAttrs(avatarAnatomy.scope, avatarAnatomy.fallback, { state: status })}
+      className={className}
+      {...rest}
+    />
+  )
+})
+
+export const Avatar = {
+  Root,
+  Image,
+  Fallback,
+}

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

@@ -0,0 +1,70 @@
+import { buttonAnatomy, partAttrs } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+/** Action button lifecycle — see STATES.md and `buttonLifecycleMachine`. */
+export type ButtonStatus = 'idle' | 'pending' | 'success' | 'failure' | 'disabled'
+
+export interface ButtonRootProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'solid' | 'outline' | 'ghost'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  /** Machine-aligned lifecycle; `disabled` prop overrides to `disabled`. */
+  status?: ButtonStatus
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(
+  { variant = 'solid', size = 'md', disabled, status = 'idle', children, className, ...rest },
+  ref,
+) {
+  const resolvedStatus: ButtonStatus = disabled ? 'disabled' : status
+  const isBusy = resolvedStatus === 'pending'
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      disabled={disabled || isBusy || resolvedStatus === 'disabled'}
+      aria-busy={isBusy || undefined}
+      className={className}
+      data-aeon-variant={variant}
+      data-aeon-size={size}
+      {...mergeProps(
+        partAttrs(buttonAnatomy.scope, buttonAnatomy.root, {
+          state: resolvedStatus,
+          disabled: Boolean(disabled || resolvedStatus === 'disabled'),
+        }),
+        rest,
+      )}
+    >
+      {children}
+    </button>
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function ButtonLabel(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...partAttrs(buttonAnatomy.scope, buttonAnatomy.label)} {...props} />
+})
+
+const Icon = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function ButtonIcon(
+  props,
+  ref,
+) {
+  return <span ref={ref} {...partAttrs(buttonAnatomy.scope, buttonAnatomy.icon)} {...props} />
+})
+
+const Group = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ButtonGroup(
+  { children, ...rest },
+  ref,
+) {
+  return (
+    <div ref={ref} {...partAttrs(buttonAnatomy.scope, buttonAnatomy.group)} {...rest}>
+      {children}
+    </div>
+  )
+})
+
+export const Button = { Root, Label, Icon, Group }

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

@@ -0,0 +1,180 @@
+import { checkboxAnatomy, partAttrs } from '@aeon-ui/core'
+import { toggleMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type KeyboardEvent,
+  type MouseEvent,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface CheckboxContextValue {
+  checked: boolean
+  disabled: boolean
+  controlled: boolean
+  onCheckedChange?: (checked: boolean) => void
+  send: ReturnType<typeof useAeonMachine<typeof toggleMachine>>[1]
+}
+
+const CheckboxCtx = createContext<CheckboxContextValue | null>(null)
+
+function useCheckboxCtx() {
+  const ctx = useContext(CheckboxCtx)
+  if (!ctx) throw new Error('Checkbox parts must be used within Checkbox.Root')
+  return ctx
+}
+
+export interface CheckboxRootProps {
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLLabelElement, CheckboxRootProps>(function CheckboxRoot(
+  { checked, defaultChecked = false, disabled = false, onCheckedChange, children, className, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(toggleMachine, {
+    input: { checked: defaultChecked, disabled },
+  })
+
+  const resolvedChecked = checked ?? snapshot.context.checked
+
+  useEffect(() => {
+    if (checked === undefined) onCheckedChange?.(resolvedChecked)
+  }, [resolvedChecked, onCheckedChange, checked])
+
+  useEffect(() => {
+    if (checked !== undefined) send({ type: 'SET_CHECKED', checked })
+  }, [checked, send])
+
+  const value = useMemo(
+    () => ({
+      checked: resolvedChecked,
+      disabled,
+      controlled: checked !== undefined,
+      onCheckedChange,
+      send,
+    }),
+    [resolvedChecked, disabled, checked, onCheckedChange, send],
+  )
+
+  return (
+    <CheckboxCtx.Provider value={value}>
+      <label
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(checkboxAnatomy.scope, checkboxAnatomy.root, {
+            state: resolvedChecked ? 'checked' : 'unchecked',
+            disabled,
+          }),
+          rest as ButtonHTMLAttributes<HTMLLabelElement>,
+        )}
+      >
+        {children}
+      </label>
+    </CheckboxCtx.Provider>
+  )
+})
+
+const Control = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function CheckboxControl(
+  { className, onClick, ...rest },
+  ref,
+) {
+  const { checked, disabled, controlled, onCheckedChange, send } = useCheckboxCtx()
+
+  return (
+    <span
+      ref={ref}
+      role="checkbox"
+      aria-checked={checked}
+      aria-disabled={disabled || undefined}
+      tabIndex={disabled ? -1 : 0}
+      className={className}
+      {...mergeProps(
+        partAttrs(checkboxAnatomy.scope, checkboxAnatomy.control, {
+          state: checked ? 'checked' : 'unchecked',
+          disabled,
+        }),
+        {
+          onClick: (e: MouseEvent<HTMLSpanElement>) => {
+            onClick?.(e)
+            if (!disabled) {
+              const next = !checked
+              if (controlled) onCheckedChange?.(next)
+              else send({ type: 'TOGGLE' })
+            }
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+              e.preventDefault()
+              if (!disabled) {
+                const next = !checked
+                if (controlled) onCheckedChange?.(next)
+                else send({ type: 'TOGGLE' })
+              }
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Indicator = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function CheckboxIndicator(
+  props,
+  ref,
+) {
+  const { checked } = useCheckboxCtx()
+  if (!checked) return null
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(
+        partAttrs(checkboxAnatomy.scope, checkboxAnatomy.indicator, { state: 'checked' }),
+        props,
+      )}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, ButtonHTMLAttributes<HTMLSpanElement>>(function CheckboxLabel(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(checkboxAnatomy.scope, checkboxAnatomy.label), props)} />
+  )
+})
+
+const HiddenInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(function CheckboxHiddenInput(
+  props,
+  ref,
+) {
+  const { checked } = useCheckboxCtx()
+  return (
+    <input
+      ref={ref}
+      type="checkbox"
+      checked={checked}
+      readOnly
+      tabIndex={-1}
+      aria-hidden
+      {...mergeProps(partAttrs(checkboxAnatomy.scope, checkboxAnatomy.hiddenInput), props)}
+    />
+  )
+})
+
+export const Checkbox = { Root, Control, Indicator, Label, HiddenInput }