zenkit-css 1.0.3 → 1.0.5

package/README.md

@@ -1,15 +1,18 @@
 <p align="center">
-  <a href="https://sayedabdulkarim.github.io/-zenkit-css/docs/">
-    <img src="https://raw.githubusercontent.com/sayedabdulkarim/-zenkit-css/main/docs/zenkit-logo.svg" alt="ZenKit" width="120" height="120">
+  <a href="https://sayedabdulkarim.github.io/-zenkit-css/">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://cdn.jsdelivr.net/npm/zenkit-css@latest/docs/zenkit-logo.svg">
+      <img src="https://cdn.jsdelivr.net/npm/zenkit-css@latest/docs/zenkit-logo.svg" alt="ZenKit" width="120">
+    </picture>
   </a>
 </p>
 
 <h3 align="center">ZenKit</h3>
 
 <p align="center">
-  A minimal, modern CSS framework for peaceful development.
+  Sleek, intuitive, and lightweight CSS framework for faster web development.
   <br>
-  <a href="https://sayedabdulkarim.github.io/-zenkit-css/docs/"><strong>Explore ZenKit docs »</strong></a>
+  <a href="https://sayedabdulkarim.github.io/-zenkit-css/"><strong>Explore ZenKit docs »</strong></a>
   <br>
   <br>
   <a href="https://github.com/sayedabdulkarim/-zenkit-css/issues/new?labels=bug">Report bug</a>

package/docs/zenkit-logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
+  <defs>
+    <linearGradient id="zenGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#818CF8;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background rounded square -->
+  <rect x="20" y="20" width="160" height="160" rx="32" fill="url(#zenGradient)"/>
+
+  <!-- Z letter -->
+  <path d="M60 65 L140 65 L140 80 L85 135 L140 135 L140 150 L60 150 L60 135 L115 80 L60 80 Z" fill="white"/>
+</svg>

package/js/components/accordion.js

@@ -0,0 +1,119 @@
+// ========================================
+// ZenKit - Accordion Component
+// ========================================
+
+class Accordion {
+  constructor(element, options = {}) {
+    this.element = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!this.element) return;
+
+    this.options = {
+      alwaysOpen: false,
+      ...options
+    };
+
+    this.items = this.element.querySelectorAll('.accordion-item');
+    this.init();
+  }
+
+  init() {
+    this.items.forEach(item => {
+      const button = item.querySelector('.accordion-button');
+      const collapse = item.querySelector('.accordion-collapse');
+
+      if (button && collapse) {
+        button.addEventListener('click', (e) => this.toggle(e, item));
+      }
+    });
+  }
+
+  toggle(event, item) {
+    event.preventDefault();
+    const button = item.querySelector('.accordion-button');
+    const collapse = item.querySelector('.accordion-collapse');
+    const isOpen = collapse.classList.contains('show');
+
+    if (!this.options.alwaysOpen) {
+      // Close all other items
+      this.items.forEach(otherItem => {
+        if (otherItem !== item) {
+          this.close(otherItem);
+        }
+      });
+    }
+
+    if (isOpen) {
+      this.close(item);
+    } else {
+      this.open(item);
+    }
+  }
+
+  open(item) {
+    const button = item.querySelector('.accordion-button');
+    const collapse = item.querySelector('.accordion-collapse');
+
+    button.classList.remove('collapsed');
+    button.setAttribute('aria-expanded', 'true');
+
+    collapse.classList.add('collapsing');
+    collapse.style.height = '0px';
+
+    requestAnimationFrame(() => {
+      collapse.style.height = collapse.scrollHeight + 'px';
+    });
+
+    const transitionEnd = () => {
+      collapse.classList.remove('collapsing');
+      collapse.classList.add('show', 'collapse');
+      collapse.style.height = '';
+      collapse.removeEventListener('transitionend', transitionEnd);
+
+      // Dispatch event
+      this.element.dispatchEvent(new CustomEvent('shown.zk.accordion', {
+        detail: { item }
+      }));
+    };
+
+    collapse.addEventListener('transitionend', transitionEnd);
+  }
+
+  close(item) {
+    const button = item.querySelector('.accordion-button');
+    const collapse = item.querySelector('.accordion-collapse');
+
+    if (!collapse.classList.contains('show')) return;
+
+    button.classList.add('collapsed');
+    button.setAttribute('aria-expanded', 'false');
+
+    collapse.style.height = collapse.scrollHeight + 'px';
+    collapse.classList.remove('show');
+
+    requestAnimationFrame(() => {
+      collapse.classList.add('collapsing');
+      collapse.style.height = '0px';
+    });
+
+    const transitionEnd = () => {
+      collapse.classList.remove('collapsing');
+      collapse.classList.add('collapse');
+      collapse.style.height = '';
+      collapse.removeEventListener('transitionend', transitionEnd);
+
+      // Dispatch event
+      this.element.dispatchEvent(new CustomEvent('hidden.zk.accordion', {
+        detail: { item }
+      }));
+    };
+
+    collapse.addEventListener('transitionend', transitionEnd);
+  }
+
+  // Static method to initialize all accordions
+  static init(selector = '.accordion') {
+    document.querySelectorAll(selector).forEach(el => new Accordion(el));
+  }
+}
+
+export default Accordion;

package/js/components/carousel.js

@@ -0,0 +1,281 @@
+// ========================================
+// ZenKit - Carousel Component
+// ========================================
+
+class Carousel {
+  constructor(element, options = {}) {
+    this.element = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!this.element) return;
+
+    this.options = {
+      interval: 5000,
+      keyboard: true,
+      pause: 'hover',
+      ride: false,
+      wrap: true,
+      touch: true,
+      ...options
+    };
+
+    this.inner = this.element.querySelector('.carousel-inner');
+    this.items = this.element.querySelectorAll('.carousel-item');
+    this.indicators = this.element.querySelectorAll('.carousel-indicators [data-slide-to]');
+
+    this.activeIndex = 0;
+    this.isSliding = false;
+    this.interval = null;
+    this.touchStartX = 0;
+    this.touchStartY = 0;
+
+    this.init();
+  }
+
+  init() {
+    // Find initial active index
+    this.items.forEach((item, index) => {
+      if (item.classList.contains('active')) {
+        this.activeIndex = index;
+      }
+    });
+
+    // Controls
+    const prevBtn = this.element.querySelector('.carousel-control-prev');
+    const nextBtn = this.element.querySelector('.carousel-control-next');
+
+    if (prevBtn) {
+      prevBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.prev();
+      });
+    }
+
+    if (nextBtn) {
+      nextBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.next();
+      });
+    }
+
+    // Indicators
+    this.indicators.forEach((indicator, index) => {
+      indicator.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.goTo(index);
+      });
+    });
+
+    // Keyboard
+    if (this.options.keyboard) {
+      this.element.addEventListener('keydown', (e) => this.handleKeydown(e));
+    }
+
+    // Pause on hover
+    if (this.options.pause === 'hover') {
+      this.element.addEventListener('mouseenter', () => this.pause());
+      this.element.addEventListener('mouseleave', () => this.cycle());
+    }
+
+    // Touch support
+    if (this.options.touch) {
+      this.element.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: true });
+      this.element.addEventListener('touchend', (e) => this.handleTouchEnd(e), { passive: true });
+    }
+
+    // Auto-play
+    if (this.options.ride === 'carousel' || this.options.ride === true) {
+      this.cycle();
+    }
+  }
+
+  next() {
+    if (!this.isSliding) {
+      this.slide('next');
+    }
+  }
+
+  prev() {
+    if (!this.isSliding) {
+      this.slide('prev');
+    }
+  }
+
+  goTo(index) {
+    if (this.isSliding || index === this.activeIndex) return;
+
+    const direction = index > this.activeIndex ? 'next' : 'prev';
+    this.slide(direction, index);
+  }
+
+  slide(direction, targetIndex = null) {
+    const activeItem = this.items[this.activeIndex];
+    let nextIndex;
+
+    if (targetIndex !== null) {
+      nextIndex = targetIndex;
+    } else if (direction === 'next') {
+      nextIndex = this.activeIndex + 1;
+      if (nextIndex >= this.items.length) {
+        if (!this.options.wrap) return;
+        nextIndex = 0;
+      }
+    } else {
+      nextIndex = this.activeIndex - 1;
+      if (nextIndex < 0) {
+        if (!this.options.wrap) return;
+        nextIndex = this.items.length - 1;
+      }
+    }
+
+    const nextItem = this.items[nextIndex];
+    if (!nextItem) return;
+
+    const slideEvent = new CustomEvent('slide.zk.carousel', {
+      detail: { from: this.activeIndex, to: nextIndex, direction }
+    });
+    this.element.dispatchEvent(slideEvent);
+    if (slideEvent.defaultPrevented) return;
+
+    this.isSliding = true;
+
+    // Add positioning classes
+    const directionalClass = direction === 'next' ? 'carousel-item-start' : 'carousel-item-end';
+    const orderClass = direction === 'next' ? 'carousel-item-next' : 'carousel-item-prev';
+
+    nextItem.classList.add(orderClass);
+
+    // Force reflow
+    nextItem.offsetHeight;
+
+    activeItem.classList.add(directionalClass);
+    nextItem.classList.add(directionalClass);
+
+    const complete = () => {
+      nextItem.classList.remove(directionalClass, orderClass);
+      nextItem.classList.add('active');
+
+      activeItem.classList.remove('active', directionalClass, orderClass);
+
+      this.isSliding = false;
+      this.activeIndex = nextIndex;
+      this.updateIndicators();
+
+      this.element.dispatchEvent(new CustomEvent('slid.zk.carousel', {
+        detail: { from: this.activeIndex, to: nextIndex, direction }
+      }));
+    };
+
+    activeItem.addEventListener('transitionend', complete, { once: true });
+
+    // Fallback timeout
+    setTimeout(() => {
+      if (this.isSliding) {
+        complete();
+      }
+    }, 600);
+  }
+
+  updateIndicators() {
+    this.indicators.forEach((indicator, index) => {
+      indicator.classList.toggle('active', index === this.activeIndex);
+    });
+  }
+
+  cycle() {
+    if (this.interval) {
+      clearInterval(this.interval);
+    }
+
+    if (this.options.interval) {
+      this.interval = setInterval(() => this.next(), this.options.interval);
+    }
+  }
+
+  pause() {
+    if (this.interval) {
+      clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+
+  handleKeydown(event) {
+    if (/input|textarea/i.test(event.target.tagName)) return;
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.prev();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.next();
+        break;
+    }
+  }
+
+  handleTouchStart(event) {
+    this.touchStartX = event.touches[0].clientX;
+    this.touchStartY = event.touches[0].clientY;
+  }
+
+  handleTouchEnd(event) {
+    const touchEndX = event.changedTouches[0].clientX;
+    const touchEndY = event.changedTouches[0].clientY;
+
+    const deltaX = touchEndX - this.touchStartX;
+    const deltaY = touchEndY - this.touchStartY;
+
+    // Only handle horizontal swipes
+    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+      if (deltaX > 0) {
+        this.prev();
+      } else {
+        this.next();
+      }
+    }
+  }
+
+  dispose() {
+    this.pause();
+    Carousel.instances.delete(this.element);
+  }
+
+  nextWhenVisible() {
+    // Only cycle to next when the page is visible
+    if (!document.hidden && this.element.offsetWidth > 0 && this.element.offsetHeight > 0) {
+      this.next();
+    }
+  }
+
+  to(index) {
+    // Alias for goTo for Bootstrap compatibility
+    this.goTo(index);
+  }
+
+  // Static methods
+  static instances = new WeakMap();
+
+  static getInstance(element) {
+    return Carousel.instances.get(element);
+  }
+
+  static getOrCreateInstance(element, options) {
+    return Carousel.getInstance(element) || new Carousel(element, options);
+  }
+
+  static init(selector = '.carousel') {
+    document.querySelectorAll(selector).forEach(el => {
+      const options = {
+        interval: el.dataset.interval ? parseInt(el.dataset.interval) : 5000,
+        keyboard: el.dataset.keyboard !== 'false',
+        pause: el.dataset.pause || 'hover',
+        ride: el.dataset.ride || false,
+        wrap: el.dataset.wrap !== 'false',
+        touch: el.dataset.touch !== 'false'
+      };
+      const instance = new Carousel(el, options);
+      Carousel.instances.set(el, instance);
+    });
+  }
+}
+
+export default Carousel;

package/js/components/collapse.js

@@ -0,0 +1,145 @@
+// ========================================
+// ZenKit - Collapse Component
+// ========================================
+
+class Collapse {
+  constructor(element, options = {}) {
+    this.element = typeof element === 'string' ? document.querySelector(element) : element;
+    if (!this.element) return;
+
+    this.options = {
+      toggle: true,
+      parent: null,
+      ...options
+    };
+
+    this.isTransitioning = false;
+    this.triggerElements = document.querySelectorAll(
+      `[data-toggle="collapse"][data-target="#${this.element.id}"],` +
+      `[data-toggle="collapse"][href="#${this.element.id}"]`
+    );
+
+    this.init();
+  }
+
+  init() {
+    this.triggerElements.forEach(trigger => {
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.toggle();
+      });
+    });
+
+    if (this.options.toggle) {
+      // Already handled by trigger elements
+    }
+  }
+
+  toggle() {
+    if (this.element.classList.contains('show')) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  show() {
+    if (this.isTransitioning || this.element.classList.contains('show')) return;
+
+    // Close siblings if parent is set
+    if (this.options.parent) {
+      const parent = document.querySelector(this.options.parent);
+      if (parent) {
+        const siblings = parent.querySelectorAll('.collapse.show');
+        siblings.forEach(sibling => {
+          if (sibling !== this.element) {
+            const collapseInstance = Collapse.getInstance(sibling);
+            if (collapseInstance) collapseInstance.hide();
+          }
+        });
+      }
+    }
+
+    this.isTransitioning = true;
+    this.element.classList.remove('collapse');
+    this.element.classList.add('collapsing');
+    this.element.style.height = '0px';
+
+    this.updateTriggers(true);
+
+    requestAnimationFrame(() => {
+      this.element.style.height = this.element.scrollHeight + 'px';
+    });
+
+    const complete = () => {
+      this.isTransitioning = false;
+      this.element.classList.remove('collapsing');
+      this.element.classList.add('collapse', 'show');
+      this.element.style.height = '';
+      this.element.removeEventListener('transitionend', complete);
+      this.element.dispatchEvent(new CustomEvent('shown.zk.collapse'));
+    };
+
+    this.element.addEventListener('transitionend', complete);
+    this.element.dispatchEvent(new CustomEvent('show.zk.collapse'));
+  }
+
+  hide() {
+    if (this.isTransitioning || !this.element.classList.contains('show')) return;
+
+    this.isTransitioning = true;
+    this.element.style.height = this.element.scrollHeight + 'px';
+    this.element.classList.remove('show');
+
+    this.updateTriggers(false);
+
+    requestAnimationFrame(() => {
+      this.element.classList.add('collapsing');
+      this.element.style.height = '0px';
+    });
+
+    const complete = () => {
+      this.isTransitioning = false;
+      this.element.classList.remove('collapsing');
+      this.element.classList.add('collapse');
+      this.element.style.height = '';
+      this.element.removeEventListener('transitionend', complete);
+      this.element.dispatchEvent(new CustomEvent('hidden.zk.collapse'));
+    };
+
+    this.element.addEventListener('transitionend', complete);
+    this.element.dispatchEvent(new CustomEvent('hide.zk.collapse'));
+  }
+
+  updateTriggers(isOpen) {
+    this.triggerElements.forEach(trigger => {
+      trigger.classList.toggle('collapsed', !isOpen);
+      trigger.setAttribute('aria-expanded', isOpen);
+    });
+  }
+
+  // Store instance on element
+  static instances = new WeakMap();
+
+  static getInstance(element) {
+    return Collapse.instances.get(element);
+  }
+
+  static getOrCreateInstance(element, options) {
+    return Collapse.getInstance(element) || new Collapse(element, options);
+  }
+
+  // Static method to initialize all collapses
+  static init(selector = '[data-toggle="collapse"]') {
+    document.querySelectorAll(selector).forEach(trigger => {
+      const target = trigger.dataset.target || trigger.getAttribute('href');
+      const element = document.querySelector(target);
+      if (element && !Collapse.getInstance(element)) {
+        const instance = new Collapse(element, { toggle: false });
+        Collapse.instances.set(element, instance);
+      }
+    });
+  }
+}
+
+export default Collapse;