@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/grids.js

@@ -0,0 +1,305 @@
+'use strict';
+
+// src/tokens/grids.ts
+var breakpoints = {
+  mobile: "0px",
+  tablet: "768px",
+  desktop: "1024px"
+};
+var gridSpecs = {
+  mobile: {
+    columns: 4,
+    margin: "16px",
+    gutter: "16px",
+    breakpoint: breakpoints.mobile,
+    maxWidth: "767px"
+  },
+  tablet: {
+    columns: 8,
+    margin: "20px",
+    gutter: "20px",
+    breakpoint: breakpoints.tablet,
+    maxWidth: "1023px"
+  },
+  desktop: {
+    columns: 12,
+    margin: "24px",
+    gutter: "24px",
+    breakpoint: breakpoints.desktop,
+    maxWidth: "none"
+  }
+};
+var columnSpans = {
+  mobile: {
+    1: "25%",
+    // 1/4
+    2: "50%",
+    // 2/4
+    3: "75%",
+    // 3/4
+    4: "100%"
+    // 4/4 (full width)
+  },
+  tablet: {
+    1: "12.5%",
+    // 1/8
+    2: "25%",
+    // 2/8
+    3: "37.5%",
+    // 3/8
+    4: "50%",
+    // 4/8
+    5: "62.5%",
+    // 5/8
+    6: "75%",
+    // 6/8
+    7: "87.5%",
+    // 7/8
+    8: "100%"
+    // 8/8 (full width)
+  },
+  desktop: {
+    1: "8.333333%",
+    // 1/12
+    2: "16.666667%",
+    // 2/12
+    3: "25%",
+    // 3/12
+    4: "33.333333%",
+    // 4/12
+    5: "41.666667%",
+    // 5/12
+    6: "50%",
+    // 6/12
+    7: "58.333333%",
+    // 7/12
+    8: "66.666667%",
+    // 8/12
+    9: "75%",
+    // 9/12
+    10: "83.333333%",
+    // 10/12
+    11: "91.666667%",
+    // 11/12
+    12: "100%"
+    // 12/12 (full width)
+  }
+};
+var gridContainer = {
+  display: "grid",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var responsiveGrid = {
+  mobile: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.mobile.columns}, 1fr)`,
+    gap: gridSpecs.mobile.gutter,
+    margin: `0 ${gridSpecs.mobile.margin}`,
+    boxSizing: "border-box"
+  },
+  tablet: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.tablet.columns}, 1fr)`,
+    gap: gridSpecs.tablet.gutter,
+    margin: `0 ${gridSpecs.tablet.margin}`,
+    boxSizing: "border-box"
+  },
+  desktop: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.desktop.columns}, 1fr)`,
+    gap: gridSpecs.desktop.gutter,
+    margin: `0 ${gridSpecs.desktop.margin}`,
+    boxSizing: "border-box"
+  }
+};
+var flexboxGrid = {
+  container: {
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  item: {
+    boxSizing: "border-box",
+    flex: "0 0 auto"
+  }
+};
+var layoutPatterns = {
+  // Hero section (full width)
+  hero: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: { gridColumn: "1 / -1" },
+    desktop: { gridColumn: "1 / -1" }
+  },
+  // Content + Sidebar
+  contentSidebar: {
+    content: {
+      mobile: { gridColumn: "1 / -1" },
+      tablet: { gridColumn: "1 / 7" },
+      desktop: { gridColumn: "1 / 9" }
+    },
+    sidebar: {
+      mobile: { gridColumn: "1 / -1" },
+      tablet: { gridColumn: "7 / -1" },
+      desktop: { gridColumn: "9 / -1" }
+    }
+  },
+  // Three column layout
+  threeColumn: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: {
+      first: { gridColumn: "span 2" },
+      others: { gridColumn: "span 3" }
+    },
+    desktop: { gridColumn: "span 4" }
+  },
+  // Two column layout
+  twoColumn: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: { gridColumn: "span 4" },
+    desktop: { gridColumn: "span 6" }
+  },
+  // Four column layout
+  fourColumn: {
+    mobile: { gridColumn: "span 2" },
+    tablet: { gridColumn: "span 2" },
+    desktop: { gridColumn: "span 3" }
+  }
+};
+var gridUtils = {
+  // Full width utilities
+  fullWidth: {
+    mobile: "col-span-4",
+    tablet: "col-span-8",
+    desktop: "col-span-12"
+  },
+  // Half width utilities
+  halfWidth: {
+    mobile: "col-span-2",
+    tablet: "col-span-4",
+    desktop: "col-span-6"
+  },
+  // Third width utilities
+  thirdWidth: {
+    mobile: "col-span-4",
+    // Stack on mobile
+    tablet: "col-span-3",
+    desktop: "col-span-4"
+  },
+  // Quarter width utilities
+  quarterWidth: {
+    mobile: "col-span-2",
+    tablet: "col-span-2",
+    desktop: "col-span-3"
+  }
+};
+var gridGaps = {
+  xs: "4px",
+  // spacing-xs
+  s: "8px",
+  // spacing-s
+  m: "16px",
+  // spacing-m
+  l: "24px",
+  // spacing-l
+  xl: "32px"
+  // spacing-xl
+};
+var containerSizes = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+  full: "100%"
+};
+var componentGrids = {
+  // Card grid layouts
+  cardGrid: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "repeat(1, 1fr)",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.l
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: gridGaps.l
+    }
+  },
+  // Dashboard layout
+  dashboard: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "200px 1fr",
+      gap: gridGaps.l
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "250px 1fr",
+      gap: gridGaps.xl
+    }
+  },
+  // Form layout
+  form: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.m
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.l
+    }
+  }
+};
+var gridCalculations = {
+  /**
+   * Calculate column width based on container width
+   */
+  calculateColumnWidth: (containerWidth, columns, margin, gutter) => {
+    return (containerWidth - 2 * margin - (columns - 1) * gutter) / columns;
+  },
+  /**
+   * Get responsive column span classes
+   */
+  getResponsiveSpan: (mobile, tablet, desktop) => {
+    return `col-span-${mobile} md:col-span-${tablet} lg:col-span-${desktop}`;
+  },
+  /**
+   * Generate grid template columns string
+   */
+  generateGridColumns: (columns) => {
+    return `repeat(${columns}, 1fr)`;
+  }
+};
+
+exports.breakpoints = breakpoints;
+exports.columnSpans = columnSpans;
+exports.componentGrids = componentGrids;
+exports.containerSizes = containerSizes;
+exports.flexboxGrid = flexboxGrid;
+exports.gridCalculations = gridCalculations;
+exports.gridContainer = gridContainer;
+exports.gridGaps = gridGaps;
+exports.gridSpecs = gridSpecs;
+exports.gridUtils = gridUtils;
+exports.layoutPatterns = layoutPatterns;
+exports.responsiveGrid = responsiveGrid;

package/dist/tokens/grids.mjs

@@ -0,0 +1,292 @@
+// src/tokens/grids.ts
+var breakpoints = {
+  mobile: "0px",
+  tablet: "768px",
+  desktop: "1024px"
+};
+var gridSpecs = {
+  mobile: {
+    columns: 4,
+    margin: "16px",
+    gutter: "16px",
+    breakpoint: breakpoints.mobile,
+    maxWidth: "767px"
+  },
+  tablet: {
+    columns: 8,
+    margin: "20px",
+    gutter: "20px",
+    breakpoint: breakpoints.tablet,
+    maxWidth: "1023px"
+  },
+  desktop: {
+    columns: 12,
+    margin: "24px",
+    gutter: "24px",
+    breakpoint: breakpoints.desktop,
+    maxWidth: "none"
+  }
+};
+var columnSpans = {
+  mobile: {
+    1: "25%",
+    // 1/4
+    2: "50%",
+    // 2/4
+    3: "75%",
+    // 3/4
+    4: "100%"
+    // 4/4 (full width)
+  },
+  tablet: {
+    1: "12.5%",
+    // 1/8
+    2: "25%",
+    // 2/8
+    3: "37.5%",
+    // 3/8
+    4: "50%",
+    // 4/8
+    5: "62.5%",
+    // 5/8
+    6: "75%",
+    // 6/8
+    7: "87.5%",
+    // 7/8
+    8: "100%"
+    // 8/8 (full width)
+  },
+  desktop: {
+    1: "8.333333%",
+    // 1/12
+    2: "16.666667%",
+    // 2/12
+    3: "25%",
+    // 3/12
+    4: "33.333333%",
+    // 4/12
+    5: "41.666667%",
+    // 5/12
+    6: "50%",
+    // 6/12
+    7: "58.333333%",
+    // 7/12
+    8: "66.666667%",
+    // 8/12
+    9: "75%",
+    // 9/12
+    10: "83.333333%",
+    // 10/12
+    11: "91.666667%",
+    // 11/12
+    12: "100%"
+    // 12/12 (full width)
+  }
+};
+var gridContainer = {
+  display: "grid",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var responsiveGrid = {
+  mobile: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.mobile.columns}, 1fr)`,
+    gap: gridSpecs.mobile.gutter,
+    margin: `0 ${gridSpecs.mobile.margin}`,
+    boxSizing: "border-box"
+  },
+  tablet: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.tablet.columns}, 1fr)`,
+    gap: gridSpecs.tablet.gutter,
+    margin: `0 ${gridSpecs.tablet.margin}`,
+    boxSizing: "border-box"
+  },
+  desktop: {
+    display: "grid",
+    gridTemplateColumns: `repeat(${gridSpecs.desktop.columns}, 1fr)`,
+    gap: gridSpecs.desktop.gutter,
+    margin: `0 ${gridSpecs.desktop.margin}`,
+    boxSizing: "border-box"
+  }
+};
+var flexboxGrid = {
+  container: {
+    display: "flex",
+    flexWrap: "wrap",
+    width: "100%",
+    boxSizing: "border-box"
+  },
+  item: {
+    boxSizing: "border-box",
+    flex: "0 0 auto"
+  }
+};
+var layoutPatterns = {
+  // Hero section (full width)
+  hero: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: { gridColumn: "1 / -1" },
+    desktop: { gridColumn: "1 / -1" }
+  },
+  // Content + Sidebar
+  contentSidebar: {
+    content: {
+      mobile: { gridColumn: "1 / -1" },
+      tablet: { gridColumn: "1 / 7" },
+      desktop: { gridColumn: "1 / 9" }
+    },
+    sidebar: {
+      mobile: { gridColumn: "1 / -1" },
+      tablet: { gridColumn: "7 / -1" },
+      desktop: { gridColumn: "9 / -1" }
+    }
+  },
+  // Three column layout
+  threeColumn: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: {
+      first: { gridColumn: "span 2" },
+      others: { gridColumn: "span 3" }
+    },
+    desktop: { gridColumn: "span 4" }
+  },
+  // Two column layout
+  twoColumn: {
+    mobile: { gridColumn: "1 / -1" },
+    tablet: { gridColumn: "span 4" },
+    desktop: { gridColumn: "span 6" }
+  },
+  // Four column layout
+  fourColumn: {
+    mobile: { gridColumn: "span 2" },
+    tablet: { gridColumn: "span 2" },
+    desktop: { gridColumn: "span 3" }
+  }
+};
+var gridUtils = {
+  // Full width utilities
+  fullWidth: {
+    mobile: "col-span-4",
+    tablet: "col-span-8",
+    desktop: "col-span-12"
+  },
+  // Half width utilities
+  halfWidth: {
+    mobile: "col-span-2",
+    tablet: "col-span-4",
+    desktop: "col-span-6"
+  },
+  // Third width utilities
+  thirdWidth: {
+    mobile: "col-span-4",
+    // Stack on mobile
+    tablet: "col-span-3",
+    desktop: "col-span-4"
+  },
+  // Quarter width utilities
+  quarterWidth: {
+    mobile: "col-span-2",
+    tablet: "col-span-2",
+    desktop: "col-span-3"
+  }
+};
+var gridGaps = {
+  xs: "4px",
+  // spacing-xs
+  s: "8px",
+  // spacing-s
+  m: "16px",
+  // spacing-m
+  l: "24px",
+  // spacing-l
+  xl: "32px"
+  // spacing-xl
+};
+var containerSizes = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+  full: "100%"
+};
+var componentGrids = {
+  // Card grid layouts
+  cardGrid: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "repeat(1, 1fr)",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.l
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "repeat(3, 1fr)",
+      gap: gridGaps.l
+    }
+  },
+  // Dashboard layout
+  dashboard: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "200px 1fr",
+      gap: gridGaps.l
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "250px 1fr",
+      gap: gridGaps.xl
+    }
+  },
+  // Form layout
+  form: {
+    mobile: {
+      display: "grid",
+      gridTemplateColumns: "1fr",
+      gap: gridGaps.m
+    },
+    tablet: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.m
+    },
+    desktop: {
+      display: "grid",
+      gridTemplateColumns: "repeat(2, 1fr)",
+      gap: gridGaps.l
+    }
+  }
+};
+var gridCalculations = {
+  /**
+   * Calculate column width based on container width
+   */
+  calculateColumnWidth: (containerWidth, columns, margin, gutter) => {
+    return (containerWidth - 2 * margin - (columns - 1) * gutter) / columns;
+  },
+  /**
+   * Get responsive column span classes
+   */
+  getResponsiveSpan: (mobile, tablet, desktop) => {
+    return `col-span-${mobile} md:col-span-${tablet} lg:col-span-${desktop}`;
+  },
+  /**
+   * Generate grid template columns string
+   */
+  generateGridColumns: (columns) => {
+    return `repeat(${columns}, 1fr)`;
+  }
+};
+
+export { breakpoints, columnSpans, componentGrids, containerSizes, flexboxGrid, gridCalculations, gridContainer, gridGaps, gridSpecs, gridUtils, layoutPatterns, responsiveGrid };