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

@phoenix-tekhne/react-deiknunai (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-deiknunai@2.5.1
"@phoenix-tekhne/react-deiknunai": "2.5.1"

About this package

@phoenix-tekhne/react-deiknunai

Display and feedback components for Phoenix Tekhne, built on the Dynamis headless system.

Overview

Deiknunai (Δεικνύναι - "to show/display" in Greek) provides display and feedback components including alerts, badges, toasts, tooltips, and progress indicators. All components are built on the Phoenix Tekhne Dynamis headless system for full accessibility and state management.

Components

Feedback Components

Component Purpose Dynamis Hook
Alert Alert messages and banners Custom
InlineAlert Inline alert within content Custom
Toast Toast notifications useKerygma
ToastContainer Toast queue management useKerygma

Display Components

Component Purpose
Badge Status badges and counters
StatusLight Visual status indicators
ProgressBar Progress indicators
Spinner Loading spinners
Tooltip Contextual information useProskalesthai

Layout Components

Component Purpose
Divider Visual separators
Well Content containers
IllustratedMessage Empty/error states with illustrations

Installation

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

Usage

Alert

import { Alert } from '@phoenix-tekhne/react-deiknunai';

<Alert variant="info" title="Information">
  This is an informational alert.
</Alert>

<Alert variant="success" title="Success!">
  Your changes have been saved.
</Alert>

<Alert variant="warning" title="Warning">
  Please review your settings.
</Alert>

<Alert variant="error" title="Error">
  Something went wrong.
</Alert>

Toast Notifications

import {
  Toast,
  ToastContainer,
  useKerygma,
} from "@phoenix-tekhne/react-deiknunai";

function App() {
  const { addToast, toasts, removeToast } = useKerygma();

  const showSuccess = () => {
    addToast({
      id: "success-1",
      variant: "success",
      title: "Saved!",
      message: "Your changes have been saved.",
    });
  };

  return (
    <>
      <button onClick={showSuccess}>Show Toast</button>
      <ToastContainer>
        {toasts.map((toast) => (
          <Toast
            key={toast.id}
            variant={toast.variant}
            title={toast.title}
            onClose={() => removeToast(toast.id)}
          >
            {toast.message}
          </Toast>
        ))}
      </ToastContainer>
    </>
  );
}

Badge

import { Badge } from '@phoenix-tekhne/react-deiknunai';

// Status badge
<Badge variant="success">Active</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="error">Failed</Badge>

// Counter badge
<Badge count={5} />
<Badge count={100} max={99} />  {/* Shows "99+" */}

Tooltip

import { Tooltip } from '@phoenix-tekhne/react-deiknunai';

<Tooltip content="This is helpful information">
  <button>Hover me</button>
</Tooltip>

<Tooltip content="Click to save" placement="right">
  <button>Save</button>
</Tooltip>

Progress Bar

import { ProgressBar } from '@phoenix-tekhne/react-deiknunai';

// Determinate progress
<ProgressBar value={75} max={100} label="75%" />

// Indeterminate (loading)
<ProgressBar isIndeterminate />

// With steps
<ProgressBar
  value={2}
  max={5}
  label="Step 2 of 5"
  showSteps
/>

Spinner

import { Spinner } from '@phoenix-tekhne/react-deiknunai';

// Default size
<Spinner />

// Sizes
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

// With label
<Spinner label="Loading..." />

For AI Agents: Quick Reference

When to Use This Package

Component Use Case Import
Alert/InlineAlert System messages, errors, confirmations @phoenix-tekhne/react-deiknunai
Toast Notifications that auto-dismiss @phoenix-tekhne/react-deiknunai
Badge Status indicators, counters @phoenix-tekhne/react-deiknunai
Tooltip Contextual help on hover @phoenix-tekhne/react-deiknunai
ProgressBar Progress indication @phoenix-tekhne/react-deiknunai
Spinner Loading states @phoenix-tekhne/react-deiknunai
Divider Visual separation @phoenix-tekhne/react-deiknunai
IllustratedMessage Empty states, errors @phoenix-tekhne/react-deiknunai

Component Selection Guide

// Blocking alert - user must acknowledge
<Alert variant="error" title="Error" >
  Please fix the errors before continuing.
</Alert>

// Non-blocking notification
<Toast variant="success" title="Saved!" />

// Contextual hint
<Tooltip content="Click to learn more">
  <button>Help</button>
</Tooltip>

// Status in list/table
<Badge variant="success">Complete</Badge>

Key Files

File Pattern Purpose
src/components/*.tsx Component implementations
src/components/*.test.tsx Unit tests
src/stories/*.stories.tsx Storybook stories

Related Packages

  • @phoenix-tekhne/react-dynamis - Headless hooks (useKerygma)
  • @phoenix-tekhne/react-tupos - Form components
  • @phoenix-tekhne/react-krinein - Modal components

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 display feedback notification status accessibility a11y
Details
npm
2026-05-28 07:21:44 -07:00
5
latest
15 KiB
Assets (1)
react-deiknunai-2.5.1.tgz 15 KiB
Versions (1) View all
2.5.1 2026-05-28