aeon-ui-engine 1.0.3 → 1.1.0

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

@@ -0,0 +1,217 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = [
+  'list',
+  'root',
+  'header',
+  'leading',
+  'heading',
+  'title',
+  'subtitle',
+  'meta',
+  'media',
+  'body',
+  'values',
+  'value',
+  'actions',
+  'footer',
+] as const
+
+/**
+ * Entry — compact multi-value card for feeds, listings, activity.
+ * Density + layout variants keep social posts and catalog rows on one primitive.
+ */
+export const entryRecipe = defineSlotRecipe({
+  className: 'aeonEntry',
+  slots,
+  base: {
+    list: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.55rem',
+      width: '100%',
+      minW: 0,
+    },
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.45rem',
+      width: '100%',
+      minW: 0,
+      p: '0.65rem 0.7rem',
+      borderRadius: 'xl',
+      borderWidth: '1px',
+      borderColor: 'border',
+      bg: 'surface',
+      color: 'fg',
+      transitionProperty: 'background, border-color, opacity',
+      transitionDuration: '0.15s',
+      '&[data-aeon-state=selected]': {
+        borderColor: 'accent',
+        bg: 'accentDim',
+      },
+      '&[data-aeon-state=muted]': {
+        opacity: 0.72,
+      },
+    },
+    header: {
+      display: 'grid',
+      gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+      alignItems: 'center',
+      columnGap: '0.55rem',
+      width: '100%',
+      minW: 0,
+    },
+    leading: {
+      flexShrink: 0,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:empty': { display: 'none' },
+    },
+    heading: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.1rem',
+      minW: 0,
+    },
+    title: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: '0.8125rem',
+      fontWeight: 'semibold',
+      letterSpacing: '-0.01em',
+      lineHeight: '1.25',
+      color: 'fg',
+    },
+    subtitle: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: '0.68rem',
+      color: 'muted',
+      lineHeight: '1.3',
+      '&:empty': { display: 'none' },
+    },
+    meta: {
+      flexShrink: 0,
+      justifySelf: 'end',
+      fontSize: '0.65rem',
+      color: 'muted',
+      whiteSpace: 'nowrap',
+      '&:empty': { display: 'none' },
+    },
+    media: {
+      display: 'none',
+      width: '100%',
+      aspectRatio: '16 / 10',
+      borderRadius: 'lg',
+      overflow: 'hidden',
+      bg: 'surfaceRaised',
+      '&:not(:empty)': { display: 'grid', placeItems: 'center' },
+      '& img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      },
+    },
+    body: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.25rem',
+      minW: 0,
+      fontSize: '0.8125rem',
+      color: 'fg',
+      lineHeight: '1.45',
+      '&:empty': { display: 'none' },
+      '& > p': { margin: 0 },
+    },
+    values: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: '0.35rem 0.65rem',
+      width: '100%',
+      minW: 0,
+      '&:empty': { display: 'none' },
+    },
+    value: {
+      display: 'inline-flex',
+      alignItems: 'baseline',
+      gap: '0.25rem',
+      fontSize: '0.68rem',
+      color: 'muted',
+      lineHeight: '1.2',
+      whiteSpace: 'nowrap',
+      '& strong, & b, & [data-aeon-part=strong]': {
+        fontWeight: 'semibold',
+        color: 'fg',
+        fontSize: '0.75rem',
+      },
+    },
+    actions: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: '0.35rem',
+      width: '100%',
+      minW: 0,
+      '&:empty': { display: 'none' },
+      '& > *': { flexShrink: 0 },
+      '& > [data-aeon-scope=button]': {
+        flex: '0 0 auto',
+      },
+    },
+    footer: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.35rem',
+      width: '100%',
+      fontSize: '0.65rem',
+      color: 'muted',
+      '&:empty': { display: 'none' },
+    },
+  },
+  variants: {
+    density: {
+      compact: {},
+      cozy: {
+        root: { gap: '0.65rem', p: '0.85rem' },
+        title: { fontSize: '0.875rem' },
+        body: { fontSize: '0.875rem' },
+      },
+    },
+    /**
+     * stack — vertical feed card (default).
+     * split — media rail + content (listings / product rows).
+     */
+    layout: {
+      stack: {},
+      split: {
+        root: {
+          display: 'grid',
+          gridTemplateColumns: '5.75rem minmax(0, 1fr)',
+          gridTemplateRows: 'auto',
+          columnGap: '0.65rem',
+          alignItems: 'start',
+          '& > [data-aeon-part=media]': {
+            gridColumn: '1',
+            gridRow: '1 / span 6',
+            aspectRatio: '1',
+            alignSelf: 'stretch',
+            minH: '5.75rem',
+          },
+          '& > [data-aeon-part=header], & > [data-aeon-part=body], & > [data-aeon-part=values], & > [data-aeon-part=actions], & > [data-aeon-part=footer]':
+            {
+              gridColumn: '2',
+            },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    density: 'compact',
+    layout: 'stack',
+  },
+})

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

@@ -20,6 +20,7 @@ export const fieldRecipe = defineSlotRecipe({
     },
     control: {
       width: '100%',
+      boxSizing: 'border-box',
       fontSize: 'sm',
       fontFamily: 'ui',
       lineHeight: '1.5',
@@ -32,13 +33,22 @@ export const fieldRecipe = defineSlotRecipe({
       px: 'insetX',
       py: 'insetYSm',
       outline: 'none',
+      /* Border recolor only — no outer ring (outer rings inflate perceived size). */
       _focusVisible: {
-        boxShadow: 'focusRing',
         borderColor: 'accent',
+        boxShadow: 'none',
+      },
+      '[data-aeon-state=invalid] > &, [data-aeon-validation=invalid] > &': {
+        borderColor: 'danger',
+      },
+      '[data-aeon-state=pending] > &, [data-aeon-submission=pending] > &': {
+        opacity: 0.7,
+        pointerEvents: 'none',
       },
     },
     textarea: {
       width: '100%',
+      boxSizing: 'border-box',
       minH: '6.5rem',
       resize: 'vertical',
       fontSize: 'sm',
@@ -54,8 +64,8 @@ export const fieldRecipe = defineSlotRecipe({
       py: 'insetYSm',
       outline: 'none',
       _focusVisible: {
-        boxShadow: 'focusRing',
         borderColor: 'accent',
+        boxShadow: 'none',
       },
     },
     message: {

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

@@ -130,7 +130,7 @@ export const toastRecipe = defineSlotRecipe({
       display: 'flex',
       flexDirection: 'column',
       gap: 'gapSm',
-      maxW: 'full',
+      maxW: '26rem',
       pointerEvents: 'none',
       outline: 'none',
       '&[data-placement="top-start"]': { top: 'padMd', left: 'padMd', alignItems: 'flex-start' },
@@ -140,31 +140,44 @@ export const toastRecipe = defineSlotRecipe({
     },
     root: {
       pointerEvents: 'auto',
+      position: 'relative',
       display: 'flex',
       flexDirection: 'column',
-      gap: 'gapSm',
-      maxW: 'sm',
+      gap: '2',
+      maxW: '26rem',
       p: 'padMd',
-      borderRadius: 'lg',
-      borderWidth: '1px',
-      borderStyle: 'solid',
-      borderColor: 'border',
+      pl: 'padLg',
+      borderRadius: 'md',
+      borderLeft: '3px solid',
+      borderLeftColor: 'accent',
       bg: 'surfaceRaised',
-      boxShadow: 'panel',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
       color: 'fg',
       fontFamily: 'ui',
+      animation: 'aeonToastIn 0.25s ease-out',
     },
-    title: { fontSize: 'sm', fontWeight: 'semibold', m: '0' },
-    description: { fontSize: 'sm', color: 'muted', m: '0', lineHeight: '1.5' },
+    title: { fontSize: 'sm', fontWeight: 'semibold', lineHeight: '1.4', m: '0' },
+    description: { fontSize: 'xs', color: 'muted', m: '0', lineHeight: '1.4' },
     closeTrigger: {
-      alignSelf: 'flex-end',
-      fontSize: 'xs',
+      position: 'absolute',
+      top: 'padSm',
+      right: 'padSm',
+      width: '1.25rem',
+      height: '1.25rem',
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '0.75rem',
+      lineHeight: '1',
       color: 'muted',
       cursor: 'pointer',
       bg: 'transparent',
       border: 'none',
+      borderRadius: 'sm',
       fontFamily: 'ui',
-      _hover: { color: 'fg' },
+      p: '0',
+      m: '0',
+      _hover: { color: 'fg', bg: 'surface' },
     },
   },
 })

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

@@ -0,0 +1,73 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'avatar', 'title', 'subtitle', 'meta', 'trailing'] as const
+
+export const identityRecipe = defineSlotRecipe({
+  className: 'aeonIdentity',
+  description: 'Identity strip — avatar + title + subtitle',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.625rem',
+      minW: 0,
+      maxW: '100%',
+      textAlign: 'left',
+    },
+    avatar: {
+      flexShrink: 0,
+      display: 'inline-flex',
+    },
+    title: {
+      display: 'block',
+      minW: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'sm',
+      fontWeight: 'semibold',
+      color: 'fg',
+      lineHeight: 'tight',
+    },
+    subtitle: {
+      display: 'block',
+      minW: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'xs',
+      color: 'muted',
+      lineHeight: 'tight',
+    },
+    meta: {
+      flexShrink: 0,
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+    trailing: {
+      flexShrink: 0,
+      marginLeft: 'auto',
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        root: { gap: '0.5rem' },
+        title: { fontSize: 'xs' },
+        subtitle: { fontSize: '0.625rem' },
+      },
+      md: {},
+      lg: {
+        root: { gap: '0.75rem' },
+        title: { fontSize: 'md' },
+        subtitle: { fontSize: 'sm' },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

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

@@ -1,5 +1,19 @@
 export { accordionRecipe } from './accordion.js'
+export { avatarRecipe } from './avatar.js'
+export { identityRecipe } from './identity.js'
+export { metricStripRecipe } from './metric-strip.js'
+export { listRowRecipe } from './list-row.js'
+export { entryRecipe } from './entry.js'
+export { conversationRecipe } from './conversation.js'
+export { threadRecipe } from './thread.js'
+export { composerRecipe } from './composer.js'
+export { profileHeaderRecipe } from './profile-header.js'
 export { badgeRecipe } from './badge.js'
+export { barRecipe } from './bar.js'
+export { panelRecipe } from './panel.js'
+export { appShellRecipe } from './app-shell.js'
+export { contentRecipe } from './content.js'
+export { navRecipe } from './nav.js'
 export { buttonRecipe } from './button.js'
 export { buttonGroupRecipe } from './button-group.js'
 export { asyncRegionRecipe } from './async.js'
@@ -10,6 +24,7 @@ export { comboboxRecipe } from './combobox.js'
 export { checkboxRecipe } from './checkbox.js'
 export { dialogRecipe } from './dialog.js'
 export { switchRecipe } from './switch.js'
+export { themeSwitcherRecipe } from './theme-switcher.js'
 export { tabsRecipe } from './tabs.js'
 export { separatorRecipe } from './separator.js'
 export { progressRecipe } from './progress.js'

package/packages/panda/src/recipes/list-row.ts

@@ -0,0 +1,109 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'leading', 'label', 'description', 'trailing'] as const
+
+/**
+ * ListRow — settings / people row.
+ * When description has content, expands to a 2-line main column (likes / directory).
+ * Leading accepts icons or avatars without clipping.
+ */
+export const listRowRecipe = defineSlotRecipe({
+  className: 'aeonListRow',
+  description: 'Settings / people list row — full-width hit target',
+  slots,
+  base: {
+    root: {
+      display: 'grid',
+      gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+      gridTemplateRows: 'auto',
+      alignItems: 'center',
+      columnGap: '0.75rem',
+      rowGap: '0.1rem',
+      width: '100%',
+      minH: '3rem',
+      px: '0.65rem',
+      py: '0.45rem',
+      borderRadius: 'xl',
+      border: 'none',
+      bg: 'transparent',
+      color: 'fg',
+      font: 'inherit',
+      textAlign: 'left',
+      cursor: 'pointer',
+      transitionProperty: 'background',
+      transitionDuration: '0.15s',
+      _hover: { bg: 'surface' },
+      /* Description present → two-line main; leading/trailing span both rows. */
+      '&:has([data-aeon-part=description]:not(:empty))': {
+        gridTemplateRows: 'auto auto',
+        minH: '3.35rem',
+        py: '0.5rem',
+        '& > [data-aeon-part=leading]': {
+          gridRow: '1 / -1',
+          alignSelf: 'center',
+        },
+        '& > [data-aeon-part=label]': {
+          gridColumn: '2',
+          gridRow: '1',
+          alignSelf: 'end',
+        },
+        '& > [data-aeon-part=description]': {
+          gridColumn: '2',
+          gridRow: '2',
+          alignSelf: 'start',
+        },
+        '& > [data-aeon-part=trailing]': {
+          gridRow: '1 / -1',
+          alignSelf: 'center',
+        },
+      },
+    },
+    leading: {
+      flexShrink: 0,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minW: '1.25rem',
+      minH: '1.25rem',
+      color: 'muted',
+      /* Avatars / larger glyphs size themselves; icon-only stays compact. */
+      '& > [data-aeon-scope=avatar]': {
+        /* Avatar sm = 2rem — optical match for people rows */
+      },
+    },
+    label: {
+      minW: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+      lineHeight: '1.25',
+    },
+    description: {
+      display: 'none',
+      minW: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'xs',
+      color: 'muted',
+      lineHeight: '1.3',
+      '&:not(:empty)': {
+        display: 'block',
+      },
+    },
+    trailing: {
+      flexShrink: 0,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '0.35rem',
+      color: 'muted',
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      whiteSpace: 'nowrap',
+    },
+  },
+})

package/packages/panda/src/recipes/metric-strip.ts

@@ -0,0 +1,80 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'chip', 'value', 'label'] as const
+
+export const metricStripRecipe = defineSlotRecipe({
+  className: 'aeonMetricStrip',
+  description: 'Dense metric chips — value + uppercase label',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'stretch',
+      width: 'fit-content',
+      maxW: '100%',
+      gap: 0,
+      borderWidth: '1px',
+      borderColor: 'border',
+      borderRadius: 'md',
+      overflow: 'hidden',
+      bg: 'surface',
+      '&[data-aeon-density=loose]': {
+        width: '100%',
+        gap: '0.75rem',
+        borderWidth: 0,
+        bg: 'transparent',
+        overflow: 'visible',
+      },
+    },
+    chip: {
+      display: 'flex',
+      flexDir: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.05rem',
+      px: '0.55rem',
+      py: '0.3rem',
+      minW: '2.75rem',
+      borderRightWidth: '1px',
+      borderRightColor: 'border',
+      '&:last-child': { borderRightWidth: 0 },
+      '[data-aeon-density=loose] &': {
+        alignItems: 'flex-start',
+        borderRightWidth: 0,
+        minW: '4.5rem',
+        px: 0,
+        py: 0,
+      },
+    },
+    value: {
+      fontSize: '0.625rem',
+      fontWeight: 'bold',
+      fontVariantNumeric: 'tabular-nums',
+      color: 'fg',
+      lineHeight: '1',
+      '[data-aeon-density=loose] &': { fontSize: 'md' },
+    },
+    label: {
+      fontSize: '0.5rem',
+      fontWeight: 'medium',
+      textTransform: 'uppercase',
+      letterSpacing: '0.1em',
+      color: 'muted',
+      lineHeight: '1',
+      '[data-aeon-density=loose] &': {
+        fontSize: '0.625rem',
+        letterSpacing: '0.08em',
+      },
+    },
+  },
+  variants: {
+    density: {
+      cluster: {},
+      loose: {},
+    },
+  },
+  defaultVariants: {
+    density: 'cluster',
+  },
+})