aeon-ui-engine 1.0.0 → 1.0.2

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: /*-*/ /*-*/;
@@ -805,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;
@@ -967,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;
 }
 
@@ -975,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;
 }
 
@@ -983,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);
 }
@@ -992,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;
 }
 
@@ -1239,7 +1258,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);
 }
@@ -1273,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);
@@ -1640,6 +1659,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 +1750,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,7 +1884,8 @@
       display: inline-flex;
       gap: var(--spacing-gap-sm);
       width: 100%;
-      min-height: 2rem;
+      box-sizing: border-box;
+      min-height: controlMinHSm;
       padding-block: var(--spacing-control-y);
       padding-inline: var(--spacing-control-x);
       border-radius: var(--radii-sm);
@@ -1787,6 +1939,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 +1996,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 +2100,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 +2122,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 +2311,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/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/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>,
         )}
       >