aeon-ui-engine 1.0.0 → 1.0.2

package/apps/demo/src/site.ts

@@ -3,12 +3,23 @@ export const siteOrigin =
   (import.meta.env.VITE_SITE_ORIGIN as string | undefined)?.replace(/\/$/, '') ??
   'https://aeon-ui.com'
 
+/** Published npm package (monorepo root). */
+export const npmPackage = 'aeon-ui-engine' as const
+
+export const npmInstallCommand = `npm install ${npmPackage}` as const
+
+/** User-facing code sample — install line plus usage (no internal workspace import paths). */
+export const withInstall = (usage: string) => `${npmInstallCommand}\n\n${usage.trim()}`
+
 export const site = {
   brand: 'Aeon UI',
   tagline: 'Future-proof UI infrastructure for the web',
   url: 'https://github.com/GenericCPU/aeon-ui',
   siteOrigin,
   repoCloneUrl: 'https://github.com/GenericCPU/aeon-ui.git',
+  npmPackage,
+  npmRegistryUrl: `https://www.npmjs.com/package/${npmPackage}`,
+  npmInstallCommand,
   studio: 'SpiderCorp',
   studioUrl: 'https://spidercorp.xyz',
 
@@ -19,10 +30,12 @@ export const site = {
     'Statechart-driven primitives and a styled layer your team controls — dependable behavior today, room to grow tomorrow.',
   heroSub:
     'Grounded in proven state theory and production-ready patterns for compound components, anatomy, and styling.',
-  heroCtaPrimary: 'See components',
+  heroCtaPrimary: 'Try components',
   heroCtaSecondary: 'View architecture',
-  heroInstallLabel: 'Early access',
-  heroInstallAccess: 'DM FOR EARLY ACCESS',
+  headerCtaShort: 'Try',
+  heroInstallLabel: 'npm',
+  heroInstallCommand: npmInstallCommand,
+  heroInstallHint: `${npmPackage} on npm — core, React bindings, styled components, and themes in one install.`,
   stateCardLabel: 'Example: fetch region',
   stateCardHint: 'Five states on the rail. One active. Click Run.',
 
@@ -40,115 +53,101 @@ export const site = {
     {
       label: 'Styled',
       detail: 'Panda CSS slot recipes with thoughtful defaults you can extend',
-      example: "import { Button } from '@aeon-ui/ui'",
+      example: `${npmInstallCommand}\nimport { Button } from '@aeon-ui/ui'`,
     },
   ],
 
-  layersLabel: 'Architecture',
-  layersTitle: 'Three layers. One coherent system.',
+  philosophyLabel: 'Foundation',
+  philosophyTitle: 'What Aeon is',
+  philosophyLead:
+    'Not a grab bag of widgets — a discipline for interfaces that stay legible as requirements accumulate. Grounded in statechart theory and the conviction that the UI must represent every condition the model allows, and imply none that it does not.',
+  thesisUrl:
+    'https://www.theseus.fi/bitstream/handle/10024/334118/Thanh_Nguyen.pdf?sequence=2&isAllowed=y',
+  thesisCta: 'Read the thesis (PDF)',
+
+  layersLabel: 'Shape',
+  layersTitle: 'Separation on purpose',
   layersLead:
-    'Headless behavior, explicit anatomy, and intentional styling — composed so your product can evolve without rewriting its foundations.',
+    'Three layers so behavior, contract, and brand can evolve independently — without forking the mental model.',
 
   diagramsLabel: 'Statecharts',
-  diagramsTitle: 'Diagrams from Aeon',
+  diagramsTitle: 'A map the whole team can read',
   diagramsLead:
-    'Executable XState models in @aeon-ui/primitives — rendered here as statecharts you can compare to live demos in the playground.',
+    'Executable models you can review with design and engineering before complexity lands in production — the same chart the playground runs.',
   statesDocUrl: 'https://github.com/GenericCPU/aeon-ui/blob/main/STATES.md',
 
-  playgroundLabel: 'Live',
-  playgroundTitle: 'Experience the components',
+  playgroundLabel: 'Proof',
+  playgroundTitle: 'See the discipline in motion',
   playgroundLead:
-    'Every control runs on an executable XState model. Interact below and see predictable, reviewable behavior in action.',
-
-  philosophyLabel: 'Foundation',
-  philosophyTitle: 'Built on statecharts',
-  philosophyLead:
-    'Thanh Nguyen’s research on statecharts for web applications informs how Aeon models interaction — clear states, clear transitions, lasting maintainability.',
-  thesisUrl:
-    'https://www.theseus.fi/bitstream/handle/10024/334118/Thanh_Nguyen.pdf?sequence=2&isAllowed=y',
-  thesisCta: 'Read the thesis (PDF)',
+    'Each block is a real machine. Interact to feel what it means when the interface and the chart stay in lockstep.',
 
   faqLabel: 'FAQ',
-  faqTitle: 'Common questions',
-  faqLead: 'Straight answers for teams evaluating durable UI infrastructure.',
+  faqTitle: 'Questions teams ask',
+  faqLead: 'Identity and adoption — not a feature matrix.',
 } as const
 
-export const layers = [
-  {
-    id: 'core',
-    title: '@aeon-ui/core',
-    description: 'Philosophy, anatomy, and attributes your theme can target with confidence.',
-    highlights: ['asyncAnatomy, buttonAnatomy, …', 'stateToAttr(snapshot)', 'PHILOSOPHY.md + STATES.md'],
-    example: `import { partAttrs, asyncAnatomy } from '@aeon-ui/core'
-
-partAttrs(asyncAnatomy.scope, asyncAnatomy.readout, {
-  state: 'loading',
-})`,
-  },
-  {
-    id: 'react',
-    title: '@aeon-ui/react',
-    description: 'Headless React bindings where the interface reflects the machine snapshot.',
-    highlights: ['Async, Field, Dialog, Tabs', 'useAeonMachine(machine)', 'Compound parts'],
-    example: `import { Async, useAsyncContext } from '@aeon-ui/react'
-
-<Async.Root>
-  <Async.Track />
-  <Async.Readout>{status}</Async.Readout>
-</Async.Root>`,
-  },
-  {
-    id: 'ui',
-    title: '@aeon-ui/ui',
-    description: 'A polished styled layer — ship as-is or make it yours.',
-    highlights: ['Buttons, badges, panels', 'Panda slot recipes', 'Themes: light/dark × preset'],
-    example: `import { Async, Button } from '@aeon-ui/ui'
-
-<Button.Root status="pending">Saving…</Button.Root>`,
-  },
-] as const
-
+/** Why we built the stack this way — sits above the layer cards. */
 export const commitments = [
   {
-    id: 'exclusive',
-    title: 'Clear states, clear UI',
+    id: 'coherent',
+    title: 'One condition at a time',
     description:
-      'Each region holds one stable condition at a time — interfaces stay coherent as features grow.',
+      'Regions hold a single stable state the team can name, test, and extend — so interfaces stay coherent when flows multiply.',
   },
   {
-    id: 'diagram',
-    title: 'Diagrammable by design',
+    id: 'shared',
+    title: 'A shared map',
     description:
-      'Behavior you can review, extend, and visualize alongside your team before adding complexity.',
+      'Statecharts give designers and engineers the same picture of behavior before edge cases become tribal knowledge.',
   },
   {
-    id: 'defaults',
-    title: 'Your design system, fully yours',
+    id: 'sovereign',
+    title: 'Sovereign surfaces',
     description:
-      'Unstyled primitives plus intentional tokens — every surface reflects your brand and your standards.',
+      'Unstyled primitives with a clear anatomy contract. Defaults when you want speed — full control when you do not.',
   },
 ] as const
 
 export const philosophyTenets = [
   {
     title: 'Write the chart first',
-    body: 'Decide every stable state and transition before you pick colors.',
-    example: `states: { idle: {}, loading: {}, success: {}, failure: {} }`,
+    body: 'List every stable state and transition before you choose type scales. The model is the brief; the UI is its faithful projection.',
   },
   {
     title: 'UI = f(state)',
-    body: 'Components read one snapshot. Labels, disabled flags, and CSS all agree.',
-    example: `data-aeon-state="loading"`,
+    body: 'The snapshot decides what renders — labels, disabled affordances, and data-aeon-state together. Not parallel React flags that drift out of sync.',
   },
   {
     title: 'Show the full map',
-    body: 'Users see every state the machine allows — especially for async and forms.',
-    example: `<Async.Track />  {/* idle · loading · success · … */}`,
+    body: 'Users and developers see the same complete lifecycle. Async empty, button failure, field validation — nothing left implicit off-screen.',
   },
   {
     title: 'Scale with regions',
-    body: 'Split interaction, validation, and submission instead of one overloaded “error”.',
-    example: `interaction:dirty validation:invalid submission:pending`,
+    body: 'When complexity arrives, split orthogonal concerns — interaction, validation, submission — instead of one overloaded “error” boolean.',
+  },
+] as const
+
+export const layers = [
+  {
+    id: 'core',
+    title: 'Core',
+    description:
+      'The contract between machine and markup — scope, part, and state attributes your theme can target for years.',
+    highlights: ['North star & anatomy', 'PHILOSOPHY.md · STATES.md'],
+  },
+  {
+    id: 'react',
+    title: 'React',
+    description:
+      'Headless bindings where the DOM reflects the snapshot — compound parts, accessibility, and predictable structure.',
+    highlights: ['Snapshot-driven parts', 'useAeonMachine for app logic'],
+  },
+  {
+    id: 'ui',
+    title: 'Styled UI',
+    description:
+      'An optional face with intentional tokens — ship quickly or treat it as a reference implementation for your system.',
+    highlights: ['Panda recipes on anatomy', 'Themes: your palette, your modes'],
   },
 ] as const
 
@@ -156,192 +155,64 @@ export const playgroundBlocks = {
   async: {
     title: 'Async region',
     description:
-      'A fetch flow with five states. The rail always shows the full lifecycle; the readout and buttons match the active one.',
-    example: `import { Async, Button } from '@aeon-ui/ui'
-
-<Async.Root>
-  <Async.Track />
-  <Async.Readout>Ready</Async.Readout>
-  <Async.Actions>
-    <Button.Root onClick={() => send({ type: 'FETCH' })}>
-      Fetch
-    </Button.Root>
-  </Async.Actions>
-</Async.Root>`,
+      'Fetch flows as a named lifecycle — idle through empty — so “loading” is never the only story the UI tells.',
   },
   buttonLifecycle: {
     title: 'Button lifecycle',
     description:
-      'Submit buttons need more than disabled. pending, success, and failure are real states — styled and announced.',
-    example: `<Button.Root status="pending" aria-busy>
-  Submitting…
-</Button.Root>`,
-  },
-  scroll: {
-    title: 'Scroll regions',
-    description:
-      'Theme-aware scrollbars on vertical, horizontal, and 2D overflow. Scroll position and axis show up on data-aeon-state (e.g. between-y, at-start-x).',
-    example: `import { Scroll } from '@aeon-ui/ui'
-
-<Scroll.Root axis="both" maxH="md">
-  <Scroll.Viewport>
-    <Scroll.Content>{children}</Scroll.Content>
-  </Scroll.Viewport>
-  <Scroll.StateReadout />
-</Scroll.Root>`,
+      'Submission is more than disabled: pending, success, and failure are states worth showing, not hidden side effects.',
   },
   field: {
-    title: 'Field regions',
+    title: 'Field',
     description:
-      'Three parallel regions: touched or not, valid or not, submitting or not. The root carries all three in data-aeon-state.',
-    example: `<Field.Root>
-  <Field.Label htmlFor="email">Email</Field.Label>
-  <Field.Control id="email" validate={isEmail} />
-  <Field.Message>Invalid email.</Field.Message>
-</Field.Root>`,
-  },
-  buttons: {
-    title: 'Buttons',
-    description: 'Variants and sizes. Wrap groups in Button.Group for spacing.',
-    example: `<Button.Group>
-  <Button.Root>Primary</Button.Root>
-  <Button.Root variant="outline">Outline</Button.Root>
-  <Button.Root variant="ghost">Ghost</Button.Root>
-</Button.Group>`,
+      'Interaction, validation, and submission as parallel regions — complexity without a single tangled error flag.',
   },
-  toggle: {
-    title: 'Switch & checkbox',
-    description: 'Checked state lives in the machine. Pressed state is tracked for the thumb.',
-    example: `<Switch.Root defaultChecked>
-  <Switch.Control><Switch.Thumb /></Switch.Control>
-  <Switch.Label>Notifications</Switch.Label>
-</Switch.Root>`,
+  controls: {
+    title: 'Inputs & buttons',
+    description:
+      'Toggles, radio group, slider, and pin input — explicit states on every control surface.',
   },
   dialog: {
     title: 'Dialog',
-    description: 'open and closed are explicit. Escape and backdrop clicks are defined transitions.',
-    example: `<Dialog.Root>
-  <Dialog.Trigger>Open</Dialog.Trigger>
-  <Dialog.Content>
-    <Dialog.Title>Title</Dialog.Title>
-    <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
-  </Dialog.Content>
-</Dialog.Root>`,
-  },
-  combobox: {
-    title: 'Combobox',
     description:
-      'Typeahead select built on the same listbox model as Select — filter options, arrow keys, Enter to commit.',
-    example: `import { Combobox } from '@aeon-ui/ui'
-
-<Combobox.Root value={value} onValueChange={setValue}>
-  <Combobox.Input placeholder="Search…" aria-label="Country" />
-  <Combobox.Content>
-    <Combobox.Item value="us">United States</Combobox.Item>
-    <Combobox.Empty />
-  </Combobox.Content>
-</Combobox.Root>`,
+      'Open and closed are first-class. Dismissal paths are transitions, not surprises.',
   },
   overlay: {
-    title: 'Menu, popover, tooltip & toast',
+    title: 'Overlays',
     description:
-      'Floating surfaces share an open/closed machine. Menu uses menu roles; toast uses polite live region.',
-    example: `import { Menu, Tooltip, Toast, useToast } from '@aeon-ui/ui'
-
-// App root:
-<Toast.Provider>
-  <App />
-  <Toast.Viewport placement="bottom-end" />
-</Toast.Provider>
-
-// Anywhere inside the provider:
-const { publish } = useToast()
-publish({ title: 'Saved', description: 'Changes applied.', durationMs: 4000 })`,
-  },
-  tabsAccordion: {
-    title: 'Tabs & accordion',
-    description: 'One active tab. Multiple accordion items can be open — each item has its own state.',
-    example: `<Tabs.Root defaultValue="a">
-  <Tabs.List>
-    <Tabs.Trigger value="a">Tab A</Tabs.Trigger>
-  </Tabs.List>
-  <Tabs.Content value="a">…</Tabs.Content>
-</Tabs.Root>`,
-  },
-} as const
-
-export const tabsExamples = {
-  philosophy: {
-    label: 'Idea',
-    content: 'Define states in a chart. UI only shows conditions the chart allows.',
-    example: 'UI = f(snapshot)',
-  },
-  machines: {
-    label: 'Machines',
-    content: 'XState runs in the browser. Same model you sketch on a whiteboard.',
-    example: "import { createAsyncMachine } from '@aeon-ui/primitives'",
-  },
-  anatomy: {
-    label: 'Anatomy',
-    content: 'Style with data attributes — stable across refactors.',
-    example: '[data-aeon-scope="button"][data-aeon-state="pending"]',
-  },
-} as const
-
-export const accordionExamples = {
-  what: {
-    trigger: 'What is Aeon UI?',
-    content: 'Headless statechart components for React, plus an optional styled layer.',
-    example: 'git clone https://github.com/GenericCPU/aeon-ui.git',
-  },
-  why: {
-    trigger: 'Why statecharts?',
-    content: 'So async, forms, and modals stay explicit as products grow.',
-    example: 'See STATES.md in the repo for states traditional UI skips.',
+      'Floating surfaces with the same open/closed discipline — anchored behavior you can reason about.',
   },
 } as const
 
 export const faq = [
   {
-    id: 'totality',
-    question: 'What does “UI = f(state)” mean?',
+    id: 'what',
+    question: 'What is Aeon UI?',
     answer:
-      'The machine snapshot picks what renders. If the chart has loading, you build loading UI — not a boolean you forgot to clear.',
-    example: `const status = snapshot.value // "loading"
-<Async.Readout>{copy[status]}</Async.Readout>`,
+      'Infrastructure for the web where behavior is modeled explicitly and the interface expresses that model completely. Headless primitives, React bindings, and an optional styled layer — published as aeon-ui-engine.',
   },
   {
-    id: 'structure',
-    question: 'How do components compose?',
+    id: 'why',
+    question: 'Why statecharts?',
     answer:
-      'Compound parts (Root, Track, Label, …) with data-aeon-scope and data-aeon-part. Behavior comes from XState machines in @aeon-ui/primitives.',
-    example: `<Checkbox.Root>
-  <Checkbox.Control />
-  <Checkbox.Label>Email me</Checkbox.Label>
-</Checkbox.Root>`,
+      'Because products outgrow boolean soup. Statecharts name conditions, separate regions, and stay diagrammable as requirements grow — the thesis case for modern web UI is documented in our primary reference (linked in Foundation).',
   },
   {
-    id: 'styling',
-    question: 'How do I style things?',
+    id: 'totality',
+    question: 'What does “UI = f(state)” mean?',
     answer:
-      'Target data-aeon-* in your CSS, or use @aeon-ui/ui recipes. Themes swap palettes on html[data-aeon-theme][data-aeon-mode].',
-    example: `import '@aeon-ui/panda/styles.css'
-import { applyAeonTheme } from '@aeon-ui/panda/themes'
-
-applyAeonTheme('signal', 'dark')`,
+      'The machine snapshot picks what renders. If the chart includes loading, you build loading UI — and you do not imply success, failure, or empty unless the chart allows them.',
   },
   {
     id: 'headless',
-    question: 'Headless only?',
+    question: 'Do I have to use your styles?',
     answer:
-      'Yes. Import @aeon-ui/react, bring your own CSS, and keep the same anatomy attributes.',
-    example: `import { Dialog } from '@aeon-ui/react'`,
+      'No. The headless layer is the point: same anatomy and states with your CSS. The styled package is a convenience, not a cage.',
   },
   {
-    id: 'roadmap',
-    question: 'What ships today?',
-    answer:
-      '14 headless primitives including Menu, Popover, Tooltip, and Toast; Panda themes; styled @aeon-ui/ui. See COMPONENTS.md for the full matrix.',
-    example: 'pnpm dev  →  localhost:5173',
+    id: 'install',
+    question: 'How do I adopt it?',
+    answer: `Install ${npmPackage} from npm. Core, React, and styled UI ship together; import the layer that matches where you are in the stack.`,
+    example: npmInstallCommand,
   },
 ] as const

package/docs/MACHINES.md

@@ -21,8 +21,13 @@
 | **Toast** (item) | `toastMachine` | `useAeonMachine` | visible / hidden |
 | **Select** | `popoverMachine` | `useAeonMachine` | `open` / `closed`; highlight in React |
 | **Combobox** | — | **`useState`** (open, query, highlight) | `open` / `closed` + highlight attrs |
-| **Tooltip** | — | **`useState(open)`** | `open` / `closed` |
+| **Tooltip** | — | **`useState(open)`** | `open` / `closed`; touch tap toggle |
 | **Scroll** | — | **`getScrollSnapshot()`** | Derived overflow/edge tokens |
+| **Separator** | — | **static orientation prop** | horizontal / vertical |
+| **Progress** | — | **props** (`value`, `indeterminate`) | idle / loading / complete |
+| **RadioGroup** | `tabsMachine` | `useAeonMachine` | selected value |
+| **Slider** | `sliderMachine` | `useAeonMachine` | idle / dragging + numeric value |
+| **PinInput** | — | **`useState`** | idle / complete |
 
 ---
 

package/package.json

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

package/packages/core/src/anatomy.ts

@@ -142,3 +142,26 @@ export const toastAnatomy = anatomy('toast', [
 
 /** Profile image — loaded / loading / error on root `data-aeon-state`. */
 export const avatarAnatomy = anatomy('avatar', ['root', 'image', 'fallback'] as const)
+
+export const separatorAnatomy = anatomy('separator', ['root'] as const)
+
+/** Progress bar — idle / loading / complete on root `data-aeon-state`. */
+export const progressAnatomy = anatomy('progress', ['root', 'track', 'range', 'label'] as const)
+
+export const radioGroupAnatomy = anatomy('radioGroup', [
+  'root',
+  'item',
+  'itemControl',
+  'itemIndicator',
+  'itemLabel',
+] as const)
+
+export const sliderAnatomy = anatomy('slider', [
+  'root',
+  'track',
+  'range',
+  'thumb',
+  'valueText',
+] as const)
+
+export const pinInputAnatomy = anatomy('pinInput', ['root', 'input'] as const)

package/packages/panda/panda.config.ts

@@ -13,6 +13,11 @@ import {
   dialogRecipe,
   switchRecipe,
   tabsRecipe,
+  separatorRecipe,
+  progressRecipe,
+  radioGroupRecipe,
+  sliderRecipe,
+  pinInputRecipe,
   menuRecipe,
   popoverRecipe,
   tooltipRecipe,
@@ -42,7 +47,7 @@ export default defineConfig({
   conditions: {
     extend: {
       aeonSelected: '&[data-aeon-state=selected]',
-      aeonChecked: '&[data-aeon-state*=checked]',
+      aeonChecked: '&[data-aeon-state~="checked"]',
       aeonOpen: '&[data-aeon-state=open]',
       aeonClosed: '&[data-aeon-state=closed]',
       aeonPending: '&[data-aeon-state=pending]',
@@ -64,6 +69,11 @@ export default defineConfig({
         aeonAccordion: accordionRecipe,
         aeonDialog: dialogRecipe,
         aeonTabs: tabsRecipe,
+        aeonSeparator: separatorRecipe,
+        aeonProgress: progressRecipe,
+        aeonRadioGroup: radioGroupRecipe,
+        aeonSlider: sliderRecipe,
+        aeonPinInput: pinInputRecipe,
         aeonSwitch: switchRecipe,
         aeonCheckbox: checkboxRecipe,
         aeonAsync: asyncRegionRecipe,
@@ -225,5 +235,13 @@ export default defineConfig({
       opacity: '0.7',
       pointerEvents: 'none',
     },
+    '@keyframes aeonProgressIndeterminate': {
+      '0%': { transform: 'translateX(-100%)' },
+      '100%': { transform: 'translateX(250%)' },
+    },
+    '[data-aeon-scope="radioGroup"] [data-aeon-part="item"]': {
+      display: 'inline-flex',
+      alignItems: 'center',
+    },
   },
 })

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/index.ts

@@ -11,4 +11,9 @@ export { checkboxRecipe } from './checkbox.js'
 export { dialogRecipe } from './dialog.js'
 export { switchRecipe } from './switch.js'
 export { tabsRecipe } from './tabs.js'
+export { separatorRecipe } from './separator.js'
+export { progressRecipe } from './progress.js'
+export { radioGroupRecipe } from './radio-group.js'
+export { sliderRecipe } from './slider.js'
+export { pinInputRecipe } from './pin-input.js'
 export { menuRecipe, popoverRecipe, toastRecipe, tooltipRecipe } from './floating.js'

package/packages/panda/src/recipes/pin-input.ts

@@ -0,0 +1,29 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+export const pinInputRecipe = defineSlotRecipe({
+  className: 'aeonPinInput',
+  slots: ['root', 'input'],
+  base: {
+    root: {
+      display: 'inline-flex',
+      gap: 'gapSm',
+    },
+    input: {
+      width: '2.5rem',
+      height: '2.75rem',
+      textAlign: 'center',
+      fontSize: 'lg',
+      fontFamily: 'ui',
+      fontWeight: 'semibold',
+      borderRadius: 'md',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surface',
+      color: 'fg',
+      outline: 'none',
+      _focusVisible: { boxShadow: 'focusRing', borderColor: 'accent' },
+      '&[data-aeon-state=filled]': { borderColor: 'accent' },
+    },
+  },
+})