aeon-ui-engine 1.0.0

package/packages/panda/panda.config.ts

@@ -0,0 +1,229 @@
+import { defineConfig } from '@pandacss/dev'
+import {
+  accordionRecipe,
+  badgeRecipe,
+  buttonRecipe,
+  buttonGroupRecipe,
+  asyncRegionRecipe,
+  fieldRecipe,
+  scrollRegionRecipe,
+  selectRecipe,
+  comboboxRecipe,
+  checkboxRecipe,
+  dialogRecipe,
+  switchRecipe,
+  tabsRecipe,
+  menuRecipe,
+  popoverRecipe,
+  tooltipRecipe,
+  toastRecipe,
+} from './src/recipes/index.js'
+import { semanticTokens } from './src/theme/semantic-tokens.js'
+import { tokens } from './src/theme/tokens.js'
+
+export default defineConfig({
+  preflight: true,
+  include: [
+    '../ui/src/**/*.{ts,tsx}',
+    '../react/src/**/*.{ts,tsx}',
+    '../../apps/demo/src/**/*.{ts,tsx}',
+  ],
+  exclude: [],
+  outdir: 'styled-system',
+  importMap: '@aeon-ui/panda/styled-system',
+  jsxFramework: 'react',
+  /* Emit every recipe variant — consumers pass size/variant at runtime (e.g. header xs). */
+  staticCss: {
+    recipes: {
+      aeonButton: [{ size: ['*'], variant: ['*'] }],
+      aeonBadge: [{ variant: ['*'] }],
+    },
+  },
+  conditions: {
+    extend: {
+      aeonSelected: '&[data-aeon-state=selected]',
+      aeonChecked: '&[data-aeon-state*=checked]',
+      aeonOpen: '&[data-aeon-state=open]',
+      aeonClosed: '&[data-aeon-state=closed]',
+      aeonPending: '&[data-aeon-state=pending]',
+      aeonSuccess: '&[data-aeon-state=success]',
+      aeonFailure: '&[data-aeon-state=failure]',
+      aeonInvalid: '&[data-aeon-state*=invalid]',
+    },
+  },
+  theme: {
+    extend: {
+      tokens,
+      semanticTokens,
+      recipes: {
+        aeonButton: buttonRecipe,
+        aeonButtonGroup: buttonGroupRecipe,
+        aeonBadge: badgeRecipe,
+      },
+      slotRecipes: {
+        aeonAccordion: accordionRecipe,
+        aeonDialog: dialogRecipe,
+        aeonTabs: tabsRecipe,
+        aeonSwitch: switchRecipe,
+        aeonCheckbox: checkboxRecipe,
+        aeonAsync: asyncRegionRecipe,
+        aeonField: fieldRecipe,
+        aeonScroll: scrollRegionRecipe,
+        aeonSelect: selectRecipe,
+        aeonCombobox: comboboxRecipe,
+        aeonMenu: menuRecipe,
+        aeonPopover: popoverRecipe,
+        aeonTooltip: tooltipRecipe,
+        aeonToast: toastRecipe,
+      },
+    },
+  },
+  globalCss: {
+    /* Theme palettes: import theme-runtime.css after styles.css (unlayered; tokens must not set aeon colors). */
+    'html, body, #root': {
+      minHeight: '100%',
+    },
+    body: {
+      margin: '0',
+      bg: 'bg',
+      color: 'fg',
+      fontFamily: 'body',
+      WebkitFontSmoothing: 'antialiased',
+    },
+    ':root': {
+      /* Legacy aliases for landing.css and external consumers */
+      '--aeon-font': "var(--fonts-ui)",
+      '--aeon-mono': "var(--fonts-mono)",
+      '--aeon-bg': "var(--colors-aeon-bg)",
+      '--aeon-surface': "var(--colors-aeon-surface)",
+      '--aeon-surface-raised': "var(--colors-aeon-surface-raised)",
+      '--aeon-border': "var(--colors-aeon-border)",
+      '--aeon-text': "var(--colors-aeon-text)",
+      '--aeon-muted': "var(--colors-aeon-muted)",
+      '--aeon-accent': "var(--colors-aeon-accent)",
+      '--aeon-accent-dim': "var(--colors-aeon-accent-dim)",
+      '--aeon-danger': "var(--colors-aeon-danger)",
+      '--aeon-radius': "var(--radii-md)",
+      '--aeon-radius-lg': "var(--radii-lg)",
+      '--aeon-shadow': "var(--shadows-panel)",
+      '--aeon-focus': "var(--shadows-focus-ring)",
+      '--aeon-inset-x-sm': "var(--spacing-inset-x-sm)",
+      '--aeon-inset-y-sm': "var(--spacing-inset-y-sm)",
+      '--aeon-inset-x': "var(--spacing-inset-x)",
+      '--aeon-inset-y': "var(--spacing-inset-y)",
+      '--aeon-inset-x-lg': "var(--spacing-inset-x-lg)",
+      '--aeon-inset-y-lg': "var(--spacing-inset-y-lg)",
+      '--aeon-pad-sm': "var(--spacing-pad-sm)",
+      '--aeon-pad-md': "var(--spacing-pad-md)",
+      '--aeon-pad-lg': "var(--spacing-pad-lg)",
+      '--aeon-pad-xl': "var(--spacing-pad-xl)",
+      '--aeon-gap-sm': "var(--spacing-gap-sm)",
+      '--aeon-gap': "var(--spacing-gap)",
+      '--aeon-gap-lg': "var(--spacing-gap-lg)",
+      '--aeon-accordion-gap': "var(--spacing-accordion-gap)",
+      '--aeon-accordion-inset-x': "var(--spacing-accordion-inset-x)",
+      '--aeon-accordion-trigger-y': "var(--spacing-accordion-trigger-y)",
+      '--aeon-accordion-trigger-min-h': "var(--spacing-accordion-trigger-min-h)",
+      '--aeon-accordion-content-y': "var(--spacing-accordion-content-y)",
+      '--aeon-accordion-content-b': "var(--spacing-accordion-content-b)",
+      '--font-display': "var(--fonts-display)",
+      '--font-body': "var(--fonts-body)",
+    },
+    '[data-aeon-scope]': {
+      fontFamily: 'ui',
+      lineHeight: '1.5',
+    },
+    /* Label-wrapped toggles — consistent flex row, no UA button bleed */
+    '[data-aeon-scope="switch"] [data-aeon-part="root"], [data-aeon-scope="checkbox"] [data-aeon-part="root"]':
+      {
+        display: 'inline-flex',
+        alignItems: 'center',
+      },
+    '[data-aeon-scope="switch"] [data-aeon-part="control"], [data-aeon-scope="checkbox"] [data-aeon-part="control"]':
+      {
+        margin: '0',
+        padding: '0',
+      },
+    /* Loose siblings (no Group wrapper) still get breathing room */
+    '[data-aeon-scope="button"][data-aeon-part="group"]': {
+      display: 'inline-flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '0.5rem',
+    },
+    '[data-aeon-scope="button"][data-aeon-part="group"] > [data-aeon-scope="button"][data-aeon-part="root"]': {
+      marginInlineStart: '0',
+    },
+    ':not([data-aeon-part="group"]):not([data-aeon-part="actions"]) > [data-aeon-scope="button"][data-aeon-part="root"] + [data-aeon-scope="button"][data-aeon-part="root"]':
+      {
+        marginInlineStart: '0.5rem',
+      },
+    '[data-aeon-scope="button"][data-aeon-part="root"][data-aeon-state="pending"]': {
+      cursor: 'wait',
+      opacity: '0.85',
+    },
+    '[data-aeon-scope="button"][data-aeon-part="root"][data-aeon-state="success"]': {
+      borderColor: 'accent',
+    },
+    '[data-aeon-scope="button"][data-aeon-part="root"][data-aeon-state="failure"]': {
+      borderColor: 'danger',
+      color: 'danger',
+    },
+    '[data-aeon-part="readout"][data-aeon-state="loading"] [data-aeon-part="readoutRail"]': {
+      bg: 'accent',
+      opacity: '0.7',
+    },
+    '[data-aeon-part="readout"][data-aeon-state="success"] [data-aeon-part="readoutRail"], [data-aeon-part="readout"][data-aeon-state*="success"] [data-aeon-part="readoutRail"]':
+      {
+        bg: 'accent',
+      },
+    '[data-aeon-part="readout"][data-aeon-state="failure"] [data-aeon-part="readoutRail"]': {
+      bg: 'danger',
+    },
+    '[data-aeon-part="readout"][data-aeon-state="empty"] [data-aeon-part="readoutRail"]': {
+      bg: 'muted',
+    },
+    '[data-aeon-part="readout"]': {
+      display: 'flex',
+      alignItems: 'stretch',
+      width: '100%',
+      minHeight: '5.5rem',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'lg',
+      overflow: 'hidden',
+      bg: 'bg',
+    },
+    '[data-aeon-part="readoutRail"]': {
+      flex: '0 0 4px',
+      alignSelf: 'stretch',
+      bg: 'border',
+    },
+    '[data-aeon-part="readoutBody"]': {
+      flex: '1 1 auto',
+      minWidth: '0',
+      display: 'flex',
+      alignItems: 'center',
+      paddingInline: 'padMd',
+      paddingBlock: 'padMd',
+    },
+    '[data-aeon-part="readoutBody"] > *': {
+      margin: '0',
+      maxWidth: '100%',
+      lineHeight: '1.5',
+    },
+    '[data-aeon-part="track"] [data-aeon-part="segment"]': {
+      paddingBlock: '0.75rem',
+      paddingInline: '1.35rem',
+      minWidth: '4.75rem',
+    },
+    '[data-aeon-scope="field"] [data-aeon-part="control"][aria-invalid="true"]': {
+      borderColor: 'danger',
+    },
+    '[data-aeon-scope="field"][data-aeon-state*="submission:pending"] [data-aeon-part="control"]': {
+      opacity: '0.7',
+      pointerEvents: 'none',
+    },
+  },
+})

package/packages/panda/scripts/emit-theme-runtime.ts

@@ -0,0 +1,37 @@
+/**
+ * Panda emits theme rules in @layer base, but @layer tokens resets --colors-aeon-*.
+ * This file is unlayered and imported after styles.css so light/dark actually apply.
+ */
+import { writeFileSync } from 'node:fs'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { buildThemeGlobalCss } from '../src/theme/global-theme-css.js'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const outPath = join(__dirname, '../theme-runtime.css')
+
+function declToCss(prop: string, value: string): string {
+  if (prop === 'colorScheme') return `  color-scheme: ${value};`
+  return `  ${prop}: ${value};`
+}
+
+function rulesToCss(rules: Record<string, Record<string, string | undefined>>): string {
+  const lines = [
+    '/* Generated by scripts/emit-theme-runtime.ts — do not edit */',
+    '/* Import after @aeon-ui/panda/styles.css */',
+    '',
+  ]
+  for (const [selector, decls] of Object.entries(rules)) {
+    lines.push(`${selector} {`)
+    for (const [prop, value] of Object.entries(decls)) {
+      if (value !== undefined) lines.push(declToCss(prop, value))
+    }
+    lines.push('}', '')
+  }
+  return lines.join('\n')
+}
+
+const rules = buildThemeGlobalCss()
+
+writeFileSync(outPath, rulesToCss(rules), 'utf8')
+console.log(`Wrote ${outPath}`)

package/packages/panda/src/recipes/accordion.ts

@@ -0,0 +1,95 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'item', 'itemTrigger', 'itemContent', 'itemIndicator'] as const
+
+export const accordionRecipe = defineSlotRecipe({
+  className: 'aeonAccordion',
+  description: 'Aeon accordion — content stacks with gap (no stacked padding + margins)',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'accordionGap',
+      fontFamily: 'ui',
+    },
+    item: {
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surface',
+      /* No overflow:hidden — it washes out corners when inner separators exist */
+    },
+    itemTrigger: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 'gapLg',
+      textAlign: 'left',
+      fontSize: 'md',
+      fontWeight: 'medium',
+      lineHeight: 'snug',
+      color: 'fg',
+      px: 'accordionInsetX',
+      py: 'accordionTriggerY',
+      minH: 'accordionTriggerMinH',
+      cursor: 'pointer',
+      appearance: 'none',
+      WebkitAppearance: 'none',
+      font: 'inherit',
+      bg: 'surface',
+      transitionProperty: 'background-color',
+      transitionDuration: 'normal',
+      outline: 'none',
+      borderTopLeftRadius: 'md',
+      borderTopRightRadius: 'md',
+      _aeonClosed: {
+        borderBottomLeftRadius: 'md',
+        borderBottomRightRadius: 'md',
+      },
+      _hover: { bg: 'surfaceRaised' },
+      _focusVisible: { boxShadow: 'focusRing' },
+    },
+    itemContent: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      gap: 'gapSm',
+      fontSize: 'sm',
+      color: 'muted',
+      lineHeight: '1.55',
+      bg: 'surface',
+      px: 'accordionInsetX',
+      pt: 'padMd',
+      pb: 'padMd',
+      borderBottomLeftRadius: 'md',
+      borderBottomRightRadius: 'md',
+      /* Children supply their own margins in demos — gap is the only rhythm here */
+      '& > *': {
+        margin: '0',
+      },
+      '& .code-example': {
+        margin: '0',
+      },
+      _before: {
+        content: '""',
+        position: 'absolute',
+        top: '0',
+        left: 'accordionInsetX',
+        right: 'accordionInsetX',
+        height: '1px',
+        bg: 'border',
+      },
+    },
+    itemIndicator: {
+      flexShrink: 0,
+      color: 'muted',
+      fontSize: 'sm',
+      lineHeight: '1',
+      px: '1',
+    },
+  },
+})

package/packages/panda/src/recipes/async.ts

@@ -0,0 +1,76 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const asyncRegionRecipe = defineSlotRecipe({
+  className: 'aeonAsync',
+  description: 'Async data region — track, readout, and actions',
+  slots: ['root', 'track', 'segment', 'readout', 'readoutRail', 'readoutBody', 'actions'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapLg',
+    },
+    track: {
+      '--aeon-state-track-count': '5',
+      containerType: 'inline-size',
+      display: 'grid',
+      gridTemplateColumns: 'repeat(var(--aeon-state-track-count), minmax(0, 1fr))',
+      alignItems: 'stretch',
+      width: '100%',
+      fontFamily: 'mono',
+      fontSize: 'clamp(0.5rem, 3cqi, 0.6875rem)',
+      fontWeight: 'semibold',
+      letterSpacing: 'clamp(0.02em, 0.12cqi, 0.06em)',
+      textTransform: 'uppercase',
+      lineHeight: '1.2',
+    },
+    segment: {
+      minW: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      py: '2.5',
+      px: 'clamp(0.15rem, 2.5cqi, 0.85rem)',
+      color: 'muted',
+      bg: 'bg',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      whiteSpace: 'nowrap',
+    },
+    readout: {
+      display: 'flex',
+      alignItems: 'stretch',
+      width: '100%',
+      minH: '5.5rem',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'lg',
+      overflow: 'hidden',
+      bg: 'bg',
+    },
+    readoutRail: {
+      flex: '0 0 4px',
+      alignSelf: 'stretch',
+      bg: 'border',
+      transitionProperty: 'background',
+      transitionDuration: 'normal',
+    },
+    readoutBody: {
+      flex: '1 1 auto',
+      minW: '0',
+      display: 'flex',
+      alignItems: 'center',
+      px: 'padMd',
+      py: 'padMd',
+      lineHeight: '1.5',
+    },
+    actions: {
+      display: 'inline-flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: 'gapSm',
+    },
+  },
+})

package/packages/panda/src/recipes/badge.ts

@@ -0,0 +1,44 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const badgeRecipe = defineRecipe({
+  className: 'aeonBadge',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    fontSize: '0.6875rem',
+    fontWeight: 'semibold',
+    borderRadius: 'sm',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    fontFamily: 'ui',
+    lineHeight: '1.2',
+    letterSpacing: '0.06em',
+    textTransform: 'uppercase',
+    py: 'badgeY',
+    px: 'badgeX',
+    whiteSpace: 'nowrap',
+  },
+  variants: {
+    variant: {
+      default: {
+        bg: 'surfaceRaised',
+        color: 'muted',
+        borderColor: 'border',
+      },
+      accent: {
+        bg: 'accentDim',
+        color: 'accent',
+        borderColor: 'accent',
+      },
+      danger: {
+        bg: 'dangerDim',
+        color: 'danger',
+        borderColor: 'danger',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})

package/packages/panda/src/recipes/button-group.ts

@@ -0,0 +1,33 @@
+import { defineRecipe } from '@pandacss/dev'
+
+/** Layout wrapper for multiple buttons — default gap between controls. */
+export const buttonGroupRecipe = defineRecipe({
+  className: 'aeonButtonGroup',
+  description: 'Horizontal or vertical stack of buttons with consistent spacing',
+  base: {
+    display: 'inline-flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    gap: '0.5rem',
+    verticalAlign: 'middle',
+  },
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+      },
+    },
+    gap: {
+      sm: { gap: 'gapSm' },
+      md: { gap: 'gap' },
+      lg: { gap: 'gapLg' },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    gap: 'sm',
+  },
+})

package/packages/panda/src/recipes/button.ts

@@ -0,0 +1,91 @@
+import { defineRecipe } from '@pandacss/dev'
+
+export const buttonRecipe = defineRecipe({
+  className: 'aeonButton',
+  description: 'Aeon button styles',
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    gap: '2',
+    fontWeight: 'medium',
+    fontFamily: 'ui',
+    lineHeight: '1.25',
+    transitionProperty: 'color, background-color, border-color, box-shadow, transform',
+    transitionDuration: 'normal',
+    cursor: 'pointer',
+    outline: 'none',
+    whiteSpace: 'nowrap',
+    _focusVisible: {
+      boxShadow: 'focusRing',
+    },
+    _disabled: {
+      opacity: '0.4',
+      pointerEvents: 'none',
+    },
+    _active: {
+      transform: 'scale(0.98)',
+    },
+  },
+  variants: {
+    variant: {
+      solid: {
+        bg: 'accent',
+        color: 'bg',
+        _hover: { filter: 'brightness(1.1)' },
+      },
+      outline: {
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: 'border',
+        bg: 'transparent',
+        color: 'fg',
+        _hover: { borderColor: 'accent' },
+      },
+      ghost: {
+        bg: 'transparent',
+        color: 'muted',
+        _hover: {
+          color: 'fg',
+          bg: 'surfaceRaised',
+        },
+      },
+    },
+    size: {
+      xs: {
+        fontSize: '0.75rem',
+        fontWeight: 'semibold',
+        borderRadius: 'sm',
+        py: 'controlYSm',
+        px: 'controlXSm',
+        minH: '1.75rem',
+      },
+      sm: {
+        fontSize: '0.8125rem',
+        borderRadius: 'sm',
+        py: 'controlY',
+        px: 'controlX',
+        minH: '2rem',
+      },
+      md: {
+        fontSize: '0.875rem',
+        borderRadius: 'md',
+        py: '0.4375rem',
+        px: '0.875rem',
+        minH: '2.25rem',
+      },
+      lg: {
+        fontSize: '0.9375rem',
+        borderRadius: 'md',
+        py: 'insetYSm',
+        px: 'insetXSm',
+        minH: '2.5rem',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+    size: 'sm',
+  },
+})

package/packages/panda/src/recipes/checkbox.ts

@@ -0,0 +1,41 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+import { fieldControlReset, fieldLabelBase, fieldRootBase } from './field-shared.js'
+
+const slots = ['root', 'control', 'indicator', 'label', 'hiddenInput'] as const
+
+export const checkboxRecipe = defineSlotRecipe({
+  className: 'aeonCheckbox',
+  slots,
+  base: {
+    root: fieldRootBase,
+    control: {
+      ...fieldControlReset,
+      width: '1.5rem',
+      height: '1.5rem',
+      flexShrink: 0,
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surface',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      cursor: 'pointer',
+      transitionProperty: 'background-color, border-color',
+      transitionDuration: 'normal',
+      outline: 'none',
+      _focusVisible: { boxShadow: 'focusRing' },
+      _aeonChecked: {
+        bg: 'accent',
+        borderColor: 'accent',
+      },
+    },
+    indicator: {
+      color: 'bg',
+      fontSize: 'xs',
+      fontWeight: 'bold',
+    },
+    label: fieldLabelBase,
+  },
+})