jasmincss 1.0.0

package/src/js/components/tooltip.js

@@ -0,0 +1,200 @@
+/**
+ * JasminCSS Tooltip Component
+ * Handles tooltips with positioning and accessibility
+ */
+
+class Tooltip {
+  constructor(element, options = {}) {
+    this.element = element;
+    this.options = {
+      placement: 'top',
+      trigger: 'hover focus',
+      delay: { show: 0, hide: 0 },
+      html: false,
+      ...options
+    };
+
+    this.tooltip = null;
+    this.isVisible = false;
+    this.showTimeout = null;
+    this.hideTimeout = null;
+
+    this.init();
+  }
+
+  init() {
+    const content = this.element.dataset.tooltip || this.element.getAttribute('title');
+    if (!content) return;
+
+    // Remove native title to prevent double tooltip
+    this.element.removeAttribute('title');
+    this.element.dataset.tooltip = content;
+
+    // Set ARIA
+    this.element.setAttribute('aria-describedby', '');
+
+    // Bind events based on trigger
+    const triggers = this.options.trigger.split(' ');
+
+    if (triggers.includes('hover')) {
+      this.element.addEventListener('mouseenter', () => this.show());
+      this.element.addEventListener('mouseleave', () => this.hide());
+    }
+
+    if (triggers.includes('focus')) {
+      this.element.addEventListener('focus', () => this.show());
+      this.element.addEventListener('blur', () => this.hide());
+    }
+
+    if (triggers.includes('click')) {
+      this.element.addEventListener('click', (e) => {
+        e.preventDefault();
+        this.toggle();
+      });
+    }
+  }
+
+  createTooltip() {
+    const content = this.element.dataset.tooltip;
+
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = `tooltip tooltip-${this.options.placement}`;
+    this.tooltip.setAttribute('role', 'tooltip');
+    this.tooltip.id = `tooltip-${Date.now()}`;
+
+    const inner = document.createElement('div');
+    inner.className = 'tooltip-inner';
+
+    if (this.options.html) {
+      inner.innerHTML = content;
+    } else {
+      inner.textContent = content;
+    }
+
+    const arrow = document.createElement('div');
+    arrow.className = 'tooltip-arrow';
+
+    this.tooltip.appendChild(inner);
+    this.tooltip.appendChild(arrow);
+
+    document.body.appendChild(this.tooltip);
+    this.element.setAttribute('aria-describedby', this.tooltip.id);
+
+    this.position();
+  }
+
+  position() {
+    if (!this.tooltip) return;
+
+    const rect = this.element.getBoundingClientRect();
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    const scrollY = window.scrollY;
+    const scrollX = window.scrollX;
+
+    let top, left;
+
+    switch (this.options.placement) {
+      case 'top':
+        top = rect.top + scrollY - tooltipRect.height - 8;
+        left = rect.left + scrollX + (rect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = rect.bottom + scrollY + 8;
+        left = rect.left + scrollX + (rect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = rect.top + scrollY + (rect.height - tooltipRect.height) / 2;
+        left = rect.left + scrollX - tooltipRect.width - 8;
+        break;
+      case 'right':
+        top = rect.top + scrollY + (rect.height - tooltipRect.height) / 2;
+        left = rect.right + scrollX + 8;
+        break;
+    }
+
+    // Boundary checks
+    if (left < 0) left = 8;
+    if (left + tooltipRect.width > window.innerWidth) {
+      left = window.innerWidth - tooltipRect.width - 8;
+    }
+
+    this.tooltip.style.top = `${top}px`;
+    this.tooltip.style.left = `${left}px`;
+  }
+
+  show() {
+    clearTimeout(this.hideTimeout);
+
+    this.showTimeout = setTimeout(() => {
+      if (!this.tooltip) {
+        this.createTooltip();
+      }
+
+      this.tooltip.classList.add('show');
+      this.isVisible = true;
+
+      this.element.dispatchEvent(new CustomEvent('tooltip:show', { detail: { tooltip: this } }));
+    }, this.options.delay.show);
+  }
+
+  hide() {
+    clearTimeout(this.showTimeout);
+
+    this.hideTimeout = setTimeout(() => {
+      if (this.tooltip) {
+        this.tooltip.classList.remove('show');
+
+        setTimeout(() => {
+          this.tooltip?.remove();
+          this.tooltip = null;
+          this.element.setAttribute('aria-describedby', '');
+        }, 150);
+      }
+
+      this.isVisible = false;
+      this.element.dispatchEvent(new CustomEvent('tooltip:hide', { detail: { tooltip: this } }));
+    }, this.options.delay.hide);
+  }
+
+  toggle() {
+    this.isVisible ? this.hide() : this.show();
+  }
+
+  updateContent(content) {
+    this.element.dataset.tooltip = content;
+    if (this.tooltip) {
+      const inner = this.tooltip.querySelector('.tooltip-inner');
+      if (this.options.html) {
+        inner.innerHTML = content;
+      } else {
+        inner.textContent = content;
+      }
+      this.position();
+    }
+  }
+
+  destroy() {
+    this.hide();
+    clearTimeout(this.showTimeout);
+    clearTimeout(this.hideTimeout);
+  }
+
+  // Static methods
+  static initAll(selector = '[data-tooltip]') {
+    document.querySelectorAll(selector).forEach(el => {
+      if (!el._jasminTooltip) {
+        el._jasminTooltip = new Tooltip(el, {
+          placement: el.dataset.tooltipPlacement || 'top',
+          trigger: el.dataset.tooltipTrigger || 'hover focus',
+          html: el.dataset.tooltipHtml === 'true'
+        });
+      }
+    });
+  }
+
+  static getInstance(element) {
+    return element._jasminTooltip;
+  }
+}
+
+export default Tooltip;

package/src/js/index.js

@@ -0,0 +1,79 @@
+/**
+ * JasminCSS JavaScript Components
+ * Lightweight, accessible, zero-dependency components
+ */
+
+import Dropdown from './components/dropdown.js';
+import Modal from './components/modal.js';
+import Accordion from './components/accordion.js';
+import Tabs from './components/tabs.js';
+import Offcanvas from './components/offcanvas.js';
+import Tooltip from './components/tooltip.js';
+import Popover from './components/popover.js';
+import Carousel from './components/carousel.js';
+import { Alert, Toast } from './components/alert.js';
+
+// Export individual components
+export {
+  Dropdown,
+  Modal,
+  Accordion,
+  Tabs,
+  Offcanvas,
+  Tooltip,
+  Popover,
+  Carousel,
+  Alert,
+  Toast
+};
+
+/**
+ * Initialize all components automatically
+ * Call this after DOM is ready
+ */
+export function initAll() {
+  Dropdown.initAll();
+  Modal.initAll();
+  Accordion.initAll();
+  Tabs.initAll();
+  Offcanvas.initAll();
+  Tooltip.initAll();
+  Popover.initAll();
+  Carousel.initAll();
+  Alert.initAll();
+}
+
+/**
+ * Auto-initialize on DOMContentLoaded
+ */
+export function autoInit() {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initAll);
+  } else {
+    initAll();
+  }
+}
+
+// Default export
+const Jasmin = {
+  Dropdown,
+  Modal,
+  Accordion,
+  Tabs,
+  Offcanvas,
+  Tooltip,
+  Popover,
+  Carousel,
+  Alert,
+  Toast,
+  initAll,
+  autoInit,
+  version: '1.0.0'
+};
+
+// Auto-initialize if data-jasmin-auto-init is present
+if (document.querySelector('[data-jasmin-auto-init]') || document.querySelector('script[data-jasmin-auto-init]')) {
+  autoInit();
+}
+
+export default Jasmin;

package/src/js/types/config.d.ts

@@ -0,0 +1,228 @@
+/**
+ * JasminCSS Configuration Types
+ * For jasmin.config.js / jasmin.config.ts
+ */
+
+export interface JasminBranding {
+  /** Primary brand color (hex, rgb, hsl) */
+  primary?: string;
+  /** Secondary brand color */
+  secondary?: string;
+  /** Accent color */
+  accent?: string;
+  /** Success state color */
+  success?: string;
+  /** Warning state color */
+  warning?: string;
+  /** Error state color */
+  error?: string;
+  /** Info state color */
+  info?: string;
+}
+
+export interface JasminBreakpoints {
+  /** Small breakpoint. Default: '640px' */
+  sm?: string;
+  /** Medium breakpoint. Default: '768px' */
+  md?: string;
+  /** Large breakpoint. Default: '1024px' */
+  lg?: string;
+  /** Extra large breakpoint. Default: '1280px' */
+  xl?: string;
+  /** 2X large breakpoint. Default: '1536px' */
+  '2xl'?: string;
+  /** Custom breakpoints */
+  [key: string]: string | { raw: string } | undefined;
+}
+
+export interface JasminSpacing {
+  [key: string]: string;
+}
+
+export interface JasminFontFamily {
+  /** Sans-serif font stack */
+  sans?: string;
+  /** Serif font stack */
+  serif?: string;
+  /** Monospace font stack */
+  mono?: string;
+  /** Custom font families */
+  [key: string]: string | undefined;
+}
+
+export interface JasminFontSize {
+  xs?: string;
+  sm?: string;
+  base?: string;
+  lg?: string;
+  xl?: string;
+  '2xl'?: string;
+  '3xl'?: string;
+  '4xl'?: string;
+  '5xl'?: string;
+  '6xl'?: string;
+  [key: string]: string | undefined;
+}
+
+export interface JasminBorderRadius {
+  none?: string;
+  sm?: string;
+  DEFAULT?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+  '2xl'?: string;
+  '3xl'?: string;
+  full?: string;
+  [key: string]: string | undefined;
+}
+
+export interface JasminBoxShadow {
+  sm?: string;
+  DEFAULT?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+  '2xl'?: string;
+  inner?: string;
+  none?: string;
+  [key: string]: string | undefined;
+}
+
+export interface JasminColors {
+  [colorName: string]: string | {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+    [shade: string]: string | undefined;
+  };
+}
+
+export interface JasminExtend {
+  /** Extend color palette */
+  colors?: JasminColors;
+  /** Extend spacing scale */
+  spacing?: JasminSpacing;
+  /** Extend breakpoints */
+  breakpoints?: JasminBreakpoints;
+  /** Extend font families */
+  fontFamily?: JasminFontFamily;
+  /** Extend font sizes */
+  fontSize?: JasminFontSize;
+  /** Extend border radius */
+  borderRadius?: JasminBorderRadius;
+  /** Extend box shadows */
+  boxShadow?: JasminBoxShadow;
+}
+
+export interface JasminCorePlugins {
+  /** Enable/disable layout utilities */
+  layout?: boolean;
+  /** Enable/disable spacing utilities */
+  spacing?: boolean;
+  /** Enable/disable typography utilities */
+  typography?: boolean;
+  /** Enable/disable color utilities */
+  colors?: boolean;
+  /** Enable/disable effect utilities */
+  effects?: boolean;
+  /** Enable/disable animation utilities */
+  animations?: boolean;
+  /** Enable/disable transform utilities */
+  transforms?: boolean;
+  /** Enable/disable filter utilities */
+  filters?: boolean;
+  /** Enable/disable icon utilities */
+  icons?: boolean;
+  /** Enable/disable background utilities */
+  background?: boolean;
+  /** Enable/disable column utilities */
+  columns?: boolean;
+  /** Enable/disable scroll utilities */
+  scroll?: boolean;
+  /** Enable/disable SVG utilities */
+  svg?: boolean;
+  /** Enable/disable accessibility utilities */
+  accessibility?: boolean;
+}
+
+export type JasminPlugin = (helpers: {
+  addUtilities: (utilities: Record<string, Record<string, string>>) => void;
+  addComponents: (components: Record<string, Record<string, string>>) => void;
+  addBase: (base: Record<string, Record<string, string>>) => void;
+  theme: (path: string) => any;
+  config: (path: string) => any;
+}) => void;
+
+export type SafelistPattern = string | RegExp | {
+  pattern: RegExp;
+  variants?: string[];
+};
+
+export interface JasminConfig {
+  /** Brand colors */
+  branding?: JasminBranding;
+
+  /** Content files to scan for tree-shaking */
+  content?: string[];
+
+  /** Dark mode strategy: 'class' or 'media' */
+  darkMode?: 'class' | 'media';
+
+  /** Responsive breakpoints */
+  breakpoints?: JasminBreakpoints;
+
+  /** Spacing scale */
+  spacing?: JasminSpacing;
+
+  /** Font families */
+  fontFamily?: JasminFontFamily;
+
+  /** Font sizes */
+  fontSize?: JasminFontSize;
+
+  /** Border radius values */
+  borderRadius?: JasminBorderRadius;
+
+  /** Box shadow values */
+  boxShadow?: JasminBoxShadow;
+
+  /** Extend default theme */
+  extend?: JasminExtend;
+
+  /** Enable/disable core plugins */
+  corePlugins?: JasminCorePlugins;
+
+  /** Custom plugins */
+  plugins?: JasminPlugin[];
+
+  /** Safelist classes to always include */
+  safelist?: SafelistPattern[];
+
+  /** Prefix for all classes (e.g., 'j-' produces 'j-flex') */
+  prefix?: string;
+
+  /** Important modifier */
+  important?: boolean | string;
+
+  /** Output file path */
+  output?: string;
+
+  /** Enable source maps */
+  sourcemap?: boolean;
+
+  /** Minify output */
+  minify?: boolean;
+}
+
+export function defineConfig(config: JasminConfig): JasminConfig;
+
+export default JasminConfig;