aeon-ui-engine 1.0.1 → 1.0.2

package/.changeset/config.json

@@ -3,6 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [
+    ["aeon-ui-engine"],
     [
       "@aeon-ui/core",
       "@aeon-ui/primitives",
@@ -26,5 +27,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@aeon-ui/demo", "aeon-ui-monorepo"]
+  "ignore": ["@aeon-ui/demo"]
 }

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to **aeon-ui-engine** are documented here.
+
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2026-06-02
+
+### Added
+
+- Shared Panda tokens `controlMinHXs`, `controlMinHSm`, `controlMinHMd`, and `controlMinHLg` so compact control heights stay aligned across components.
+
+### Changed
+
+- Button, select trigger, and combobox input recipes reference the shared control-height tokens instead of hardcoded `rem` values.
+- Demo header toolbar uses `size="sm"` for buttons alongside the select (same compact tier) without page-level height overrides.
+
+## [1.0.1] - 2026-06-02
+
+### Changed
+
+- Open Graph preview image shows `npm install aeon-ui-engine` and is served at `/og-aeon-ui-engine.png` for cache-friendly social sharing.
+- Demo site copy standardized on the `aeon-ui-engine` npm package name.
+
+### Fixed
+
+- Mobile header theme preset select shows a visible **Theme** label instead of chevron-only.
+
+## [1.0.0] - 2026-06-02
+
+### Added
+
+- Initial npm release of **aeon-ui-engine** — monorepo bundle with headless statechart primitives, React bindings, Panda styled layer, and themes.
+
+[1.0.2]: https://github.com/GenericCPU/aeon-ui/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/GenericCPU/aeon-ui/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/GenericCPU/aeon-ui/releases/tag/v1.0.0

package/PUBLISHING.md

@@ -1,5 +1,25 @@
 # Publishing to npm
 
+## aeon-ui-engine (primary npm package)
+
+The public install target is **`aeon-ui-engine`**, published from the **repo root**. Its semver is independent of internal `@aeon-ui/*` workspace versions (still `0.1.0` until those are released separately).
+
+### Release checklist (patch / minor / major)
+
+1. Update root **[CHANGELOG.md](./CHANGELOG.md)** under `## [X.Y.Z]` using [Keep a Changelog](https://keepachangelog.com/) sections: `Added`, `Changed`, `Fixed`, `Removed`, `Deprecated`, `Security`.
+2. Bump **`version`** in root **[package.json](./package.json)** (`1.0.1` → `1.0.2` = **patch** for fixes; **minor** for features; **major** for breaking changes).
+3. `pnpm build && pnpm typecheck`
+4. Commit: `Release aeon-ui-engine vX.Y.Z`
+5. Tag: `git tag vX.Y.Z`
+6. Publish: `npm publish --access public` (from repo root; requires `npm login`)
+7. Push: `git push && git push --tags`
+
+Optional: add a Changeset with `"aeon-ui-engine": patch|minor|major` before step 2 if you use `pnpm version-packages` for the root package only (see `.changeset/config.json`).
+
+---
+
+## @aeon-ui/* scoped packages (future)
+
 Packages are versioned together at **0.1.0** (pre-release) using [Changesets](https://github.com/changesets/changesets).
 
 ## Packages

package/apps/demo/src/components/LandingHeader.tsx

@@ -46,7 +46,7 @@ export function LandingHeader() {
         <div className="landing-header__utilities">
           <ThemeSwitcher />
           <a href="#playground" className="landing-header__cta">
-            <Button.Root size="xs" aria-label={site.heroCtaPrimary}>
+            <Button.Root size="sm" aria-label={site.heroCtaPrimary}>
               <span className="landing-header__cta-label landing-header__cta-label--long">
                 {site.heroCtaPrimary}
               </span>

package/apps/demo/src/components/ThemeSwitcher.tsx

@@ -42,7 +42,7 @@ export function ThemeSwitcher() {
           <Button.Root
             key={m}
             type="button"
-            size="xs"
+            size="sm"
             variant={mode === m ? 'solid' : 'ghost'}
             aria-pressed={mode === m}
             className="theme-switcher__mode-btn"

package/apps/demo/src/landing.css

@@ -14,8 +14,6 @@
   --border-strong: color-mix(in srgb, var(--aeon-border) 70%, var(--aeon-text));
   --text-muted: var(--aeon-muted);
   --site-header-offset: var(--header-h);
-  /* Header chrome — mode toggles, theme select, CTA share one height */
-  --header-control-h: 2.25rem;
 }
 
 .landing {
@@ -211,13 +209,11 @@
 
 .landing-header__cta {
   display: inline-flex;
-  align-items: center;
   flex-shrink: 0;
   text-decoration: none;
 }
 
 .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-  min-height: var(--header-control-h);
   letter-spacing: 0.04em;
   white-space: nowrap;
 }
@@ -237,10 +233,12 @@
 
 .theme-switcher__modes {
   display: inline-flex;
-  align-items: center;
+  align-items: stretch;
   gap: 0.125rem;
   flex-shrink: 0;
-  padding: 0.15rem;
+  box-sizing: border-box;
+  height: var(--spacing-control-min-h-sm);
+  padding: 2px;
   border: 1px solid var(--aeon-border);
   border-radius: var(--aeon-radius);
   background: color-mix(in srgb, var(--aeon-surface) 92%, var(--aeon-bg));
@@ -248,6 +246,8 @@
 
 .theme-switcher__mode-btn {
   min-width: 2.75rem;
+  height: auto;
+  align-self: stretch;
   margin: 0 !important;
 }
 
@@ -260,7 +260,6 @@
   max-width: 24vw;
   min-width: 0;
   flex-shrink: 1;
-  height: var(--header-control-h);
 }
 
 .theme-switcher__trigger-prefix {
@@ -277,8 +276,6 @@
 }
 
 .theme-switcher__theme-select [data-aeon-part='trigger'] {
-  min-height: var(--header-control-h);
-  height: 100%;
   max-width: 100%;
   overflow: hidden;
   padding-inline: 0.5rem 1.75rem;
@@ -293,7 +290,6 @@
 
 @media (max-width: 640px) {
   .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-    min-height: var(--header-control-h);
     padding-inline: 0.55rem !important;
     font-size: 0.6875rem;
   }
@@ -314,10 +310,6 @@
 }
 
 @media (max-width: 420px) {
-  :root {
-    --header-control-h: 2rem;
-  }
-
   .landing-header__shell {
     gap: 0.35rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeon-ui-engine",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "scripts": {
     "build": "pnpm --filter @aeon-ui/panda run codegen && pnpm -r run build",

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

@@ -59,28 +59,28 @@ export const buttonRecipe = defineRecipe({
         borderRadius: 'sm',
         py: 'controlYSm',
         px: 'controlXSm',
-        minH: '1.75rem',
+        minH: 'controlMinHXs',
       },
       sm: {
         fontSize: '0.8125rem',
         borderRadius: 'sm',
         py: 'controlY',
         px: 'controlX',
-        minH: '2rem',
+        minH: 'controlMinHSm',
       },
       md: {
         fontSize: '0.875rem',
         borderRadius: 'md',
         py: '0.4375rem',
         px: '0.875rem',
-        minH: '2.25rem',
+        minH: 'controlMinHMd',
       },
       lg: {
         fontSize: '0.9375rem',
         borderRadius: 'md',
         py: 'insetYSm',
         px: 'insetXSm',
-        minH: '2.5rem',
+        minH: 'controlMinHLg',
       },
     },
   },

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

@@ -16,7 +16,7 @@ export const comboboxRecipe = defineSlotRecipe({
     input: {
       display: 'block',
       width: '100%',
-      minH: '2rem',
+      minH: 'controlMinHSm',
       py: 'controlY',
       pl: 'controlX',
       pr: '2rem',

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

@@ -17,7 +17,7 @@ export const selectRecipe = defineSlotRecipe({
       gap: 'gapSm',
       width: '100%',
       boxSizing: 'border-box',
-      minH: '2rem',
+      minH: 'controlMinHSm',
       py: 'controlY',
       px: 'controlX',
       borderRadius: 'sm',

package/packages/panda/src/theme/tokens.ts

@@ -25,6 +25,11 @@ export const tokens = defineTokens({
     controlY: { value: '0.375rem' },
     controlXSm: { value: '0.625rem' },
     controlYSm: { value: '0.3125rem' },
+    /** Shared min-heights — button sizes and matching inputs align to these tiers. */
+    controlMinHXs: { value: '1.75rem' },
+    controlMinHSm: { value: '2rem' },
+    controlMinHMd: { value: '2.25rem' },
+    controlMinHLg: { value: '2.5rem' },
     badgeX: { value: '0.5rem' },
     badgeY: { value: '0.125rem' },
     insetXSm: { value: '1.125rem' },

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

@@ -820,6 +820,10 @@
     --spacing-control-y: 0.375rem;
     --spacing-control-x-sm: 0.625rem;
     --spacing-control-y-sm: 0.3125rem;
+    --spacing-control-min-h-xs: 1.75rem;
+    --spacing-control-min-h-sm: 2rem;
+    --spacing-control-min-h-md: 2.25rem;
+    --spacing-control-min-h-lg: 2.5rem;
     --spacing-badge-x: 0.5rem;
     --spacing-badge-y: 0.125rem;
     --spacing-inset-x-sm: 1.125rem;
@@ -982,7 +986,7 @@
     border-radius: var(--radii-md);
     padding-block: 0.4375rem;
     padding-inline: 0.875rem;
-    min-height: 2.25rem;
+    min-height: controlMinHMd;
     font-size: 0.875rem;
 }
 
@@ -990,7 +994,7 @@
     border-radius: var(--radii-sm);
     padding-block: var(--spacing-control-y);
     padding-inline: var(--spacing-control-x);
-    min-height: 2rem;
+    min-height: controlMinHSm;
     font-size: 0.8125rem;
 }
 
@@ -998,7 +1002,7 @@
     border-radius: var(--radii-sm);
     padding-block: var(--spacing-control-y-sm);
     padding-inline: var(--spacing-control-x-sm);
-    min-height: 1.75rem;
+    min-height: controlMinHXs;
     font-size: 0.75rem;
     font-weight: var(--font-weights-semibold);
 }
@@ -1007,7 +1011,7 @@
     border-radius: var(--radii-md);
     padding-block: var(--spacing-inset-y-sm);
     padding-inline: var(--spacing-inset-x-sm);
-    min-height: 2.5rem;
+    min-height: controlMinHLg;
     font-size: 0.9375rem;
 }
 
@@ -1288,7 +1292,7 @@
     .aeonCombobox__input {
       display: block;
       width: 100%;
-      min-height: 2rem;
+      min-height: controlMinHSm;
       padding-block: var(--spacing-control-y);
       border-radius: var(--radii-sm);
       color: var(--colors-fg);
@@ -1881,7 +1885,7 @@
       gap: var(--spacing-gap-sm);
       width: 100%;
       box-sizing: border-box;
-      min-height: 2rem;
+      min-height: controlMinHSm;
       padding-block: var(--spacing-control-y);
       padding-inline: var(--spacing-control-x);
       border-radius: var(--radii-sm);

package/packages/panda/styled-system/tokens/index.mjs

@@ -1719,6 +1719,22 @@ const tokens = {
     "value": "0.3125rem",
     "variable": "var(--spacing-control-y-sm)"
   },
+  "spacing.controlMinHXs": {
+    "value": "1.75rem",
+    "variable": "var(--spacing-control-min-h-xs)"
+  },
+  "spacing.controlMinHSm": {
+    "value": "2rem",
+    "variable": "var(--spacing-control-min-h-sm)"
+  },
+  "spacing.controlMinHMd": {
+    "value": "2.25rem",
+    "variable": "var(--spacing-control-min-h-md)"
+  },
+  "spacing.controlMinHLg": {
+    "value": "2.5rem",
+    "variable": "var(--spacing-control-min-h-lg)"
+  },
   "spacing.badgeX": {
     "value": "0.5rem",
     "variable": "var(--spacing-badge-x)"
@@ -2011,6 +2027,22 @@ const tokens = {
     "value": "calc(var(--spacing-control-y-sm) * -1)",
     "variable": "var(--spacing-control-y-sm)"
   },
+  "spacing.-controlMinHXs": {
+    "value": "calc(var(--spacing-control-min-h-xs) * -1)",
+    "variable": "var(--spacing-control-min-h-xs)"
+  },
+  "spacing.-controlMinHSm": {
+    "value": "calc(var(--spacing-control-min-h-sm) * -1)",
+    "variable": "var(--spacing-control-min-h-sm)"
+  },
+  "spacing.-controlMinHMd": {
+    "value": "calc(var(--spacing-control-min-h-md) * -1)",
+    "variable": "var(--spacing-control-min-h-md)"
+  },
+  "spacing.-controlMinHLg": {
+    "value": "calc(var(--spacing-control-min-h-lg) * -1)",
+    "variable": "var(--spacing-control-min-h-lg)"
+  },
   "spacing.-badgeX": {
     "value": "calc(var(--spacing-badge-x) * -1)",
     "variable": "var(--spacing-badge-x)"

package/packages/panda/styled-system/tokens/tokens.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-export type Token = "aspectRatios.square" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.wide" | "aspectRatios.ultrawide" | "aspectRatios.golden" | "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "fonts.sans" | "fonts.serif" | "fonts.ui" | "fonts.mono" | "fonts.display" | "fonts.body" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.rose.950" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.pink.950" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.950" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.purple.950" | "colors.violet.50" | "colors.violet.100" | "colors.violet.200" | "colors.violet.300" | "colors.violet.400" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.950" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.950" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.blue.950" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.sky.950" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.cyan.950" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.950" | "colors.emerald.50" | "colors.emerald.100" | "colors.emerald.200" | "colors.emerald.300" | "colors.emerald.400" | "colors.emerald.500" | "colors.emerald.600" | "colors.emerald.700" | "colors.emerald.800" | "colors.emerald.900" | "colors.emerald.950" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.green.950" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.950" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.950" | "colors.amber.50" | "colors.amber.100" | "colors.amber.200" | "colors.amber.300" | "colors.amber.400" | "colors.amber.500" | "colors.amber.600" | "colors.amber.700" | "colors.amber.800" | "colors.amber.900" | "colors.amber.950" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.orange.950" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.red.950" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "colors.stone.50" | "colors.stone.100" | "colors.stone.200" | "colors.stone.300" | "colors.stone.400" | "colors.stone.500" | "colors.stone.600" | "colors.stone.700" | "colors.stone.800" | "colors.stone.900" | "colors.stone.950" | "colors.zinc.50" | "colors.zinc.100" | "colors.zinc.200" | "colors.zinc.300" | "colors.zinc.400" | "colors.zinc.500" | "colors.zinc.600" | "colors.zinc.700" | "colors.zinc.800" | "colors.zinc.900" | "colors.zinc.950" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.gray.950" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.slate.950" | "radii.xs" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.4xl" | "radii.full" | "radii.sm" | "radii.md" | "radii.lg" | "radii.siteLg" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "shadows.panel" | "shadows.focusRing" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "spacing.controlX" | "spacing.controlY" | "spacing.controlXSm" | "spacing.controlYSm" | "spacing.badgeX" | "spacing.badgeY" | "spacing.insetXSm" | "spacing.insetYSm" | "spacing.insetX" | "spacing.insetY" | "spacing.insetXLg" | "spacing.insetYLg" | "spacing.padSm" | "spacing.padMd" | "spacing.padLg" | "spacing.padXl" | "spacing.gapSm" | "spacing.gap" | "spacing.gapLg" | "spacing.accordionGap" | "spacing.accordionInsetX" | "spacing.accordionTriggerY" | "spacing.accordionTriggerMinH" | "spacing.accordionContentY" | "spacing.accordionContentB" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "colors.bg" | "colors.surface" | "colors.surfaceRaised" | "colors.border" | "colors.fg" | "colors.muted" | "colors.accent" | "colors.accentDim" | "colors.danger" | "colors.dangerDim" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "spacing.-controlX" | "spacing.-controlY" | "spacing.-controlXSm" | "spacing.-controlYSm" | "spacing.-badgeX" | "spacing.-badgeY" | "spacing.-insetXSm" | "spacing.-insetYSm" | "spacing.-insetX" | "spacing.-insetY" | "spacing.-insetXLg" | "spacing.-insetYLg" | "spacing.-padSm" | "spacing.-padMd" | "spacing.-padLg" | "spacing.-padXl" | "spacing.-gapSm" | "spacing.-gap" | "spacing.-gapLg" | "spacing.-accordionGap" | "spacing.-accordionInsetX" | "spacing.-accordionTriggerY" | "spacing.-accordionTriggerMinH" | "spacing.-accordionContentY" | "spacing.-accordionContentB" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950"
+export type Token = "aspectRatios.square" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.wide" | "aspectRatios.ultrawide" | "aspectRatios.golden" | "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "fonts.sans" | "fonts.serif" | "fonts.ui" | "fonts.mono" | "fonts.display" | "fonts.body" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.rose.950" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.pink.950" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.950" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.purple.950" | "colors.violet.50" | "colors.violet.100" | "colors.violet.200" | "colors.violet.300" | "colors.violet.400" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.950" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.950" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.blue.950" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.sky.950" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.cyan.950" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.950" | "colors.emerald.50" | "colors.emerald.100" | "colors.emerald.200" | "colors.emerald.300" | "colors.emerald.400" | "colors.emerald.500" | "colors.emerald.600" | "colors.emerald.700" | "colors.emerald.800" | "colors.emerald.900" | "colors.emerald.950" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.green.950" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.950" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.950" | "colors.amber.50" | "colors.amber.100" | "colors.amber.200" | "colors.amber.300" | "colors.amber.400" | "colors.amber.500" | "colors.amber.600" | "colors.amber.700" | "colors.amber.800" | "colors.amber.900" | "colors.amber.950" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.orange.950" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.red.950" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "colors.stone.50" | "colors.stone.100" | "colors.stone.200" | "colors.stone.300" | "colors.stone.400" | "colors.stone.500" | "colors.stone.600" | "colors.stone.700" | "colors.stone.800" | "colors.stone.900" | "colors.stone.950" | "colors.zinc.50" | "colors.zinc.100" | "colors.zinc.200" | "colors.zinc.300" | "colors.zinc.400" | "colors.zinc.500" | "colors.zinc.600" | "colors.zinc.700" | "colors.zinc.800" | "colors.zinc.900" | "colors.zinc.950" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.gray.950" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.slate.950" | "radii.xs" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.4xl" | "radii.full" | "radii.sm" | "radii.md" | "radii.lg" | "radii.siteLg" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "shadows.panel" | "shadows.focusRing" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "spacing.controlX" | "spacing.controlY" | "spacing.controlXSm" | "spacing.controlYSm" | "spacing.controlMinHXs" | "spacing.controlMinHSm" | "spacing.controlMinHMd" | "spacing.controlMinHLg" | "spacing.badgeX" | "spacing.badgeY" | "spacing.insetXSm" | "spacing.insetYSm" | "spacing.insetX" | "spacing.insetY" | "spacing.insetXLg" | "spacing.insetYLg" | "spacing.padSm" | "spacing.padMd" | "spacing.padLg" | "spacing.padXl" | "spacing.gapSm" | "spacing.gap" | "spacing.gapLg" | "spacing.accordionGap" | "spacing.accordionInsetX" | "spacing.accordionTriggerY" | "spacing.accordionTriggerMinH" | "spacing.accordionContentY" | "spacing.accordionContentB" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "colors.bg" | "colors.surface" | "colors.surfaceRaised" | "colors.border" | "colors.fg" | "colors.muted" | "colors.accent" | "colors.accentDim" | "colors.danger" | "colors.dangerDim" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "spacing.-controlX" | "spacing.-controlY" | "spacing.-controlXSm" | "spacing.-controlYSm" | "spacing.-controlMinHXs" | "spacing.-controlMinHSm" | "spacing.-controlMinHMd" | "spacing.-controlMinHLg" | "spacing.-badgeX" | "spacing.-badgeY" | "spacing.-insetXSm" | "spacing.-insetYSm" | "spacing.-insetX" | "spacing.-insetY" | "spacing.-insetXLg" | "spacing.-insetYLg" | "spacing.-padSm" | "spacing.-padMd" | "spacing.-padLg" | "spacing.-padXl" | "spacing.-gapSm" | "spacing.-gap" | "spacing.-gapLg" | "spacing.-accordionGap" | "spacing.-accordionInsetX" | "spacing.-accordionTriggerY" | "spacing.-accordionTriggerMinH" | "spacing.-accordionContentY" | "spacing.-accordionContentB" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950"
 
 export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "bg" | "surface" | "surfaceRaised" | "border" | "fg" | "muted" | "accent" | "accentDim" | "danger" | "dangerDim"
 
@@ -33,7 +33,7 @@ export type RadiusToken = "xs" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "sm" |
 
 export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" | "panel" | "focusRing"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "controlX" | "controlY" | "controlXSm" | "controlYSm" | "badgeX" | "badgeY" | "insetXSm" | "insetYSm" | "insetX" | "insetY" | "insetXLg" | "insetYLg" | "padSm" | "padMd" | "padLg" | "padXl" | "gapSm" | "gap" | "gapLg" | "accordionGap" | "accordionInsetX" | "accordionTriggerY" | "accordionTriggerMinH" | "accordionContentY" | "accordionContentB" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-controlX" | "-controlY" | "-controlXSm" | "-controlYSm" | "-badgeX" | "-badgeY" | "-insetXSm" | "-insetYSm" | "-insetX" | "-insetY" | "-insetXLg" | "-insetYLg" | "-padSm" | "-padMd" | "-padLg" | "-padXl" | "-gapSm" | "-gap" | "-gapLg" | "-accordionGap" | "-accordionInsetX" | "-accordionTriggerY" | "-accordionTriggerMinH" | "-accordionContentY" | "-accordionContentB"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "controlX" | "controlY" | "controlXSm" | "controlYSm" | "controlMinHXs" | "controlMinHSm" | "controlMinHMd" | "controlMinHLg" | "badgeX" | "badgeY" | "insetXSm" | "insetYSm" | "insetX" | "insetY" | "insetXLg" | "insetYLg" | "padSm" | "padMd" | "padLg" | "padXl" | "gapSm" | "gap" | "gapLg" | "accordionGap" | "accordionInsetX" | "accordionTriggerY" | "accordionTriggerMinH" | "accordionContentY" | "accordionContentB" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-controlX" | "-controlY" | "-controlXSm" | "-controlYSm" | "-controlMinHXs" | "-controlMinHSm" | "-controlMinHMd" | "-controlMinHLg" | "-badgeX" | "-badgeY" | "-insetXSm" | "-insetYSm" | "-insetX" | "-insetY" | "-insetXLg" | "-insetYLg" | "-padSm" | "-padMd" | "-padLg" | "-padXl" | "-gapSm" | "-gap" | "-gapLg" | "-accordionGap" | "-accordionInsetX" | "-accordionTriggerY" | "-accordionTriggerMinH" | "-accordionContentY" | "-accordionContentB"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 

package/packages/ui/src/select.tsx

@@ -22,10 +22,9 @@ export const Select = {
     const s = styles()
     return <Headless.ValueText className={cn(s.value, className)} {...props} />
   },
-  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => {
-    const s = styles()
-    return <Headless.Positioner className={className} {...props} />
-  },
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => (
+    <Headless.Positioner className={className} {...props} />
+  ),
   Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => {
     const s = styles()
     return <Headless.Item className={cn(s.item, className)} {...props} />