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

@phoenix-tekhne/react-tupos (0.3.0)

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

Installation

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

About this package

@phoenix-tekhne/react-tupos

UI components for the Phoenix Tekhne Design System, built on the Dynamis headless system.

Overview

Tupos (τύπος - type/form in Greek) provides foundational UI components for building interfaces. All components are built on top of the Phoenix Tekhne Dynamis headless system, providing:

  • Full accessibility (ARIA attributes, keyboard navigation)
  • State management and validation
  • Multi-framework compatibility (React, Vue, Angular, Svelte)

Architecture

@phoenix-tekhne/react-tupos
        │
        │ uses
        ▼
@phoenix-tekhne/react-dynamis
        │
        │ built on
        ▼
@phoenix-tekhne/dynamis-core (state machines)

Components

Form Components

  • Button - Action buttons with variants (primary, secondary, danger)
  • TextField - Text input with validation (uses useLexisField)
  • Checkbox - Checkbox with tri-state support (uses useKrasis)
  • RadioGroup - Radio button group (uses useEpilipsis)
  • Switch - Toggle switch (uses useKrasis)
  • Dropdown - Select dropdown (uses useEpilipsis)
  • Slider - Range slider (uses useMetabole)
  • Card - Content container

Layout Components

  • Tabs - Tab navigation
  • Accordion - Collapsible sections

Dialog Components

  • ConfirmDialog - Confirmation dialog with useConfirmDialog hook
  • AlertDialog - Alert notifications with useAlertDialog hook

Installation

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

Usage

import {
  Button,
  Card,
  TextField,
  ConfirmDialog,
  useConfirmDialog,
} from "@phoenix-tekhne/react-tupos";
import "@phoenix-tekhne/react-tupos/style.css";

function MyComponent() {
  const { confirm, ConfirmDialogComponent } = useConfirmDialog();

  const handleDelete = () => {
    confirm(
      "Delete?",
      "This action cannot be undone.",
      () => console.log("Deleted!"),
      { variant: "danger" },
    );
  };

  return (
    <Card>
      <TextField label="Email" type="email" required />
      <Button variant="danger" onClick={handleDelete}>
        Delete
      </Button>
      <ConfirmDialogComponent />
    </Card>
  );
}

For AI Agents: Quick Reference

When to Use This Package

Component Use Case Dynamis Hook Import
Button User actions useProskrousis @phoenix-tekhne/react-tupos
TextField Text input useLexisField @phoenix-tekhne/react-tupos
Checkbox Binary selection useKrasis @phoenix-tekhne/react-tupos
RadioGroup Single selection useEpilipsis @phoenix-tekhne/react-tupos
Switch Toggle useKrasis @phoenix-tekhne/react-tupos
Dropdown Select menu useEpilipsis @phoenix-tekhne/react-tupos
Slider Range selection useMetabole @phoenix-tekhne/react-tupos
Card Content containers - @phoenix-tekhne/react-tupos
ConfirmDialog Confirmations useProskalesthai @phoenix-tekhne/react-tupos
AlertDialog Notifications useKerygma @phoenix-tekhne/react-tupos
Tabs Tab navigation tab state @phoenix-tekhne/react-tupos
Accordion Collapsible accordion state @phoenix-tekhne/react-tupos

Component Selection Guide

// Primary action
<Button variant="primary">Save</Button>

// Text field with validation
<TextField
  label="Email"
  type="email"
  required
  minLength={5}
  pattern={/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/}
/>

// Checkbox with tri-state
<Checkbox
  label="Subscribe"
  defaultChecked={false}
  isIndeterminate={isMixed}
/>

// Confirmation dialog
const { confirm, ConfirmDialogComponent } = useConfirmDialog();
confirm("Delete?", "This cannot be undone.", onConfirm, { variant: "danger" });

Key Files

File Pattern Purpose
src/*.tsx Component implementations
src/*-AGENT.md Component-specific patterns
src/*.stories.tsx Storybook documentation
src/*.test.tsx Unit tests

CSS Class Pattern

All components use the tupos- prefix:

  • .tupos-btn - Button base
  • .tupos-btn-primary - Button variant
  • .tupos-card - Card container
  • .tupos-field-* - Form field patterns
  • .tupos-dialog-* - Dialog variants

Related Packages

This package is part of Phoenix Tekhne v2. See also:

  • @phoenix-tekhne/dynamis-core - Headless state machines
  • @phoenix-tekhne/react-dynamis - React hooks for interactions
  • @phoenix-tekhne/react-krinein - Modal components (Dialog, Overlay)
  • @phoenix-tekhne/react-deiknunai - Display components (Toast, Tooltip)

Storybook

Dependencies

  • @phoenix-tekhne/tokens - Design tokens
  • @phoenix-tekhne/react-dynamis - Headless hooks
  • lucide-react - Icons

Contributing

See AGENTS.md in repository root for contribution guidelines.

When adding a new component:

  1. Check if state machine exists in dynamis-core
  2. Use corresponding hook from react-dynamis
  3. Apply Phoenix Tekhne design tokens
  4. Add stories to both Storybooks

Dependencies

Dependencies

ID Version
@phoenix-tekhne/dynamis-core 2.5.1
@phoenix-tekhne/pattern-core 0.2.0
@phoenix-tekhne/react-dynamis 2.5.1

Development Dependencies

ID Version
@storybook/addon-essentials ^8.5.0
@storybook/react ^8.5.0
@storybook/react-vite ^8.5.0
@testing-library/jest-dom ^6.9.1
@testing-library/react ^16.0.0
@types/node ^25.3.5
@types/react ^19.2.14
@types/react-dom ^19.2.3
@vitejs/plugin-react ^5.1.4
@vitest/coverage-v8 ^1.0.0
happy-dom ^13.0.0
storybook ^8.5.0
typescript ^5.9.3
vite ^5.4.21
vite-plugin-dts ^4.5.4
vitest ^1.0.0

Peer Dependencies

ID Version
react >=19.0.0
react-dom >=19.0.0
Details
npm
2026-05-28 07:21:43 -07:00
3
140 KiB
Assets (1)
react-tupos-0.3.0.tgz 140 KiB
Versions (2) View all
0.3.1 2026-05-28
0.3.0 2026-05-28