Breakpoints

/**
 * Create breakpoints configuration (deprecated)
 * @param config - Breakpoint configuration object
 * @returns Breakpoints with base property
 */
function createBreakpoints<T extends BaseBreakpointConfig>(
  config: T
): Breakpoints<T>;

interface BaseBreakpointConfig {
  /** Small screens breakpoint */
  sm: string;
  /** Medium screens breakpoint */
  md: string;
  /** Large screens breakpoint */
  lg: string;
  /** Extra large screens breakpoint */
  xl: string;
  /** 2x extra large screens breakpoint (optional) */
  "2xl"?: string;
  /** Additional custom breakpoints */
  [key: string]: string | undefined;
}

type Breakpoints<T> = T & { base: "0em" };

import { createBreakpoints } from "@chakra-ui/theme-tools/create-breakpoints";

// Basic breakpoints configuration
const breakpoints = createBreakpoints({
  sm: "30em",    // 480px
  md: "48em",    // 768px  
  lg: "62em",    // 992px
  xl: "80em",    // 1280px
  "2xl": "96em"  // 1536px
});

// Returns:
// {
//   base: "0em",
//   sm: "30em",
//   md: "48em", 
//   lg: "62em",
//   xl: "80em",
//   "2xl": "96em"
// }

// Custom breakpoints
const customBreakpoints = createBreakpoints({
  sm: "480px",
  md: "768px",
  lg: "1024px", 
  xl: "1280px",
  "2xl": "1536px",
  // Custom breakpoints
  tablet: "640px",
  desktop: "1200px",
  wide: "1800px"
});

// Use in theme configuration
const theme = {
  breakpoints: customBreakpoints,
  // ... other theme properties
};

// ❌ Deprecated approach
import { createBreakpoints } from "@chakra-ui/theme-tools";

const breakpoints = createBreakpoints({
  sm: "30em",
  md: "48em", 
  lg: "62em",
  xl: "80em"
});

// ✅ Recommended approach
const breakpoints = {
  base: "0em",
  sm: "30em",
  md: "48em",
  lg: "62em", 
  xl: "80em"
};

// Using pixel values
const pixelBreakpoints = {
  base: "0px",
  sm: "480px",
  md: "768px",
  lg: "992px",
  xl: "1200px", 
  "2xl": "1400px"
};

// Using em values for better accessibility
const emBreakpoints = {
  base: "0em",
  sm: "30em",   // 480px at 16px base
  md: "48em",   // 768px at 16px base
  lg: "62em",   // 992px at 16px base
  xl: "75em",   // 1200px at 16px base
  "2xl": "87.5em" // 1400px at 16px base
};

// Application-specific breakpoints
const appBreakpoints = {
  base: "0em",
  mobile: "23.4375em",    // 375px - iPhone SE
  tablet: "48em",         // 768px - iPad portrait
  laptop: "64em",         // 1024px - Small laptop
  desktop: "80em",        // 1280px - Desktop
  ultrawide: "120em",     // 1920px - Large desktop
  
  // Component-specific breakpoints
  cardGrid: "56.25em",    // 900px - When cards stack
  navCollapse: "62em"     // 992px - When nav collapses
};

import type { Breakpoints } from "@chakra-ui/theme-tools/create-breakpoints";

// Define breakpoints with proper typing
const breakpoints: Breakpoints<{
  sm: string;
  md: string;
  lg: string;
  xl: string;
  "2xl": string;
}> = {
  base: "0em",
  sm: "30em",
  md: "48em", 
  lg: "62em",
  xl: "80em",
  "2xl": "96em"
};

// Use in Chakra UI theme
const theme = {
  breakpoints,
  components: {
    Container: {
      baseStyle: {
        maxW: {
          base: "100%",
          sm: "container.sm", 
          md: "container.md",
          lg: "container.lg",
          xl: "container.xl"
        }
      }
    }
  }
};

// Responsive styles using breakpoints
const responsiveStyles = {
  fontSize: {
    base: "sm",
    sm: "md", 
    md: "lg",
    lg: "xl"
  },
  padding: {
    base: 2,
    sm: 4,
    md: 6,
    lg: 8
  },
  gridTemplateColumns: {
    base: "1fr",
    sm: "repeat(2, 1fr)",
    md: "repeat(3, 1fr)", 
    lg: "repeat(4, 1fr)"
  }
};

// Helper to generate media queries from breakpoints
const generateMediaQueries = (breakpoints: Record<string, string>) => {
  return Object.entries(breakpoints)
    .filter(([key]) => key !== "base")
    .reduce((acc, [key, value]) => {
      acc[key] = `@media screen and (min-width: ${value})`;
      return acc;
    }, {} as Record<string, string>);
};

const breakpoints = {
  base: "0em",
  sm: "30em",
  md: "48em",
  lg: "62em"
};

const mediaQueries = generateMediaQueries(breakpoints);
// Returns:
// {
//   sm: "@media screen and (min-width: 30em)",
//   md: "@media screen and (min-width: 48em)", 
//   lg: "@media screen and (min-width: 62em)"
// }

// Use in CSS-in-JS
const responsiveCard = {
  padding: "1rem",
  [mediaQueries.sm]: {
    padding: "1.5rem",
    fontSize: "1.125rem"
  },
  [mediaQueries.md]: {
    padding: "2rem",
    fontSize: "1.25rem"
  },
  [mediaQueries.lg]: {
    padding: "2.5rem", 
    fontSize: "1.5rem"
  }
};

// Modern breakpoints for container queries
const containerBreakpoints = {
  base: "0px",
  xs: "20rem",      // 320px
  sm: "24rem",      // 384px
  md: "28rem",      // 448px
  lg: "32rem",      // 512px
  xl: "36rem",      // 576px
  "2xl": "42rem",   // 672px
  "3xl": "48rem",   // 768px
  "4xl": "56rem",   // 896px
  "5xl": "64rem"    // 1024px
};

// Use with CSS container queries (when supported)
const containerStyles = {
  containerType: "inline-size",
  containerName: "card",
  
  // Child elements using container queries
  "& .card-content": {
    padding: "1rem",
    "@container card (min-width: 24rem)": {
      padding: "1.5rem",
      display: "flex",
      gap: "1rem"
    },
    "@container card (min-width: 32rem)": {
      padding: "2rem",
      gap: "1.5rem"
    }
  }
};