@zytechg/zyui v1.0.0

Modern UI Framework for ZyFOCUS

ZyUI is a comprehensive design system combining a utility-first CSS framework (ZyUI) with a powerful JavaScript runtime (ZyJS). Built for modern web applications with a focus on performance, accessibility, and developer experience.

Install

npm install @zytechg/zyui

Quick Start

CSS

<link rel="stylesheet" href="node_modules/@zytechg/zyui/zy-ui.css">

JavaScript

<script src="node_modules/@zytechg/zyui/zyjs.js"></script>
<script src="node_modules/@zytechg/zyui/zyjs.components.js"></script>

What's New in v1.0

Design System

• 200+ CSS utility classes - Typography, spacing, layout, colors, effects
• Comprehensive component library - Modal, Toast, Tabs, Accordion, Dropdown, Tooltip, and more
• Design tokens - Consistent colors, spacing, shadows, transitions
• Dark mode support - Automatic and manual theme switching
• Responsive utilities - Breakpoint-based modifiers

ZyJS Engine

• Reactive state management - Signals and Stores for reactive data
• Animation system - Built-in animations with fade, slide, pulse, spin
• Form utilities - Validation, FormData helpers
• Storage helpers - localStorage/sessionStorage wrappers
• Network utilities - Fetch with caching
• Performance tools - Debounce, throttle, RAF scheduling
• Modern observers - Intersection, Resize, Mutation observers
• Drag & drop - Simple draggable elements
• Keyboard shortcuts - Global keyboard event handling

Components

• modal - Accessible modal dialogs with backdrop
• toast-container - Notification system with positioning
• tabs - Tab panel navigation
• accordion - Collapsible sections
• dropdown - Context menus and dropdowns
• toggle - Switch/checkbox component
• form-validate - Real-time form validation
• lazy-load - Image lazy loading with IntersectionObserver
• infinite-scroll - Scroll-based pagination
• draggable - Drag and drop elements
• copy-btn - Clipboard copy functionality

Usage Examples

Utility Classes

<div class="zy-flex zy-items-center zy-gap-4 zy-p-4 zy-rounded-lg zy-shadow-md">
  <span class="zy-text-xl zy-font-bold">Title</span>
  <button class="zy-btn zy-btn-primary">Action</button>
</div>

Components

<!-- Modal -->
<div class="zy-modal-overlay" data-zyjs="modal" data-trigger="#open-modal">
  <div class="zy-modal">
    <div class="zy-modal-header">Modal Title</div>
    <div class="zy-modal-body">Content</div>
    <div class="zy-modal-footer">
      <button data-modal-close>Close</button>
    </div>
  </div>
</div>

<!-- Toast Container -->
<div data-zyjs="toast-container" data-position="top-right"></div>

<script>
  // Show toast
  ZyJS.toast.show('Hello World!', 'success', 3000);
</script>

<!-- Tabs -->
<div class="zy-tabs" data-zyjs="tabs">
  <div class="zy-tab-list">
    <button class="zy-tab is-active">Tab 1</button>
    <button class="zy-tab">Tab 2</button>
  </div>
  <div class="zy-tab-panels">
    <div class="zy-tab-panel is-active">Panel 1</div>
    <div class="zy-tab-panel">Panel 2</div>
  </div>
</div>

<!-- Toggle -->
<label class="zy-toggle" data-zyjs="toggle">
  <input type="checkbox" class="zy-toggle-input">
  <span class="zy-toggle-track">
    <span class="zy-toggle-thumb"></span>
  </span>
  <span>Enable Feature</span>
</label>

JavaScript API

// State management
const count = ZyJS.utils.createSignal(0);
count.subscribe(value => console.log(value));
count.set(5);

const store = ZyJS.utils.createStore({ user: null, theme: 'dark' });
store.subscribe('*', (state) => console.log(state));

// Event bus
ZyJS.bus.on('custom:event', (data) => console.log(data));
ZyJS.bus.emit('custom:event', { foo: 'bar' });

// Animations
const el = document.querySelector('.my-element');
ZyJS.utils.fadeIn(el, 300);
ZyJS.utils.slideIn(el, 'up', 400);

// Storage
ZyJS.utils.storage.set('key', { data: true });
const data = ZyJS.utils.storage.get('key');

// Validation
const form = document.querySelector('form');
const result = ZyJS.utils.validateForm(form, {
  email: { required: true, email: true },
  password: { required: true, minLength: 8 }
});

// Keyboard shortcuts
ZyJS.keyboard.on('ctrl+s', () => {
  console.log('Save pressed!');
});

Features

• Additive CSS - Apply zy-* classes alongside existing styles
• Component auto-mount - Components auto-mount on [data-zyjs] elements
• Event-driven architecture - Bus system for decoupled communication
• TypeScript-friendly - Clean API design works with TS
• Lightweight - No dependencies, small footprint
• Accessible - ARIA support and keyboard navigation
• Themeable - CSS custom properties for easy theming

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Modern mobile browsers

Documentation

For full documentation, visit: https://github.com/zakariaweb/Zy-Framework

License

MIT