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

@phoenix-tekhne/patterns (0.3.0)

Published 2026-05-28 07:22:37 -07:00 by dmonphx

Installation

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

About this package

@phoenix-tekhne/patterns

Reusable UI patterns for building complex interfaces in the Phoenix Tekhne Design System.

Installation

npm install @phoenix-tekhne/patterns

Patterns

CopyButton

A button that copies text to clipboard with visual feedback.

import { CopyButton } from "@phoenix-tekhne/patterns";

<CopyButton text="Text to copy" onCopy={() => console.log("Copied!")} />;

AccordionSection

Collapsible content section with animated header and accessible markup.

import { AccordionSection } from "@phoenix-tekhne/patterns";

<AccordionSection title="Section Title" defaultExpanded>
  <p>Collapsible content here...</p>
</AccordionSection>;

SplitPanel

A 50/50 split layout with matching heights for side-by-side content.

import { SplitPanel } from "@phoenix-tekhne/patterns";

<SplitPanel
  leftPanel={<div>Left content</div>}
  rightPanel={<div>Right content</div>}
/>;

CollapsiblePanel

A panel that can be collapsed to maximize workspace.

import { CollapsiblePanel } from "@phoenix-tekhne/patterns";

<CollapsiblePanel title="Panel Title" direction="right">
  <p>Panel content here...</p>
</CollapsiblePanel>;

StatusFooter

A footer displaying status indicators and metadata.

import { StatusFooter } from "@phoenix-tekhne/patterns";

<StatusFooter
  indicators={[
    { label: "Status", value: "Active", status: "success" },
    { label: "Last Saved", value: "2 mins ago" },
  ]}
/>;

GlassCard

A card component with frosted glass effect.

import { GlassCard } from "@phoenix-tekhne/patterns";

<GlassCard>
  <h3>Card Title</h3>
  <p>Card content with glass effect...</p>
</GlassCard>;

DataTable

A data table with sorting, filtering, and actions.

import { DataTable } from "@phoenix-tekhne/patterns";

<DataTable
  data={[
    { id: 1, name: "John", email: "john@example.com" },
    { id: 2, name: "Jane", email: "jane@example.com" },
  ]}
  columns={[
    { key: "name", header: "Name", sortable: true },
    { key: "email", header: "Email" },
  ]}
/>;

EmailPreview

A component for previewing email content with device toggle.

import { EmailPreview } from "@phoenix-tekhne/patterns";

<EmailPreview
  subject="Welcome to our service"
  html="<h1>Welcome!</h1><p>Thanks for joining...</p>"
/>;

For AI Agents: Quick Reference

When to Use This Package

Pattern Use Case Example
CopyButton Clipboard operations Copy code, links, text
AccordionSection Collapsible content FAQ sections, settings groups
SplitPanel Side-by-side layouts Code preview, document editors
CollapsiblePanel Toggleable panels Sidebar, property panels
StatusFooter System status display Connection status, user count
GlassCard Frosted glass effect Modern cards, overlays
DataTable Data display Lists, reports, data grids
EmailPreview Email rendering Template previews, testing

Pattern Selection Guide

// Copy to clipboard
<CopyButton text={codeSnippet} onCopy={() => showToast("Copied!")} />

// Collapsible content
<AccordionSection title="Settings" defaultExpanded>
  <FormFields />
</AccordionSection>

// Side-by-side layout
<SplitPanel leftPanel={<Editor />} rightPanel={<Preview />} />

// Status indicators
<StatusFooter
  indicators={[
    { id: "db", label: "Database", value: "Connected", variant: "success" },
    { id: "users", label: "Users", value: userCount },
  ]}
/>

CSS Class Pattern

All components use the tupos- prefix:

  • .tupos-copybutton
  • .tupos-accordion
  • .tupos-splitpanel
  • .tupos-collapsible
  • .tupos-statusfooter
  • .tupos-glasscard
  • .tupos-datatable
  • .tupos-emailpreview

Dependencies

  • React >= 19.0.0
  • React DOM >= 19.0.0

License

MIT - Phoenix Inceptions Media LLC

Dependencies

Dependencies

ID Version
@phoenix-tekhne/react-graphikos 0.2.0

Development Dependencies

ID Version
@types/react ^19.2.14
@types/react-dom ^19.2.3
@vitejs/plugin-react ^5.1.4
typescript ^5.9.3
vite ^5.4.21
vite-plugin-dts ^4.5.4

Peer Dependencies

ID Version
react >=19.0.0
react-dom >=19.0.0
Details
npm
2026-05-28 07:22:37 -07:00
5
Phoenix Inceptions Media LLC
MIT
latest
135 KiB
Assets (1)
patterns-0.3.0.tgz 135 KiB
Versions (1) View all
0.3.0 2026-05-28