cronixui 1.0.0

package/dist/cronixui.min.js

@@ -0,0 +1,629 @@
+(function(global) {
+'use strict';
+function $(selector, context = document) {
+return context.querySelector(selector);
+}
+function $$(selector, context = document) {
+return Array.from(context.querySelectorAll(selector));
+}
+function createEl(tag, className, attrs = {}) {
+const el = document.createElement(tag);
+if (className) el.className = className;
+Object.entries(attrs).forEach(([key, val]) => {
+if (key === 'text') el.textContent = val;
+else if (key === 'html') el.innerHTML = val;
+else el.setAttribute(key, val);
+});
+return el;
+}
+class CronixToggle {
+constructor(el) {
+this.el = el;
+this.input = el.querySelector('input');
+this.box = el.querySelector('.cn-toggle-box');
+if (this.el.tagName === 'DIV' && !this.input) {
+el.addEventListener('click', () => this.toggle());
+}
+el._cnToggle = this;
+}
+toggle() {
+this.el.classList.toggle('on');
+this.el.dispatchEvent(new CustomEvent('change', {
+detail: { value: this.isOn() }
+}));
+}
+isOn() {
+return this.el.classList.contains('on');
+}
+setOn(on) {
+this.el.classList.toggle('on', on);
+}
+}
+function initToggles() {
+$$('.cn-toggle').forEach(el => {
+if (!el._cnToggle) new CronixToggle(el);
+});
+}
+class CronixNav {
+constructor(el) {
+this.el = el;
+this.items = $$('.cn-nav-item', el);
+this.items.forEach(item => {
+item.addEventListener('click', () => this.setActive(item));
+});
+el._cnNav = this;
+}
+setActive(activeItem) {
+this.items.forEach(item => item.classList.remove('cn-nav-active'));
+activeItem.classList.add('cn-nav-active');
+this.el.dispatchEvent(new CustomEvent('change', {
+detail: { item: activeItem }
+}));
+}
+}
+function initNavs() {
+$$('.cn-nav').forEach(el => {
+if (!el._cnNav) new CronixNav(el);
+});
+}
+class CronixTabs {
+constructor(el) {
+this.el = el;
+this.tabs = $$('.cn-tab', el);
+this.panels = $$('.cn-tab-panel', el.parentElement);
+this.tabs.forEach((tab, i) => {
+tab.addEventListener('click', () => this.setActive(i));
+});
+el._cnTabs = this;
+}
+setActive(index) {
+this.tabs.forEach((tab, i) => {
+tab.classList.toggle('cn-tab-active', i === index);
+});
+this.panels.forEach((panel, i) => {
+panel.classList.toggle('cn-tab-panel-active', i === index);
+});
+this.el.dispatchEvent(new CustomEvent('change', {
+detail: { index }
+}));
+}
+}
+function initTabs() {
+$$('.cn-tabs').forEach(el => {
+if (!el._cnTabs) new CronixTabs(el);
+});
+}
+class CronixAccordion {
+constructor(el) {
+this.el = el;
+this.items = $$('.cn-accordion-item', el);
+this.multi = el.dataset.multi === 'true';
+this.items.forEach(item => {
+const header = $('.cn-accordion-header', item);
+header.addEventListener('click', () => this.toggle(item));
+});
+el._cnAccordion = this;
+}
+toggle(item) {
+const isOpen = item.classList.contains('cn-accordion-open');
+if (!this.multi) {
+this.items.forEach(i => i.classList.remove('cn-accordion-open'));
+}
+item.classList.toggle('cn-accordion-open', !isOpen);
+}
+openAll() {
+this.items.forEach(item => item.classList.add('cn-accordion-open'));
+}
+closeAll() {
+this.items.forEach(item => item.classList.remove('cn-accordion-open'));
+}
+}
+function initAccordions() {
+$$('.cn-accordion').forEach(el => {
+if (!el._cnAccordion) new CronixAccordion(el);
+});
+}
+class CronixModal {
+constructor(el) {
+this.el = el;
+this.modal = $('.cn-modal', el);
+this.closeBtn = $('.cn-modal-close', el);
+this.onKeydown = this.onKeydown.bind(this);
+if (this.closeBtn) {
+this.closeBtn.addEventListener('click', () => this.close());
+}
+el.addEventListener('click', (e) => {
+if (e.target === el) this.close();
+});
+el._cnModal = this;
+}
+open() {
+this.el.classList.add('cn-modal-open');
+document.body.style.overflow = 'hidden';
+document.addEventListener('keydown', this.onKeydown);
+this.el.dispatchEvent(new CustomEvent('open'));
+}
+close() {
+this.el.classList.remove('cn-modal-open');
+document.body.style.overflow = '';
+document.removeEventListener('keydown', this.onKeydown);
+this.el.dispatchEvent(new CustomEvent('close'));
+}
+onKeydown(e) {
+if (e.key === 'Escape') this.close();
+}
+}
+function initModals() {
+$$('.cn-modal-backdrop').forEach(el => {
+if (!el._cnModal) new CronixModal(el);
+});
+}
+class CronixDropdown {
+constructor(el) {
+this.el = el;
+this.trigger = $('.cn-dropdown-trigger', el) || el.querySelector('[data-dropdown-trigger]') || el;
+this.menu = $('.cn-dropdown-menu', el);
+this.onDocClick = this.onDocClick.bind(this);
+this.trigger.addEventListener('click', (e) => {
+e.stopPropagation();
+this.toggle();
+});
+this.menu.addEventListener('click', () => this.close());
+el._cnDropdown = this;
+}
+open() {
+this.el.classList.add('cn-dropdown-open');
+document.addEventListener('click', this.onDocClick);
+}
+close() {
+this.el.classList.remove('cn-dropdown-open');
+document.removeEventListener('click', this.onDocClick);
+}
+toggle() {
+if (this.el.classList.contains('cn-dropdown-open')) {
+this.close();
+} else {
+this.open();
+}
+}
+onDocClick(e) {
+if (!this.el.contains(e.target)) {
+this.close();
+}
+}
+}
+function initDropdowns() {
+$$('.cn-dropdown').forEach(el => {
+if (!el._cnDropdown) new CronixDropdown(el);
+});
+}
+class CronixToast {
+constructor(container) {
+this.container = container || this.getOrCreateContainer();
+}
+getOrCreateContainer() {
+let container = $('.cn-toast-container');
+if (!container) {
+container = createEl('div', 'cn-toast-container');
+document.body.appendChild(container);
+}
+return container;
+}
+show(options) {
+const {
+title,
+message,
+type = 'info',
+duration = 4000,
+closable = true
+} = options;
+const toast = createEl('div', `cn-toast cn-toast-${type}`);
+toast.innerHTML = `
+<div class="cn-alert-icon">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+${this.getIcon(type)}
+</svg>
+</div>
+<div class="cn-alert-content">
+${title ? `<div class="cn-alert-title">${title}</div>` : ''}
+${message ? `<div class="cn-alert-message">${message}</div>` : ''}
+</div>
+${closable ? `
+<button class="cn-alert-close">
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+<line x1="18" y1="6" x2="6" y2="18"></line>
+<line x1="6" y1="6" x2="18" y2="18"></line>
+</svg>
+</button>
+` : ''}
+`;
+if (closable) {
+$('.cn-alert-close', toast).addEventListener('click', () => this.hide(toast));
+}
+this.container.appendChild(toast);
+if (duration > 0) {
+setTimeout(() => this.hide(toast), duration);
+}
+return toast;
+}
+hide(toast) {
+toast.classList.add('cn-toast-leaving');
+setTimeout(() => toast.remove(), 200);
+}
+getIcon(type) {
+const icons = {
+success: '<polyline points="20 6 9 17 4 12"></polyline>',
+error: '<circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line>',
+warning: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line>',
+info: '<circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line>'
+};
+return icons[type] || icons.info;
+}
+success(message, title) { return this.show({ message, title, type: 'success' }); }
+error(message, title) { return this.show({ message, title, type: 'error' }); }
+warning(message, title) { return this.show({ message, title, type: 'warning' }); }
+info(message, title) { return this.show({ message, title, type: 'info' }); }
+}
+class CronixCommandPalette {
+constructor(el) {
+this.el = el;
+this.input = $('.cn-command-palette-input', el);
+this.results = $('.cn-command-palette-results', el);
+this.items = [];
+this.activeIndex = -1;
+this.onKeydown = this.onKeydown.bind(this);
+this.input.addEventListener('input', () => this.filter());
+this.input.addEventListener('keydown', (e) => this.onKeydown(e));
+el.addEventListener('click', (e) => {
+if (e.target === el) this.close();
+});
+el._cnCommandPalette = this;
+}
+setItems(items) {
+this.items = items;
+this.render();
+}
+render() {
+const query = this.input.value.toLowerCase();
+const filtered = this.items.filter(item =>
+item.title.toLowerCase().includes(query) ||
+(item.subtitle && item.subtitle.toLowerCase().includes(query))
+);
+this.results.innerHTML = filtered.map((item, i) => `
+<div class="cn-command-item${i === 0 ? ' cn-command-item-active' : ''}" data-index="${i}">
+${item.icon ? `<div class="cn-command-item-icon">${item.icon}</div>` : ''}
+<div class="cn-command-item-content">
+<div class="cn-command-item-title">${item.title}</div>
+${item.subtitle ? `<div class="cn-command-item-subtitle">${item.subtitle}</div>` : ''}
+</div>
+${item.kbd ? `<div class="cn-command-item-kbd">${item.kbd}</div>` : ''}
+</div>
+`).join('');
+$$('.cn-command-item', this.results).forEach((item, i) => {
+item.addEventListener('click', () => this.select(filtered[i]));
+item.addEventListener('mouseenter', () => this.setActive(i));
+});
+this.activeIndex = filtered.length > 0 ? 0 : -1;
+}
+filter() {
+this.render();
+}
+onKeydown(e) {
+const items = $$('.cn-command-item', this.results);
+if (e.key === 'ArrowDown') {
+e.preventDefault();
+this.setActive(Math.min(this.activeIndex + 1, items.length - 1));
+} else if (e.key === 'ArrowUp') {
+e.preventDefault();
+this.setActive(Math.max(this.activeIndex - 1, 0));
+} else if (e.key === 'Enter' && this.activeIndex >= 0) {
+e.preventDefault();
+items[this.activeIndex].click();
+}
+}
+setActive(index) {
+const items = $$('.cn-command-item', this.results);
+items.forEach((item, i) => item.classList.toggle('cn-command-item-active', i === index));
+this.activeIndex = index;
+}
+select(item) {
+if (item.action) item.action();
+this.close();
+this.el.dispatchEvent(new CustomEvent('select', { detail: item }));
+}
+open() {
+this.el.classList.add('cn-command-palette-open');
+this.input.value = '';
+this.render();
+setTimeout(() => this.input.focus(), 100);
+document.body.style.overflow = 'hidden';
+document.addEventListener('keydown', this.handleEscape);
+}
+close() {
+this.el.classList.remove('cn-command-palette-open');
+document.body.style.overflow = '';
+document.removeEventListener('keydown', this.handleEscape);
+}
+handleEscape = (e) => {
+if (e.key === 'Escape') this.close();
+};
+}
+function initCommandPalettes() {
+$$('.cn-command-palette').forEach(el => {
+if (!el._cnCommandPalette) new CronixCommandPalette(el);
+});
+}
+class CronixSearch {
+constructor(el) {
+this.el = el;
+this.input = $('.cn-search-input', el);
+this.results = $('.cn-search-results', el);
+this.onDocClick = this.onDocClick.bind(this);
+this.input.addEventListener('focus', () => this.open());
+this.input.addEventListener('input', () => this.filter());
+el.addEventListener('click', (e) => e.stopPropagation());
+el._cnSearch = this;
+}
+setItems(items) {
+this.items = items;
+}
+filter() {
+const query = this.input.value.toLowerCase();
+if (!query) {
+this.close();
+return;
+}
+const filtered = this.items.filter(item =>
+item.title.toLowerCase().includes(query) ||
+(item.subtitle && item.subtitle.toLowerCase().includes(query))
+);
+this.results.innerHTML = filtered.map(item => `
+<div class="cn-search-result">
+<div class="cn-search-result-title">${item.title}</div>
+${item.subtitle ? `<div class="cn-search-result-subtitle">${item.subtitle}</div>` : ''}
+</div>
+`).join('');
+$$('.cn-search-result', this.results).forEach((result, i) => {
+result.addEventListener('click', () => {
+this.select(filtered[i]);
+});
+});
+this.open();
+}
+select(item) {
+this.input.value = item.title;
+this.close();
+this.el.dispatchEvent(new CustomEvent('select', { detail: item }));
+if (item.action) item.action();
+}
+open() {
+this.el.classList.add('cn-search-open');
+document.addEventListener('click', this.onDocClick);
+}
+close() {
+this.el.classList.remove('cn-search-open');
+document.removeEventListener('click', this.onDocClick);
+}
+onDocClick(e) {
+if (!this.el.contains(e.target)) {
+this.close();
+}
+}
+}
+function initSearch() {
+$$('.cn-search').forEach(el => {
+if (!el._cnSearch) new CronixSearch(el);
+});
+}
+class CronixAlert {
+constructor(el) {
+this.el = el;
+this.closeBtn = $('.cn-alert-close', el);
+if (this.closeBtn) {
+this.closeBtn.addEventListener('click', () => this.close());
+}
+el._cnAlert = this;
+}
+close() {
+this.el.style.opacity = '0';
+setTimeout(() => this.el.remove(), 200);
+}
+}
+function initAlerts() {
+$$('.cn-alert').forEach(el => {
+if (!el._cnAlert) new CronixAlert(el);
+});
+}
+class CronixTable {
+constructor(el) {
+this.el = el;
+this.table = $('table', el) || el;
+this.headers = $$('th[data-sort]', this.table);
+this.headers.forEach(header => {
+header.addEventListener('click', () => this.sort(header));
+});
+el._cnTable = this;
+}
+sort(header) {
+const key = header.dataset.sort;
+const tbody = $('tbody', this.table);
+const rows = $$('tr', tbody);
+const order = header.dataset.order === 'asc' ? 'desc' : 'asc';
+this.headers.forEach(h => delete h.dataset.order);
+header.dataset.order = order;
+const index = Array.from(header.parentElement.children).indexOf(header);
+rows.sort((a, b) => {
+const aVal = a.children[index].textContent.trim();
+const bVal = b.children[index].textContent.trim();
+const aNum = parseFloat(aVal);
+const bNum = parseFloat(bVal);
+if (!isNaN(aNum) && !isNaN(bNum)) {
+return order === 'asc' ? aNum - bNum : bNum - aNum;
+}
+return order === 'asc'
+? aVal.localeCompare(bVal)
+: bVal.localeCompare(aVal);
+});
+rows.forEach(row => tbody.appendChild(row));
+}
+}
+function initTables() {
+$$('.cn-table-sortable').forEach(el => {
+if (!el._cnTable) new CronixTable(el);
+});
+}
+class CronixPagination {
+constructor(el, options = {}) {
+this.el = el;
+this.total = options.total || 1;
+this.current = options.current || 1;
+this.onChange = options.onChange || (() => {});
+this.render();
+el._cnPagination = this;
+}
+render() {
+const pages = this.getPages();
+this.el.innerHTML = `
+<button class="cn-pagination-item" data-page="prev" ${this.current === 1 ? 'disabled' : ''}>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+<polyline points="15 18 9 12 15 6"></polyline>
+</svg>
+</button>
+${pages.map(p => `
+<button class="cn-pagination-item${p === this.current ? ' cn-pagination-active' : ''}" data-page="${p}">
+${p}
+</button>
+`).join('')}
+<button class="cn-pagination-item" data-page="next" ${this.current === this.total ? 'disabled' : ''}>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+<polyline points="9 18 15 12 9 6"></polyline>
+</svg>
+</button>
+`;
+$$('.cn-pagination-item', this.el).forEach(btn => {
+btn.addEventListener('click', () => {
+const page = btn.dataset.page;
+if (page === 'prev' && this.current > 1) {
+this.goTo(this.current - 1);
+} else if (page === 'next' && this.current < this.total) {
+this.goTo(this.current + 1);
+} else if (!isNaN(page)) {
+this.goTo(parseInt(page));
+}
+});
+});
+}
+getPages() {
+const pages = [];
+const maxVisible = 5;
+if (this.total <= maxVisible) {
+for (let i = 1; i <= this.total; i++) pages.push(i);
+} else {
+if (this.current <= 3) {
+for (let i = 1; i <= 4; i++) pages.push(i);
+pages.push('...');
+pages.push(this.total);
+} else if (this.current >= this.total - 2) {
+pages.push(1);
+pages.push('...');
+for (let i = this.total - 3; i <= this.total; i++) pages.push(i);
+} else {
+pages.push(1);
+pages.push('...');
+for (let i = this.current - 1; i <= this.current + 1; i++) pages.push(i);
+pages.push('...');
+pages.push(this.total);
+}
+}
+return pages;
+}
+goTo(page) {
+if (page >= 1 && page <= this.total && page !== this.current) {
+this.current = page;
+this.render();
+this.onChange(page);
+this.el.dispatchEvent(new CustomEvent('change', { detail: { page } }));
+}
+}
+}
+class CronixFileInput {
+constructor(el) {
+this.el = el;
+this.input = $('input[type="file"]', el);
+this.label = $('.cn-file-input-label', el);
+this.textEl = $('.cn-file-input-text', el);
+this.originalText = this.textEl ? this.textEl.innerHTML : '';
+this.input.addEventListener('change', (e) => this.handleChange(e));
+el._cnFileInput = this;
+}
+handleChange(e) {
+const files = this.input.files;
+if (files.length > 0) {
+const names = Array.from(files).map(f => f.name).join(', ');
+if (this.textEl) {
+this.textEl.innerHTML = `<span>${names}</span>`;
+}
+this.el.classList.add('cn-file-input-has-file');
+this.el.dispatchEvent(new CustomEvent('change', { detail: { files } }));
+} else {
+this.reset();
+}
+}
+reset() {
+this.input.value = '';
+if (this.textEl) this.textEl.innerHTML = this.originalText;
+this.el.classList.remove('cn-file-input-has-file');
+}
+}
+function initFileInputs() {
+$$('.cn-file-input').forEach(el => {
+if (!el._cnFileInput) new CronixFileInput(el);
+});
+}
+function init() {
+initToggles();
+initNavs();
+initTabs();
+initAccordions();
+initModals();
+initDropdowns();
+initCommandPalettes();
+initSearch();
+initAlerts();
+initTables();
+initFileInputs();
+}
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+const CronixUI = {
+init,
+Toggle: CronixToggle,
+Nav: CronixNav,
+Tabs: CronixTabs,
+Accordion: CronixAccordion,
+Modal: CronixModal,
+Dropdown: CronixDropdown,
+Toast: new CronixToast(),
+CommandPalette: CronixCommandPalette,
+Search: CronixSearch,
+Alert: CronixAlert,
+Table: CronixTable,
+Pagination: CronixPagination,
+FileInput: CronixFileInput,
+$,
+$$,
+createEl
+};
+if (typeof define === 'function' && define.amd) {
+define(() => CronixUI);
+}
+else if (typeof module !== 'undefined' && module.exports) {
+module.exports = CronixUI;
+}
+else {
+global.CronixUI = CronixUI;
+}
+})(typeof globalThis !== 'undefined' ? globalThis : window);

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "cronixui",
+  "version": "1.0.0",
+  "description": "CronixUI - A dark-themed UI toolkit with crimson accents and Outfit typography",
+  "keywords": [
+    "ui",
+    "css",
+    "dark-mode",
+    "design-system",
+    "components"
+  ],
+  "license": "GPL-3.0",
+  "author": "CazyUndee",
+  "type": "commonjs",
+  "main": "dist/cronixui.js",
+  "style": "dist/cronixui.css",
+  "files": [
+    "dist/",
+    "src/"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js",
+    "dev": "npx live-server demo"
+  }
+}