aeon-ui-engine 1.0.0 → 1.0.1

package/packages/panda/styled-system/styles.css

@@ -336,6 +336,21 @@
     pointer-events: none;
 }
 
+  @keyframes aeonProgressIndeterminate {
+    0% {
+      transform: translateX(-100%);
+}
+
+    100% {
+      transform: translateX(250%);
+}
+}
+
+  [data-aeon-scope="radioGroup"] [data-aeon-part="item"] {
+    display: inline-flex;
+    align-items: center;
+}
+
   *,::before,::after,::backdrop {
     --blur: /*-*/ /*-*/;
     --brightness: /*-*/ /*-*/;
@@ -1239,7 +1254,7 @@
       transition-duration: var(--durations-normal);
 }
 
-    .aeonCheckbox__control[data-aeon-state*=checked] {
+    .aeonCheckbox__control[data-aeon-state~="checked"] {
       background: var(--colors-accent);
       border-color: var(--colors-accent);
 }
@@ -1640,6 +1655,36 @@
       background: var(--colors-border);
 }
 
+    .aeonPinInput__root {
+      display: inline-flex;
+      gap: var(--spacing-gap-sm);
+}
+
+    .aeonPinInput__input {
+      width: 2.5rem;
+      height: 2.75rem;
+      text-align: center;
+      border-radius: var(--radii-md);
+      background: var(--colors-surface);
+      color: var(--colors-fg);
+      outline: var(--borders-none);
+      font-size: var(--font-sizes-lg);
+      font-family: var(--fonts-ui);
+      font-weight: var(--font-weights-semibold);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-border);
+}
+
+    .aeonPinInput__input[data-aeon-state=filled] {
+      border-color: var(--colors-accent);
+}
+
+    .aeonPinInput__input:is(:focus-visible, [data-focus-visible]) {
+      box-shadow: var(--shadows-focus-ring);
+      border-color: var(--colors-accent);
+}
+
     .aeonPopover__root {
       position: relative;
       display: inline-block;
@@ -1701,6 +1746,108 @@
       color: var(--colors-fg);
 }
 
+    .aeonProgress__root {
+      display: flex;
+      gap: var(--spacing-gap-sm);
+      width: 100%;
+      flex-direction: column;
+      font-family: var(--fonts-ui);
+}
+
+    .aeonProgress__root[data-aeon-state=loading] .aeonProgress__range {
+      width: 40% !important;
+      animation: aeonProgressIndeterminate 1.2s ease-in-out infinite;
+}
+
+    .aeonProgress__track {
+      position: relative;
+      width: 100%;
+      height: 0.5rem;
+      border-radius: var(--radii-full);
+      background: var(--colors-surface);
+      overflow: hidden;
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-border);
+}
+
+    .aeonProgress__range {
+      height: 100%;
+      border-radius: var(--radii-full);
+      background: var(--colors-accent);
+      --transition-prop: width;
+      transition-property: width;
+      --transition-duration: var(--durations-normal);
+      transition-duration: var(--durations-normal);
+}
+
+    .aeonProgress__label {
+      color: var(--colors-muted);
+      font-size: var(--font-sizes-sm);
+      line-height: var(--line-heights-snug);
+}
+
+    .aeonRadioGroup__root {
+      display: flex;
+      gap: var(--spacing-gap-sm);
+      flex-direction: column;
+      font-family: var(--fonts-ui);
+}
+
+    .aeonRadioGroup__item {
+      gap: var(--spacing-gap-lg);
+      vertical-align: middle;
+      font-family: var(--fonts-ui);
+      line-height: 1.5;
+}
+
+    .aeonRadioGroup__item,.aeonRadioGroup__itemControl {
+      display: inline-flex;
+      cursor: pointer;
+      align-items: center;
+}
+
+    .aeonRadioGroup__itemControl {
+      width: 1.5rem;
+      height: 1.5rem;
+      border-radius: var(--radii-full);
+      background: var(--colors-surface);
+      outline: var(--borders-none);
+      justify-content: center;
+      flex-shrink: 0;
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-border);
+      --transition-prop: background-color, border-color;
+      transition-property: background-color, border-color;
+      --transition-duration: var(--durations-normal);
+      transition-duration: var(--durations-normal);
+}
+
+    .aeonRadioGroup__itemControl[data-aeon-state=selected] {
+      border-color: var(--colors-accent);
+}
+
+    .aeonRadioGroup__itemControl:is(:focus-visible, [data-focus-visible]) {
+      box-shadow: var(--shadows-focus-ring);
+}
+
+    .aeonRadioGroup__itemIndicator {
+      width: 0.625rem;
+      height: 0.625rem;
+      border-radius: var(--radii-full);
+      background: var(--colors-accent);
+}
+
+    .aeonRadioGroup__itemLabel {
+      color: var(--colors-fg);
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: pointer;
+      font-size: var(--font-sizes-sm);
+      line-height: 1.5;
+}
+
     .aeonScroll__root {
       display: flex;
       gap: var(--spacing-gap-sm);
@@ -1733,6 +1880,7 @@
       display: inline-flex;
       gap: var(--spacing-gap-sm);
       width: 100%;
+      box-sizing: border-box;
       min-height: 2rem;
       padding-block: var(--spacing-control-y);
       padding-inline: var(--spacing-control-x);
@@ -1787,6 +1935,7 @@
       border-right: 2px solid;
       border-bottom: 2px solid;
       transform: rotate(45deg) translateY(-1px);
+      transform-origin: center;
       flex-shrink: 0;
       border-color: var(--colors-muted);
       --transition-prop: transform;
@@ -1843,6 +1992,73 @@
       color: var(--colors-accent);
 }
 
+    .aeonSeparator__root {
+      background: var(--colors-border);
+      border: var(--borders-none);
+      flex-shrink: 0;
+}
+
+    .aeonSlider__root {
+      position: relative;
+      display: flex;
+      gap: var(--spacing-gap-sm);
+      width: 100%;
+      min-width: 8rem;
+      flex-direction: column;
+}
+
+    .aeonSlider__track {
+      position: relative;
+      height: 0.35rem;
+      border-radius: var(--radii-full);
+      background: var(--colors-surface);
+      cursor: pointer;
+      touch-action: none;
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-border);
+}
+
+    .aeonSlider__range {
+      height: 100%;
+      background: var(--colors-accent-dim);
+      pointer-events: none;
+      top: var(--spacing-0);
+      left: var(--spacing-0);
+}
+
+    .aeonSlider__range,.aeonSlider__thumb {
+      position: absolute;
+      border-radius: var(--radii-full);
+}
+
+    .aeonSlider__thumb {
+      width: 1rem;
+      height: 1rem;
+      background: var(--colors-accent);
+      transform: translate(-50%, -50%);
+      cursor: grab;
+      box-shadow: var(--shadows-panel);
+      top: 50%;
+      border-width: 2px;
+      border-style: solid;
+      border-color: var(--colors-surface-raised);
+}
+
+    .aeonSlider__thumb[data-aeon-state=dragging] {
+      cursor: grabbing;
+}
+
+    .aeonSlider__thumb:is(:focus-visible, [data-focus-visible]) {
+      box-shadow: var(--shadows-focus-ring);
+}
+
+    .aeonSlider__valueText {
+      color: var(--colors-muted);
+      font-size: var(--font-sizes-xs);
+      font-family: var(--fonts-ui);
+}
+
     .aeonSwitch__root {
       gap: var(--spacing-gap-lg);
       font-family: var(--fonts-ui);
@@ -1880,7 +2096,7 @@
       transition-duration: var(--durations-normal);
 }
 
-    .aeonSwitch__control[data-aeon-state*=checked] {
+    .aeonSwitch__control[data-aeon-state~="checked"] {
       background: var(--colors-accent-dim);
       border-color: var(--colors-accent);
 }
@@ -1902,7 +2118,7 @@
       transition-duration: var(--durations-normal);
 }
 
-    .aeonSwitch__thumb[data-aeon-state*=checked] {
+    .aeonSwitch__thumb[data-aeon-state~="checked"] {
       background: var(--colors-accent);
       margin-left: auto;
 }
@@ -2091,53 +2307,14 @@
   .aeonScroll__viewport--maxW_full {
     max-width: 100%;
 }
-}
-
-@layer utilities{
-
-  .min-h_340 {
-    min-height: 340px;
-}
-
-  .distance_980 {
-    distance: 980px;
-}
-
-  .origin_50\%_36\% {
-    origin: 50% 36%;
-}
 
-  .translate-z_-130 {
-    --translate-z: -130;
-}
-
-  .translate-z_-85 {
-    --translate-z: -85;
-}
-
-  .translate-z_-55 {
-    --translate-z: -55;
-}
-
-  .rotate-y_42 {
-    --rotate-y: 42;
-}
-
-  .rotate-y_-42 {
-    --rotate-y: -42;
-}
-
-  .translate-z_0 {
-    --translate-z: var(--spacing-0);
+  .aeonSeparator__root--orientation_horizontal {
+    width: 100%;
+    height: 1px;
 }
-
-  .rotate-x_56 {
-    --rotate-x: 56;
 }
 
-  .translate-z_28 {
-    --translate-z: var(--spacing-28);
-}
+@layer utilities{
 
   .max-h_sm {
     max-height: var(--sizes-sm);

package/packages/panda/styled-system/types/conditions.d.ts

@@ -214,7 +214,7 @@ export interface Conditions {
 	"_starting": string
 	/** `&[data-aeon-state=selected]` */
 	"_aeonSelected": string
-	/** `&[data-aeon-state*=checked]` */
+	/** `&[data-aeon-state~="checked"]` */
 	"_aeonChecked": string
 	/** `&[data-aeon-state=open]` */
 	"_aeonOpen": string

package/packages/primitives/src/index.ts

@@ -7,3 +7,4 @@ export * from './machines/button.js'
 export * from './machines/field.js'
 export * from './machines/popover.js'
 export * from './machines/toast.js'
+export * from './machines/slider.js'

package/packages/primitives/src/machines/slider.ts

@@ -0,0 +1,93 @@
+import { assign, setup } from 'xstate'
+
+export interface SliderContext {
+  value: number
+  min: number
+  max: number
+  step: number
+  disabled: boolean
+}
+
+export type SliderEvent =
+  | { type: 'SET_VALUE'; value: number }
+  | { type: 'STEP'; delta: number }
+  | { type: 'POINTER_DOWN' }
+  | { type: 'POINTER_UP' }
+  | { type: 'HOME' }
+  | { type: 'END' }
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function snap(value: number, min: number, max: number, step: number) {
+  if (step <= 0) return clamp(value, min, max)
+  const snapped = min + Math.round((value - min) / step) * step
+  return clamp(snapped, min, max)
+}
+
+/** Range control — idle vs dragging interaction regions. */
+export const sliderMachine = setup({
+  types: {
+    context: {} as SliderContext,
+    events: {} as SliderEvent,
+    input: {} as SliderContext,
+  },
+  guards: {
+    notDisabled: ({ context }) => !context.disabled,
+  },
+  actions: {
+    setValue: assign({
+      value: ({ context, event }) =>
+        event.type === 'SET_VALUE'
+          ? snap(event.value, context.min, context.max, context.step)
+          : context.value,
+    }),
+    step: assign({
+      value: ({ context, event }) =>
+        event.type === 'STEP'
+          ? snap(context.value + event.delta, context.min, context.max, context.step)
+          : context.value,
+    }),
+    home: assign({
+      value: ({ context }) => context.min,
+    }),
+    end: assign({
+      value: ({ context }) => context.max,
+    }),
+  },
+}).createMachine({
+  id: 'slider',
+  context: ({ input }) => ({
+    value: snap(input.value ?? input.min, input.min, input.max, input.step),
+    min: input.min,
+    max: input.max,
+    step: input.step,
+    disabled: input.disabled ?? false,
+  }),
+  initial: 'interaction',
+  states: {
+    interaction: {
+      initial: 'idle',
+      states: {
+        idle: {
+          on: {
+            SET_VALUE: { actions: 'setValue', guard: 'notDisabled' },
+            STEP: { actions: 'step', guard: 'notDisabled' },
+            HOME: { actions: 'home', guard: 'notDisabled' },
+            END: { actions: 'end', guard: 'notDisabled' },
+            POINTER_DOWN: { target: 'dragging', guard: 'notDisabled' },
+          },
+        },
+        dragging: {
+          on: {
+            SET_VALUE: { actions: 'setValue' },
+            POINTER_UP: 'idle',
+          },
+        },
+      },
+    },
+  },
+})
+
+export { clamp as clampSliderValue, snap as snapSliderValue }

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

@@ -69,6 +69,13 @@ const Root = forwardRef<HTMLLabelElement, CheckboxRootProps>(function CheckboxRo
     [resolvedChecked, disabled, checked, onCheckedChange, send],
   )
 
+  const toggle = () => {
+    if (disabled) return
+    const next = !resolvedChecked
+    if (checked !== undefined) onCheckedChange?.(next)
+    else send({ type: 'TOGGLE' })
+  }
+
   return (
     <CheckboxCtx.Provider value={value}>
       <label
@@ -79,6 +86,13 @@ const Root = forwardRef<HTMLLabelElement, CheckboxRootProps>(function CheckboxRo
             state: resolvedChecked ? 'checked' : 'unchecked',
             disabled,
           }),
+          {
+            onClick: (e: MouseEvent<HTMLLabelElement>) => {
+              const target = e.target as HTMLElement
+              if (target.closest(`[data-aeon-part="${checkboxAnatomy.control}"]`)) return
+              toggle()
+            },
+          },
           rest as ButtonHTMLAttributes<HTMLLabelElement>,
         )}
       >

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'