aeon-ui-engine 1.0.0 → 1.0.2

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

@@ -0,0 +1,44 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'track', 'range', 'label'] as const
+
+export const progressRecipe = defineSlotRecipe({
+  className: 'aeonProgress',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      fontFamily: 'ui',
+      width: '100%',
+      '&[data-aeon-state=loading] .aeonProgress__range': {
+        width: '40%!',
+        animation: 'aeonProgressIndeterminate 1.2s ease-in-out infinite',
+      },
+    },
+    track: {
+      position: 'relative',
+      width: '100%',
+      height: '0.5rem',
+      borderRadius: 'full',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      overflow: 'hidden',
+    },
+    range: {
+      height: '100%',
+      borderRadius: 'full',
+      bg: 'accent',
+      transitionProperty: 'width',
+      transitionDuration: 'normal',
+    },
+    label: {
+      fontSize: 'sm',
+      color: 'muted',
+      lineHeight: 'snug',
+    },
+  },
+})

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

@@ -0,0 +1,51 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+import { fieldLabelBase, fieldRootBase } from './field-shared.js'
+
+const slots = ['root', 'item', 'itemControl', 'itemIndicator', 'itemLabel'] as const
+
+export const radioGroupRecipe = defineSlotRecipe({
+  className: 'aeonRadioGroup',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      fontFamily: 'ui',
+    },
+    item: {
+      ...fieldRootBase,
+    },
+    itemControl: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '1.5rem',
+      height: '1.5rem',
+      flexShrink: 0,
+      borderRadius: 'full',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surface',
+      cursor: 'pointer',
+      transitionProperty: 'background-color, border-color',
+      transitionDuration: 'normal',
+      outline: 'none',
+      _focusVisible: { boxShadow: 'focusRing' },
+      _aeonSelected: {
+        borderColor: 'accent',
+      },
+    },
+    itemIndicator: {
+      width: '0.625rem',
+      height: '0.625rem',
+      borderRadius: 'full',
+      bg: 'accent',
+    },
+    itemLabel: {
+      ...fieldLabelBase,
+      cursor: 'pointer',
+    },
+  },
+})

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

@@ -16,7 +16,8 @@ export const selectRecipe = defineSlotRecipe({
       justifyContent: 'space-between',
       gap: 'gapSm',
       width: '100%',
-      minH: '2rem',
+      boxSizing: 'border-box',
+      minH: 'controlMinHSm',
       py: 'controlY',
       px: 'controlX',
       borderRadius: 'sm',
@@ -62,6 +63,7 @@ export const selectRecipe = defineSlotRecipe({
       borderBottom: '2px solid',
       borderColor: 'muted',
       transform: 'rotate(45deg) translateY(-1px)',
+      transformOrigin: 'center',
       transitionProperty: 'transform',
       transitionDuration: 'normal',
     },

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

@@ -0,0 +1,35 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root'] as const
+
+export const separatorRecipe = defineSlotRecipe({
+  className: 'aeonSeparator',
+  slots,
+  base: {
+    root: {
+      flexShrink: 0,
+      bg: 'border',
+      border: 'none',
+    },
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: {
+          width: '100%',
+          height: '1px',
+        },
+      },
+      vertical: {
+        root: {
+          width: '1px',
+          height: '100%',
+          alignSelf: 'stretch',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})

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

@@ -0,0 +1,57 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const sliderRecipe = defineSlotRecipe({
+  className: 'aeonSlider',
+  slots: ['root', 'track', 'range', 'thumb', 'valueText'],
+  base: {
+    root: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 'gapSm',
+      width: '100%',
+      minW: '8rem',
+    },
+    track: {
+      position: 'relative',
+      height: '0.35rem',
+      borderRadius: 'full',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      cursor: 'pointer',
+      touchAction: 'none',
+    },
+    range: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      height: '100%',
+      borderRadius: 'full',
+      bg: 'accentDim',
+      pointerEvents: 'none',
+    },
+    thumb: {
+      position: 'absolute',
+      top: '50%',
+      width: '1rem',
+      height: '1rem',
+      borderRadius: 'full',
+      bg: 'accent',
+      borderWidth: '2px',
+      borderStyle: 'solid',
+      borderColor: 'surfaceRaised',
+      transform: 'translate(-50%, -50%)',
+      cursor: 'grab',
+      boxShadow: 'panel',
+      _focusVisible: { boxShadow: 'focusRing' },
+      '&[data-aeon-state=dragging]': { cursor: 'grabbing' },
+    },
+    valueText: {
+      fontSize: 'xs',
+      fontFamily: 'ui',
+      color: 'muted',
+    },
+  },
+})

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/recipes/aeon-pin-input.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AeonPinInputVariant {
+  
+}
+
+type AeonPinInputVariantMap = {
+  [key in keyof AeonPinInputVariant]: Array<AeonPinInputVariant[key]>
+}
+
+export type AeonPinInputVariantProps = {
+  [key in keyof AeonPinInputVariant]?: ConditionalValue<AeonPinInputVariant[key]> | undefined
+}
+
+export interface AeonPinInputRecipe {
+  __type: AeonPinInputVariantProps
+  (props?: AeonPinInputVariantProps): Pretty<Record<"root" | "input", string>>
+  raw: (props?: AeonPinInputVariantProps) => AeonPinInputVariantProps
+  variantMap: AeonPinInputVariantMap
+  variantKeys: Array<keyof AeonPinInputVariant>
+  splitVariantProps<Props extends AeonPinInputVariantProps>(props: Props): [AeonPinInputVariantProps, Pretty<DistributiveOmit<Props, keyof AeonPinInputVariantProps>>]
+  getVariantProps: (props?: AeonPinInputVariantProps) => AeonPinInputVariantProps
+}
+
+
+export declare const aeonPinInput: AeonPinInputRecipe

package/packages/panda/styled-system/recipes/aeon-pin-input.mjs

@@ -0,0 +1,36 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aeonPinInputDefaultVariants = {}
+const aeonPinInputCompoundVariants = []
+
+const aeonPinInputSlotNames = [
+  [
+    "root",
+    "aeonPinInput__root"
+  ],
+  [
+    "input",
+    "aeonPinInput__input"
+  ]
+]
+const aeonPinInputSlotFns = /* @__PURE__ */ aeonPinInputSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aeonPinInputDefaultVariants, getSlotCompoundVariant(aeonPinInputCompoundVariants, slotName))])
+
+const aeonPinInputFn = memo((props = {}) => {
+  return Object.fromEntries(aeonPinInputSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aeonPinInputVariantKeys = []
+const getVariantProps = (variants) => ({ ...aeonPinInputDefaultVariants, ...compact(variants) })
+
+export const aeonPinInput = /* @__PURE__ */ Object.assign(aeonPinInputFn, {
+  __recipe__: false,
+  __name__: 'aeonPinInput',
+  raw: (props) => props,
+  variantKeys: aeonPinInputVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aeonPinInputVariantKeys)
+  },
+  getVariantProps
+})

package/packages/panda/styled-system/recipes/aeon-progress.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AeonProgressVariant {
+  
+}
+
+type AeonProgressVariantMap = {
+  [key in keyof AeonProgressVariant]: Array<AeonProgressVariant[key]>
+}
+
+export type AeonProgressVariantProps = {
+  [key in keyof AeonProgressVariant]?: ConditionalValue<AeonProgressVariant[key]> | undefined
+}
+
+export interface AeonProgressRecipe {
+  __type: AeonProgressVariantProps
+  (props?: AeonProgressVariantProps): Pretty<Record<"root" | "track" | "range" | "label", string>>
+  raw: (props?: AeonProgressVariantProps) => AeonProgressVariantProps
+  variantMap: AeonProgressVariantMap
+  variantKeys: Array<keyof AeonProgressVariant>
+  splitVariantProps<Props extends AeonProgressVariantProps>(props: Props): [AeonProgressVariantProps, Pretty<DistributiveOmit<Props, keyof AeonProgressVariantProps>>]
+  getVariantProps: (props?: AeonProgressVariantProps) => AeonProgressVariantProps
+}
+
+
+export declare const aeonProgress: AeonProgressRecipe

package/packages/panda/styled-system/recipes/aeon-progress.mjs

@@ -0,0 +1,44 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aeonProgressDefaultVariants = {}
+const aeonProgressCompoundVariants = []
+
+const aeonProgressSlotNames = [
+  [
+    "root",
+    "aeonProgress__root"
+  ],
+  [
+    "track",
+    "aeonProgress__track"
+  ],
+  [
+    "range",
+    "aeonProgress__range"
+  ],
+  [
+    "label",
+    "aeonProgress__label"
+  ]
+]
+const aeonProgressSlotFns = /* @__PURE__ */ aeonProgressSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aeonProgressDefaultVariants, getSlotCompoundVariant(aeonProgressCompoundVariants, slotName))])
+
+const aeonProgressFn = memo((props = {}) => {
+  return Object.fromEntries(aeonProgressSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aeonProgressVariantKeys = []
+const getVariantProps = (variants) => ({ ...aeonProgressDefaultVariants, ...compact(variants) })
+
+export const aeonProgress = /* @__PURE__ */ Object.assign(aeonProgressFn, {
+  __recipe__: false,
+  __name__: 'aeonProgress',
+  raw: (props) => props,
+  variantKeys: aeonProgressVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aeonProgressVariantKeys)
+  },
+  getVariantProps
+})

package/packages/panda/styled-system/recipes/aeon-radio-group.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AeonRadioGroupVariant {
+  
+}
+
+type AeonRadioGroupVariantMap = {
+  [key in keyof AeonRadioGroupVariant]: Array<AeonRadioGroupVariant[key]>
+}
+
+export type AeonRadioGroupVariantProps = {
+  [key in keyof AeonRadioGroupVariant]?: ConditionalValue<AeonRadioGroupVariant[key]> | undefined
+}
+
+export interface AeonRadioGroupRecipe {
+  __type: AeonRadioGroupVariantProps
+  (props?: AeonRadioGroupVariantProps): Pretty<Record<"root" | "item" | "itemControl" | "itemIndicator" | "itemLabel", string>>
+  raw: (props?: AeonRadioGroupVariantProps) => AeonRadioGroupVariantProps
+  variantMap: AeonRadioGroupVariantMap
+  variantKeys: Array<keyof AeonRadioGroupVariant>
+  splitVariantProps<Props extends AeonRadioGroupVariantProps>(props: Props): [AeonRadioGroupVariantProps, Pretty<DistributiveOmit<Props, keyof AeonRadioGroupVariantProps>>]
+  getVariantProps: (props?: AeonRadioGroupVariantProps) => AeonRadioGroupVariantProps
+}
+
+
+export declare const aeonRadioGroup: AeonRadioGroupRecipe

package/packages/panda/styled-system/recipes/aeon-radio-group.mjs

@@ -0,0 +1,48 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aeonRadioGroupDefaultVariants = {}
+const aeonRadioGroupCompoundVariants = []
+
+const aeonRadioGroupSlotNames = [
+  [
+    "root",
+    "aeonRadioGroup__root"
+  ],
+  [
+    "item",
+    "aeonRadioGroup__item"
+  ],
+  [
+    "itemControl",
+    "aeonRadioGroup__itemControl"
+  ],
+  [
+    "itemIndicator",
+    "aeonRadioGroup__itemIndicator"
+  ],
+  [
+    "itemLabel",
+    "aeonRadioGroup__itemLabel"
+  ]
+]
+const aeonRadioGroupSlotFns = /* @__PURE__ */ aeonRadioGroupSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aeonRadioGroupDefaultVariants, getSlotCompoundVariant(aeonRadioGroupCompoundVariants, slotName))])
+
+const aeonRadioGroupFn = memo((props = {}) => {
+  return Object.fromEntries(aeonRadioGroupSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aeonRadioGroupVariantKeys = []
+const getVariantProps = (variants) => ({ ...aeonRadioGroupDefaultVariants, ...compact(variants) })
+
+export const aeonRadioGroup = /* @__PURE__ */ Object.assign(aeonRadioGroupFn, {
+  __recipe__: false,
+  __name__: 'aeonRadioGroup',
+  raw: (props) => props,
+  variantKeys: aeonRadioGroupVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aeonRadioGroupVariantKeys)
+  },
+  getVariantProps
+})

package/packages/panda/styled-system/recipes/aeon-separator.d.ts

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AeonSeparatorVariant {
+  /**
+ * @default "horizontal"
+ */
+orientation: "horizontal" | "vertical"
+}
+
+type AeonSeparatorVariantMap = {
+  [key in keyof AeonSeparatorVariant]: Array<AeonSeparatorVariant[key]>
+}
+
+export type AeonSeparatorVariantProps = {
+  [key in keyof AeonSeparatorVariant]?: ConditionalValue<AeonSeparatorVariant[key]> | undefined
+}
+
+export interface AeonSeparatorRecipe {
+  __type: AeonSeparatorVariantProps
+  (props?: AeonSeparatorVariantProps): Pretty<Record<"root", string>>
+  raw: (props?: AeonSeparatorVariantProps) => AeonSeparatorVariantProps
+  variantMap: AeonSeparatorVariantMap
+  variantKeys: Array<keyof AeonSeparatorVariant>
+  splitVariantProps<Props extends AeonSeparatorVariantProps>(props: Props): [AeonSeparatorVariantProps, Pretty<DistributiveOmit<Props, keyof AeonSeparatorVariantProps>>]
+  getVariantProps: (props?: AeonSeparatorVariantProps) => AeonSeparatorVariantProps
+}
+
+
+export declare const aeonSeparator: AeonSeparatorRecipe

package/packages/panda/styled-system/recipes/aeon-separator.mjs

@@ -0,0 +1,41 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aeonSeparatorDefaultVariants = {
+  "orientation": "horizontal"
+}
+const aeonSeparatorCompoundVariants = []
+
+const aeonSeparatorSlotNames = [
+  [
+    "root",
+    "aeonSeparator__root"
+  ]
+]
+const aeonSeparatorSlotFns = /* @__PURE__ */ aeonSeparatorSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aeonSeparatorDefaultVariants, getSlotCompoundVariant(aeonSeparatorCompoundVariants, slotName))])
+
+const aeonSeparatorFn = memo((props = {}) => {
+  return Object.fromEntries(aeonSeparatorSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aeonSeparatorVariantKeys = [
+  "orientation"
+]
+const getVariantProps = (variants) => ({ ...aeonSeparatorDefaultVariants, ...compact(variants) })
+
+export const aeonSeparator = /* @__PURE__ */ Object.assign(aeonSeparatorFn, {
+  __recipe__: false,
+  __name__: 'aeonSeparator',
+  raw: (props) => props,
+  variantKeys: aeonSeparatorVariantKeys,
+  variantMap: {
+  "orientation": [
+    "horizontal",
+    "vertical"
+  ]
+},
+  splitVariantProps(props) {
+    return splitProps(props, aeonSeparatorVariantKeys)
+  },
+  getVariantProps
+})

package/packages/panda/styled-system/recipes/aeon-slider.d.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface AeonSliderVariant {
+  
+}
+
+type AeonSliderVariantMap = {
+  [key in keyof AeonSliderVariant]: Array<AeonSliderVariant[key]>
+}
+
+export type AeonSliderVariantProps = {
+  [key in keyof AeonSliderVariant]?: ConditionalValue<AeonSliderVariant[key]> | undefined
+}
+
+export interface AeonSliderRecipe {
+  __type: AeonSliderVariantProps
+  (props?: AeonSliderVariantProps): Pretty<Record<"root" | "track" | "range" | "thumb" | "valueText", string>>
+  raw: (props?: AeonSliderVariantProps) => AeonSliderVariantProps
+  variantMap: AeonSliderVariantMap
+  variantKeys: Array<keyof AeonSliderVariant>
+  splitVariantProps<Props extends AeonSliderVariantProps>(props: Props): [AeonSliderVariantProps, Pretty<DistributiveOmit<Props, keyof AeonSliderVariantProps>>]
+  getVariantProps: (props?: AeonSliderVariantProps) => AeonSliderVariantProps
+}
+
+
+export declare const aeonSlider: AeonSliderRecipe

package/packages/panda/styled-system/recipes/aeon-slider.mjs

@@ -0,0 +1,48 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
+import { createRecipe } from './create-recipe.mjs';
+
+const aeonSliderDefaultVariants = {}
+const aeonSliderCompoundVariants = []
+
+const aeonSliderSlotNames = [
+  [
+    "root",
+    "aeonSlider__root"
+  ],
+  [
+    "track",
+    "aeonSlider__track"
+  ],
+  [
+    "range",
+    "aeonSlider__range"
+  ],
+  [
+    "thumb",
+    "aeonSlider__thumb"
+  ],
+  [
+    "valueText",
+    "aeonSlider__valueText"
+  ]
+]
+const aeonSliderSlotFns = /* @__PURE__ */ aeonSliderSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, aeonSliderDefaultVariants, getSlotCompoundVariant(aeonSliderCompoundVariants, slotName))])
+
+const aeonSliderFn = memo((props = {}) => {
+  return Object.fromEntries(aeonSliderSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
+})
+
+const aeonSliderVariantKeys = []
+const getVariantProps = (variants) => ({ ...aeonSliderDefaultVariants, ...compact(variants) })
+
+export const aeonSlider = /* @__PURE__ */ Object.assign(aeonSliderFn, {
+  __recipe__: false,
+  __name__: 'aeonSlider',
+  raw: (props) => props,
+  variantKeys: aeonSliderVariantKeys,
+  variantMap: {},
+  splitVariantProps(props) {
+    return splitProps(props, aeonSliderVariantKeys)
+  },
+  getVariantProps
+})

package/packages/panda/styled-system/recipes/index.d.ts

@@ -5,6 +5,11 @@ export * from './aeon-badge';
 export * from './aeon-accordion';
 export * from './aeon-dialog';
 export * from './aeon-tabs';
+export * from './aeon-separator';
+export * from './aeon-progress';
+export * from './aeon-radio-group';
+export * from './aeon-slider';
+export * from './aeon-pin-input';
 export * from './aeon-switch';
 export * from './aeon-checkbox';
 export * from './aeon-async';

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

@@ -4,6 +4,11 @@ export * from './aeon-badge.mjs';
 export * from './aeon-accordion.mjs';
 export * from './aeon-dialog.mjs';
 export * from './aeon-tabs.mjs';
+export * from './aeon-separator.mjs';
+export * from './aeon-progress.mjs';
+export * from './aeon-radio-group.mjs';
+export * from './aeon-slider.mjs';
+export * from './aeon-pin-input.mjs';
 export * from './aeon-switch.mjs';
 export * from './aeon-checkbox.mjs';
 export * from './aeon-async.mjs';