@tachui/core 0.7.0-alpha1

package/dist/modifiers/responsive/responsive-modifier.d.ts

@@ -0,0 +1,123 @@
+/**
+ * Responsive Modifier Implementation
+ *
+ * Core responsive modifier that integrates with the existing tachUI modifier system.
+ * Provides CSS-native media query generation with backward compatibility.
+ */
+import { BaseModifier } from '../base';
+import type { ModifierContext } from '../types';
+import type { DOMNode } from '../../runtime/types';
+import { ResponsiveValue, ResponsiveStyleConfig, ResponsiveModifierResult } from './types';
+/**
+ * Responsive modifier priority (between appearance and interaction)
+ */
+export declare const RESPONSIVE_MODIFIER_PRIORITY = 250;
+/**
+ * Core responsive modifier class
+ */
+export declare class ResponsiveModifier extends BaseModifier<ResponsiveStyleConfig> {
+    readonly type = "responsive";
+    readonly priority = 250;
+    private generatedCSS;
+    private elementSelector;
+    private _config;
+    constructor(config: ResponsiveStyleConfig);
+    get config(): ResponsiveStyleConfig;
+    /**
+     * Apply responsive styles to the element
+     */
+    apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined;
+    /**
+     * Generate and inject responsive CSS
+     */
+    private generateAndInjectCSS;
+    /**
+     * Set up reactive updates for dynamic responsive values
+     */
+    private setupReactiveUpdates;
+    /**
+     * Track reactive dependencies by accessing all reactive values
+     */
+    private trackReactiveDependencies;
+    /**
+     * Update configuration and regenerate CSS
+     */
+    private updateConfig;
+    /**
+     * Generate unique CSS selector for this element
+     */
+    private generateUniqueSelector;
+    /**
+     * Extract class name from CSS selector
+     */
+    private getClassFromSelector;
+    /**
+     * Generate unique ID for CSS class names
+     */
+    private generateUniqueId;
+    /**
+     * Check if configuration contains reactive values (signals)
+     */
+    private hasReactiveValues;
+    /**
+     * Check if a value is a reactive signal, computed, or Asset
+     */
+    private isReactiveValue;
+    /**
+     * Check if a value is an Asset object
+     */
+    private isAsset;
+    /**
+     * Resolve configuration with current signal values
+     */
+    private resolveReactiveConfig;
+    /**
+     * Get generated CSS information (for debugging)
+     */
+    getGeneratedCSS(): ResponsiveModifierResult | null;
+    /**
+     * Get configuration (for debugging)
+     */
+    getConfig(): ResponsiveStyleConfig;
+}
+/**
+ * Factory function to create responsive modifiers
+ */
+export declare function createResponsiveModifier(config: ResponsiveStyleConfig): ResponsiveModifier;
+/**
+ * Media query modifier for custom media queries
+ */
+export declare class MediaQueryModifier extends BaseModifier<{
+    query: string;
+    styles: Record<string, any>;
+}> {
+    readonly type = "media-query";
+    readonly priority: number;
+    private elementSelector;
+    constructor(query: string, styles: Record<string, any>);
+    get query(): string;
+    get styles(): Record<string, any>;
+    apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined;
+    private generateMediaQueryCSS;
+    private generateUniqueSelector;
+    private getClassFromSelector;
+}
+/**
+ * Factory function to create media query modifiers
+ */
+export declare function createMediaQueryModifier(query: string, styles: Record<string, any>): MediaQueryModifier;
+/**
+ * Utility to create responsive property modifier
+ */
+export declare function createResponsivePropertyModifier<T>(property: string, value: ResponsiveValue<T>): ResponsiveModifier;
+/**
+ * Create a responsive layout modifier
+ */
+export declare function createResponsiveLayoutModifier(config: {
+    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+    gap?: ResponsiveValue<number | string>;
+}): ResponsiveModifier;
+//# sourceMappingURL=responsive-modifier.d.ts.map

package/dist/modifiers/responsive/responsive-modifier.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-modifier.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/responsive-modifier.ts"],"names":[],"mappings":"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"}

package/dist/modifiers/responsive/responsive-modifier.js

@@ -0,0 +1,204 @@
+import { BaseModifier as d } from "../base.js";
+import { isResponsiveValue as p } from "./types.js";
+import { ResponsiveCSSGenerator as C, CSSInjector as m } from "./css-generator.js";
+import { ResponsivePerformanceMonitor as R } from "./performance.js";
+import "../../reactive/cleanup.js";
+import { isComputed as l } from "../../reactive/computed.js";
+import { createEffect as b } from "../../reactive/effect.js";
+import "../../reactive/unified-scheduler.js";
+import { isSignal as u } from "../../reactive/signal.js";
+import "../../reactive/scheduler.js";
+import { getThemeSignal as M } from "../../reactive/theme.js";
+var _ = Object.defineProperty, $ = (s, e, t) => e in s ? _(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, c = (s, e, t) => $(s, typeof e != "symbol" ? e + "" : e, t);
+const S = 250;
+class h extends d {
+  constructor(e) {
+    super(e), c(this, "type", "responsive"), c(this, "priority", S), c(this, "generatedCSS", null), c(this, "elementSelector", ""), c(this, "_config"), this._config = e;
+  }
+  get config() {
+    return this._config;
+  }
+  /**
+   * Apply responsive styles to the element
+   */
+  apply(e, t) {
+    const r = e.element;
+    !r || !(r instanceof HTMLElement) || (this.elementSelector = this.generateUniqueSelector(r), r.classList.add(this.getClassFromSelector(this.elementSelector)), this.generateAndInjectCSS(), this.setupReactiveUpdates());
+  }
+  /**
+   * Generate and inject responsive CSS
+   */
+  generateAndInjectCSS() {
+    const e = R.startMeasurement("css-generation");
+    try {
+      const t = new C({
+        selector: this.elementSelector,
+        generateMinified: process.env.NODE_ENV === "production",
+        includeComments: process.env.NODE_ENV !== "production",
+        optimizeOutput: !0
+      });
+      this.generatedCSS = t.generateResponsiveCSS(this.config), this.generatedCSS.cssRules.length > 0 && m.injectCSS(this.generatedCSS.cssRules);
+    } finally {
+      e();
+    }
+  }
+  /**
+   * Set up reactive updates for dynamic responsive values
+   */
+  setupReactiveUpdates() {
+    this.hasReactiveValues(this.config) && b(() => {
+      this.trackReactiveDependencies(this.config);
+      const t = this.resolveReactiveConfig(this.config);
+      this.updateConfig(t);
+    });
+  }
+  /**
+   * Track reactive dependencies by accessing all reactive values
+   */
+  trackReactiveDependencies(e) {
+    let t = !1;
+    for (const [r, i] of Object.entries(e))
+      if (this.isReactiveValue(i))
+        u(i) || l(i) ? i() : this.isAsset(i) && (t = !0, i.resolve());
+      else if (p(i))
+        for (const [o, n] of Object.entries(i))
+          this.isReactiveValue(n) && (u(n) || l(n) ? n() : this.isAsset(n) && (t = !0, n.resolve()));
+    t && M()();
+  }
+  /**
+   * Update configuration and regenerate CSS
+   */
+  updateConfig(e) {
+    this._config = e, this.generateAndInjectCSS();
+  }
+  /**
+   * Generate unique CSS selector for this element
+   */
+  generateUniqueSelector(e) {
+    return `.${`tachui-responsive-${this.generateUniqueId()}`}`;
+  }
+  /**
+   * Extract class name from CSS selector
+   */
+  getClassFromSelector(e) {
+    return e.replace(/^\./, "");
+  }
+  /**
+   * Generate unique ID for CSS class names
+   */
+  generateUniqueId() {
+    return Math.random().toString(36).substr(2, 9);
+  }
+  /**
+   * Check if configuration contains reactive values (signals)
+   */
+  hasReactiveValues(e) {
+    for (const t of Object.values(e)) {
+      if (this.isReactiveValue(t))
+        return !0;
+      if (p(t)) {
+        for (const r of Object.values(t))
+          if (this.isReactiveValue(r))
+            return !0;
+      }
+    }
+    return !1;
+  }
+  /**
+   * Check if a value is a reactive signal, computed, or Asset
+   */
+  isReactiveValue(e) {
+    return !!(u(e) || l(e) || this.isAsset(e));
+  }
+  /**
+   * Check if a value is an Asset object
+   */
+  isAsset(e) {
+    return e != null && typeof e == "object" && "resolve" in e && typeof e.resolve == "function";
+  }
+  /**
+   * Resolve configuration with current signal values
+   */
+  resolveReactiveConfig(e) {
+    const t = {};
+    for (const [r, i] of Object.entries(e))
+      if (this.isReactiveValue(i))
+        u(i) || l(i) ? t[r] = i() : this.isAsset(i) && (t[r] = i.resolve());
+      else if (p(i)) {
+        const o = {};
+        for (const [n, a] of Object.entries(i))
+          this.isReactiveValue(a) ? u(a) || l(a) ? o[n] = a() : this.isAsset(a) && (o[n] = a.resolve()) : o[n] = a;
+        t[r] = o;
+      } else
+        t[r] = i;
+    return t;
+  }
+  /**
+   * Get generated CSS information (for debugging)
+   */
+  getGeneratedCSS() {
+    return this.generatedCSS;
+  }
+  /**
+   * Get configuration (for debugging)
+   */
+  getConfig() {
+    return this.config;
+  }
+}
+function D(s) {
+  return new h(s);
+}
+class V extends d {
+  constructor(e, t) {
+    super({ query: e, styles: t }), c(this, "type", "media-query"), c(this, "priority", S + 1), c(this, "elementSelector", "");
+  }
+  get query() {
+    return this.properties.query;
+  }
+  get styles() {
+    return this.properties.styles;
+  }
+  apply(e, t) {
+    const r = e.element;
+    !r || !(r instanceof HTMLElement) || (this.elementSelector = this.generateUniqueSelector(r), r.classList.add(this.getClassFromSelector(this.elementSelector)), this.generateMediaQueryCSS());
+  }
+  generateMediaQueryCSS() {
+    const { generateMinified: e = process.env.NODE_ENV === "production" } = {}, t = e ? "" : "  ", r = e ? "" : "    ", i = e ? "" : `
+`, o = e ? "" : " ";
+    let n = `@media ${this.query}${o}{${i}`;
+    n += `${t}${this.elementSelector}${o}{${i}`;
+    for (const [a, f] of Object.entries(this.styles)) {
+      const g = a.replace(/[A-Z]/g, (y) => `-${y.toLowerCase()}`), v = typeof f == "number" ? `${f}px` : f.toString();
+      n += `${r}${g}:${o}${v};${i}`;
+    }
+    n += `${t}}${i}`, n += `}${i}`, m.injectCSS([n]);
+  }
+  generateUniqueSelector(e) {
+    return `.${`tachui-mq-${Math.random().toString(36).substr(2, 9)}`}`;
+  }
+  getClassFromSelector(e) {
+    return e.replace(/^\./, "");
+  }
+}
+function k(s, e) {
+  return new V(s, e);
+}
+function F(s, e) {
+  const t = { [s]: e };
+  return new h(t);
+}
+function L(s) {
+  const e = {};
+  return s.direction && (e.flexDirection = s.direction), s.wrap && (e.flexWrap = s.wrap), s.justify && (e.justifyContent = s.justify), s.align && (e.alignItems = s.align), s.gap && (e.gap = s.gap), new h(e);
+}
+export {
+  V as MediaQueryModifier,
+  S as RESPONSIVE_MODIFIER_PRIORITY,
+  h as ResponsiveModifier,
+  k as createMediaQueryModifier,
+  L as createResponsiveLayoutModifier,
+  D as createResponsiveModifier,
+  F as createResponsivePropertyModifier
+};
+//# sourceMappingURL=responsive-modifier.js.map

package/dist/modifiers/responsive/responsive-modifier.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-modifier.js","sources":["../../../src/modifiers/responsive/responsive-modifier.ts"],"sourcesContent":["/**\n * Responsive Modifier Implementation\n * \n * Core responsive modifier that integrates with the existing tachUI modifier system.\n * Provides CSS-native media query generation with backward compatibility.\n */\n\nimport { BaseModifier } from '../base'\nimport type { ModifierContext } from '../types'\nimport type { DOMNode } from '../../runtime/types'\nimport {\n  ResponsiveValue,\n  ResponsiveStyleConfig,\n  ResponsiveModifierResult,\n  isResponsiveValue,\n  BreakpointKey\n} from './types'\nimport { ResponsiveCSSGenerator, CSSInjector } from './css-generator'\nimport { ResponsivePerformanceMonitor } from './performance'\nimport { createEffect, isSignal, isComputed } from '../../reactive'\nimport { getThemeSignal } from '../../reactive/theme'\n\n/**\n * Responsive modifier priority (between appearance and interaction)\n */\nexport const RESPONSIVE_MODIFIER_PRIORITY = 250\n\n/**\n * Core responsive modifier class\n */\nexport class ResponsiveModifier extends BaseModifier<ResponsiveStyleConfig> {\n  readonly type = 'responsive'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY\n  private generatedCSS: ResponsiveModifierResult | null = null\n  private elementSelector: string = ''\n  private _config: ResponsiveStyleConfig\n  \n  constructor(config: ResponsiveStyleConfig) {\n    super(config)\n    this._config = config\n  }\n  \n  get config(): ResponsiveStyleConfig {\n    return this._config\n  }\n  \n  /**\n   * Apply responsive styles to the element\n   */\n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector for this element\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate responsive CSS\n    this.generateAndInjectCSS()\n    \n    // Set up reactive updates for dynamic responsive values\n    this.setupReactiveUpdates()\n    \n    return undefined // No DOM modifications needed\n  }\n  \n  /**\n   * Generate and inject responsive CSS\n   */\n  private generateAndInjectCSS(): void {\n    const endMeasurement = ResponsivePerformanceMonitor.startMeasurement('css-generation')\n    \n    try {\n      // Always use immediate CSS generation for responsive modifiers\n      // Batching can cause FOUC and layout issues when components need responsive styles immediately\n      const generator = new ResponsiveCSSGenerator({\n        selector: this.elementSelector,\n        generateMinified: process.env.NODE_ENV === 'production',\n        includeComments: process.env.NODE_ENV !== 'production',\n        optimizeOutput: true\n      })\n      \n      this.generatedCSS = generator.generateResponsiveCSS(this.config)\n      \n      // Inject CSS rules into the document immediately\n      if (this.generatedCSS.cssRules.length > 0) {\n        CSSInjector.injectCSS(this.generatedCSS.cssRules)\n      }\n    } finally {\n      endMeasurement()\n    }\n  }\n  \n  /**\n   * Set up reactive updates for dynamic responsive values\n   */\n  private setupReactiveUpdates(): void {\n    // Check if any values are reactive signals\n    const hasReactiveValues = this.hasReactiveValues(this.config)\n    \n    if (hasReactiveValues) {\n      // Create reactive effect to regenerate CSS when values change\n      createEffect(() => {\n        // Track all reactive dependencies by accessing them\n        this.trackReactiveDependencies(this.config)\n        \n        // Re-evaluate config with current signal values\n        const currentConfig = this.resolveReactiveConfig(this.config)\n        \n        // Update CSS if config changed\n        this.updateConfig(currentConfig)\n      })\n    }\n  }\n  \n  /**\n   * Track reactive dependencies by accessing all reactive values\n   */\n  private trackReactiveDependencies(config: ResponsiveStyleConfig): void {\n    // Track theme signal for any Assets that might be present\n    let hasAssets = false\n    \n    for (const [_key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        if (isSignal(value) || isComputed(value)) {\n          value() // Access to establish dependency tracking\n        } else if (this.isAsset(value)) {\n          hasAssets = true\n          value.resolve() // Access to establish theme dependency tracking\n        }\n      } else if (isResponsiveValue(value)) {\n        for (const [_breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              breakpointValue() // Access to establish dependency tracking\n            } else if (this.isAsset(breakpointValue)) {\n              hasAssets = true\n              breakpointValue.resolve() // Access to establish theme dependency tracking\n            }\n          }\n        }\n      }\n    }\n    \n    // If we have Assets, explicitly track the theme signal to ensure theme changes trigger updates\n    if (hasAssets) {\n      const themeSignal = getThemeSignal()\n      themeSignal() // Access theme signal to establish dependency\n    }\n  }\n  \n  /**\n   * Update configuration and regenerate CSS\n   */\n  private updateConfig(newConfig: ResponsiveStyleConfig): void {\n    this._config = newConfig\n    \n    // Clear old CSS rules (if we had a way to track them individually)\n    // For now, we'll rely on CSS override behavior\n    \n    // Generate new CSS\n    this.generateAndInjectCSS()\n  }\n  \n  /**\n   * Generate unique CSS selector for this element\n   */\n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = this.generateUniqueId()\n    const className = `tachui-responsive-${uniqueId}`\n    return `.${className}`\n  }\n  \n  /**\n   * Extract class name from CSS selector\n   */\n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '') // Remove leading dot\n  }\n  \n  /**\n   * Generate unique ID for CSS class names\n   */\n  private generateUniqueId(): string {\n    return Math.random().toString(36).substr(2, 9)\n  }\n  \n  /**\n   * Check if configuration contains reactive values (signals)\n   */\n  private hasReactiveValues(config: ResponsiveStyleConfig): boolean {\n    for (const value of Object.values(config)) {\n      if (this.isReactiveValue(value)) {\n        return true\n      }\n      \n      if (isResponsiveValue(value)) {\n        for (const breakpointValue of Object.values(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            return true\n          }\n        }\n      }\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is a reactive signal, computed, or Asset\n   */\n  private isReactiveValue(value: any): boolean {\n    // Check for TachUI signals and computed values\n    if (isSignal(value) || isComputed(value)) {\n      return true\n    }\n    \n    // Check for Assets (have a resolve method and are theme-reactive)\n    if (this.isAsset(value)) {\n      return true\n    }\n    \n    return false\n  }\n  \n  /**\n   * Check if a value is an Asset object\n   */\n  private isAsset(value: any): boolean {\n    return (\n      value !== null &&\n      value !== undefined &&\n      typeof value === 'object' &&\n      'resolve' in value &&\n      typeof value.resolve === 'function'\n    )\n  }\n  \n  /**\n   * Resolve configuration with current signal values\n   */\n  private resolveReactiveConfig(config: ResponsiveStyleConfig): ResponsiveStyleConfig {\n    const resolved: ResponsiveStyleConfig = {}\n    \n    for (const [key, value] of Object.entries(config)) {\n      if (this.isReactiveValue(value)) {\n        // Handle different types of reactive values\n        if (isSignal(value) || isComputed(value)) {\n          resolved[key] = value() // Call signal/computed to get current value\n        } else if (this.isAsset(value)) {\n          resolved[key] = value.resolve() // Resolve Asset to current theme value\n        }\n      } else if (isResponsiveValue(value)) {\n        const resolvedBreakpoints: Partial<Record<BreakpointKey, any>> = {}\n        \n        for (const [breakpoint, breakpointValue] of Object.entries(value)) {\n          if (this.isReactiveValue(breakpointValue)) {\n            // Handle different types of reactive values at breakpoint level\n            if (isSignal(breakpointValue) || isComputed(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue()\n            } else if (this.isAsset(breakpointValue)) {\n              resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue.resolve()\n            }\n          } else {\n            resolvedBreakpoints[breakpoint as BreakpointKey] = breakpointValue\n          }\n        }\n        \n        resolved[key] = resolvedBreakpoints\n      } else {\n        resolved[key] = value\n      }\n    }\n    \n    return resolved\n  }\n  \n  /**\n   * Get generated CSS information (for debugging)\n   */\n  getGeneratedCSS(): ResponsiveModifierResult | null {\n    return this.generatedCSS\n  }\n  \n  /**\n   * Get configuration (for debugging)\n   */\n  getConfig(): ResponsiveStyleConfig {\n    return this.config\n  }\n}\n\n/**\n * Factory function to create responsive modifiers\n */\nexport function createResponsiveModifier(config: ResponsiveStyleConfig): ResponsiveModifier {\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Media query modifier for custom media queries\n */\nexport class MediaQueryModifier extends BaseModifier<{ query: string; styles: Record<string, any> }> {\n  readonly type = 'media-query'\n  readonly priority = RESPONSIVE_MODIFIER_PRIORITY + 1 // Slightly higher than responsive\n  private elementSelector: string = ''\n  \n  constructor(query: string, styles: Record<string, any>) {\n    super({ query, styles })\n  }\n  \n  get query(): string {\n    return this.properties.query\n  }\n  \n  get styles(): Record<string, any> {\n    return this.properties.styles\n  }\n  \n  apply(node: DOMNode, _context: ModifierContext): DOMNode | undefined {\n    const element = node.element\n    \n    if (!element || !(element instanceof HTMLElement)) {\n      return undefined\n    }\n    \n    // Generate unique selector\n    this.elementSelector = this.generateUniqueSelector(element)\n    element.classList.add(this.getClassFromSelector(this.elementSelector))\n    \n    // Generate and inject media query CSS\n    this.generateMediaQueryCSS()\n    \n    return undefined\n  }\n  \n  private generateMediaQueryCSS(): void {\n    const { generateMinified = process.env.NODE_ENV === 'production' } = {}\n    const indent = generateMinified ? '' : '  '\n    const doubleIndent = generateMinified ? '' : '    '\n    const newline = generateMinified ? '' : '\\n'\n    const space = generateMinified ? '' : ' '\n    \n    let rule = `@media ${this.query}${space}{${newline}`\n    rule += `${indent}${this.elementSelector}${space}{${newline}`\n    \n    for (const [property, value] of Object.entries(this.styles)) {\n      const cssProperty = property.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)\n      const cssValue = typeof value === 'number' ? `${value}px` : value.toString()\n      rule += `${doubleIndent}${cssProperty}:${space}${cssValue};${newline}`\n    }\n    \n    rule += `${indent}}${newline}`\n    rule += `}${newline}`\n    \n    CSSInjector.injectCSS([rule])\n  }\n  \n  private generateUniqueSelector(_element: HTMLElement): string {\n    const uniqueId = Math.random().toString(36).substr(2, 9)\n    const className = `tachui-mq-${uniqueId}`\n    return `.${className}`\n  }\n  \n  private getClassFromSelector(selector: string): string {\n    return selector.replace(/^\\./, '')\n  }\n}\n\n/**\n * Factory function to create media query modifiers\n */\nexport function createMediaQueryModifier(query: string, styles: Record<string, any>): MediaQueryModifier {\n  return new MediaQueryModifier(query, styles)\n}\n\n/**\n * Utility to create responsive property modifier\n */\nexport function createResponsivePropertyModifier<T>(\n  property: string, \n  value: ResponsiveValue<T>\n): ResponsiveModifier {\n  const config = { [property]: value } as ResponsiveStyleConfig\n  return new ResponsiveModifier(config)\n}\n\n/**\n * Create a responsive layout modifier\n */\nexport function createResponsiveLayoutModifier(config: {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  gap?: ResponsiveValue<number | string>\n}): ResponsiveModifier {\n  const styleConfig: ResponsiveStyleConfig = {}\n  \n  if (config.direction) styleConfig.flexDirection = config.direction\n  if (config.wrap) styleConfig.flexWrap = config.wrap\n  if (config.justify) styleConfig.justifyContent = config.justify\n  if (config.align) styleConfig.alignItems = config.align\n  if (config.gap) styleConfig.gap = config.gap\n  \n  return new ResponsiveModifier(styleConfig)\n}"],"names":["RESPONSIVE_MODIFIER_PRIORITY","ResponsiveModifier","BaseModifier","config","__publicField","node","_context","element","endMeasurement","ResponsivePerformanceMonitor","generator","ResponsiveCSSGenerator","CSSInjector","createEffect","currentConfig","hasAssets","_key","value","isSignal","isComputed","isResponsiveValue","_breakpoint","breakpointValue","getThemeSignal","newConfig","_element","selector","resolved","key","resolvedBreakpoints","breakpoint","createResponsiveModifier","MediaQueryModifier","query","styles","generateMinified","indent","doubleIndent","newline","space","rule","property","cssProperty","match","cssValue","createMediaQueryModifier","createResponsivePropertyModifier","createResponsiveLayoutModifier","styleConfig"],"mappings":"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"}

package/dist/modifiers/responsive/types.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i={base:"0px",sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"};function l(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Object.keys(e).some(s=>["base","sm","md","lg","xl","2xl"].includes(s))}function n(e){return["base","sm","md","lg","xl","2xl"].includes(e)}exports.DEFAULT_BREAKPOINTS=i;exports.isResponsiveValue=l;exports.isValidBreakpointKey=n;
+//# sourceMappingURL=types.cjs.map

package/dist/modifiers/responsive/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":["../../../src/modifiers/responsive/types.ts"],"sourcesContent":["/**\n * Responsive Design System Types\n * \n * CSS-Native media query and responsive design type definitions for tachUI.\n * Provides comprehensive type safety for responsive modifiers while maintaining\n * backward compatibility with existing modifier system.\n */\n\n/**\n * Standard breakpoint identifiers following Tailwind conventions\n */\nexport type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Breakpoint configuration mapping breakpoint keys to CSS values\n */\nexport interface BreakpointConfig {\n  base?: string    // Mobile-first base (no media query)\n  sm?: string      // 640px+ (small tablets and large phones)\n  md?: string      // 768px+ (tablets)\n  lg?: string      // 1024px+ (laptops and small desktops)\n  xl?: string      // 1280px+ (large desktops)\n  '2xl'?: string   // 1536px+ (extra large screens)\n}\n\n/**\n * Default breakpoint values (Tailwind-inspired)\n */\nexport const DEFAULT_BREAKPOINTS: Required<BreakpointConfig> = {\n  base: '0px',      // Mobile-first base\n  sm: '640px',      // Small tablets and large phones\n  md: '768px',      // Tablets\n  lg: '1024px',     // Laptops and small desktops\n  xl: '1280px',     // Large desktops\n  '2xl': '1536px'   // Extra large screens\n} as const\n\n/**\n * Responsive value type that accepts either a single value or breakpoint-specific values\n */\nexport type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>\n\n/**\n * CSS property values that can be responsive\n */\nexport type ResponsiveCSSValue = ResponsiveValue<string | number>\n\n/**\n * Advanced media query configuration for custom responsive behavior\n */\nexport interface MediaQueryConfig {\n  query: string                    // Raw CSS media query\n  styles: Record<string, string | number>  // CSS properties to apply\n}\n\n/**\n * Responsive modifier configuration combining breakpoints and custom media queries\n */\nexport interface ResponsiveModifierConfig<T = any> {\n  breakpoints?: Partial<Record<BreakpointKey, T>>\n  mediaQueries?: MediaQueryConfig[]\n  fallback?: T  // Fallback value if no conditions match\n}\n\n/**\n * Responsive layout configuration for common responsive patterns\n */\nexport interface ResponsiveLayoutConfig {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  gap?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive typography configuration\n */\nexport interface ResponsiveTypographyConfig {\n  fontSize?: ResponsiveValue<number | string>\n  lineHeight?: ResponsiveValue<number | string>\n  letterSpacing?: ResponsiveValue<number | string>\n  fontWeight?: ResponsiveValue<number | string>\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n  textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>\n}\n\n/**\n * Responsive spacing configuration\n */\nexport interface ResponsiveSpacingConfig {\n  top?: ResponsiveValue<number | string>\n  right?: ResponsiveValue<number | string>\n  bottom?: ResponsiveValue<number | string>\n  left?: ResponsiveValue<number | string>\n  horizontal?: ResponsiveValue<number | string>  // left + right\n  vertical?: ResponsiveValue<number | string>    // top + bottom\n  all?: ResponsiveValue<number | string>         // all sides\n}\n\n/**\n * Responsive dimension configuration\n */\nexport interface ResponsiveDimensionConfig {\n  width?: ResponsiveValue<number | string>\n  height?: ResponsiveValue<number | string>\n  minWidth?: ResponsiveValue<number | string>\n  maxWidth?: ResponsiveValue<number | string>\n  minHeight?: ResponsiveValue<number | string>\n  maxHeight?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive visibility configuration\n */\nexport interface ResponsiveVisibilityConfig {\n  display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>\n  visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>\n  opacity?: ResponsiveValue<number>\n}\n\n/**\n * Comprehensive responsive style configuration\n */\nexport interface ResponsiveStyleConfig extends \n  ResponsiveLayoutConfig,\n  ResponsiveTypographyConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveVisibilityConfig {\n  \n  // Additional CSS properties that can be responsive\n  backgroundColor?: ResponsiveValue<string>\n  color?: ResponsiveValue<string>\n  border?: ResponsiveValue<string>\n  borderRadius?: ResponsiveValue<number | string>\n  boxShadow?: ResponsiveValue<string>\n  transform?: ResponsiveValue<string>\n  transition?: ResponsiveValue<string>\n  \n  // Spacing\n  padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  \n  // Custom CSS properties\n  [key: string]: any\n}\n\n/**\n * Breakpoint context information for responsive utilities\n */\nexport interface BreakpointContext {\n  current: BreakpointKey\n  width: number\n  height: number\n  isAbove: (breakpoint: BreakpointKey) => boolean\n  isBelow: (breakpoint: BreakpointKey) => boolean\n  isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean\n  matches: (query: string) => boolean\n}\n\n/**\n * Responsive modifier factory configuration\n */\nexport interface ResponsiveModifierFactoryConfig {\n  breakpoints?: BreakpointConfig\n  generateCSS?: boolean          // Generate CSS media queries vs JavaScript\n  fallbackToJS?: boolean         // Fallback to JavaScript if CSS not supported\n  optimizeOutput?: boolean       // Optimize generated CSS\n  debugMode?: boolean           // Enable responsive debugging\n}\n\n/**\n * CSS media query generation result\n */\nexport interface GeneratedMediaQuery {\n  breakpoint: BreakpointKey\n  query: string                 // CSS media query string\n  styles: Record<string, string | number>  // CSS properties\n  selector: string              // CSS selector\n}\n\n/**\n * Responsive modifier application result\n */\nexport interface ResponsiveModifierResult {\n  cssRules: string[]            // Generated CSS rules\n  mediaQueries: GeneratedMediaQuery[]  // Generated media queries\n  fallbackStyles: Record<string, string | number>  // Fallback styles for base\n  hasResponsiveStyles: boolean  // Whether responsive styles were applied\n}\n\n/**\n * Type guard to check if a value is responsive\n */\nexport function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value) && \n         Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key))\n}\n\n/**\n * Type guard to check if a breakpoint key is valid\n */\nexport function isValidBreakpointKey(key: string): key is BreakpointKey {\n  return ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key)\n}\n\n/**\n * Utility type to make any property responsive\n */\nexport type MakeResponsive<T> = {\n  [K in keyof T]: ResponsiveValue<T[K]>\n}\n\n/**\n * Extract responsive properties from a configuration object\n */\nexport type ResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K]\n}\n\n/**\n * Extract non-responsive properties from a configuration object\n */\nexport type NonResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K]\n}"],"names":["DEFAULT_BREAKPOINTS","isResponsiveValue","value","key","isValidBreakpointKey"],"mappings":"gFA4BO,MAAMA,EAAkD,CAC7D,KAAM,MACN,GAAI,QACJ,GAAI,QACJ,GAAI,SACJ,GAAI,SACJ,MAAO,QACT,EA+JO,SAASC,EAAqBC,EAAuE,CAC1G,OAAO,OAAOA,GAAU,UAAYA,IAAU,MAAQ,CAAC,MAAM,QAAQA,CAAK,GACnE,OAAO,KAAKA,CAAK,EAAE,KAAKC,GAAO,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAK,EAAE,SAASA,CAAG,CAAC,CAC7F,CAKO,SAASC,EAAqBD,EAAmC,CACtE,MAAO,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAK,EAAE,SAASA,CAAG,CAC7D"}

package/dist/modifiers/responsive/types.d.ts

@@ -0,0 +1,183 @@
+/**
+ * Responsive Design System Types
+ *
+ * CSS-Native media query and responsive design type definitions for tachUI.
+ * Provides comprehensive type safety for responsive modifiers while maintaining
+ * backward compatibility with existing modifier system.
+ */
+/**
+ * Standard breakpoint identifiers following Tailwind conventions
+ */
+export type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * Breakpoint configuration mapping breakpoint keys to CSS values
+ */
+export interface BreakpointConfig {
+    base?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    '2xl'?: string;
+}
+/**
+ * Default breakpoint values (Tailwind-inspired)
+ */
+export declare const DEFAULT_BREAKPOINTS: Required<BreakpointConfig>;
+/**
+ * Responsive value type that accepts either a single value or breakpoint-specific values
+ */
+export type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>;
+/**
+ * CSS property values that can be responsive
+ */
+export type ResponsiveCSSValue = ResponsiveValue<string | number>;
+/**
+ * Advanced media query configuration for custom responsive behavior
+ */
+export interface MediaQueryConfig {
+    query: string;
+    styles: Record<string, string | number>;
+}
+/**
+ * Responsive modifier configuration combining breakpoints and custom media queries
+ */
+export interface ResponsiveModifierConfig<T = any> {
+    breakpoints?: Partial<Record<BreakpointKey, T>>;
+    mediaQueries?: MediaQueryConfig[];
+    fallback?: T;
+}
+/**
+ * Responsive layout configuration for common responsive patterns
+ */
+export interface ResponsiveLayoutConfig {
+    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+    gap?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive typography configuration
+ */
+export interface ResponsiveTypographyConfig {
+    fontSize?: ResponsiveValue<number | string>;
+    lineHeight?: ResponsiveValue<number | string>;
+    letterSpacing?: ResponsiveValue<number | string>;
+    fontWeight?: ResponsiveValue<number | string>;
+    textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>;
+    textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>;
+}
+/**
+ * Responsive spacing configuration
+ */
+export interface ResponsiveSpacingConfig {
+    top?: ResponsiveValue<number | string>;
+    right?: ResponsiveValue<number | string>;
+    bottom?: ResponsiveValue<number | string>;
+    left?: ResponsiveValue<number | string>;
+    horizontal?: ResponsiveValue<number | string>;
+    vertical?: ResponsiveValue<number | string>;
+    all?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive dimension configuration
+ */
+export interface ResponsiveDimensionConfig {
+    width?: ResponsiveValue<number | string>;
+    height?: ResponsiveValue<number | string>;
+    minWidth?: ResponsiveValue<number | string>;
+    maxWidth?: ResponsiveValue<number | string>;
+    minHeight?: ResponsiveValue<number | string>;
+    maxHeight?: ResponsiveValue<number | string>;
+}
+/**
+ * Responsive visibility configuration
+ */
+export interface ResponsiveVisibilityConfig {
+    display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>;
+    visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>;
+    opacity?: ResponsiveValue<number>;
+}
+/**
+ * Comprehensive responsive style configuration
+ */
+export interface ResponsiveStyleConfig extends ResponsiveLayoutConfig, ResponsiveTypographyConfig, ResponsiveDimensionConfig, ResponsiveVisibilityConfig {
+    backgroundColor?: ResponsiveValue<string>;
+    color?: ResponsiveValue<string>;
+    border?: ResponsiveValue<string>;
+    borderRadius?: ResponsiveValue<number | string>;
+    boxShadow?: ResponsiveValue<string>;
+    transform?: ResponsiveValue<string>;
+    transition?: ResponsiveValue<string>;
+    padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>;
+    margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>;
+    [key: string]: any;
+}
+/**
+ * Breakpoint context information for responsive utilities
+ */
+export interface BreakpointContext {
+    current: BreakpointKey;
+    width: number;
+    height: number;
+    isAbove: (breakpoint: BreakpointKey) => boolean;
+    isBelow: (breakpoint: BreakpointKey) => boolean;
+    isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean;
+    matches: (query: string) => boolean;
+}
+/**
+ * Responsive modifier factory configuration
+ */
+export interface ResponsiveModifierFactoryConfig {
+    breakpoints?: BreakpointConfig;
+    generateCSS?: boolean;
+    fallbackToJS?: boolean;
+    optimizeOutput?: boolean;
+    debugMode?: boolean;
+}
+/**
+ * CSS media query generation result
+ */
+export interface GeneratedMediaQuery {
+    breakpoint: BreakpointKey;
+    query: string;
+    styles: Record<string, string | number>;
+    selector: string;
+}
+/**
+ * Responsive modifier application result
+ */
+export interface ResponsiveModifierResult {
+    cssRules: string[];
+    mediaQueries: GeneratedMediaQuery[];
+    fallbackStyles: Record<string, string | number>;
+    hasResponsiveStyles: boolean;
+}
+/**
+ * Type guard to check if a value is responsive
+ */
+export declare function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>>;
+/**
+ * Type guard to check if a breakpoint key is valid
+ */
+export declare function isValidBreakpointKey(key: string): key is BreakpointKey;
+/**
+ * Utility type to make any property responsive
+ */
+export type MakeResponsive<T> = {
+    [K in keyof T]: ResponsiveValue<T[K]>;
+};
+/**
+ * Extract responsive properties from a configuration object
+ */
+export type ResponsiveProperties<T> = {
+    [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K];
+};
+/**
+ * Extract non-responsive properties from a configuration object
+ */
+export type NonResponsiveProperties<T> = {
+    [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K];
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/modifiers/responsive/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/types.ts"],"names":[],"mappings":"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"}

package/dist/modifiers/responsive/types.js

@@ -0,0 +1,26 @@
+const x = {
+  base: "0px",
+  // Mobile-first base
+  sm: "640px",
+  // Small tablets and large phones
+  md: "768px",
+  // Tablets
+  lg: "1024px",
+  // Laptops and small desktops
+  xl: "1280px",
+  // Large desktops
+  "2xl": "1536px"
+  // Extra large screens
+};
+function l(s) {
+  return typeof s == "object" && s !== null && !Array.isArray(s) && Object.keys(s).some((e) => ["base", "sm", "md", "lg", "xl", "2xl"].includes(e));
+}
+function n(s) {
+  return ["base", "sm", "md", "lg", "xl", "2xl"].includes(s);
+}
+export {
+  x as DEFAULT_BREAKPOINTS,
+  l as isResponsiveValue,
+  n as isValidBreakpointKey
+};
+//# sourceMappingURL=types.js.map

package/dist/modifiers/responsive/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/modifiers/responsive/types.ts"],"sourcesContent":["/**\n * Responsive Design System Types\n * \n * CSS-Native media query and responsive design type definitions for tachUI.\n * Provides comprehensive type safety for responsive modifiers while maintaining\n * backward compatibility with existing modifier system.\n */\n\n/**\n * Standard breakpoint identifiers following Tailwind conventions\n */\nexport type BreakpointKey = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\n/**\n * Breakpoint configuration mapping breakpoint keys to CSS values\n */\nexport interface BreakpointConfig {\n  base?: string    // Mobile-first base (no media query)\n  sm?: string      // 640px+ (small tablets and large phones)\n  md?: string      // 768px+ (tablets)\n  lg?: string      // 1024px+ (laptops and small desktops)\n  xl?: string      // 1280px+ (large desktops)\n  '2xl'?: string   // 1536px+ (extra large screens)\n}\n\n/**\n * Default breakpoint values (Tailwind-inspired)\n */\nexport const DEFAULT_BREAKPOINTS: Required<BreakpointConfig> = {\n  base: '0px',      // Mobile-first base\n  sm: '640px',      // Small tablets and large phones\n  md: '768px',      // Tablets\n  lg: '1024px',     // Laptops and small desktops\n  xl: '1280px',     // Large desktops\n  '2xl': '1536px'   // Extra large screens\n} as const\n\n/**\n * Responsive value type that accepts either a single value or breakpoint-specific values\n */\nexport type ResponsiveValue<T> = T | Partial<Record<BreakpointKey, T>>\n\n/**\n * CSS property values that can be responsive\n */\nexport type ResponsiveCSSValue = ResponsiveValue<string | number>\n\n/**\n * Advanced media query configuration for custom responsive behavior\n */\nexport interface MediaQueryConfig {\n  query: string                    // Raw CSS media query\n  styles: Record<string, string | number>  // CSS properties to apply\n}\n\n/**\n * Responsive modifier configuration combining breakpoints and custom media queries\n */\nexport interface ResponsiveModifierConfig<T = any> {\n  breakpoints?: Partial<Record<BreakpointKey, T>>\n  mediaQueries?: MediaQueryConfig[]\n  fallback?: T  // Fallback value if no conditions match\n}\n\n/**\n * Responsive layout configuration for common responsive patterns\n */\nexport interface ResponsiveLayoutConfig {\n  direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>\n  wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>\n  justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n  gap?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive typography configuration\n */\nexport interface ResponsiveTypographyConfig {\n  fontSize?: ResponsiveValue<number | string>\n  lineHeight?: ResponsiveValue<number | string>\n  letterSpacing?: ResponsiveValue<number | string>\n  fontWeight?: ResponsiveValue<number | string>\n  textAlign?: ResponsiveValue<'left' | 'center' | 'right' | 'justify'>\n  textTransform?: ResponsiveValue<'none' | 'uppercase' | 'lowercase' | 'capitalize'>\n}\n\n/**\n * Responsive spacing configuration\n */\nexport interface ResponsiveSpacingConfig {\n  top?: ResponsiveValue<number | string>\n  right?: ResponsiveValue<number | string>\n  bottom?: ResponsiveValue<number | string>\n  left?: ResponsiveValue<number | string>\n  horizontal?: ResponsiveValue<number | string>  // left + right\n  vertical?: ResponsiveValue<number | string>    // top + bottom\n  all?: ResponsiveValue<number | string>         // all sides\n}\n\n/**\n * Responsive dimension configuration\n */\nexport interface ResponsiveDimensionConfig {\n  width?: ResponsiveValue<number | string>\n  height?: ResponsiveValue<number | string>\n  minWidth?: ResponsiveValue<number | string>\n  maxWidth?: ResponsiveValue<number | string>\n  minHeight?: ResponsiveValue<number | string>\n  maxHeight?: ResponsiveValue<number | string>\n}\n\n/**\n * Responsive visibility configuration\n */\nexport interface ResponsiveVisibilityConfig {\n  display?: ResponsiveValue<'none' | 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid'>\n  visibility?: ResponsiveValue<'visible' | 'hidden' | 'collapse'>\n  opacity?: ResponsiveValue<number>\n}\n\n/**\n * Comprehensive responsive style configuration\n */\nexport interface ResponsiveStyleConfig extends \n  ResponsiveLayoutConfig,\n  ResponsiveTypographyConfig,\n  ResponsiveDimensionConfig,\n  ResponsiveVisibilityConfig {\n  \n  // Additional CSS properties that can be responsive\n  backgroundColor?: ResponsiveValue<string>\n  color?: ResponsiveValue<string>\n  border?: ResponsiveValue<string>\n  borderRadius?: ResponsiveValue<number | string>\n  boxShadow?: ResponsiveValue<string>\n  transform?: ResponsiveValue<string>\n  transition?: ResponsiveValue<string>\n  \n  // Spacing\n  padding?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  margin?: ResponsiveSpacingConfig | ResponsiveValue<number | string>\n  \n  // Custom CSS properties\n  [key: string]: any\n}\n\n/**\n * Breakpoint context information for responsive utilities\n */\nexport interface BreakpointContext {\n  current: BreakpointKey\n  width: number\n  height: number\n  isAbove: (breakpoint: BreakpointKey) => boolean\n  isBelow: (breakpoint: BreakpointKey) => boolean\n  isBetween: (min: BreakpointKey, max: BreakpointKey) => boolean\n  matches: (query: string) => boolean\n}\n\n/**\n * Responsive modifier factory configuration\n */\nexport interface ResponsiveModifierFactoryConfig {\n  breakpoints?: BreakpointConfig\n  generateCSS?: boolean          // Generate CSS media queries vs JavaScript\n  fallbackToJS?: boolean         // Fallback to JavaScript if CSS not supported\n  optimizeOutput?: boolean       // Optimize generated CSS\n  debugMode?: boolean           // Enable responsive debugging\n}\n\n/**\n * CSS media query generation result\n */\nexport interface GeneratedMediaQuery {\n  breakpoint: BreakpointKey\n  query: string                 // CSS media query string\n  styles: Record<string, string | number>  // CSS properties\n  selector: string              // CSS selector\n}\n\n/**\n * Responsive modifier application result\n */\nexport interface ResponsiveModifierResult {\n  cssRules: string[]            // Generated CSS rules\n  mediaQueries: GeneratedMediaQuery[]  // Generated media queries\n  fallbackStyles: Record<string, string | number>  // Fallback styles for base\n  hasResponsiveStyles: boolean  // Whether responsive styles were applied\n}\n\n/**\n * Type guard to check if a value is responsive\n */\nexport function isResponsiveValue<T>(value: ResponsiveValue<T>): value is Partial<Record<BreakpointKey, T>> {\n  return typeof value === 'object' && value !== null && !Array.isArray(value) && \n         Object.keys(value).some(key => ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key))\n}\n\n/**\n * Type guard to check if a breakpoint key is valid\n */\nexport function isValidBreakpointKey(key: string): key is BreakpointKey {\n  return ['base', 'sm', 'md', 'lg', 'xl', '2xl'].includes(key)\n}\n\n/**\n * Utility type to make any property responsive\n */\nexport type MakeResponsive<T> = {\n  [K in keyof T]: ResponsiveValue<T[K]>\n}\n\n/**\n * Extract responsive properties from a configuration object\n */\nexport type ResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? K : never]: T[K]\n}\n\n/**\n * Extract non-responsive properties from a configuration object\n */\nexport type NonResponsiveProperties<T> = {\n  [K in keyof T as T[K] extends ResponsiveValue<any> ? never : K]: T[K]\n}"],"names":["DEFAULT_BREAKPOINTS","isResponsiveValue","value","key","isValidBreakpointKey"],"mappings":"AA4BO,MAAMA,IAAkD;AAAA,EAC7D,MAAM;AAAA;AAAA,EACN,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,IAAI;AAAA;AAAA,EACJ,OAAO;AAAA;AACT;AA+JO,SAASC,EAAqBC,GAAuE;AAC1G,SAAO,OAAOA,KAAU,YAAYA,MAAU,QAAQ,CAAC,MAAM,QAAQA,CAAK,KACnE,OAAO,KAAKA,CAAK,EAAE,KAAK,CAAAC,MAAO,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,SAASA,CAAG,CAAC;AAC7F;AAKO,SAASC,EAAqBD,GAAmC;AACtE,SAAO,CAAC,QAAQ,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,SAASA,CAAG;AAC7D;"}