@tachui/core 0.7.0-alpha1

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

@@ -0,0 +1,28 @@
+/**
+ * Responsive Design System - Main Export
+ *
+ * Complete CSS-native responsive design system for tachUI.
+ * Provides mobile-first responsive modifiers with TypeScript support.
+ */
+export * from './types';
+export * from './breakpoints';
+export * from './css-generator';
+export * from './responsive-modifier';
+export * from './responsive-builder';
+export * from './utilities';
+export * from './layout-patterns';
+export * from './performance';
+export * from './advanced-utilities';
+export * from './dev-tools';
+export type { ResponsiveValue, BreakpointKey, ResponsiveStyleConfig } from './types';
+export type { ResponsiveModifierBuilder } from './responsive-builder';
+export { configureBreakpoints, initializeResponsiveSystem, getCurrentBreakpointConfig, getCurrentBreakpoint, getViewportDimensions, createBreakpointContext, generateMediaQuery, BreakpointPresets } from './breakpoints';
+export { createResponsiveModifier, createMediaQueryModifier, createResponsivePropertyModifier, createResponsiveLayoutModifier } from './responsive-modifier';
+export { useBreakpoint, useMediaQuery, useResponsiveValue, withResponsive } from './utilities';
+export { DEFAULT_BREAKPOINTS } from './types';
+export { MediaQueries, enableResponsiveDebugOverlay, logResponsiveState } from './utilities';
+export { ResponsiveGridPatterns, ResponsiveFlexPatterns, ResponsiveContainerPatterns, ResponsiveVisibilityPatterns, ResponsiveSpacingPatterns, ResponsiveTypographyPatterns, LayoutPatterns, ResponsiveGrid, Flex, Container, Visibility, Spacing, ResponsiveTypography } from './layout-patterns';
+export { AdvancedBreakpointUtils, ResponsiveHooks, ResponsiveTargeting, ResponsiveDataUtils, ResponsiveAdvanced } from './advanced-utilities';
+export { OptimizedCSSGenerator, ResponsivePerformanceMonitor, cssRuleCache } from './performance';
+export { ResponsiveDevTools, BrowserCompatibility, useResponsiveInspector } from './dev-tools';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/modifiers/responsive/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,SAAS,CAAA;AAGvB,cAAc,eAAe,CAAA;AAG7B,cAAc,iBAAiB,CAAA;AAG/B,cAAc,uBAAuB,CAAA;AAGrC,cAAc,sBAAsB,CAAA;AAGpC,cAAc,aAAa,CAAA;AAG3B,cAAc,mBAAmB,CAAA;AAGjC,cAAc,eAAe,CAAA;AAG7B,cAAc,sBAAsB,CAAA;AAGpC,cAAc,aAAa,CAAA;AAG3B,YAAY,EACV,eAAe,EACf,aAAa,EACb,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAEhB,YAAY,EACV,yBAAyB,EAC1B,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EACL,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,oBAAoB,EACpB,qBAAqB,EACrB,uBAAuB,EACvB,kBAAkB,EAClB,iBAAiB,EAClB,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,wBAAwB,EACxB,wBAAwB,EACxB,gCAAgC,EAChC,8BAA8B,EAC/B,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EACL,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,cAAc,EACf,MAAM,aAAa,CAAA;AAEpB,OAAO,EACL,mBAAmB,EACpB,MAAM,SAAS,CAAA;AAEhB,OAAO,EACL,YAAY,EACZ,4BAA4B,EAC5B,kBAAkB,EACnB,MAAM,aAAa,CAAA;AAEpB,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,2BAA2B,EAC3B,4BAA4B,EAC5B,yBAAyB,EACzB,4BAA4B,EAC5B,cAAc,EACd,cAAc,EACd,IAAI,EACJ,SAAS,EACT,UAAU,EACV,OAAO,EACP,oBAAoB,EACrB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EACnB,MAAM,sBAAsB,CAAA;AAE7B,OAAO,EACL,qBAAqB,EACrB,4BAA4B,EAC5B,YAAY,EACb,MAAM,eAAe,CAAA;AAEtB,OAAO,EACL,kBAAkB,EAClB,oBAAoB,EACpB,sBAAsB,EACvB,MAAM,aAAa,CAAA"}

package/dist/modifiers/responsive/layout-patterns.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./responsive-modifier.cjs");class p{static autoFit(e){const t={};if(typeof e.minColumnWidth=="object"){t.gridTemplateColumns={};for(const[a,r]of Object.entries(e.minColumnWidth)){const s=typeof r=="number"?`${r}px`:r,o=e.maxColumns&&typeof e.maxColumns=="object"?e.maxColumns[a]||"auto":e.maxColumns||"auto";t.gridTemplateColumns[a]=o==="auto"?`repeat(auto-fit, minmax(${s}, 1fr))`:`repeat(${o}, minmax(${s}, 1fr))`}}else{const a=typeof e.minColumnWidth=="number"?`${e.minColumnWidth}px`:e.minColumnWidth,r=e.maxColumns||"auto";t.gridTemplateColumns=r==="auto"?`repeat(auto-fit, minmax(${a}, 1fr))`:`repeat(${r}, minmax(${a}, 1fr))`}return e.gap&&(t.gap=e.gap),t.display="grid",i.createResponsiveModifier(t)}static columns(e,t){const a={display:"grid",gridTemplateColumns:typeof e=="object"?Object.fromEntries(Object.entries(e).map(([r,s])=>[r,`repeat(${s}, 1fr)`])):`repeat(${e}, 1fr)`};return t?.gap&&(a.gap=t.gap),t?.rowGap&&(a.rowGap=t.rowGap),t?.autoRows&&(a.gridAutoRows=t.autoRows),i.createResponsiveModifier(a)}static masonry(e){const t={display:"grid",gridTemplateColumns:typeof e.columns=="object"?Object.fromEntries(Object.entries(e.columns).map(([a,r])=>[a,`repeat(${r}, 1fr)`])):`repeat(${e.columns}, 1fr)`,gridAutoRows:"max-content"};return e.gap&&(t.gap=e.gap),i.createResponsiveModifier(t)}}class l{static stackToRow(e){const a={display:"flex",flexDirection:{base:"column",[e?.stackBreakpoint||"md"]:"row"}};return e?.gap&&(a.gap=e.gap),e?.align&&(a.alignItems=e.align),e?.justify&&(a.justifyContent=e.justify),i.createResponsiveModifier(a)}static wrap(e){const t={display:"flex",flexWrap:"wrap",...e};return i.createResponsiveModifier(t)}static center(e="row"){const t={display:"flex",flexDirection:e,justifyContent:"center",alignItems:"center"};return i.createResponsiveModifier(t)}static spaceBetween(e="row"){const t={display:"flex",flexDirection:e,justifyContent:"space-between",alignItems:"center"};return i.createResponsiveModifier(t)}}class d{static container(e){const t={width:"100%",marginLeft:"auto",marginRight:"auto"};return e?.maxWidth?t.maxWidth=e.maxWidth:t.maxWidth={sm:"640px",md:"768px",lg:"1024px",xl:"1280px","2xl":"1536px"},e?.padding&&(t.paddingLeft=e.padding,t.paddingRight=e.padding),e?.margin&&(t.marginTop=e.margin,t.marginBottom=e.margin),i.createResponsiveModifier(t)}static fullWidth(){return i.createResponsiveModifier({width:"100vw",marginLeft:"calc(-50vw + 50%)",marginRight:"calc(-50vw + 50%)"})}static section(e){const t={};return e?.paddingY&&(t.paddingTop=e.paddingY,t.paddingBottom=e.paddingY),e?.paddingX&&(t.paddingLeft=e.paddingX,t.paddingRight=e.paddingX),e?.maxWidth&&(t.maxWidth=e.maxWidth,t.marginLeft="auto",t.marginRight="auto"),i.createResponsiveModifier(t)}}class m{static showOn(e){const t={display:{}};for(const a of e)t.display[a]="block";return i.createResponsiveModifier(t)}static hideOn(e){const t={display:{}};for(const a of e)t.display[a]="none";return i.createResponsiveModifier(t)}static mobileOnly(){return i.createResponsiveModifier({display:{base:"block",md:"none"}})}static desktopOnly(){return i.createResponsiveModifier({display:{base:"none",md:"block"}})}static tabletOnly(){return i.createResponsiveModifier({display:{base:"none",md:"block",lg:"none"}})}}class u{static padding(e){const t={};return e.all&&(t.padding=e.all),e.horizontal&&(t.paddingLeft=e.horizontal,t.paddingRight=e.horizontal),e.vertical&&(t.paddingTop=e.vertical,t.paddingBottom=e.vertical),e.top&&(t.paddingTop=e.top),e.right&&(t.paddingRight=e.right),e.bottom&&(t.paddingBottom=e.bottom),e.left&&(t.paddingLeft=e.left),i.createResponsiveModifier(t)}static margin(e){const t={};return e.all&&(t.margin=e.all),e.horizontal&&(t.marginLeft=e.horizontal,t.marginRight=e.horizontal),e.vertical&&(t.marginTop=e.vertical,t.marginBottom=e.vertical),e.top&&(t.marginTop=e.top),e.right&&(t.marginRight=e.right),e.bottom&&(t.marginBottom=e.bottom),e.left&&(t.marginLeft=e.left),i.createResponsiveModifier(t)}static gap(e){const t={};return e.all&&(t.gap=e.all),e.column&&(t.columnGap=e.column),e.row&&(t.rowGap=e.row),i.createResponsiveModifier(t)}}class x{static scale(e){const t={fontSize:e.base};if(e.scale&&typeof e.scale=="object"){t.fontSize={};for(const[a,r]of Object.entries(e.scale)){const s=typeof e.base=="number"?e.base:parseFloat(e.base);t.fontSize[a]=`${s*r}px`}}return e.lineHeight&&(t.lineHeight=e.lineHeight),i.createResponsiveModifier(t)}static fluid(e){const t=e.minBreakpoint||"320px",a=e.maxBreakpoint||"1200px",r=typeof e.minSize=="number"?`${e.minSize}px`:e.minSize,s=typeof e.maxSize=="number"?`${e.maxSize}px`:e.maxSize;return i.createResponsiveModifier({fontSize:`clamp(${r}, calc(${r} + (${s} - ${r}) * ((100vw - ${t}) / (${a} - ${t}))), ${s})`})}}exports.Container=d;exports.Flex=l;exports.ResponsiveContainerPatterns=d;exports.ResponsiveFlexPatterns=l;exports.ResponsiveGrid=p;exports.ResponsiveGridPatterns=p;exports.ResponsiveSpacingPatterns=u;exports.ResponsiveTypography=x;exports.ResponsiveTypographyPatterns=x;exports.ResponsiveVisibilityPatterns=m;exports.Spacing=u;exports.Visibility=m;
+//# sourceMappingURL=layout-patterns.cjs.map

package/dist/modifiers/responsive/layout-patterns.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-patterns.cjs","sources":["../../../src/modifiers/responsive/layout-patterns.ts"],"sourcesContent":["/**\n * Responsive Layout Utility Patterns\n * \n * Provides common responsive layout patterns and utilities that make it easy\n * to create responsive designs without writing custom CSS for every use case.\n */\n\nimport { \n  ResponsiveValue, \n  BreakpointKey, \n  ResponsiveSpacingConfig\n} from './types'\nimport { createResponsiveModifier } from './responsive-modifier'\n\n/**\n * Configuration for responsive grid layout\n */\nexport interface ResponsiveGridConfig {\n  columns?: ResponsiveValue<number>\n  rows?: ResponsiveValue<number>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n  autoFlow?: ResponsiveValue<'row' | 'column' | 'row dense' | 'column dense'>\n  autoRows?: ResponsiveValue<string>\n  autoColumns?: ResponsiveValue<string>\n  templateAreas?: ResponsiveValue<string>\n}\n\n/**\n * Configuration for responsive flexbox layout\n */\nexport interface ResponsiveFlexConfig {\n  direction?: ResponsiveValue<'row' | 'row-reverse' | 'column' | '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  alignContent?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'>\n  gap?: ResponsiveValue<string | number>\n  columnGap?: ResponsiveValue<string | number>\n  rowGap?: ResponsiveValue<string | number>\n}\n\n/**\n * Configuration for responsive container layout\n */\nexport interface ResponsiveContainerConfig {\n  maxWidth?: ResponsiveValue<string | number>\n  width?: ResponsiveValue<string | number>\n  padding?: ResponsiveValue<string | number>\n  margin?: ResponsiveValue<string | number>\n  centerContent?: ResponsiveValue<boolean>\n}\n\n\n/**\n * Responsive Grid Layout Utilities\n */\nexport class ResponsiveGridPatterns {\n  /**\n   * Create a responsive grid with automatic column sizing\n   */\n  static autoFit(config: {\n    minColumnWidth: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) {\n    const gridConfig: any = {}\n    \n    if (typeof config.minColumnWidth === 'object') {\n      // Handle responsive minColumnWidth\n      gridConfig.gridTemplateColumns = {}\n      for (const [breakpoint, width] of Object.entries(config.minColumnWidth)) {\n        const widthValue = typeof width === 'number' ? `${width}px` : width\n        const maxCols = config.maxColumns && typeof config.maxColumns === 'object' \n          ? config.maxColumns[breakpoint as BreakpointKey] || 'auto'\n          : config.maxColumns || 'auto'\n        \n        gridConfig.gridTemplateColumns[breakpoint] = maxCols === 'auto' \n          ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n          : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n      }\n    } else {\n      const widthValue = typeof config.minColumnWidth === 'number' ? `${config.minColumnWidth}px` : config.minColumnWidth\n      const maxCols = config.maxColumns || 'auto'\n      gridConfig.gridTemplateColumns = maxCols === 'auto'\n        ? `repeat(auto-fit, minmax(${widthValue}, 1fr))`\n        : `repeat(${maxCols}, minmax(${widthValue}, 1fr))`\n    }\n    \n    if (config.gap) {\n      gridConfig.gap = config.gap\n    }\n    \n    gridConfig.display = 'grid'\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create a responsive grid with explicit column counts\n   */\n  static columns(columns: ResponsiveValue<number>, config?: {\n    gap?: ResponsiveValue<string | number>\n    rowGap?: ResponsiveValue<string | number>\n    autoRows?: ResponsiveValue<string>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof columns === 'object' \n        ? Object.fromEntries(\n            Object.entries(columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${columns}, 1fr)`\n    }\n    \n    if (config?.gap) gridConfig.gap = config.gap\n    if (config?.rowGap) gridConfig.rowGap = config.rowGap\n    if (config?.autoRows) gridConfig.gridAutoRows = config.autoRows\n    \n    return createResponsiveModifier(gridConfig)\n  }\n  \n  /**\n   * Create responsive masonry-style grid\n   */\n  static masonry(config: {\n    columns: ResponsiveValue<number>\n    gap?: ResponsiveValue<string | number>\n  }) {\n    const gridConfig: any = {\n      display: 'grid',\n      gridTemplateColumns: typeof config.columns === 'object'\n        ? Object.fromEntries(\n            Object.entries(config.columns).map(([bp, cols]) => [bp, `repeat(${cols}, 1fr)`])\n          )\n        : `repeat(${config.columns}, 1fr)`,\n      gridAutoRows: 'max-content'\n    }\n    \n    if (config.gap) gridConfig.gap = config.gap\n    \n    return createResponsiveModifier(gridConfig)\n  }\n}\n\n/**\n * Responsive Flexbox Layout Utilities\n */\nexport class ResponsiveFlexPatterns {\n  /**\n   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop\n   */\n  static stackToRow(config?: {\n    stackBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>\n    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>\n  }) {\n    const stackBreakpoint = config?.stackBreakpoint || 'md'\n    \n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: {\n        base: 'column',\n        [stackBreakpoint]: 'row'\n      }\n    }\n    \n    if (config?.gap) flexConfig.gap = config.gap\n    if (config?.align) flexConfig.alignItems = config.align\n    if (config?.justify) flexConfig.justifyContent = config.justify\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create a responsive flex container with wrapping behavior\n   */\n  static wrap(config?: ResponsiveFlexConfig) {\n    const flexConfig: any = {\n      display: 'flex',\n      flexWrap: 'wrap',\n      ...config\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create centered flex layout\n   */\n  static center(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'center',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n  \n  /**\n   * Create space-between flex layout\n   */\n  static spaceBetween(direction: ResponsiveValue<'row' | 'column'> = 'row') {\n    const flexConfig: any = {\n      display: 'flex',\n      flexDirection: direction,\n      justifyContent: 'space-between',\n      alignItems: 'center'\n    }\n    \n    return createResponsiveModifier(flexConfig)\n  }\n}\n\n/**\n * Responsive Container Utilities\n */\nexport class ResponsiveContainerPatterns {\n  /**\n   * Create a responsive container with max-width constraints\n   */\n  static container(config?: ResponsiveContainerConfig) {\n    const containerConfig: any = {\n      width: '100%',\n      marginLeft: 'auto',\n      marginRight: 'auto'\n    }\n    \n    if (config?.maxWidth) {\n      containerConfig.maxWidth = config.maxWidth\n    } else {\n      // Default responsive max-widths\n      containerConfig.maxWidth = {\n        sm: '640px',\n        md: '768px',\n        lg: '1024px',\n        xl: '1280px',\n        '2xl': '1536px'\n      }\n    }\n    \n    if (config?.padding) {\n      containerConfig.paddingLeft = config.padding\n      containerConfig.paddingRight = config.padding\n    }\n    \n    if (config?.margin) {\n      containerConfig.marginTop = config.margin\n      containerConfig.marginBottom = config.margin\n    }\n    \n    return createResponsiveModifier(containerConfig)\n  }\n  \n  /**\n   * Create a full-width container that breaks out of constraints\n   */\n  static fullWidth() {\n    return createResponsiveModifier({\n      width: '100vw',\n      marginLeft: 'calc(-50vw + 50%)',\n      marginRight: 'calc(-50vw + 50%)'\n    })\n  }\n  \n  /**\n   * Create a section container with responsive padding\n   */\n  static section(config?: {\n    paddingY?: ResponsiveValue<string | number>\n    paddingX?: ResponsiveValue<string | number>\n    maxWidth?: ResponsiveValue<string | number>\n  }) {\n    const sectionConfig: any = {}\n    \n    if (config?.paddingY) {\n      sectionConfig.paddingTop = config.paddingY\n      sectionConfig.paddingBottom = config.paddingY\n    }\n    \n    if (config?.paddingX) {\n      sectionConfig.paddingLeft = config.paddingX\n      sectionConfig.paddingRight = config.paddingX\n    }\n    \n    if (config?.maxWidth) {\n      sectionConfig.maxWidth = config.maxWidth\n      sectionConfig.marginLeft = 'auto'\n      sectionConfig.marginRight = 'auto'\n    }\n    \n    return createResponsiveModifier(sectionConfig)\n  }\n}\n\n/**\n * Responsive Visibility Utilities\n */\nexport class ResponsiveVisibilityPatterns {\n  /**\n   * Show element only on specific breakpoints\n   */\n  static showOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Show on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'block'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Hide element only on specific breakpoints\n   */\n  static hideOn(breakpoints: BreakpointKey[]) {\n    const displayConfig: any = {\n      display: {} // Start with empty object\n    }\n    \n    // Hide on specified breakpoints\n    for (const breakpoint of breakpoints) {\n      displayConfig.display[breakpoint] = 'none'\n    }\n    \n    return createResponsiveModifier(displayConfig)\n  }\n  \n  /**\n   * Show on mobile, hide on desktop\n   */\n  static mobileOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'block',\n        md: 'none'\n      }\n    })\n  }\n  \n  /**\n   * Hide on mobile, show on desktop\n   */\n  static desktopOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block'\n      }\n    })\n  }\n  \n  /**\n   * Show only on tablet breakpoint\n   */\n  static tabletOnly() {\n    return createResponsiveModifier({\n      display: {\n        base: 'none',\n        md: 'block',\n        lg: 'none'\n      }\n    })\n  }\n}\n\n/**\n * Responsive Spacing Utilities\n */\nexport class ResponsiveSpacingPatterns {\n  /**\n   * Create responsive padding\n   */\n  static padding(config: ResponsiveSpacingConfig) {\n    const paddingConfig: any = {}\n    \n    if (config.all) paddingConfig.padding = config.all\n    if (config.horizontal) {\n      paddingConfig.paddingLeft = config.horizontal\n      paddingConfig.paddingRight = config.horizontal\n    }\n    if (config.vertical) {\n      paddingConfig.paddingTop = config.vertical\n      paddingConfig.paddingBottom = config.vertical\n    }\n    if (config.top) paddingConfig.paddingTop = config.top\n    if (config.right) paddingConfig.paddingRight = config.right\n    if (config.bottom) paddingConfig.paddingBottom = config.bottom\n    if (config.left) paddingConfig.paddingLeft = config.left\n    \n    return createResponsiveModifier(paddingConfig)\n  }\n  \n  /**\n   * Create responsive margin\n   */\n  static margin(config: ResponsiveSpacingConfig) {\n    const marginConfig: any = {}\n    \n    if (config.all) marginConfig.margin = config.all\n    if (config.horizontal) {\n      marginConfig.marginLeft = config.horizontal\n      marginConfig.marginRight = config.horizontal\n    }\n    if (config.vertical) {\n      marginConfig.marginTop = config.vertical\n      marginConfig.marginBottom = config.vertical\n    }\n    if (config.top) marginConfig.marginTop = config.top\n    if (config.right) marginConfig.marginRight = config.right\n    if (config.bottom) marginConfig.marginBottom = config.bottom\n    if (config.left) marginConfig.marginLeft = config.left\n    \n    return createResponsiveModifier(marginConfig)\n  }\n  \n  /**\n   * Create responsive gap (for flexbox and grid)\n   */\n  static gap(config: {\n    all?: ResponsiveValue<string | number>\n    column?: ResponsiveValue<string | number>\n    row?: ResponsiveValue<string | number>\n  }) {\n    const gapConfig: any = {}\n    \n    if (config.all) gapConfig.gap = config.all\n    if (config.column) gapConfig.columnGap = config.column\n    if (config.row) gapConfig.rowGap = config.row\n    \n    return createResponsiveModifier(gapConfig)\n  }\n}\n\n/**\n * Responsive Typography Utilities\n */\nexport class ResponsiveTypographyPatterns {\n  /**\n   * Create responsive font scale\n   */\n  static scale(config: {\n    base: string | number\n    scale?: ResponsiveValue<number>\n    lineHeight?: ResponsiveValue<number | string>\n  }) {\n    const typographyConfig: any = {\n      fontSize: config.base\n    }\n    \n    if (config.scale && typeof config.scale === 'object') {\n      typographyConfig.fontSize = {}\n      for (const [breakpoint, scaleValue] of Object.entries(config.scale)) {\n        const baseSize = typeof config.base === 'number' ? config.base : parseFloat(config.base)\n        typographyConfig.fontSize[breakpoint] = `${baseSize * scaleValue}px`\n      }\n    }\n    \n    if (config.lineHeight) {\n      typographyConfig.lineHeight = config.lineHeight\n    }\n    \n    return createResponsiveModifier(typographyConfig)\n  }\n  \n  /**\n   * Create fluid typography that scales smoothly\n   */\n  static fluid(config: {\n    minSize: string | number\n    maxSize: string | number\n    minBreakpoint?: string\n    maxBreakpoint?: string\n  }) {\n    const minBp = config.minBreakpoint || '320px'\n    const maxBp = config.maxBreakpoint || '1200px'\n    const minSize = typeof config.minSize === 'number' ? `${config.minSize}px` : config.minSize\n    const maxSize = typeof config.maxSize === 'number' ? `${config.maxSize}px` : config.maxSize\n    \n    return createResponsiveModifier({\n      fontSize: `clamp(${minSize}, calc(${minSize} + (${maxSize} - ${minSize}) * ((100vw - ${minBp}) / (${maxBp} - ${minBp}))), ${maxSize})`\n    })\n  }\n}\n\n/**\n * Common Layout Patterns\n */\nexport const LayoutPatterns = {\n  /**\n   * Sidebar layout that collapses on mobile\n   */\n  sidebar: (config?: {\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n    gap?: ResponsiveValue<string | number>\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'md'\n    const sidebarWidth = config?.sidebarWidth || '250px'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${sidebarWidth} 1fr`\n      },\n      gap: config?.gap || '1rem'\n    })\n  },\n  \n  /**\n   * Holy grail layout (header, footer, sidebar, main content)\n   */\n  holyGrail: (config?: {\n    headerHeight?: ResponsiveValue<string | number>\n    footerHeight?: ResponsiveValue<string | number>\n    sidebarWidth?: ResponsiveValue<string | number>\n    collapseBreakpoint?: BreakpointKey\n  }) => {\n    const collapseBreakpoint = config?.collapseBreakpoint || 'lg'\n    \n    return createResponsiveModifier({\n      display: 'grid',\n      gridTemplateAreas: {\n        base: '\"header\" \"main\" \"footer\"',\n        [collapseBreakpoint]: '\"header header\" \"sidebar main\" \"footer footer\"'\n      },\n      gridTemplateRows: {\n        base: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`,\n        [collapseBreakpoint]: `${config?.headerHeight || 'auto'} 1fr ${config?.footerHeight || 'auto'}`\n      },\n      gridTemplateColumns: {\n        base: '1fr',\n        [collapseBreakpoint]: `${config?.sidebarWidth || '250px'} 1fr`\n      },\n      minHeight: '100vh'\n    })\n  },\n  \n  /**\n   * Card grid layout\n   */\n  cardGrid: (config?: {\n    minCardWidth?: ResponsiveValue<string | number>\n    gap?: ResponsiveValue<string | number>\n    maxColumns?: ResponsiveValue<number>\n  }) => {\n    return ResponsiveGridPatterns.autoFit({\n      minColumnWidth: config?.minCardWidth || '300px',\n      gap: config?.gap || '1rem',\n      maxColumns: config?.maxColumns\n    })\n  },\n  \n  /**\n   * Hero section layout\n   */\n  hero: (config?: {\n    minHeight?: ResponsiveValue<string | number>\n    textAlign?: ResponsiveValue<'left' | 'center' | 'right'>\n    padding?: ResponsiveValue<string | number>\n  }) => {\n    return createResponsiveModifier({\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'center',\n      alignItems: 'center',\n      textAlign: config?.textAlign || 'center',\n      minHeight: config?.minHeight || '50vh',\n      padding: config?.padding || '2rem'\n    })\n  }\n}\n\n/**\n * Export all layout patterns for easy access\n */\nexport {\n  ResponsiveGridPatterns as ResponsiveGrid,\n  ResponsiveFlexPatterns as Flex,\n  ResponsiveContainerPatterns as Container,\n  ResponsiveVisibilityPatterns as Visibility,\n  ResponsiveSpacingPatterns as Spacing,\n  ResponsiveTypographyPatterns as ResponsiveTypography\n}"],"names":["ResponsiveGridPatterns","config","gridConfig","breakpoint","width","widthValue","maxCols","createResponsiveModifier","columns","bp","cols","ResponsiveFlexPatterns","flexConfig","direction","ResponsiveContainerPatterns","containerConfig","sectionConfig","ResponsiveVisibilityPatterns","breakpoints","displayConfig","ResponsiveSpacingPatterns","paddingConfig","marginConfig","gapConfig","ResponsiveTypographyPatterns","typographyConfig","scaleValue","baseSize","minBp","maxBp","minSize","maxSize"],"mappings":"6HA0DO,MAAMA,CAAuB,CAIlC,OAAO,QAAQC,EAIZ,CACD,MAAMC,EAAkB,CAAA,EAExB,GAAI,OAAOD,EAAO,gBAAmB,SAAU,CAE7CC,EAAW,oBAAsB,CAAA,EACjC,SAAW,CAACC,EAAYC,CAAK,IAAK,OAAO,QAAQH,EAAO,cAAc,EAAG,CACvE,MAAMI,EAAa,OAAOD,GAAU,SAAW,GAAGA,CAAK,KAAOA,EACxDE,EAAUL,EAAO,YAAc,OAAOA,EAAO,YAAe,SAC9DA,EAAO,WAAWE,CAA2B,GAAK,OAClDF,EAAO,YAAc,OAEzBC,EAAW,oBAAoBC,CAAU,EAAIG,IAAY,OACrD,2BAA2BD,CAAU,UACrC,UAAUC,CAAO,YAAYD,CAAU,SAC7C,CACF,KAAO,CACL,MAAMA,EAAa,OAAOJ,EAAO,gBAAmB,SAAW,GAAGA,EAAO,cAAc,KAAOA,EAAO,eAC/FK,EAAUL,EAAO,YAAc,OACrCC,EAAW,oBAAsBI,IAAY,OACzC,2BAA2BD,CAAU,UACrC,UAAUC,CAAO,YAAYD,CAAU,SAC7C,CAEA,OAAIJ,EAAO,MACTC,EAAW,IAAMD,EAAO,KAG1BC,EAAW,QAAU,OAEdK,EAAAA,yBAAyBL,CAAU,CAC5C,CAKA,OAAO,QAAQM,EAAkCP,EAI9C,CACD,MAAMC,EAAkB,CACtB,QAAS,OACT,oBAAqB,OAAOM,GAAY,SACpC,OAAO,YACL,OAAO,QAAQA,CAAO,EAAE,IAAI,CAAC,CAACC,EAAIC,CAAI,IAAM,CAACD,EAAI,UAAUC,CAAI,QAAQ,CAAC,CAAA,EAE1E,UAAUF,CAAO,QAAA,EAGvB,OAAIP,GAAQ,MAAKC,EAAW,IAAMD,EAAO,KACrCA,GAAQ,SAAQC,EAAW,OAASD,EAAO,QAC3CA,GAAQ,WAAUC,EAAW,aAAeD,EAAO,UAEhDM,EAAAA,yBAAyBL,CAAU,CAC5C,CAKA,OAAO,QAAQD,EAGZ,CACD,MAAMC,EAAkB,CACtB,QAAS,OACT,oBAAqB,OAAOD,EAAO,SAAY,SAC3C,OAAO,YACL,OAAO,QAAQA,EAAO,OAAO,EAAE,IAAI,CAAC,CAACQ,EAAIC,CAAI,IAAM,CAACD,EAAI,UAAUC,CAAI,QAAQ,CAAC,CAAA,EAEjF,UAAUT,EAAO,OAAO,SAC5B,aAAc,aAAA,EAGhB,OAAIA,EAAO,MAAKC,EAAW,IAAMD,EAAO,KAEjCM,EAAAA,yBAAyBL,CAAU,CAC5C,CACF,CAKO,MAAMS,CAAuB,CAIlC,OAAO,WAAWV,EAKf,CAGD,MAAMW,EAAkB,CACtB,QAAS,OACT,cAAe,CACb,KAAM,SACN,CANoBX,GAAQ,iBAAmB,IAM/B,EAAG,KAAA,CACrB,EAGF,OAAIA,GAAQ,MAAKW,EAAW,IAAMX,EAAO,KACrCA,GAAQ,QAAOW,EAAW,WAAaX,EAAO,OAC9CA,GAAQ,UAASW,EAAW,eAAiBX,EAAO,SAEjDM,EAAAA,yBAAyBK,CAAU,CAC5C,CAKA,OAAO,KAAKX,EAA+B,CACzC,MAAMW,EAAkB,CACtB,QAAS,OACT,SAAU,OACV,GAAGX,CAAA,EAGL,OAAOM,EAAAA,yBAAyBK,CAAU,CAC5C,CAKA,OAAO,OAAOC,EAA+C,MAAO,CAClE,MAAMD,EAAkB,CACtB,QAAS,OACT,cAAeC,EACf,eAAgB,SAChB,WAAY,QAAA,EAGd,OAAON,EAAAA,yBAAyBK,CAAU,CAC5C,CAKA,OAAO,aAAaC,EAA+C,MAAO,CACxE,MAAMD,EAAkB,CACtB,QAAS,OACT,cAAeC,EACf,eAAgB,gBAChB,WAAY,QAAA,EAGd,OAAON,EAAAA,yBAAyBK,CAAU,CAC5C,CACF,CAKO,MAAME,CAA4B,CAIvC,OAAO,UAAUb,EAAoC,CACnD,MAAMc,EAAuB,CAC3B,MAAO,OACP,WAAY,OACZ,YAAa,MAAA,EAGf,OAAId,GAAQ,SACVc,EAAgB,SAAWd,EAAO,SAGlCc,EAAgB,SAAW,CACzB,GAAI,QACJ,GAAI,QACJ,GAAI,SACJ,GAAI,SACJ,MAAO,QAAA,EAIPd,GAAQ,UACVc,EAAgB,YAAcd,EAAO,QACrCc,EAAgB,aAAed,EAAO,SAGpCA,GAAQ,SACVc,EAAgB,UAAYd,EAAO,OACnCc,EAAgB,aAAed,EAAO,QAGjCM,EAAAA,yBAAyBQ,CAAe,CACjD,CAKA,OAAO,WAAY,CACjB,OAAOR,2BAAyB,CAC9B,MAAO,QACP,WAAY,oBACZ,YAAa,mBAAA,CACd,CACH,CAKA,OAAO,QAAQN,EAIZ,CACD,MAAMe,EAAqB,CAAA,EAE3B,OAAIf,GAAQ,WACVe,EAAc,WAAaf,EAAO,SAClCe,EAAc,cAAgBf,EAAO,UAGnCA,GAAQ,WACVe,EAAc,YAAcf,EAAO,SACnCe,EAAc,aAAef,EAAO,UAGlCA,GAAQ,WACVe,EAAc,SAAWf,EAAO,SAChCe,EAAc,WAAa,OAC3BA,EAAc,YAAc,QAGvBT,EAAAA,yBAAyBS,CAAa,CAC/C,CACF,CAKO,MAAMC,CAA6B,CAIxC,OAAO,OAAOC,EAA8B,CAC1C,MAAMC,EAAqB,CACzB,QAAS,CAAA,CAAC,EAIZ,UAAWhB,KAAce,EACvBC,EAAc,QAAQhB,CAAU,EAAI,QAGtC,OAAOI,EAAAA,yBAAyBY,CAAa,CAC/C,CAKA,OAAO,OAAOD,EAA8B,CAC1C,MAAMC,EAAqB,CACzB,QAAS,CAAA,CAAC,EAIZ,UAAWhB,KAAce,EACvBC,EAAc,QAAQhB,CAAU,EAAI,OAGtC,OAAOI,EAAAA,yBAAyBY,CAAa,CAC/C,CAKA,OAAO,YAAa,CAClB,OAAOZ,2BAAyB,CAC9B,QAAS,CACP,KAAM,QACN,GAAI,MAAA,CACN,CACD,CACH,CAKA,OAAO,aAAc,CACnB,OAAOA,2BAAyB,CAC9B,QAAS,CACP,KAAM,OACN,GAAI,OAAA,CACN,CACD,CACH,CAKA,OAAO,YAAa,CAClB,OAAOA,2BAAyB,CAC9B,QAAS,CACP,KAAM,OACN,GAAI,QACJ,GAAI,MAAA,CACN,CACD,CACH,CACF,CAKO,MAAMa,CAA0B,CAIrC,OAAO,QAAQnB,EAAiC,CAC9C,MAAMoB,EAAqB,CAAA,EAE3B,OAAIpB,EAAO,MAAKoB,EAAc,QAAUpB,EAAO,KAC3CA,EAAO,aACToB,EAAc,YAAcpB,EAAO,WACnCoB,EAAc,aAAepB,EAAO,YAElCA,EAAO,WACToB,EAAc,WAAapB,EAAO,SAClCoB,EAAc,cAAgBpB,EAAO,UAEnCA,EAAO,MAAKoB,EAAc,WAAapB,EAAO,KAC9CA,EAAO,QAAOoB,EAAc,aAAepB,EAAO,OAClDA,EAAO,SAAQoB,EAAc,cAAgBpB,EAAO,QACpDA,EAAO,OAAMoB,EAAc,YAAcpB,EAAO,MAE7CM,EAAAA,yBAAyBc,CAAa,CAC/C,CAKA,OAAO,OAAOpB,EAAiC,CAC7C,MAAMqB,EAAoB,CAAA,EAE1B,OAAIrB,EAAO,MAAKqB,EAAa,OAASrB,EAAO,KACzCA,EAAO,aACTqB,EAAa,WAAarB,EAAO,WACjCqB,EAAa,YAAcrB,EAAO,YAEhCA,EAAO,WACTqB,EAAa,UAAYrB,EAAO,SAChCqB,EAAa,aAAerB,EAAO,UAEjCA,EAAO,MAAKqB,EAAa,UAAYrB,EAAO,KAC5CA,EAAO,QAAOqB,EAAa,YAAcrB,EAAO,OAChDA,EAAO,SAAQqB,EAAa,aAAerB,EAAO,QAClDA,EAAO,OAAMqB,EAAa,WAAarB,EAAO,MAE3CM,EAAAA,yBAAyBe,CAAY,CAC9C,CAKA,OAAO,IAAIrB,EAIR,CACD,MAAMsB,EAAiB,CAAA,EAEvB,OAAItB,EAAO,MAAKsB,EAAU,IAAMtB,EAAO,KACnCA,EAAO,SAAQsB,EAAU,UAAYtB,EAAO,QAC5CA,EAAO,MAAKsB,EAAU,OAAStB,EAAO,KAEnCM,EAAAA,yBAAyBgB,CAAS,CAC3C,CACF,CAKO,MAAMC,CAA6B,CAIxC,OAAO,MAAMvB,EAIV,CACD,MAAMwB,EAAwB,CAC5B,SAAUxB,EAAO,IAAA,EAGnB,GAAIA,EAAO,OAAS,OAAOA,EAAO,OAAU,SAAU,CACpDwB,EAAiB,SAAW,CAAA,EAC5B,SAAW,CAACtB,EAAYuB,CAAU,IAAK,OAAO,QAAQzB,EAAO,KAAK,EAAG,CACnE,MAAM0B,EAAW,OAAO1B,EAAO,MAAS,SAAWA,EAAO,KAAO,WAAWA,EAAO,IAAI,EACvFwB,EAAiB,SAAStB,CAAU,EAAI,GAAGwB,EAAWD,CAAU,IAClE,CACF,CAEA,OAAIzB,EAAO,aACTwB,EAAiB,WAAaxB,EAAO,YAGhCM,EAAAA,yBAAyBkB,CAAgB,CAClD,CAKA,OAAO,MAAMxB,EAKV,CACD,MAAM2B,EAAQ3B,EAAO,eAAiB,QAChC4B,EAAQ5B,EAAO,eAAiB,SAChC6B,EAAU,OAAO7B,EAAO,SAAY,SAAW,GAAGA,EAAO,OAAO,KAAOA,EAAO,QAC9E8B,EAAU,OAAO9B,EAAO,SAAY,SAAW,GAAGA,EAAO,OAAO,KAAOA,EAAO,QAEpF,OAAOM,2BAAyB,CAC9B,SAAU,SAASuB,CAAO,UAAUA,CAAO,OAAOC,CAAO,MAAMD,CAAO,iBAAiBF,CAAK,QAAQC,CAAK,MAAMD,CAAK,QAAQG,CAAO,GAAA,CACpI,CACH,CACF"}

package/dist/modifiers/responsive/layout-patterns.d.ts

@@ -0,0 +1,230 @@
+/**
+ * Responsive Layout Utility Patterns
+ *
+ * Provides common responsive layout patterns and utilities that make it easy
+ * to create responsive designs without writing custom CSS for every use case.
+ */
+import { ResponsiveValue, BreakpointKey, ResponsiveSpacingConfig } from './types';
+/**
+ * Configuration for responsive grid layout
+ */
+export interface ResponsiveGridConfig {
+    columns?: ResponsiveValue<number>;
+    rows?: ResponsiveValue<number>;
+    gap?: ResponsiveValue<string | number>;
+    columnGap?: ResponsiveValue<string | number>;
+    rowGap?: ResponsiveValue<string | number>;
+    autoFlow?: ResponsiveValue<'row' | 'column' | 'row dense' | 'column dense'>;
+    autoRows?: ResponsiveValue<string>;
+    autoColumns?: ResponsiveValue<string>;
+    templateAreas?: ResponsiveValue<string>;
+}
+/**
+ * Configuration for responsive flexbox layout
+ */
+export interface ResponsiveFlexConfig {
+    direction?: ResponsiveValue<'row' | 'row-reverse' | 'column' | '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'>;
+    alignContent?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around'>;
+    gap?: ResponsiveValue<string | number>;
+    columnGap?: ResponsiveValue<string | number>;
+    rowGap?: ResponsiveValue<string | number>;
+}
+/**
+ * Configuration for responsive container layout
+ */
+export interface ResponsiveContainerConfig {
+    maxWidth?: ResponsiveValue<string | number>;
+    width?: ResponsiveValue<string | number>;
+    padding?: ResponsiveValue<string | number>;
+    margin?: ResponsiveValue<string | number>;
+    centerContent?: ResponsiveValue<boolean>;
+}
+/**
+ * Responsive Grid Layout Utilities
+ */
+export declare class ResponsiveGridPatterns {
+    /**
+     * Create a responsive grid with automatic column sizing
+     */
+    static autoFit(config: {
+        minColumnWidth: ResponsiveValue<string | number>;
+        gap?: ResponsiveValue<string | number>;
+        maxColumns?: ResponsiveValue<number>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create a responsive grid with explicit column counts
+     */
+    static columns(columns: ResponsiveValue<number>, config?: {
+        gap?: ResponsiveValue<string | number>;
+        rowGap?: ResponsiveValue<string | number>;
+        autoRows?: ResponsiveValue<string>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create responsive masonry-style grid
+     */
+    static masonry(config: {
+        columns: ResponsiveValue<number>;
+        gap?: ResponsiveValue<string | number>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Responsive Flexbox Layout Utilities
+ */
+export declare class ResponsiveFlexPatterns {
+    /**
+     * Create a responsive flex container that stacks on mobile, flows horizontally on desktop
+     */
+    static stackToRow(config?: {
+        stackBreakpoint?: BreakpointKey;
+        gap?: ResponsiveValue<string | number>;
+        align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'>;
+        justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create a responsive flex container with wrapping behavior
+     */
+    static wrap(config?: ResponsiveFlexConfig): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create centered flex layout
+     */
+    static center(direction?: ResponsiveValue<'row' | 'column'>): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create space-between flex layout
+     */
+    static spaceBetween(direction?: ResponsiveValue<'row' | 'column'>): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Responsive Container Utilities
+ */
+export declare class ResponsiveContainerPatterns {
+    /**
+     * Create a responsive container with max-width constraints
+     */
+    static container(config?: ResponsiveContainerConfig): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create a full-width container that breaks out of constraints
+     */
+    static fullWidth(): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create a section container with responsive padding
+     */
+    static section(config?: {
+        paddingY?: ResponsiveValue<string | number>;
+        paddingX?: ResponsiveValue<string | number>;
+        maxWidth?: ResponsiveValue<string | number>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Responsive Visibility Utilities
+ */
+export declare class ResponsiveVisibilityPatterns {
+    /**
+     * Show element only on specific breakpoints
+     */
+    static showOn(breakpoints: BreakpointKey[]): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Hide element only on specific breakpoints
+     */
+    static hideOn(breakpoints: BreakpointKey[]): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Show on mobile, hide on desktop
+     */
+    static mobileOnly(): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Hide on mobile, show on desktop
+     */
+    static desktopOnly(): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Show only on tablet breakpoint
+     */
+    static tabletOnly(): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Responsive Spacing Utilities
+ */
+export declare class ResponsiveSpacingPatterns {
+    /**
+     * Create responsive padding
+     */
+    static padding(config: ResponsiveSpacingConfig): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create responsive margin
+     */
+    static margin(config: ResponsiveSpacingConfig): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create responsive gap (for flexbox and grid)
+     */
+    static gap(config: {
+        all?: ResponsiveValue<string | number>;
+        column?: ResponsiveValue<string | number>;
+        row?: ResponsiveValue<string | number>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Responsive Typography Utilities
+ */
+export declare class ResponsiveTypographyPatterns {
+    /**
+     * Create responsive font scale
+     */
+    static scale(config: {
+        base: string | number;
+        scale?: ResponsiveValue<number>;
+        lineHeight?: ResponsiveValue<number | string>;
+    }): import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Create fluid typography that scales smoothly
+     */
+    static fluid(config: {
+        minSize: string | number;
+        maxSize: string | number;
+        minBreakpoint?: string;
+        maxBreakpoint?: string;
+    }): import("./responsive-modifier").ResponsiveModifier;
+}
+/**
+ * Common Layout Patterns
+ */
+export declare const LayoutPatterns: {
+    /**
+     * Sidebar layout that collapses on mobile
+     */
+    sidebar: (config?: {
+        sidebarWidth?: ResponsiveValue<string | number>;
+        collapseBreakpoint?: BreakpointKey;
+        gap?: ResponsiveValue<string | number>;
+    }) => import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Holy grail layout (header, footer, sidebar, main content)
+     */
+    holyGrail: (config?: {
+        headerHeight?: ResponsiveValue<string | number>;
+        footerHeight?: ResponsiveValue<string | number>;
+        sidebarWidth?: ResponsiveValue<string | number>;
+        collapseBreakpoint?: BreakpointKey;
+    }) => import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Card grid layout
+     */
+    cardGrid: (config?: {
+        minCardWidth?: ResponsiveValue<string | number>;
+        gap?: ResponsiveValue<string | number>;
+        maxColumns?: ResponsiveValue<number>;
+    }) => import("./responsive-modifier").ResponsiveModifier;
+    /**
+     * Hero section layout
+     */
+    hero: (config?: {
+        minHeight?: ResponsiveValue<string | number>;
+        textAlign?: ResponsiveValue<"left" | "center" | "right">;
+        padding?: ResponsiveValue<string | number>;
+    }) => import("./responsive-modifier").ResponsiveModifier;
+};
+/**
+ * Export all layout patterns for easy access
+ */
+export { ResponsiveGridPatterns as ResponsiveGrid, ResponsiveFlexPatterns as Flex, ResponsiveContainerPatterns as Container, ResponsiveVisibilityPatterns as Visibility, ResponsiveSpacingPatterns as Spacing, ResponsiveTypographyPatterns as ResponsiveTypography };
+//# sourceMappingURL=layout-patterns.d.ts.map

package/dist/modifiers/responsive/layout-patterns.d.ts.map

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

package/dist/modifiers/responsive/layout-patterns.js

@@ -0,0 +1,254 @@
+import { createResponsiveModifier as i } from "./responsive-modifier.js";
+class o {
+  /**
+   * Create a responsive grid with automatic column sizing
+   */
+  static autoFit(t) {
+    const a = {};
+    if (typeof t.minColumnWidth == "object") {
+      a.gridTemplateColumns = {};
+      for (const [e, r] of Object.entries(t.minColumnWidth)) {
+        const s = typeof r == "number" ? `${r}px` : r, p = t.maxColumns && typeof t.maxColumns == "object" ? t.maxColumns[e] || "auto" : t.maxColumns || "auto";
+        a.gridTemplateColumns[e] = p === "auto" ? `repeat(auto-fit, minmax(${s}, 1fr))` : `repeat(${p}, minmax(${s}, 1fr))`;
+      }
+    } else {
+      const e = typeof t.minColumnWidth == "number" ? `${t.minColumnWidth}px` : t.minColumnWidth, r = t.maxColumns || "auto";
+      a.gridTemplateColumns = r === "auto" ? `repeat(auto-fit, minmax(${e}, 1fr))` : `repeat(${r}, minmax(${e}, 1fr))`;
+    }
+    return t.gap && (a.gap = t.gap), a.display = "grid", i(a);
+  }
+  /**
+   * Create a responsive grid with explicit column counts
+   */
+  static columns(t, a) {
+    const e = {
+      display: "grid",
+      gridTemplateColumns: typeof t == "object" ? Object.fromEntries(
+        Object.entries(t).map(([r, s]) => [r, `repeat(${s}, 1fr)`])
+      ) : `repeat(${t}, 1fr)`
+    };
+    return a?.gap && (e.gap = a.gap), a?.rowGap && (e.rowGap = a.rowGap), a?.autoRows && (e.gridAutoRows = a.autoRows), i(e);
+  }
+  /**
+   * Create responsive masonry-style grid
+   */
+  static masonry(t) {
+    const a = {
+      display: "grid",
+      gridTemplateColumns: typeof t.columns == "object" ? Object.fromEntries(
+        Object.entries(t.columns).map(([e, r]) => [e, `repeat(${r}, 1fr)`])
+      ) : `repeat(${t.columns}, 1fr)`,
+      gridAutoRows: "max-content"
+    };
+    return t.gap && (a.gap = t.gap), i(a);
+  }
+}
+class m {
+  /**
+   * Create a responsive flex container that stacks on mobile, flows horizontally on desktop
+   */
+  static stackToRow(t) {
+    const e = {
+      display: "flex",
+      flexDirection: {
+        base: "column",
+        [t?.stackBreakpoint || "md"]: "row"
+      }
+    };
+    return t?.gap && (e.gap = t.gap), t?.align && (e.alignItems = t.align), t?.justify && (e.justifyContent = t.justify), i(e);
+  }
+  /**
+   * Create a responsive flex container with wrapping behavior
+   */
+  static wrap(t) {
+    const a = {
+      display: "flex",
+      flexWrap: "wrap",
+      ...t
+    };
+    return i(a);
+  }
+  /**
+   * Create centered flex layout
+   */
+  static center(t = "row") {
+    return i({
+      display: "flex",
+      flexDirection: t,
+      justifyContent: "center",
+      alignItems: "center"
+    });
+  }
+  /**
+   * Create space-between flex layout
+   */
+  static spaceBetween(t = "row") {
+    return i({
+      display: "flex",
+      flexDirection: t,
+      justifyContent: "space-between",
+      alignItems: "center"
+    });
+  }
+}
+class d {
+  /**
+   * Create a responsive container with max-width constraints
+   */
+  static container(t) {
+    const a = {
+      width: "100%",
+      marginLeft: "auto",
+      marginRight: "auto"
+    };
+    return t?.maxWidth ? a.maxWidth = t.maxWidth : a.maxWidth = {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px"
+    }, t?.padding && (a.paddingLeft = t.padding, a.paddingRight = t.padding), t?.margin && (a.marginTop = t.margin, a.marginBottom = t.margin), i(a);
+  }
+  /**
+   * Create a full-width container that breaks out of constraints
+   */
+  static fullWidth() {
+    return i({
+      width: "100vw",
+      marginLeft: "calc(-50vw + 50%)",
+      marginRight: "calc(-50vw + 50%)"
+    });
+  }
+  /**
+   * Create a section container with responsive padding
+   */
+  static section(t) {
+    const a = {};
+    return t?.paddingY && (a.paddingTop = t.paddingY, a.paddingBottom = t.paddingY), t?.paddingX && (a.paddingLeft = t.paddingX, a.paddingRight = t.paddingX), t?.maxWidth && (a.maxWidth = t.maxWidth, a.marginLeft = "auto", a.marginRight = "auto"), i(a);
+  }
+}
+class u {
+  /**
+   * Show element only on specific breakpoints
+   */
+  static showOn(t) {
+    const a = {
+      display: {}
+      // Start with empty object
+    };
+    for (const e of t)
+      a.display[e] = "block";
+    return i(a);
+  }
+  /**
+   * Hide element only on specific breakpoints
+   */
+  static hideOn(t) {
+    const a = {
+      display: {}
+      // Start with empty object
+    };
+    for (const e of t)
+      a.display[e] = "none";
+    return i(a);
+  }
+  /**
+   * Show on mobile, hide on desktop
+   */
+  static mobileOnly() {
+    return i({
+      display: {
+        base: "block",
+        md: "none"
+      }
+    });
+  }
+  /**
+   * Hide on mobile, show on desktop
+   */
+  static desktopOnly() {
+    return i({
+      display: {
+        base: "none",
+        md: "block"
+      }
+    });
+  }
+  /**
+   * Show only on tablet breakpoint
+   */
+  static tabletOnly() {
+    return i({
+      display: {
+        base: "none",
+        md: "block",
+        lg: "none"
+      }
+    });
+  }
+}
+class x {
+  /**
+   * Create responsive padding
+   */
+  static padding(t) {
+    const a = {};
+    return t.all && (a.padding = t.all), t.horizontal && (a.paddingLeft = t.horizontal, a.paddingRight = t.horizontal), t.vertical && (a.paddingTop = t.vertical, a.paddingBottom = t.vertical), t.top && (a.paddingTop = t.top), t.right && (a.paddingRight = t.right), t.bottom && (a.paddingBottom = t.bottom), t.left && (a.paddingLeft = t.left), i(a);
+  }
+  /**
+   * Create responsive margin
+   */
+  static margin(t) {
+    const a = {};
+    return t.all && (a.margin = t.all), t.horizontal && (a.marginLeft = t.horizontal, a.marginRight = t.horizontal), t.vertical && (a.marginTop = t.vertical, a.marginBottom = t.vertical), t.top && (a.marginTop = t.top), t.right && (a.marginRight = t.right), t.bottom && (a.marginBottom = t.bottom), t.left && (a.marginLeft = t.left), i(a);
+  }
+  /**
+   * Create responsive gap (for flexbox and grid)
+   */
+  static gap(t) {
+    const a = {};
+    return t.all && (a.gap = t.all), t.column && (a.columnGap = t.column), t.row && (a.rowGap = t.row), i(a);
+  }
+}
+class h {
+  /**
+   * Create responsive font scale
+   */
+  static scale(t) {
+    const a = {
+      fontSize: t.base
+    };
+    if (t.scale && typeof t.scale == "object") {
+      a.fontSize = {};
+      for (const [e, r] of Object.entries(t.scale)) {
+        const s = typeof t.base == "number" ? t.base : parseFloat(t.base);
+        a.fontSize[e] = `${s * r}px`;
+      }
+    }
+    return t.lineHeight && (a.lineHeight = t.lineHeight), i(a);
+  }
+  /**
+   * Create fluid typography that scales smoothly
+   */
+  static fluid(t) {
+    const a = t.minBreakpoint || "320px", e = t.maxBreakpoint || "1200px", r = typeof t.minSize == "number" ? `${t.minSize}px` : t.minSize, s = typeof t.maxSize == "number" ? `${t.maxSize}px` : t.maxSize;
+    return i({
+      fontSize: `clamp(${r}, calc(${r} + (${s} - ${r}) * ((100vw - ${a}) / (${e} - ${a}))), ${s})`
+    });
+  }
+}
+export {
+  d as Container,
+  m as Flex,
+  d as ResponsiveContainerPatterns,
+  m as ResponsiveFlexPatterns,
+  o as ResponsiveGrid,
+  o as ResponsiveGridPatterns,
+  x as ResponsiveSpacingPatterns,
+  h as ResponsiveTypography,
+  h as ResponsiveTypographyPatterns,
+  u as ResponsiveVisibilityPatterns,
+  x as Spacing,
+  u as Visibility
+};
+//# sourceMappingURL=layout-patterns.js.map