feat(preset): add configurable breakpoints and container sizes

src/index.ts

@@ -24,13 +24,33 @@ export type ThemeConfig = {
   semanticColors?: Record<string, BrandColor>
   colorVariation?: ColorVariation
   includeColors?: Color[]
+  breakpoints?: Record<string, number>
+  containerNames?: string[]
+  containerSizes?: Record<string, number>
 }
 
-const defaultConfig: Required<ThemeConfig> = {
+export const defaultConfig: Required<ThemeConfig> = {
   neutral: 'slate',
   colorVariation: { dark: false, p3: false, alpha: false },
   semanticColors: { primary: 'teal' },
-  includeColors: color
+  includeColors: color,
+  breakpoints: { sm: 576, md: 768, lg: 992, xl: 1200, '2xl': 1400 },
+  containerNames: ['sidebar', 'content', 'wrapper'],
+  containerSizes: {
+    '3xs': 200,
+    '2xs': 300,
+    xs: 400,
+    sm: 500,
+    md: 600,
+    lg: 700,
+    xl: 800,
+    '2xl': 900,
+    '3xl': 1000,
+    '4xl': 1100,
+    '5xl': 1200,
+    '6xl': 1300,
+    '7xl': 1400
+  }
 }
 
 const srJuggernautPandaPreset = (config?: ThemeConfig) => {
@@ -39,6 +59,8 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
   const neutral = generateNeutralColor(mergedConfig.neutral, mergedConfig.colorVariation)
   const semanticColors = generateSemanticColors(mergedConfig.semanticColors, mergedConfig.colorVariation)
   const semanticColorKeysArray = Object.keys(semanticColors)
+  const breakpointEntries = Object.entries(mergedConfig.breakpoints)
+  const containerSizes = Object.entries(mergedConfig.containerSizes)
   return definePreset({
     name: 'srjuggernaut-panda-preset',
     patterns: {
@@ -58,6 +80,8 @@ const srJuggernautPandaPreset = (config?: ThemeConfig) => {
         progressBar: progressBarRecipe({ semanticColorNames: semanticColorKeysArray }),
         select: selectRecipe({ semanticColorNames: semanticColorKeysArray })
       },
+      breakpoints: Object.fromEntries(breakpointEntries.map(([key, value]) => [key, `${value}px`])),
+      containerSizes: Object.fromEntries(containerSizes.map(([key, value]) => [key, `${value}px`])),
       tokens: {
         animations: {},
         aspectRatios: {