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

@phoenix-tekhne/react-krinein (2.5.1)

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

Installation

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

About this package

@phoenix-tekhne/react-krinein

Modal and overlay components for Phoenix Tekhne, built on the Dynamis headless system.

Overview

Krinein (Κρίνειν - "to judge/decide" in Greek) provides modal and decision-making components including dialogs, overlays, and action bars. All components are built on the Phoenix Tekhne Dynamis headless system for full accessibility, focus management, and state control.

Components

Component Purpose Dynamis Hook
Dialog Modal dialogs (alert, confirm, custom) useProskalesthai
Overlay Backdrop overlays useProskalesthai
ActionBar Bottom action bars Custom

Installation

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

Usage

Dialog

import { Dialog, useProskalesthai } from "@phoenix-tekhne/react-krinein";

function ConfirmDelete({ isOpen, onClose, onConfirm }) {
  const { overlayProps, dialogProps } = useProskalesthai({
    isOpen,
    onClose,
  });

  return (
    <Dialog
      {...dialogProps}
      title="Confirm Delete"
      variant="danger"
      footer={
        <>
          <button onClick={onClose}>Cancel</button>
          <button onClick={onConfirm} className="danger">
            Delete
          </button>
        </>
      }
    >
      Are you sure you want to delete this item? This action cannot be undone.
    </Dialog>
  );
}

Alert Dialog

import { Dialog } from "@phoenix-tekhne/react-krinein";

<Dialog
  isOpen={true}
  title="Error"
  variant="error"
  onClose={() => {}}
  footer={<button onClick={onClose}>OK</button>}
>
  Something went wrong. Please try again.
</Dialog>;

Overlay

import { Overlay, useProskalesthai } from "@phoenix-tekhne/react-krinein";

function ModalWithOverlay({ isOpen, onClose, children }) {
  const { overlayProps } = useProskalesthai({
    isOpen,
    onClose,
  });

  return (
    <>
      <Overlay {...overlayProps} />
      <div role="dialog" aria-modal="true">
        {children}
      </div>
    </>
  );
}

Action Bar

import { ActionBar } from "@phoenix-tekhne/react-krinein";

<ActionBar
  isOpen={true}
  content="5 items selected"
  actions={
    <>
      <button>Archive</button>
      <button>Delete</button>
    </>
  }
/>;

For AI Agents: Quick Reference

When to Use This Package

Component Use Case Import
Dialog Modals, confirmations, alerts @phoenix-tekhne/react-krinein
Overlay Backdrop for custom modals @phoenix-tekhne/react-krinein
ActionBar Bottom action bars @phoenix-tekhne/react-krinein

Component Selection Guide

// Simple confirmation
<Dialog
  title="Delete?"
  variant="danger"
  onClose={onCancel}
  footer={
    <>
      <button onClick={onCancel}>Cancel</button>
      <button onClick={onConfirm} className="danger">Delete</button>
    </>
  }
>
  Are you sure?
</Dialog>

// Alert (no choice)
<Dialog
  title="Success"
  variant="success"
  onClose={onClose}
  footer={<button onClick={onClose}>OK</button>}
>
  Item saved successfully.
</Dialog>

// Custom modal
<>
  <Overlay isOpen={isOpen} onClose={onClose} />
  <CustomModal isOpen={isOpen} />
</>

Key Files

File Pattern Purpose
src/components/Dialog.tsx Dialog component
src/components/Overlay.tsx Overlay component
src/components/ActionBar.tsx Action bar component
src/stories/*.stories.tsx Storybook stories

Related Packages

  • @phoenix-tekhne/react-dynamis - Headless hooks (useProskalesthai)
  • @phoenix-tekhne/react-tupos - Form components for dialog content
  • @phoenix-tekhne/react-deiknunai - Display components (alerts, badges)

Documentation

  • Storybook: http://localhost:6006 (Components storybook)
  • AGENTS.md: See root repository for contribution guidelines

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Dependencies

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

Development Dependencies

ID Version
@storybook/react ^10.4.0
@storybook/react-vite ^10.4.0
@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
storybook ^10.4.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 modal dialog decision accessibility a11y
Details
npm
2026-05-28 07:21:44 -07:00
5
latest
8.4 KiB
Assets (1)
react-krinein-2.5.1.tgz 8.4 KiB
Versions (1) View all
2.5.1 2026-05-28