aeon-ui-engine 1.0.3 → 1.2.0

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

@@ -0,0 +1,110 @@
+import { identityAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { createContext, forwardRef, useContext, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface IdentityContextValue {
+  size: 'sm' | 'md' | 'lg'
+}
+
+const IdentityCtx = createContext<IdentityContextValue | null>(null)
+
+function useIdentityCtx() {
+  const ctx = useContext(IdentityCtx)
+  if (!ctx) throw new Error('Identity parts must be used within Identity.Root')
+  return ctx
+}
+
+export interface IdentityRootProps extends HTMLAttributes<HTMLElement> {
+  as?: 'div' | 'a' | 'button'
+  size?: 'sm' | 'md' | 'lg'
+  children?: ReactNode
+}
+
+/**
+ * Identity — avatar + title + subtitle strip.
+ * Presentational compound; maximize width via truncate (`min-w-0`).
+ */
+const Root = forwardRef<HTMLElement, IdentityRootProps>(function IdentityRoot(
+  { as: Tag = 'div', size = 'md', children, ...rest },
+  ref,
+) {
+  return (
+    <IdentityCtx.Provider value={{ size }}>
+      <Tag
+        ref={ref as never}
+        data-aeon-size={size}
+        {...mergeProps(scopeAttrs(identityAnatomy.scope, identityAnatomy.root), rest)}
+      >
+        {children}
+      </Tag>
+    </IdentityCtx.Provider>
+  )
+})
+
+const AvatarSlot = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentityAvatar(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.avatar), props)}
+      />
+    )
+  },
+)
+
+const Title = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function IdentityTitle(
+  props,
+  ref,
+) {
+  useIdentityCtx()
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.title), props)}
+    />
+  )
+})
+
+const Subtitle = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentitySubtitle(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.subtitle), props)}
+      />
+    )
+  },
+)
+
+const Meta = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function IdentityMeta(
+  props,
+  ref,
+) {
+  useIdentityCtx()
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.meta), props)} />
+  )
+})
+
+const Trailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentityTrailing(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.trailing), props)}
+      />
+    )
+  },
+)
+
+export const Identity = {
+  Root,
+  Avatar: AvatarSlot,
+  Title,
+  Subtitle,
+  Meta,
+  Trailing,
+}

package/packages/react/src/index.ts

@@ -2,6 +2,8 @@ export * from './button/index.js'
 export * from './switch/index.js'
 export * from './checkbox/index.js'
 export * from './dialog/index.js'
+export * from './prompt/index.js'
+export * from './status-banner/index.js'
 export * from './tabs/index.js'
 export * from './separator/index.js'
 export * from './progress/index.js'
@@ -18,6 +20,23 @@ export * from './popover/index.js'
 export * from './menu/index.js'
 export * from './tooltip/index.js'
 export * from './toast/index.js'
+export * from './theme-switcher/index.js'
 export * from './avatar/index.js'
+export * from './identity/index.js'
+export * from './metric-strip/index.js'
+export * from './list-row/index.js'
+export * from './entry/index.js'
+export * from './conversation/index.js'
+export * from './thread/index.js'
+export * from './composer/index.js'
+export * from './profile-header/index.js'
+export * from './bar/index.js'
+export * from './panel/index.js'
+export * from './app-shell/index.js'
+export * from './app-nav/index.js'
+export * from './content/index.js'
+export * from './nav/index.js'
+export * from './sticky-bar/index.js'
 export { useAeonMachine } from './hooks/use-aeon-machine.js'
 export { useLayoutMode } from './hooks/use-layout-mode.js'
+export { useFitText } from './hooks/use-fit-text.js'

package/packages/react/src/list-row/index.tsx

@@ -0,0 +1,80 @@
+import { listRowAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export interface ListRowRootProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: 'button' | 'div' | 'a'
+  children?: ReactNode
+}
+
+/**
+ * ListRow — settings / account menu row.
+ * Leading icon · label · optional description · trailing control.
+ * Full-width hit target (~h-12).
+ */
+const Root = forwardRef<HTMLElement, ListRowRootProps>(function ListRowRoot(
+  { as: Tag = 'button', type, children, ...rest },
+  ref,
+) {
+  const buttonType = Tag === 'button' ? (type ?? 'button') : undefined
+  return (
+    <Tag
+      ref={ref as never}
+      type={buttonType as never}
+      {...mergeProps(scopeAttrs(listRowAnatomy.scope, listRowAnatomy.root), rest)}
+    >
+      {children}
+    </Tag>
+  )
+})
+
+const Leading = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ListRowLeading(
+  props,
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.leading), props)}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ListRowLabel(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.label), props)} />
+  )
+})
+
+const Description = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function ListRowDescription(props, ref) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.description), props)}
+      />
+    )
+  },
+)
+
+const Trailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function ListRowTrailing(props, ref) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.trailing), props)}
+      />
+    )
+  },
+)
+
+export const ListRow = {
+  Root,
+  Leading,
+  Label,
+  Description,
+  Trailing,
+}

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,
+}