🌊 Danphe UI (v5.0) — World-Class Universal UI & Creative Studio Framework

🌟 Key Pillars of Danphe UI

| Pillar | Features & Capabilities | |---|---| | 🎨 576+ Vector Icons | Universal icon resolver by Name or 16-bit OpCode, Web Icons, Premiere Studio Tools, and Adaptive Telemetry. | | 💫 Realtime Animated Icons | 60FPS multi-layer vector motion (Radar Sweep, Heartbeat ECG, Fluttering Flag, 3D Danphe Bird, Equalizer). | | 📶 Adaptive Telemetry Icons | Value/State-driven icons (WiFi 0-4 levels, 5G Cellular 0-5 bars, Battery 0-100%, Volume gain). | | 🔤 256 Typography Suite | Nepali Devanagari (Mukta, Sagarmatha, Kalimati), 7-Segment LED, Matrix LCD, Swiss Sans, Luxury Serif. | | ⚡ 256 CSS Motion Keyframes | 4-Stage animation lifecycle (IN, OVERALL, OUT, TRANS) with zero CSS runtime overhead. | | 🌈 256 Colors & Film LUTs | Hollywood Cinematic LUTs (Kodak 5219, Fuji Eterna), OKLCH Perceptual Matrices & 60FPS Canvas Shaders. | | 📱 General Purpose UI Suite | Glassmorphism Cards, Buttons, Inputs (Single-line, Password, Floating Labels), Badges, Tables & Flags. |

🚀 Installation

Install danphe-ui with a single command:

npm install danphe-ui

💡 Quick Start

1. React / Next.js (App Router & SSR Compatible)

import React from 'react';
import { 
  Button, 
  Input, 
  Card, 
  DanpheIcon, 
  NepalFlag, 
  NepaliDateTag,
  DanpheColor 
} from 'danphe-ui';

export default function Dashboard() {
  return (
    <Card variant="glass" className="p-6 max-w-lg mx-auto">
      {/* 🇳🇵 National Identity & Realtime Icons */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <NepalFlag size={28} animated={true} />
          <NepaliDateTag />
        </div>
        <DanpheIcon name="wifi" level={4} />
      </div>

      <h1 className="text-xl font-black text-white mb-2">
        नमस्ते नेपाल! Danphe UI v5.0
      </h1>

      {/* ⌨️ Inputs Suite */}
      <div className="space-y-3 my-4">
        <Input placeholder="Enter full name..." />
        <Input mode="password" placeholder="Enter secure password..." />
      </div>

      {/* 🔘 Buttons */}
      <Button variant="primary" className="w-full">
        Launch Studio
      </Button>
    </Card>
  );
}

📶 Adaptive Telemetry Icons (State & Value Driven)

Icons dynamically morph their SVG paths and signal indicators based on live props or hardware OpCodes:

// 📶 WiFi Signal (Level 0 to 4)
<DanpheIcon name="wifi" level={3} /> // 75% Strong Signal (-52 dBm)
<DanpheIcon name="wifi" level={0} /> // Disconnected (Red Slash)

// 📱 Cellular 5G Network (Bars 0 to 5)
<DanpheIcon name="cellular" bars={5} /> // 5G Ultra-Wideband

// 🔋 Battery (0% to 100% + Charging indicator)
<DanpheIcon name="battery" level={85} charging={true} />
<DanpheIcon name="battery" level={10} /> // Critical Red Alert

// 🔊 Volume Levels (0 to 3 + Mute)
<DanpheIcon name="volume" level={2} />
<DanpheIcon name="volume" level={0} /> // Muted

🎨 256 Colors, Film LUTs & OKLCH

Access 256 color matrices, Kodak/Fuji film LUTs, and OKLCH color spaces in 1 line:

import { DanpheColor } from 'danphe-ui';

// By Name or OpCode (0x00 to 0xFF)
const crimson = DanpheColor.get('Danphe Royal Crimson'); // or DanpheColor.get(0x00)
console.log(crimson.hex);         // "#E11D48"
console.log(crimson.cssGradient);  // "linear-gradient(135deg, #e11d48, #881337, #4c0519)"

// Hollywood Film LUTs
const kodak = DanpheColor.get(0x20); // Kodak Vision3 5219 Warm
const fuji = DanpheColor.get(0x21);  // Fuji Eterna 8543 Cool

🔤 256 Typography Suite

import { DanpheFont } from 'danphe-ui';

const mukta = DanpheFont.get('Mukta');                 // Nepali Devanagari
const ledDisplay = DanpheFont.get('Seven Segment Red'); // 7-Segment Hardware Font
const swiss = DanpheFont.get(0x01);                    // Swiss Clean Sans

⌨️ Inputs Suite (10+ Variants)

| Variant | Props | Usage | |---|---|---| | Single-line Text | mode="text" | <Input placeholder="Full Name" /> | | Password | mode="password" | <Input mode="password" /> (Eye toggle built-in) | | Search Bar | slotAlign="left" | <Input slotAlign="left" icon="search" /> | | Double Glow (Neon) | borderMode="double-glow" | <Input borderMode="double-glow" /> | | Material Underline | borderMode="underline-solid" | <Input borderMode="underline-solid" /> | | Floating Notch Label | float="top" | <Input float="top" label="ORGANIZATION" /> | | Multiline Textarea | multiline={true} | <Input multiline={true} rows={3} /> |

📦 Dual Module Support (ESM & CommonJS)

danphe-ui natively supports both modern ESM import and legacy Node.js require():

// ESM / Next.js / Vite
import { Button, DanpheIcon } from 'danphe-ui';

// CommonJS / Node.js
const { Button, DanpheIcon } = require('danphe-ui');

📄 License

MIT © Shankar Phuyal & The Danphe UI Open Source Team. Proudly Crafted for Nepal and the World! 🇳🇵🌍