@grupor5/raya 0.2.1 → 0.2.2

package/dist/tokens/grids.d.mts

@@ -0,0 +1,331 @@
+/**
+ * Raya Design System - Grid Tokens
+ *
+ * Grid system tokens for responsive layout design with consistent
+ * breakpoints, columns, margins, and gutters across all devices.
+ */
+/**
+ * Breakpoint definitions
+ */
+declare const breakpoints: {
+    readonly mobile: "0px";
+    readonly tablet: "768px";
+    readonly desktop: "1024px";
+};
+/**
+ * Grid specifications for each breakpoint
+ */
+declare const gridSpecs: {
+    readonly mobile: {
+        readonly columns: 4;
+        readonly margin: "16px";
+        readonly gutter: "16px";
+        readonly breakpoint: "0px";
+        readonly maxWidth: "767px";
+    };
+    readonly tablet: {
+        readonly columns: 8;
+        readonly margin: "20px";
+        readonly gutter: "20px";
+        readonly breakpoint: "768px";
+        readonly maxWidth: "1023px";
+    };
+    readonly desktop: {
+        readonly columns: 12;
+        readonly margin: "24px";
+        readonly gutter: "24px";
+        readonly breakpoint: "1024px";
+        readonly maxWidth: "none";
+    };
+};
+/**
+ * Column span utilities for each breakpoint
+ */
+declare const columnSpans: {
+    readonly mobile: {
+        readonly 1: "25%";
+        readonly 2: "50%";
+        readonly 3: "75%";
+        readonly 4: "100%";
+    };
+    readonly tablet: {
+        readonly 1: "12.5%";
+        readonly 2: "25%";
+        readonly 3: "37.5%";
+        readonly 4: "50%";
+        readonly 5: "62.5%";
+        readonly 6: "75%";
+        readonly 7: "87.5%";
+        readonly 8: "100%";
+    };
+    readonly desktop: {
+        readonly 1: "8.333333%";
+        readonly 2: "16.666667%";
+        readonly 3: "25%";
+        readonly 4: "33.333333%";
+        readonly 5: "41.666667%";
+        readonly 6: "50%";
+        readonly 7: "58.333333%";
+        readonly 8: "66.666667%";
+        readonly 9: "75%";
+        readonly 10: "83.333333%";
+        readonly 11: "91.666667%";
+        readonly 12: "100%";
+    };
+};
+/**
+ * Grid container styles
+ */
+declare const gridContainer: {
+    readonly display: "grid";
+    readonly width: "100%";
+    readonly boxSizing: "border-box";
+};
+/**
+ * Responsive grid configurations
+ */
+declare const responsiveGrid: {
+    readonly mobile: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(4, 1fr)";
+        readonly gap: "16px";
+        readonly margin: "0 16px";
+        readonly boxSizing: "border-box";
+    };
+    readonly tablet: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(8, 1fr)";
+        readonly gap: "20px";
+        readonly margin: "0 20px";
+        readonly boxSizing: "border-box";
+    };
+    readonly desktop: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(12, 1fr)";
+        readonly gap: "24px";
+        readonly margin: "0 24px";
+        readonly boxSizing: "border-box";
+    };
+};
+/**
+ * Flexbox grid fallback configurations
+ */
+declare const flexboxGrid: {
+    readonly container: {
+        readonly display: "flex";
+        readonly flexWrap: "wrap";
+        readonly width: "100%";
+        readonly boxSizing: "border-box";
+    };
+    readonly item: {
+        readonly boxSizing: "border-box";
+        readonly flex: "0 0 auto";
+    };
+};
+/**
+ * Common layout patterns
+ */
+declare const layoutPatterns: {
+    readonly hero: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly desktop: {
+            readonly gridColumn: "1 / -1";
+        };
+    };
+    readonly contentSidebar: {
+        readonly content: {
+            readonly mobile: {
+                readonly gridColumn: "1 / -1";
+            };
+            readonly tablet: {
+                readonly gridColumn: "1 / 7";
+            };
+            readonly desktop: {
+                readonly gridColumn: "1 / 9";
+            };
+        };
+        readonly sidebar: {
+            readonly mobile: {
+                readonly gridColumn: "1 / -1";
+            };
+            readonly tablet: {
+                readonly gridColumn: "7 / -1";
+            };
+            readonly desktop: {
+                readonly gridColumn: "9 / -1";
+            };
+        };
+    };
+    readonly threeColumn: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly first: {
+                readonly gridColumn: "span 2";
+            };
+            readonly others: {
+                readonly gridColumn: "span 3";
+            };
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 4";
+        };
+    };
+    readonly twoColumn: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly gridColumn: "span 4";
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 6";
+        };
+    };
+    readonly fourColumn: {
+        readonly mobile: {
+            readonly gridColumn: "span 2";
+        };
+        readonly tablet: {
+            readonly gridColumn: "span 2";
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 3";
+        };
+    };
+};
+/**
+ * Grid utilities for common use cases
+ */
+declare const gridUtils: {
+    readonly fullWidth: {
+        readonly mobile: "col-span-4";
+        readonly tablet: "col-span-8";
+        readonly desktop: "col-span-12";
+    };
+    readonly halfWidth: {
+        readonly mobile: "col-span-2";
+        readonly tablet: "col-span-4";
+        readonly desktop: "col-span-6";
+    };
+    readonly thirdWidth: {
+        readonly mobile: "col-span-4";
+        readonly tablet: "col-span-3";
+        readonly desktop: "col-span-4";
+    };
+    readonly quarterWidth: {
+        readonly mobile: "col-span-2";
+        readonly tablet: "col-span-2";
+        readonly desktop: "col-span-3";
+    };
+};
+/**
+ * Grid gap utilities aligned with spacing system
+ */
+declare const gridGaps: {
+    readonly xs: "4px";
+    readonly s: "8px";
+    readonly m: "16px";
+    readonly l: "24px";
+    readonly xl: "32px";
+};
+/**
+ * Container max-widths for different layouts
+ */
+declare const containerSizes: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+    readonly full: "100%";
+};
+/**
+ * Grid system type definitions
+ */
+type Breakpoint = keyof typeof breakpoints;
+type GridSpec = typeof gridSpecs[Breakpoint];
+type ColumnSpan = keyof typeof columnSpans.desktop;
+type GridGap = keyof typeof gridGaps;
+type ContainerSize = keyof typeof containerSizes;
+/**
+ * Pre-composed grid styles for common components
+ */
+declare const componentGrids: {
+    readonly cardGrid: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(1, 1fr)";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "24px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(3, 1fr)";
+            readonly gap: "24px";
+        };
+    };
+    readonly dashboard: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "1fr";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "200px 1fr";
+            readonly gap: "24px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "250px 1fr";
+            readonly gap: "32px";
+        };
+    };
+    readonly form: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "1fr";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "16px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "24px";
+        };
+    };
+};
+/**
+ * Utility functions for grid calculations
+ */
+declare const gridCalculations: {
+    /**
+     * Calculate column width based on container width
+     */
+    readonly calculateColumnWidth: (containerWidth: number, columns: number, margin: number, gutter: number) => number;
+    /**
+     * Get responsive column span classes
+     */
+    readonly getResponsiveSpan: (mobile: number, tablet: number, desktop: number) => string;
+    /**
+     * Generate grid template columns string
+     */
+    readonly generateGridColumns: (columns: number) => string;
+};
+
+export { type Breakpoint, type ColumnSpan, type ContainerSize, type GridGap, type GridSpec, breakpoints, columnSpans, componentGrids, containerSizes, flexboxGrid, gridCalculations, gridContainer, gridGaps, gridSpecs, gridUtils, layoutPatterns, responsiveGrid };

package/dist/tokens/grids.d.ts

@@ -0,0 +1,331 @@
+/**
+ * Raya Design System - Grid Tokens
+ *
+ * Grid system tokens for responsive layout design with consistent
+ * breakpoints, columns, margins, and gutters across all devices.
+ */
+/**
+ * Breakpoint definitions
+ */
+declare const breakpoints: {
+    readonly mobile: "0px";
+    readonly tablet: "768px";
+    readonly desktop: "1024px";
+};
+/**
+ * Grid specifications for each breakpoint
+ */
+declare const gridSpecs: {
+    readonly mobile: {
+        readonly columns: 4;
+        readonly margin: "16px";
+        readonly gutter: "16px";
+        readonly breakpoint: "0px";
+        readonly maxWidth: "767px";
+    };
+    readonly tablet: {
+        readonly columns: 8;
+        readonly margin: "20px";
+        readonly gutter: "20px";
+        readonly breakpoint: "768px";
+        readonly maxWidth: "1023px";
+    };
+    readonly desktop: {
+        readonly columns: 12;
+        readonly margin: "24px";
+        readonly gutter: "24px";
+        readonly breakpoint: "1024px";
+        readonly maxWidth: "none";
+    };
+};
+/**
+ * Column span utilities for each breakpoint
+ */
+declare const columnSpans: {
+    readonly mobile: {
+        readonly 1: "25%";
+        readonly 2: "50%";
+        readonly 3: "75%";
+        readonly 4: "100%";
+    };
+    readonly tablet: {
+        readonly 1: "12.5%";
+        readonly 2: "25%";
+        readonly 3: "37.5%";
+        readonly 4: "50%";
+        readonly 5: "62.5%";
+        readonly 6: "75%";
+        readonly 7: "87.5%";
+        readonly 8: "100%";
+    };
+    readonly desktop: {
+        readonly 1: "8.333333%";
+        readonly 2: "16.666667%";
+        readonly 3: "25%";
+        readonly 4: "33.333333%";
+        readonly 5: "41.666667%";
+        readonly 6: "50%";
+        readonly 7: "58.333333%";
+        readonly 8: "66.666667%";
+        readonly 9: "75%";
+        readonly 10: "83.333333%";
+        readonly 11: "91.666667%";
+        readonly 12: "100%";
+    };
+};
+/**
+ * Grid container styles
+ */
+declare const gridContainer: {
+    readonly display: "grid";
+    readonly width: "100%";
+    readonly boxSizing: "border-box";
+};
+/**
+ * Responsive grid configurations
+ */
+declare const responsiveGrid: {
+    readonly mobile: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(4, 1fr)";
+        readonly gap: "16px";
+        readonly margin: "0 16px";
+        readonly boxSizing: "border-box";
+    };
+    readonly tablet: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(8, 1fr)";
+        readonly gap: "20px";
+        readonly margin: "0 20px";
+        readonly boxSizing: "border-box";
+    };
+    readonly desktop: {
+        readonly display: "grid";
+        readonly gridTemplateColumns: "repeat(12, 1fr)";
+        readonly gap: "24px";
+        readonly margin: "0 24px";
+        readonly boxSizing: "border-box";
+    };
+};
+/**
+ * Flexbox grid fallback configurations
+ */
+declare const flexboxGrid: {
+    readonly container: {
+        readonly display: "flex";
+        readonly flexWrap: "wrap";
+        readonly width: "100%";
+        readonly boxSizing: "border-box";
+    };
+    readonly item: {
+        readonly boxSizing: "border-box";
+        readonly flex: "0 0 auto";
+    };
+};
+/**
+ * Common layout patterns
+ */
+declare const layoutPatterns: {
+    readonly hero: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly desktop: {
+            readonly gridColumn: "1 / -1";
+        };
+    };
+    readonly contentSidebar: {
+        readonly content: {
+            readonly mobile: {
+                readonly gridColumn: "1 / -1";
+            };
+            readonly tablet: {
+                readonly gridColumn: "1 / 7";
+            };
+            readonly desktop: {
+                readonly gridColumn: "1 / 9";
+            };
+        };
+        readonly sidebar: {
+            readonly mobile: {
+                readonly gridColumn: "1 / -1";
+            };
+            readonly tablet: {
+                readonly gridColumn: "7 / -1";
+            };
+            readonly desktop: {
+                readonly gridColumn: "9 / -1";
+            };
+        };
+    };
+    readonly threeColumn: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly first: {
+                readonly gridColumn: "span 2";
+            };
+            readonly others: {
+                readonly gridColumn: "span 3";
+            };
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 4";
+        };
+    };
+    readonly twoColumn: {
+        readonly mobile: {
+            readonly gridColumn: "1 / -1";
+        };
+        readonly tablet: {
+            readonly gridColumn: "span 4";
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 6";
+        };
+    };
+    readonly fourColumn: {
+        readonly mobile: {
+            readonly gridColumn: "span 2";
+        };
+        readonly tablet: {
+            readonly gridColumn: "span 2";
+        };
+        readonly desktop: {
+            readonly gridColumn: "span 3";
+        };
+    };
+};
+/**
+ * Grid utilities for common use cases
+ */
+declare const gridUtils: {
+    readonly fullWidth: {
+        readonly mobile: "col-span-4";
+        readonly tablet: "col-span-8";
+        readonly desktop: "col-span-12";
+    };
+    readonly halfWidth: {
+        readonly mobile: "col-span-2";
+        readonly tablet: "col-span-4";
+        readonly desktop: "col-span-6";
+    };
+    readonly thirdWidth: {
+        readonly mobile: "col-span-4";
+        readonly tablet: "col-span-3";
+        readonly desktop: "col-span-4";
+    };
+    readonly quarterWidth: {
+        readonly mobile: "col-span-2";
+        readonly tablet: "col-span-2";
+        readonly desktop: "col-span-3";
+    };
+};
+/**
+ * Grid gap utilities aligned with spacing system
+ */
+declare const gridGaps: {
+    readonly xs: "4px";
+    readonly s: "8px";
+    readonly m: "16px";
+    readonly l: "24px";
+    readonly xl: "32px";
+};
+/**
+ * Container max-widths for different layouts
+ */
+declare const containerSizes: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+    readonly full: "100%";
+};
+/**
+ * Grid system type definitions
+ */
+type Breakpoint = keyof typeof breakpoints;
+type GridSpec = typeof gridSpecs[Breakpoint];
+type ColumnSpan = keyof typeof columnSpans.desktop;
+type GridGap = keyof typeof gridGaps;
+type ContainerSize = keyof typeof containerSizes;
+/**
+ * Pre-composed grid styles for common components
+ */
+declare const componentGrids: {
+    readonly cardGrid: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(1, 1fr)";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "24px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(3, 1fr)";
+            readonly gap: "24px";
+        };
+    };
+    readonly dashboard: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "1fr";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "200px 1fr";
+            readonly gap: "24px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "250px 1fr";
+            readonly gap: "32px";
+        };
+    };
+    readonly form: {
+        readonly mobile: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "1fr";
+            readonly gap: "16px";
+        };
+        readonly tablet: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "16px";
+        };
+        readonly desktop: {
+            readonly display: "grid";
+            readonly gridTemplateColumns: "repeat(2, 1fr)";
+            readonly gap: "24px";
+        };
+    };
+};
+/**
+ * Utility functions for grid calculations
+ */
+declare const gridCalculations: {
+    /**
+     * Calculate column width based on container width
+     */
+    readonly calculateColumnWidth: (containerWidth: number, columns: number, margin: number, gutter: number) => number;
+    /**
+     * Get responsive column span classes
+     */
+    readonly getResponsiveSpan: (mobile: number, tablet: number, desktop: number) => string;
+    /**
+     * Generate grid template columns string
+     */
+    readonly generateGridColumns: (columns: number) => string;
+};
+
+export { type Breakpoint, type ColumnSpan, type ContainerSize, type GridGap, type GridSpec, breakpoints, columnSpans, componentGrids, containerSizes, flexboxGrid, gridCalculations, gridContainer, gridGaps, gridSpecs, gridUtils, layoutPatterns, responsiveGrid };