aeon-ui-engine 1.0.0

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

@@ -0,0 +1,121 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/** Extends select styling — text input trigger + filterable listbox. */
+export const comboboxRecipe = defineSlotRecipe({
+  className: 'aeonCombobox',
+  description: 'Filterable combobox — input + listbox (extends select patterns)',
+  slots: ['root', 'input', 'icon', 'content', 'item', 'empty'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-block',
+      minW: '0',
+      width: '100%',
+      maxW: '20rem',
+    },
+    input: {
+      display: 'block',
+      width: '100%',
+      minH: '2rem',
+      py: 'controlY',
+      pl: 'controlX',
+      pr: '2rem',
+      borderRadius: 'sm',
+      fontSize: '0.8125rem',
+      fontWeight: 'medium',
+      fontFamily: 'ui',
+      lineHeight: '1.25',
+      color: 'fg',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      outline: 'none',
+      transitionProperty: 'border-color, background-color',
+      transitionDuration: 'normal',
+      _hover: {
+        borderColor: 'accent',
+      },
+      _focusVisible: {
+        boxShadow: 'focusRing',
+      },
+      _placeholder: {
+        color: 'muted',
+      },
+      _aeonOpen: {
+        borderColor: 'accent',
+        bg: 'surfaceRaised',
+      },
+    },
+    icon: {
+      position: 'absolute',
+      right: 'controlX',
+      top: '50%',
+      width: '0.5rem',
+      height: '0.5rem',
+      marginTop: '-0.35rem',
+      borderRight: '2px solid',
+      borderBottom: '2px solid',
+      borderColor: 'muted',
+      transform: 'rotate(45deg) translateY(-1px)',
+      transitionProperty: 'transform',
+      transitionDuration: 'normal',
+      pointerEvents: 'none',
+    },
+    content: {
+      position: 'absolute',
+      top: 'calc(100% + 0.25rem)',
+      left: '0',
+      right: '0',
+      zIndex: '50',
+      maxH: '14rem',
+      overflowY: 'auto',
+      py: 'insetYSm',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      boxShadow: 'panel',
+      outline: 'none',
+    },
+    item: {
+      display: 'block',
+      width: '100%',
+      py: '0.5rem',
+      px: '1rem',
+      fontSize: '0.8125rem',
+      fontFamily: 'ui',
+      textAlign: 'left',
+      color: 'fg',
+      bg: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      outline: 'none',
+      _hover: {
+        bg: 'surfaceRaised',
+        color: 'accent',
+      },
+      _focusVisible: {
+        bg: 'surfaceRaised',
+        boxShadow: 'none',
+      },
+      _aeonSelected: {
+        bg: 'accentDim',
+        color: 'accent',
+        fontWeight: 'semibold',
+      },
+      '&[data-highlighted]': {
+        bg: 'surfaceRaised',
+        color: 'accent',
+      },
+    },
+    empty: {
+      py: '0.65rem',
+      px: '1rem',
+      fontSize: '0.8125rem',
+      color: 'muted',
+      fontFamily: 'ui',
+    },
+  },
+})

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

@@ -0,0 +1,96 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = [
+  'root',
+  'trigger',
+  'backdrop',
+  'positioner',
+  'content',
+  'title',
+  'description',
+  'closeTrigger',
+] as const
+
+export const dialogRecipe = defineSlotRecipe({
+  className: 'aeonDialog',
+  slots,
+  base: {
+    trigger: {
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+      fontFamily: 'ui',
+      py: 'insetY',
+      px: 'insetX',
+      minH: '2.75rem',
+      cursor: 'pointer',
+      transitionProperty: 'border-color',
+      transitionDuration: 'normal',
+      _hover: { borderColor: 'accent' },
+    },
+    backdrop: {
+      position: 'fixed',
+      inset: '0',
+      zIndex: '40',
+      bg: 'black/70',
+      backdropFilter: 'blur(4px)',
+    },
+    positioner: {
+      position: 'fixed',
+      inset: '0',
+      zIndex: '50',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      p: '4',
+    },
+    content: {
+      width: '100%',
+      maxW: 'md',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surfaceRaised',
+      boxShadow: 'panel',
+      color: 'fg',
+      fontFamily: 'ui',
+      p: 'padXl',
+    },
+    title: {
+      fontSize: 'lg',
+      fontWeight: 'semibold',
+      m: '0',
+      mb: 'gap',
+      pr: 'insetXSm',
+    },
+    description: {
+      fontSize: 'sm',
+      color: 'muted',
+      m: '0',
+      mb: 'padMd',
+      pr: 'insetXSm',
+      lineHeight: '1.65',
+    },
+    closeTrigger: {
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      py: 'insetY',
+      px: 'insetX',
+      minH: '2.75rem',
+      cursor: 'pointer',
+      mt: 'gapLg',
+      transitionProperty: 'border-color',
+      transitionDuration: 'normal',
+      _hover: { borderColor: 'accent' },
+    },
+  },
+})

package/packages/panda/src/recipes/field-shared.ts

@@ -0,0 +1,29 @@
+/** Shared layout for label-wrapped controls (switch, checkbox, etc.). */
+export const fieldRootBase = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 'gapLg',
+  cursor: 'pointer',
+  fontFamily: 'ui',
+  lineHeight: '1.5',
+  verticalAlign: 'middle',
+} as const
+
+export const fieldLabelBase = {
+  fontSize: 'sm',
+  color: 'fg',
+  userSelect: 'none',
+  lineHeight: '1.5',
+} as const
+
+export const fieldControlReset = {
+  margin: '0',
+  padding: '0',
+  lineHeight: '1',
+  font: 'inherit',
+  color: 'inherit',
+  boxSizing: 'border-box',
+  verticalAlign: 'middle',
+  appearance: 'none',
+  WebkitAppearance: 'none',
+} as const

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

@@ -0,0 +1,72 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const fieldRecipe = defineSlotRecipe({
+  className: 'aeonField',
+  description: 'Form field with orthogonal interaction, validation, and submission states',
+  slots: ['root', 'label', 'control', 'textarea', 'message', 'hint'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2',
+      alignItems: 'flex-start',
+      width: '100%',
+      maxW: '24rem',
+    },
+    label: {
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+    },
+    control: {
+      width: '100%',
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      lineHeight: '1.5',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      bg: 'surface',
+      color: 'fg',
+      px: 'insetX',
+      py: 'insetYSm',
+      outline: 'none',
+      _focusVisible: {
+        boxShadow: 'focusRing',
+        borderColor: 'accent',
+      },
+    },
+    textarea: {
+      width: '100%',
+      minH: '6.5rem',
+      resize: 'vertical',
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      lineHeight: '1.5',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      bg: 'surface',
+      color: 'fg',
+      px: 'insetX',
+      py: 'insetYSm',
+      outline: 'none',
+      _focusVisible: {
+        boxShadow: 'focusRing',
+        borderColor: 'accent',
+      },
+    },
+    message: {
+      fontSize: 'xs',
+      m: '0',
+      color: 'danger',
+    },
+    hint: {
+      fontSize: 'xs',
+      m: '0',
+      color: 'muted',
+    },
+  },
+})

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

@@ -0,0 +1,170 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const positionerBase = {
+  position: 'absolute' as const,
+  zIndex: '50',
+  top: 'calc(100% + 0.35rem)',
+  left: '0',
+  minW: '10rem',
+}
+
+const floatingContent = {
+  borderRadius: 'md',
+  borderWidth: '1px',
+  borderStyle: 'solid' as const,
+  borderColor: 'border',
+  bg: 'surfaceRaised',
+  boxShadow: 'panel',
+  color: 'fg',
+  fontFamily: 'ui',
+  fontSize: 'sm',
+  py: 'insetYSm',
+  px: 'insetXSm',
+}
+
+export const popoverRecipe = defineSlotRecipe({
+  className: 'aeonPopover',
+  slots: ['root', 'trigger', 'positioner', 'content', 'arrow', 'closeTrigger'],
+  base: {
+    root: { position: 'relative', display: 'inline-block' },
+    trigger: {
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+      fontFamily: 'ui',
+      py: 'insetY',
+      px: 'insetX',
+      minH: '2.5rem',
+      cursor: 'pointer',
+      bg: 'surface',
+      _hover: { borderColor: 'accent' },
+    },
+    positioner: positionerBase,
+    content: { ...floatingContent, p: 'padMd' },
+    closeTrigger: {
+      mt: 'gap',
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      cursor: 'pointer',
+      color: 'muted',
+      _hover: { color: 'fg' },
+    },
+  },
+})
+
+export const menuRecipe = defineSlotRecipe({
+  className: 'aeonMenu',
+  slots: ['root', 'trigger', 'positioner', 'content', 'item', 'separator'],
+  base: {
+    root: { position: 'relative', display: 'inline-block' },
+    trigger: {
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+      fontFamily: 'ui',
+      py: 'insetY',
+      px: 'insetX',
+      minH: '2.5rem',
+      cursor: 'pointer',
+      bg: 'surface',
+      _hover: { borderColor: 'accent' },
+    },
+    positioner: positionerBase,
+    content: { ...floatingContent, py: 'insetYSm', px: '0' },
+    item: {
+      display: 'flex',
+      width: '100%',
+      alignItems: 'center',
+      textAlign: 'left',
+      py: 'insetY',
+      px: 'insetX',
+      fontSize: 'sm',
+      fontFamily: 'ui',
+      color: 'fg',
+      bg: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      _hover: { bg: 'surface' },
+      _focusVisible: { outline: 'none', boxShadow: 'focusRing' },
+    },
+    separator: {
+      height: '1px',
+      my: 'insetYSm',
+      bg: 'border',
+    },
+  },
+})
+
+export const tooltipRecipe = defineSlotRecipe({
+  className: 'aeonTooltip',
+  slots: ['root', 'trigger', 'positioner', 'content', 'arrow'],
+  base: {
+    root: { position: 'relative', display: 'inline-block' },
+    trigger: { display: 'inline-flex', cursor: 'default' },
+    positioner: { ...positionerBase, top: 'auto', bottom: 'calc(100% + 0.35rem)' },
+    content: {
+      ...floatingContent,
+      py: 'insetYSm',
+      px: 'insetX',
+      fontSize: 'xs',
+      maxW: '16rem',
+    },
+  },
+})
+
+export const toastRecipe = defineSlotRecipe({
+  className: 'aeonToast',
+  slots: ['viewport', 'root', 'title', 'description', 'closeTrigger'],
+  base: {
+    viewport: {
+      position: 'fixed',
+      zIndex: '60',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      maxW: 'full',
+      pointerEvents: 'none',
+      outline: 'none',
+      '&[data-placement="top-start"]': { top: 'padMd', left: 'padMd', alignItems: 'flex-start' },
+      '&[data-placement="top-end"]': { top: 'padMd', right: 'padMd', alignItems: 'flex-end' },
+      '&[data-placement="bottom-start"]': { bottom: 'padMd', left: 'padMd', alignItems: 'flex-start' },
+      '&[data-placement="bottom-end"]': { bottom: 'padMd', right: 'padMd', alignItems: 'flex-end' },
+    },
+    root: {
+      pointerEvents: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      maxW: 'sm',
+      p: 'padMd',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surfaceRaised',
+      boxShadow: 'panel',
+      color: 'fg',
+      fontFamily: 'ui',
+    },
+    title: { fontSize: 'sm', fontWeight: 'semibold', m: '0' },
+    description: { fontSize: 'sm', color: 'muted', m: '0', lineHeight: '1.5' },
+    closeTrigger: {
+      alignSelf: 'flex-end',
+      fontSize: 'xs',
+      color: 'muted',
+      cursor: 'pointer',
+      bg: 'transparent',
+      border: 'none',
+      fontFamily: 'ui',
+      _hover: { color: 'fg' },
+    },
+  },
+})

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

@@ -0,0 +1,14 @@
+export { accordionRecipe } from './accordion.js'
+export { badgeRecipe } from './badge.js'
+export { buttonRecipe } from './button.js'
+export { buttonGroupRecipe } from './button-group.js'
+export { asyncRegionRecipe } from './async.js'
+export { fieldRecipe } from './field.js'
+export { scrollRegionRecipe } from './scroll-region.js'
+export { selectRecipe } from './select.js'
+export { comboboxRecipe } from './combobox.js'
+export { checkboxRecipe } from './checkbox.js'
+export { dialogRecipe } from './dialog.js'
+export { switchRecipe } from './switch.js'
+export { tabsRecipe } from './tabs.js'
+export { menuRecipe, popoverRecipe, toastRecipe, tooltipRecipe } from './floating.js'

package/packages/panda/src/recipes/scroll-region.ts

@@ -0,0 +1,55 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const scrollRegionRecipe = defineSlotRecipe({
+  className: 'aeonScroll',
+  description: 'Scroll viewport with axis + edge states on data-aeon-state',
+  slots: ['root', 'viewport', 'content'],
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      minW: '0',
+    },
+    viewport: {
+      position: 'relative',
+      minW: '0',
+      overflow: 'auto',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      bg: 'bg',
+    },
+    content: {
+      minW: 'min-content',
+    },
+  },
+  variants: {
+    axis: {
+      y: {
+        viewport: { overflowX: 'hidden', overflowY: 'auto' },
+      },
+      x: {
+        viewport: { overflowX: 'auto', overflowY: 'hidden' },
+      },
+      both: {
+        viewport: { overflow: 'auto' },
+      },
+    },
+    maxH: {
+      sm: { viewport: { maxH: '8rem' } },
+      md: { viewport: { maxH: '12rem' } },
+      lg: { viewport: { maxH: '18rem' } },
+    },
+    maxW: {
+      full: { viewport: { maxW: '100%' } },
+      md: { viewport: { maxW: '20rem' } },
+    },
+  },
+  defaultVariants: {
+    axis: 'both',
+    maxH: 'md',
+    maxW: 'full',
+  },
+})

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

@@ -0,0 +1,111 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const selectRecipe = defineSlotRecipe({
+  className: 'aeonSelect',
+  description: 'Custom listbox select — no native OS dropdown chrome',
+  slots: ['root', 'trigger', 'value', 'icon', 'positioner', 'content', 'item'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'inline-block',
+      minW: '0',
+    },
+    trigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 'gapSm',
+      width: '100%',
+      minH: '2rem',
+      py: 'controlY',
+      px: 'controlX',
+      borderRadius: 'sm',
+      fontSize: '0.8125rem',
+      fontWeight: 'medium',
+      fontFamily: 'ui',
+      lineHeight: '1.25',
+      color: 'fg',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      cursor: 'pointer',
+      outline: 'none',
+      transitionProperty: 'border-color, background-color',
+      transitionDuration: 'normal',
+      _hover: {
+        borderColor: 'accent',
+      },
+      _focusVisible: {
+        boxShadow: 'focusRing',
+      },
+      _aeonOpen: {
+        borderColor: 'accent',
+        bg: 'surfaceRaised',
+        '& [data-aeon-part="icon"]': {
+          transform: 'rotate(-135deg) translateY(2px)',
+        },
+      },
+    },
+    value: {
+      flex: '1',
+      textAlign: 'left',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+    icon: {
+      flexShrink: '0',
+      width: '0.5rem',
+      height: '0.5rem',
+      borderRight: '2px solid',
+      borderBottom: '2px solid',
+      borderColor: 'muted',
+      transform: 'rotate(45deg) translateY(-1px)',
+      transitionProperty: 'transform',
+      transitionDuration: 'normal',
+    },
+    positioner: {
+      zIndex: '50',
+    },
+    content: {
+      maxH: '14rem',
+      overflowY: 'auto',
+      py: 'insetYSm',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      boxShadow: 'panel',
+      outline: 'none',
+    },
+    item: {
+      display: 'block',
+      width: '100%',
+      py: '0.5rem',
+      px: '1rem',
+      fontSize: '0.8125rem',
+      fontFamily: 'ui',
+      textAlign: 'left',
+      color: 'fg',
+      bg: 'transparent',
+      border: 'none',
+      cursor: 'pointer',
+      outline: 'none',
+      _hover: {
+        bg: 'surfaceRaised',
+        color: 'accent',
+      },
+      _focusVisible: {
+        bg: 'surfaceRaised',
+        boxShadow: 'none',
+      },
+      _aeonSelected: {
+        bg: 'accentDim',
+        color: 'accent',
+        fontWeight: 'semibold',
+      },
+    },
+  },
+})