Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog,
and this project adheres to Semantic Versioning.

[1.3.0] - 2025-10-16

🚀 MAJOR BREAKING CHANGES

This version represents a complete architectural overhaul of DialcaUI, transitioning from Tailwind-dependent to a pure CSS library with zero external dependencies.

💥 Breaking Changes

CSS Architecture Migration: Complete migration from Tailwind CSS to pure CSS with BEM methodology
Zero Dependencies: Removed all Tailwind CSS dependencies - library now works without any CSS framework
New Hook System: Completely redesigned variant system with smart CSS/Custom detection
Bundle Structure: Restructured build output for better tree-shaking and performance
API Changes: Some internal APIs have changed (public API remains backward compatible)

✨ New Features

🎨 Pure CSS with BEM Methodology

Zero CSS Dependencies: No more Tailwind CSS required - works in any project
BEM Class Structure: Clean, semantic CSS classes (e.g., .dialca-button, .dialca-button--success)
CSS Variables: Customizable design tokens for easy theming
Production Ready: Optimized CSS bundle

🧠 Smart Variant System

Automatic Detection: Hooks automatically detect when to use CSS vs custom variants
Backward Compatible: Existing custom variant API still works
Performance Optimized: Zero overhead when using built-in variants
Flexible: Extend defaults or create completely custom styling

🔄 Architecture Changes

Before (v1.2.x)

// Required Tailwind CSS + complex variant processing
import 'tailwindcss/base';
import 'tailwindcss/components'; 
import 'tailwindcss/utilities';
import { Button } from 'dialca-ui';

// Bundle: ~200KB+ (with Tailwind)

After (v1.3.0)

// Pure CSS - no external dependencies
import 'dialca-ui/css';
import { Button } from 'dialca-ui';

🎯 Component Updates

All 12 components have been migrated to the new architecture:

✅ Migrated Components

Button - Pure CSS with 6+ variants (default, success, danger, outline, ghost, minimal)
InputField - Text inputs with validation states and password toggle
TxtArea - Auto-resize textareas with character counting
Select - Styled dropdown with custom options
SearchableSelect - Dropdown with search and keyboard navigation
Modal - Customizable dialogs with multiple sizes and animations
RadioInput - Radio buttons with card and minimal variants
Checkbox - Multiple variants (default, card, minimal) with indeterminate state
Switch - Toggle switches with smooth animations
Loader - Loading spinners with multiple animation types
DropZone - Drag & drop file upload with validation
CircleCharCounter - Circular progress character counter

🎨 CSS Variant Examples

/* Built-in BEM classes */
.dialca-button--success { /* success styling */ }
.dialca-button--danger { /* danger styling */ }
.dialca-input-field--error { /* error state */ }
.dialca-modal--large { /* large modal */ }

🛠️ Developer Experience

New Hook System

// Smart hooks detect CSS vs Custom variants
const { shouldUseCSS getStyles } = useButtonVariants(
    variant,
    customVariants,
    { disabled, loading },
    extendDefault
);

Flexible Usage Patterns

// 1. Pure CSS (recommended)
<Button variant="success">Save</Button>

// 2. Custom variants (extends CSS)
<Button 
    variant="neon"
    variants={{
        neon: {
            normal: { container: "bg-gradient-to-r from-purple-500..." }
        }
    }}
>

// 3. Completely custom (replaces CSS)
<Button 
    variant="custom"
    extendDefault={false}
    variants={{ /* completely custom styles */ }}
>

📦 Build & Distribution

New Build System

Multiple Formats: ESM, CJS, and TypeScript definitions
CSS Bundle: Single optimized CSS file
Development Mode: Optional Tailwind-based development workflow

🔧 Installation & Usage

Installation

npm install dialca-ui
# No Tailwind CSS required!

New Usage

// 1. Import CSS
import 'dialca-ui/css';

// 2. Import components
import { Button, InputField, Modal } from 'dialca-ui';

// 3. Use with pure CSS
function App() {
    return (
        <div>
            <InputField label="Name" placeholder="Enter name" />
            <Button variant="success">Save</Button>
        </div>
    );
}

🚀 Performance Improvements

Bundle Size Reduction

No CSS framework dependency
Optimized CSS with variables and minimal footprint

Runtime Performance

Zero JavaScript overhead for default variants
CSS-only styling for built-in variants
Reduced re-renders with optimized hooks
Smaller bundle parsing time

🔄 Migration Guide

From v1.2.x to v1.3.0

Remove Tailwind dependencies (if not used elsewhere):

npm uninstall tailwindcss @tailwindcss/postcss

Update imports:

// Before
import 'tailwindcss/base';
import { Button } from 'dialca-ui';

// After  
import 'dialca-ui/css';
import { Button } from 'dialca-ui';

Custom variants still work:

// ✅ This still works exactly the same
<Button 
    variant="custom"
    variants={{
        custom: {
            normal: { container: "your-custom-classes" }
        }
    }}
>

🐛 Bug Fixes

Fixed Tailwind CSS conflicts in projects with different Tailwind versions
Fixed CSS specificity issues with utility classes
Fixed Bundle size issues with unused Tailwind utilities
Fixed Build errors in projects without Tailwind CSS
Fixed Runtime errors when Tailwind CSS not available

🔧 Internal Changes

Development Workflow

Dual Development Mode: Tailwind for rapid development, CSS for production
Automated Migration Tools: Scripts to convert Tailwind variants to CSS
Enhanced Build Process: Separate dev and production builds
Better Testing: CSS and JS validation scripts

Code Quality

Improved TypeScript: Better type definitions and safety
Enhanced Hooks: More efficient and cleaner hook implementations
Better Architecture: Clear separation between development and production code
Documentation: Comprehensive inline documentation

📋 Technical Specifications

Supported Environments

React: >=18.0.0
TypeScript: >=4.5.0
Node.js: >=16.0.0
Browsers: Modern browsers (ES2018+)

🎯 What's Next

This major version sets the foundation for:

New Components
Better Documentation

[1.2.5] - 2025-10-02

🔄 Pre-Migration Version

Last version with Tailwind CSS dependency
12 components with advanced variant system
Complete feature set before architectural changes

✨ Features

Advanced variant system with Tailwind
12 production-ready components
TypeScript support
Comprehensive API

Previous Versions

See GitHub Releases for earlier version history.

🤝 Contributing

We welcome contributions! Fork the project, make a PR and I'll check it.

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

Made with ❤️ by DialcaDev

Styling Changes