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

@phoenix-tekhne/react-dynamis (2.5.1)

Published 2026-05-28 07:21:11 -07:00 by dmonphx

Installation

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

About this package

@phoenix-tekhne/react-dynamis

React hooks for Phoenix Tekhne - Headless interaction primitives built on Dynamis Core.

Overview

React-dynamis provides React hooks that wrap the framework-agnostic Dynamis Core state machines. Each hook provides:

  • Reactive State - Full React integration with useState/useEffect
  • Props Generation - Ready-to-spread props for JSX elements
  • Accessibility - Automatic ARIA attributes
  • Validation - Built-in form validation

Architecture

React Component
      │
      │ uses
      ▼
React Hook (useLexisField, useKrasis, etc.)
      │
      │ wraps
      ▼
Dynamis Core State Machine

Hooks

All hooks use the Phoenix Tekhne Greek naming convention:

Form Hooks

Hook Greek English Use Case
useLexisField Lexis (λέξις) Text Text inputs, textareas
useArithmosField Arithmos (ἀριθμός) Number Number inputs
useChronosField Chronos (χρόνος) Time Date/time pickers
useEpilipsis Epilipsis (ἔλλειψις) Select Dropdowns, selects
useKrasis Krasis (κράσις) Toggle Checkboxes, switches

Interaction Hooks

Hook Greek English Use Case
useProskrousis Proskrousis Press Button interactions
useParatisis Paratisis Hover Hover states
useMetabole Metabole (μεταβολή) Drag Drag and drop
useAneuros Aneuros (ἄνευρος) Disabled Disabled state

Overlay Hooks

Hook Greek English Use Case
useProskalesthai Proskalesthai Overlay Modals, overlays
useKerygma Kerygma (κήρυγμα) Toast Notifications
useAkolouthein Akolouthein Follow Focus management

Installation

npm install @phoenix-tekhne/react-dynamis @phoenix-tekhne/dynamis-core

Usage

Text Field

import { useLexisField } from "@phoenix-tekhne/react-dynamis";

function TextField({ label, ...props }) {
  const { state, inputProps, labelProps, helperProps } = useLexisField({
    initialValue: "",
    isRequired: props.required,
    minLength: props.minLength,
    maxLength: props.maxLength,
    pattern: props.pattern,
  });

  return (
    <div>
      <label {...labelProps}>{label}</label>
      <input {...inputProps} {...props} />
      {state.errorMessage && <span {...helperProps}>{state.errorMessage}</span>}
    </div>
  );
}

Toggle/Checkbox

import { useKrasis } from "@phoenix-tekhne/react-dynamis";

function Checkbox({ label, defaultChecked }) {
  const { state, toggleProps, labelProps } = useKrasis({
    initialChecked: defaultChecked,
  });

  return (
    <label {...labelProps}>
      <input type="checkbox" {...toggleProps} />
      {label}
    </label>
  );
}

Select/Dropdown

import { useEpilipsis } from "@phoenix-tekhne/react-dynamis";

function Select({ options, label }) {
  const { state, triggerProps, menuProps, optionProps } = useEpilipsis({
    options,
    onSelectionChange: (key) => console.log("Selected:", key),
  });

  return (
    <div>
      <button {...triggerProps}>{label}</button>
      <ul {...menuProps}>
        {options.map((option) => (
          <li key={option.key} {...optionProps(option.key)}>
            {option.label}
          </li>
        ))}
      </ul>
    </div>
  );
}

For AI Agents: Quick Reference

When to Use This Package

Use Case Hook Import
Text input useLexisField @phoenix-tekhne/react-dynamis
Number input useArithmosField @phoenix-tekhne/react-dynamis
Date/time useChronosField @phoenix-tekhne/react-dynamis
Checkbox useKrasis @phoenix-tekhne/react-dynamis
Select useEpilipsis @phoenix-tekhne/react-dynamis
Button useProskrousis @phoenix-tekhne/react-dynamis
Modal useProskalesthai @phoenix-tekhne/react-dynamis
Toast useKerygma @phoenix-tekhne/react-dynamis

Hook Pattern

All hooks follow this pattern:

const { state, ...props } = useHookName({
  // Initial configuration
  initialValue: "",
  // Validation
  isRequired: true,
  // Callbacks
  onChange: (value) => {},
});

Key Files

File Pattern Purpose
src/hooks/use*.ts Individual hooks
src/hooks/index.ts All hook exports
src/stories/*.stories.tsx Storybook examples

Common Configuration Options

interface HookConfig {
  // State
  initialValue?: string;
  initialChecked?: boolean;
  defaultOpen?: boolean;

  // Validation
  isRequired?: boolean;
  minLength?: number;
  maxLength?: number;
  pattern?: RegExp;

  // Callbacks
  onChange?: (value: any) => void;
  onFocus?: () => void;
  onBlur?: () => void;
}

Related Packages

  • @phoenix-tekhne/dynamis-core - Framework-agnostic state machines
  • @phoenix-tekhne/react-tupos - Styled components (built on these hooks)
  • @phoenix-tekhne/react-krinein - Modal components
  • @phoenix-tekhne/react-deiknunai - Display components

Documentation

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Dependencies

ID Version
@phoenix-tekhne/dynamis-core 2.5.1

Development Dependencies

ID Version
@testing-library/react ^16.0.0
@types/react ^19.0.0
@types/react-dom ^19.0.0
happy-dom ^16.0.0
react ^19.0.0
react-dom ^19.0.0
typescript ^5.7.0
vite ^6.0.0
vite-plugin-dts ^4.5.4
vitest ^2.0.0

Peer Dependencies

ID Version
react ^19.0.0
react-dom ^19.0.0

Keywords

headless react accessibility a11y hooks
Details
npm
2026-05-28 07:21:11 -07:00
8
latest
33 KiB
Assets (1)
react-dynamis-2.5.1.tgz 33 KiB
Versions (1) View all
2.5.1 2026-05-28