dmonphx
0 Followers · 0 Following
  • Joined on 2026-02-19
Repositories Projects Packages Public Activity Starred Repositories

@phoenix-tekhne/dynamis-core (2.5.1)

Published 2026-05-28 07:20:32 -07:00 by dmonphx

Installation

@phoenix-tekhne:registry=https://gitrepo.cstudiosinc.com/api/packages/dmonphx/npm/
npm install @phoenix-tekhne/dynamis-core@2.5.1
"@phoenix-tekhne/dynamis-core": "2.5.1"

About this package

@phoenix-tekhne/dynamis-core

Pure TypeScript state machines for Phoenix Tekhne - Zero Pixels, Framework Agnostic.

Overview

Dynamis (Δύναμις - "power/ability" in Greek) provides the headless foundation for the Phoenix Tekhne Design System. It contains framework-agnostic state machines that handle:

  • Accessibility (ARIA attributes, keyboard navigation)
  • State Management (controlled/uncontrolled modes)
  • Validation (form field validation)
  • Interactions (press, hover, drag, etc.)

Architecture

dynamis-core
    │
    ├── State Machines (src/logic/)
    │   ├── lexis-field.ts       (Text inputs)
    │   ├── krasis-toggle.ts     (Toggles)
    │   ├── epilipsis-select.ts  (Selects)
    │   └── ...
    │
    └── Events (src/events/)
        └── TypedEventEmitter

State Machines

All state machines follow the Phoenix Tekhne Greek naming convention:

Greek Term English Purpose File
Lexis (λέξις) Text Text inputs lexis-field.ts
Chronos (χρόνος) Date/Time Date/time pickers chronos-field.ts
Krasis (κράσις) Toggle Checkboxes, switches krasis-toggle.ts
Epilipsis (ἔλλειψις) Select Dropdowns, selects epilipsis-select.ts
Proskalesthai Overlay Modals, overlays proskalesthai-overlay.ts
Kerygma (κήρυγμα) Toast Notifications toast-queue.ts
Proskrousis Press Button interactions press-state-machine.ts
Paratisis Hover Hover states paratisis-hover.ts
Metabole Drag Drag and drop metabole-drag.ts
Aneuros Disabled Disabled state aneuros-disabled.ts

Installation

npm install @phoenix-tekhne/dynamis-core

Usage

Direct State Machine Usage

import { createLexisFieldMachine } from "@phoenix-tekhne/dynamis-core";

const machine = createLexisFieldMachine({
  initialValue: "",
  isRequired: true,
  minLength: 5,
  maxLength: 100,
});

// Transition to focused state
machine.send({ type: "FOCUS" });

// Update value
machine.send({ type: "CHANGE", value: "Hello" });

// Get current state
const state = machine.getState();

With Framework Adapters

Dynamis-core is typically used through framework-specific adapters:

  • React: @phoenix-tekhne/react-dynamis
  • Vue: @phoenix-tekhne/vue-dynamis
  • Angular: @phoenix-tekhne/angular-dynamis
  • Svelte: @phoenix-tekhne/svelte-dynamis
  • Web Components: @phoenix-tekhne/web-dynamis

For AI Agents: Quick Reference

When to Use This Package

Use Case Import
Building custom form logic dynamis-core/logic/lexis-field
Creating framework adapter dynamis-core base classes
Understanding state patterns Reference existing machines

Key Files

File Purpose
src/logic/index.ts All state machine exports
src/events/index.ts Typed event system
src/logic/*.ts Individual state machines

Pattern: Creating a Custom State Machine

import { createMachine, assign } from "@phoenix-tekhne/dynamis-core";

export const myCustomMachine = createMachine({
  id: "myComponent",
  initial: "idle",
  states: {
    idle: {
      on: { ACTIVATE: "active" },
    },
    active: {
      on: { DEACTIVATE: "idle" },
    },
  },
});

Related Packages

  • @phoenix-tekhne/react-dynamis - React hooks
  • @phoenix-tekhne/vue-dynamis - Vue composables
  • @phoenix-tekhne/react-tupos - Styled components built on Dynamis

Documentation

See root AGENTS.md for comprehensive contribution guidelines.

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Development Dependencies

ID Version
typescript ^5.0.0
vite ^5.0.0
vite-plugin-dts ^4.5.4
vitest ^1.0.0

Keywords

headless accessibility state-machine a11y
Details
npm
2026-05-28 07:20:32 -07:00
8
latest
34 KiB
Assets (1)
dynamis-core-2.5.1.tgz 34 KiB
Versions (1) View all
2.5.1 2026-05-28