jasmincss 1.0.0

package/src/core/utilities/typography.js

@@ -0,0 +1,188 @@
+export function generateTypographyUtilities(config) {
+  const classes = [];
+
+  // Font Family
+  classes.push({ name: 'font-sans', css: '.font-sans { font-family: var(--j-font-sans); }' });
+  classes.push({ name: 'font-mono', css: '.font-mono { font-family: var(--j-font-mono); }' });
+  classes.push({ name: 'font-serif', css: '.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }' });
+
+  // Font Size
+  const fontSizes = {
+    'xs': ['0.75rem', '1rem'],
+    'sm': ['0.875rem', '1.25rem'],
+    'base': ['1rem', '1.5rem'],
+    'lg': ['1.125rem', '1.75rem'],
+    'xl': ['1.25rem', '1.75rem'],
+    '2xl': ['1.5rem', '2rem'],
+    '3xl': ['1.875rem', '2.25rem'],
+    '4xl': ['2.25rem', '2.5rem'],
+    '5xl': ['3rem', '1'],
+    '6xl': ['3.75rem', '1'],
+    '7xl': ['4.5rem', '1'],
+    '8xl': ['6rem', '1'],
+    '9xl': ['8rem', '1']
+  };
+  Object.entries(fontSizes).forEach(([size, [fontSize, lineHeight]]) => {
+    classes.push({
+      name: `text-${size}`,
+      css: `.text-${size} { font-size: ${fontSize}; line-height: ${lineHeight}; }`
+    });
+  });
+
+  // Font Weight
+  const fontWeights = {
+    'thin': '100',
+    'extralight': '200',
+    'light': '300',
+    'normal': '400',
+    'medium': '500',
+    'semibold': '600',
+    'bold': '700',
+    'extrabold': '800',
+    'black': '900'
+  };
+  Object.entries(fontWeights).forEach(([name, value]) => {
+    classes.push({ name: `font-${name}`, css: `.font-${name} { font-weight: ${value}; }` });
+  });
+
+  // Font Style
+  classes.push({ name: 'italic', css: '.italic { font-style: italic; }' });
+  classes.push({ name: 'not-italic', css: '.not-italic { font-style: normal; }' });
+
+  // Font Variant Numeric
+  classes.push({ name: 'normal-nums', css: '.normal-nums { font-variant-numeric: normal; }' });
+  classes.push({ name: 'ordinal', css: '.ordinal { font-variant-numeric: ordinal; }' });
+  classes.push({ name: 'slashed-zero', css: '.slashed-zero { font-variant-numeric: slashed-zero; }' });
+  classes.push({ name: 'lining-nums', css: '.lining-nums { font-variant-numeric: lining-nums; }' });
+  classes.push({ name: 'oldstyle-nums', css: '.oldstyle-nums { font-variant-numeric: oldstyle-nums; }' });
+  classes.push({ name: 'proportional-nums', css: '.proportional-nums { font-variant-numeric: proportional-nums; }' });
+  classes.push({ name: 'tabular-nums', css: '.tabular-nums { font-variant-numeric: tabular-nums; }' });
+  classes.push({ name: 'diagonal-fractions', css: '.diagonal-fractions { font-variant-numeric: diagonal-fractions; }' });
+  classes.push({ name: 'stacked-fractions', css: '.stacked-fractions { font-variant-numeric: stacked-fractions; }' });
+
+  // Letter Spacing
+  const tracking = {
+    'tighter': '-0.05em',
+    'tight': '-0.025em',
+    'normal': '0em',
+    'wide': '0.025em',
+    'wider': '0.05em',
+    'widest': '0.1em'
+  };
+  Object.entries(tracking).forEach(([name, value]) => {
+    classes.push({ name: `tracking-${name}`, css: `.tracking-${name} { letter-spacing: ${value}; }` });
+  });
+
+  // Line Height
+  const leading = {
+    'none': '1',
+    'tight': '1.25',
+    'snug': '1.375',
+    'normal': '1.5',
+    'relaxed': '1.625',
+    'loose': '2',
+    '3': '.75rem',
+    '4': '1rem',
+    '5': '1.25rem',
+    '6': '1.5rem',
+    '7': '1.75rem',
+    '8': '2rem',
+    '9': '2.25rem',
+    '10': '2.5rem'
+  };
+  Object.entries(leading).forEach(([name, value]) => {
+    classes.push({ name: `leading-${name}`, css: `.leading-${name} { line-height: ${value}; }` });
+  });
+
+  // Text Align
+  ['left', 'center', 'right', 'justify', 'start', 'end'].forEach(align => {
+    classes.push({ name: `text-${align}`, css: `.text-${align} { text-align: ${align}; }` });
+  });
+
+  // Text Decoration
+  classes.push({ name: 'underline', css: '.underline { text-decoration-line: underline; }' });
+  classes.push({ name: 'overline', css: '.overline { text-decoration-line: overline; }' });
+  classes.push({ name: 'line-through', css: '.line-through { text-decoration-line: line-through; }' });
+  classes.push({ name: 'no-underline', css: '.no-underline { text-decoration-line: none; }' });
+
+  // Text Decoration Style
+  ['solid', 'double', 'dotted', 'dashed', 'wavy'].forEach(style => {
+    classes.push({ name: `decoration-${style}`, css: `.decoration-${style} { text-decoration-style: ${style}; }` });
+  });
+
+  // Text Decoration Thickness
+  ['auto', 'from-font', '0', '1', '2', '4', '8'].forEach(thickness => {
+    const value = ['auto', 'from-font'].includes(thickness) ? thickness : `${thickness}px`;
+    classes.push({ name: `decoration-${thickness}`, css: `.decoration-${thickness} { text-decoration-thickness: ${value}; }` });
+  });
+
+  // Text Underline Offset
+  ['auto', '0', '1', '2', '4', '8'].forEach(offset => {
+    const value = offset === 'auto' ? 'auto' : `${offset}px`;
+    classes.push({ name: `underline-offset-${offset}`, css: `.underline-offset-${offset} { text-underline-offset: ${value}; }` });
+  });
+
+  // Text Transform
+  classes.push({ name: 'uppercase', css: '.uppercase { text-transform: uppercase; }' });
+  classes.push({ name: 'lowercase', css: '.lowercase { text-transform: lowercase; }' });
+  classes.push({ name: 'capitalize', css: '.capitalize { text-transform: capitalize; }' });
+  classes.push({ name: 'normal-case', css: '.normal-case { text-transform: none; }' });
+
+  // Text Overflow
+  classes.push({ name: 'truncate', css: '.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }' });
+  classes.push({ name: 'text-ellipsis', css: '.text-ellipsis { text-overflow: ellipsis; }' });
+  classes.push({ name: 'text-clip', css: '.text-clip { text-overflow: clip; }' });
+
+  // Line Clamp
+  for (let i = 1; i <= 6; i++) {
+    classes.push({
+      name: `line-clamp-${i}`,
+      css: `.line-clamp-${i} { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${i}; }`
+    });
+  }
+  classes.push({ name: 'line-clamp-none', css: '.line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none; }' });
+
+  // Vertical Align
+  ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super'].forEach(align => {
+    classes.push({ name: `align-${align}`, css: `.align-${align} { vertical-align: ${align}; }` });
+  });
+
+  // Whitespace
+  ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces'].forEach(ws => {
+    classes.push({ name: `whitespace-${ws}`, css: `.whitespace-${ws} { white-space: ${ws}; }` });
+  });
+
+  // Word Break
+  classes.push({ name: 'break-normal', css: '.break-normal { overflow-wrap: normal; word-break: normal; }' });
+  classes.push({ name: 'break-words', css: '.break-words { overflow-wrap: break-word; }' });
+  classes.push({ name: 'break-all', css: '.break-all { word-break: break-all; }' });
+  classes.push({ name: 'break-keep', css: '.break-keep { word-break: keep-all; }' });
+
+  // Hyphens
+  ['none', 'manual', 'auto'].forEach(h => {
+    classes.push({ name: `hyphens-${h}`, css: `.hyphens-${h} { hyphens: ${h}; }` });
+  });
+
+  // Text Wrap
+  classes.push({ name: 'text-wrap', css: '.text-wrap { text-wrap: wrap; }' });
+  classes.push({ name: 'text-nowrap', css: '.text-nowrap { text-wrap: nowrap; }' });
+  classes.push({ name: 'text-balance', css: '.text-balance { text-wrap: balance; }' });
+  classes.push({ name: 'text-pretty', css: '.text-pretty { text-wrap: pretty; }' });
+
+  // Content
+  classes.push({ name: 'content-none', css: '.content-none { content: none; }' });
+
+  // List Style Type
+  classes.push({ name: 'list-none', css: '.list-none { list-style-type: none; }' });
+  classes.push({ name: 'list-disc', css: '.list-disc { list-style-type: disc; }' });
+  classes.push({ name: 'list-decimal', css: '.list-decimal { list-style-type: decimal; }' });
+
+  // List Style Position
+  classes.push({ name: 'list-inside', css: '.list-inside { list-style-position: inside; }' });
+  classes.push({ name: 'list-outside', css: '.list-outside { list-style-position: outside; }' });
+
+  return {
+    css: classes.map(c => c.css).join('\n'),
+    classes
+  };
+}

package/src/index.js

@@ -0,0 +1,7 @@
+// JasminCSS - Main Entry Point
+export { compileCSS, scanForUsedClasses } from './core/compiler.js';
+export { loadConfig, resolveConfig } from './config/loader.js';
+export { defaultConfig, templates } from './config/defaults.js';
+export { generateUtilities } from './core/utilities/index.js';
+export { generateComponents } from './components/index.js';
+export { generateBase } from './core/base.js';

package/src/js/components/accordion.js

@@ -0,0 +1,154 @@
+/**
+ * JasminCSS Accordion Component
+ * Handles collapsible accordion panels with accessibility
+ */
+
+class Accordion {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      alwaysOpen: false, // Allow multiple panels open
+      ...options
+    };
+    this.items = [];
+
+    this.init();
+  }
+
+  init() {
+    const items = this.element.querySelectorAll('.accordion-item');
+
+    items.forEach((item, index) => {
+      const trigger = item.querySelector('.accordion-trigger, [data-accordion-trigger]');
+      const content = item.querySelector('.accordion-content, [data-accordion-content]');
+
+      if (!trigger || !content) return;
+
+      // Generate IDs if not present
+      const triggerId = trigger.id || `accordion-trigger-${Date.now()}-${index}`;
+      const contentId = content.id || `accordion-content-${Date.now()}-${index}`;
+
+      trigger.id = triggerId;
+      content.id = contentId;
+
+      // Set ARIA attributes
+      trigger.setAttribute('aria-expanded', item.classList.contains('open') ? 'true' : 'false');
+      trigger.setAttribute('aria-controls', contentId);
+      content.setAttribute('aria-labelledby', triggerId);
+      content.setAttribute('role', 'region');
+
+      // Store reference
+      this.items.push({ item, trigger, content });
+
+      // Click handler
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.toggleItem(index);
+      });
+
+      // Keyboard handler
+      trigger.addEventListener('keydown', (e) => this.handleKeydown(e, index));
+    });
+  }
+
+  toggleItem(index) {
+    const { item, trigger, content } = this.items[index];
+    const isOpen = item.classList.contains('open');
+
+    if (isOpen) {
+      this.closeItem(index);
+    } else {
+      // Close others if not alwaysOpen
+      if (!this.options.alwaysOpen) {
+        this.items.forEach((_, i) => {
+          if (i !== index) this.closeItem(i);
+        });
+      }
+      this.openItem(index);
+    }
+  }
+
+  openItem(index) {
+    const { item, trigger, content } = this.items[index];
+
+    item.classList.add('open');
+    trigger.setAttribute('aria-expanded', 'true');
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('accordion:open', {
+      detail: { index, item, trigger, content }
+    }));
+  }
+
+  closeItem(index) {
+    const { item, trigger, content } = this.items[index];
+
+    item.classList.remove('open');
+    trigger.setAttribute('aria-expanded', 'false');
+
+    // Dispatch event
+    this.element.dispatchEvent(new CustomEvent('accordion:close', {
+      detail: { index, item, trigger, content }
+    }));
+  }
+
+  openAll() {
+    this.items.forEach((_, i) => this.openItem(i));
+  }
+
+  closeAll() {
+    this.items.forEach((_, i) => this.closeItem(i));
+  }
+
+  handleKeydown(e, index) {
+    const triggers = this.items.map(i => i.trigger);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        const nextIndex = index < triggers.length - 1 ? index + 1 : 0;
+        triggers[nextIndex].focus();
+        break;
+
+      case 'ArrowUp':
+        e.preventDefault();
+        const prevIndex = index > 0 ? index - 1 : triggers.length - 1;
+        triggers[prevIndex].focus();
+        break;
+
+      case 'Home':
+        e.preventDefault();
+        triggers[0].focus();
+        break;
+
+      case 'End':
+        e.preventDefault();
+        triggers[triggers.length - 1].focus();
+        break;
+    }
+  }
+
+  destroy() {
+    this.items.forEach(({ trigger }) => {
+      trigger.removeAttribute('aria-expanded');
+      trigger.removeAttribute('aria-controls');
+    });
+  }
+
+  // Static methods
+  static initAll(selector = '[data-accordion]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminAccordion) {
+        el._jasminAccordion = new Accordion(el, {
+          alwaysOpen: el.dataset.accordionAlwaysOpen === 'true'
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminAccordion;
+  }
+}
+
+export default Accordion;

package/src/js/components/alert.js

@@ -0,0 +1,198 @@
+/**
+ * JasminCSS Alert & Toast Component
+ * Handles dismissible alerts and toast notifications
+ */
+
+class Alert {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      dismissible: true,
+      autoDismiss: false,
+      autoDismissDelay: 5000,
+      ...options
+    };
+
+    this.init();
+  }
+
+  init() {
+    // Set ARIA
+    this.element.setAttribute('role', 'alert');
+
+    // Close button
+    if (this.options.dismissible) {
+      const closeBtn = this.element.querySelector('[data-alert-close], .alert-close, .btn-close');
+      if (closeBtn) {
+        closeBtn.addEventListener('click', () => this.dismiss());
+      }
+    }
+
+    // Auto dismiss
+    if (this.options.autoDismiss) {
+      setTimeout(() => this.dismiss(), this.options.autoDismissDelay);
+    }
+  }
+
+  dismiss() {
+    this.element.dispatchEvent(new CustomEvent('alert:dismiss', { detail: { alert: this } }));
+
+    this.element.classList.add('dismissing');
+
+    setTimeout(() => {
+      this.element.remove();
+      this.element.dispatchEvent(new CustomEvent('alert:dismissed', { detail: { alert: this } }));
+    }, 150);
+  }
+
+  // Static methods
+  static initAll(selector = '[data-alert]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminAlert) {
+        el._jasminAlert = new Alert(el, {
+          dismissible: el.dataset.alertDismissible !== 'false',
+          autoDismiss: el.dataset.alertAutoDismiss === 'true',
+          autoDismissDelay: parseInt(el.dataset.alertDelay) || 5000
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminAlert;
+  }
+}
+
+/**
+ * Toast notification system
+ */
+class Toast {
+  static container = null;
+  static queue = [];
+
+  static getContainer(position = 'top-right') {
+    if (!Toast.container || Toast.container.dataset.position !== position) {
+      Toast.container?.remove();
+
+      Toast.container = document.createElement('div');
+      Toast.container.className = `toast-container toast-${position}`;
+      Toast.container.dataset.position = position;
+      Toast.container.setAttribute('aria-live', 'polite');
+      Toast.container.setAttribute('aria-atomic', 'true');
+      document.body.appendChild(Toast.container);
+    }
+
+    return Toast.container;
+  }
+
+  static show(options = {}) {
+    const config = {
+      title: '',
+      message: '',
+      type: 'default', // default, success, error, warning, info
+      duration: 5000,
+      position: 'top-right',
+      dismissible: true,
+      icon: true,
+      ...options
+    };
+
+    const container = Toast.getContainer(config.position);
+
+    // Create toast element
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${config.type}`;
+    toast.setAttribute('role', 'alert');
+
+    // Icon
+    const icons = {
+      success: '✓',
+      error: '✕',
+      warning: '⚠',
+      info: 'ℹ',
+      default: ''
+    };
+
+    let html = '';
+
+    if (config.icon && icons[config.type]) {
+      html += `<div class="toast-icon">${icons[config.type]}</div>`;
+    }
+
+    html += '<div class="toast-content">';
+    if (config.title) {
+      html += `<div class="toast-title">${config.title}</div>`;
+    }
+    if (config.message) {
+      html += `<div class="toast-message">${config.message}</div>`;
+    }
+    html += '</div>';
+
+    if (config.dismissible) {
+      html += '<button class="toast-close" aria-label="Close">×</button>';
+    }
+
+    toast.innerHTML = html;
+
+    // Add to container
+    container.appendChild(toast);
+
+    // Trigger animation
+    requestAnimationFrame(() => {
+      toast.classList.add('show');
+    });
+
+    // Close button
+    const closeBtn = toast.querySelector('.toast-close');
+    if (closeBtn) {
+      closeBtn.addEventListener('click', () => Toast.hide(toast));
+    }
+
+    // Auto dismiss
+    if (config.duration > 0) {
+      setTimeout(() => Toast.hide(toast), config.duration);
+    }
+
+    return toast;
+  }
+
+  static hide(toast) {
+    toast.classList.remove('show');
+    toast.classList.add('hiding');
+
+    setTimeout(() => {
+      toast.remove();
+
+      // Remove container if empty
+      if (Toast.container && Toast.container.children.length === 0) {
+        Toast.container.remove();
+        Toast.container = null;
+      }
+    }, 300);
+  }
+
+  static success(message, options = {}) {
+    return Toast.show({ message, type: 'success', ...options });
+  }
+
+  static error(message, options = {}) {
+    return Toast.show({ message, type: 'error', ...options });
+  }
+
+  static warning(message, options = {}) {
+    return Toast.show({ message, type: 'warning', ...options });
+  }
+
+  static info(message, options = {}) {
+    return Toast.show({ message, type: 'info', ...options });
+  }
+
+  static clearAll() {
+    if (Toast.container) {
+      Array.from(Toast.container.children).forEach(toast => Toast.hide(toast));
+    }
+  }
+}
+
+export { Alert, Toast };
+export default Alert;