react-resize-detector-context 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var B=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var y=(t,r)=>{for(var s in r)B(t,s,{get:r[s],enumerable:!0})},L=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of R(r))!T.call(t,n)&&n!==s&&B(t,n,{get:()=>r[n],enumerable:!(l=C(r,n))||l.enumerable});return t};var g=t=>L(B({},"__esModule",{value:!0}),t);var I={};y(I,{BreakpointConditional:()=>E,BreakpointProvider:()=>A,useBreakpoint:()=>h});module.exports=g(I);var a=require("react"),v=require("react-resize-detector"),u=require("react/jsx-runtime"),b=(0,a.createContext)(void 0),A=({breakpoints:t,children:r,targetRef:s,devMode:l})=>{let n=l!==void 0?l:process.env.NODE_ENV!=="production",{width:i,ref:k}=(0,v.useResizeDetector)({targetRef:s}),e=(0,a.useMemo)(()=>Object.entries(t).map(([o,d])=>[o,d]).sort(([,o],[,d])=>o-d),[t]);(0,a.useEffect)(()=>{e.filter(([,d],f)=>e.findIndex(([,w])=>w===d)!==f).length>0&&n&&console.error("\u274C BreakpointProvider: Duplicate breakpoint values detected. This may lead to unexpected behavior.")},[e]);let p=(0,a.useMemo)(()=>{if(i===void 0)return null;let o=null;return e.forEach(([d,f])=>{i>=f&&(o=d)}),o},[i,e]);(0,a.useEffect)(()=>{(i===void 0||i===0)&&n&&console.error("\u274C BreakpointProvider: element width is undefined or 0")},[i,n]),(0,a.useEffect)(()=>{i!==void 0&&i>0&&p===null&&(e.length>0&&i<e[0][1]?n&&console.error(`\u274C BreakpointProvider: The current width (${i}px) is less than the smallest breakpoint value (${e[0][1]}px). Consider including a breakpoint with a value of 0 to cover all cases.`):n&&console.error("\u274C BreakpointProvider: No breakpoint could be determined from the provided configuration. Check your breakpoints object."))},[i,p,e]);let c=o=>e.findIndex(([d])=>d===o),x=o=>p?c(p)>=c(o):!1,m=o=>p?c(p)<c(o):!1;function P(o){if(p)return o[p]}return(0,u.jsx)(b.Provider,{value:{width:i??0,breakpoint:p,breakpoints:t,isAtLeast:x,isBelow:m,valueByBreakpoint:P},children:s?r:(0,u.jsx)("div",{ref:k,children:r})})},h=()=>{let t=(0,a.useContext)(b);if(!t)throw new Error("useBreakpoint must be used within a BreakpointProvider");return t},E=({show:t,isAtLeast:r,isBelow:s,children:l})=>{let{breakpoint:n,isAtLeast:i,isBelow:k}=h(),e=!0;return t&&n&&(e=e&&t.includes(n)),r&&(e=e&&i(r)),s&&(e=e&&k(s)),e?(0,u.jsx)(u.Fragment,{children:l}):null};0&&(module.exports={BreakpointConditional,BreakpointProvider,useBreakpoint});
+"use strict";var m=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var L=(o,e)=>{for(var n in e)m(o,n,{get:e[n],enumerable:!0})},T=(o,e,n,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of y(e))!E.call(o,r)&&r!==n&&m(o,r,{get:()=>e[r],enumerable:!(u=C(e,r))||u.enumerable});return o};var N=o=>T(m({},"__esModule",{value:!0}),o);var D={};L(D,{BreakpointConditional:()=>A,BreakpointProvider:()=>M,useBreakpoint:()=>h});module.exports=N(D);var d=require("react"),b=require("react-resize-detector");var w=class{shouldLog(e){return process.env.NODE_ENV==="production"?e==="error":!0}formatMessage(e,n,u){if(!this.shouldLog(e))return;let r={level:e,message:n,data:u,timestamp:new Date().toISOString(),context:"BreakpointProvider"},i=e==="error"?console.error:e==="warn"?console.warn:console.log;(!(process.env.NODE_ENV==="production")||e==="error")&&i(`[${r.context}] ${r.message}`,r.data||"")}debug(e,n){this.formatMessage("debug",e,n)}info(e,n){this.formatMessage("info",e,n)}warn(e,n){this.formatMessage("warn",e,n)}error(e,n){this.formatMessage("error",e,n)}},g=new w;var l=require("react/jsx-runtime"),v=(0,d.createContext)(void 0),M=({breakpoints:o,children:e,targetRef:n,devMode:u})=>{let r=u!==void 0?u:process.env.NODE_ENV!=="production",{width:i,ref:f}=(0,b.useResizeDetector)({targetRef:n}),t=(0,d.useMemo)(()=>Object.entries(o).map(([s,a])=>[s,a]).sort(([,s],[,a])=>s-a),[o]);(0,d.useEffect)(()=>{let s=new Set,a=[];for(let p of t){let[,B]=p;s.has(B)?a.push(p):s.add(B)}a.length>0&&r&&g.error("Duplicate breakpoint values detected",{duplicates:a.map(([p,B])=>({key:p,value:B})),message:"This may lead to unexpected behavior"})},[t,r]);let c=(0,d.useMemo)(()=>{if(i===void 0)return null;let s=null;return t.forEach(([a,p])=>{i>=p&&(s=a)}),s},[i,t]);(0,d.useEffect)(()=>{(i===void 0||i===0)&&r&&g.error("Element width is undefined or 0",{width:i,message:"Element cannot be measured properly"})},[i,r]),(0,d.useEffect)(()=>{i!==void 0&&i>0&&c===null&&(t.length>0&&i<t[0][1]?r&&g.error("Current width is less than smallest breakpoint",{currentWidth:i,smallestBreakpoint:t[0][1],smallestBreakpointName:t[0][0],suggestion:"Consider including a breakpoint with a value of 0 to cover all cases"}):r&&g.error("No breakpoint could be determined",{width:i,breakpointsConfig:t,suggestion:"Check your breakpoints object configuration"}))},[i,c,t]);let k=s=>t.findIndex(([a])=>a===s),x=s=>c?k(c)>=k(s):!1,R=s=>c?k(c)<k(s):!1;function P(s){if(c)return s[c]}return(0,l.jsx)(v.Provider,{value:{width:i??0,breakpoint:c,breakpoints:o,isAtLeast:x,isBelow:R,valueByBreakpoint:P},children:n?e:(0,l.jsx)("div",{ref:f,children:e})})},h=()=>{let o=(0,d.useContext)(v);if(!o)throw new Error("useBreakpoint must be used within a BreakpointProvider");return o},A=({show:o,isAtLeast:e,isBelow:n,children:u})=>{let{breakpoint:r,isAtLeast:i,isBelow:f}=h(),t=!0;return o&&r&&(t=t&&o.includes(r)),e&&(t=t&&i(e)),n&&(t=t&&f(n)),t?(0,l.jsx)(l.Fragment,{children:u}):null};0&&(module.exports={BreakpointConditional,BreakpointProvider,useBreakpoint});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/BreakpointContext.tsx"],"sourcesContent":["export * from './BreakpointContext';\n","import React, { createContext, useContext, useMemo, useEffect } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nexport type Breakpoint = string; // Allow arbitrary breakpoint names\n\nexport interface BreakpointContextType {\n  /** Current width of the observed element */\n  width: number;\n  /** Currently active breakpoint */\n  breakpoint: Breakpoint | null;\n  /** Defined breakpoints, e.g., { XS: 0, SM: 500, MD: 700, LG: 900, XL: 1100 } */\n  breakpoints: Record<Breakpoint, number>;\n  /**\n   * Returns `true` if the current breakpoint is greater than or equal to the provided one.\n   * E.g.: isAtLeast('MD') returns true if the current breakpoint is MD,\n   * LG, or XL.\n   */\n  isAtLeast: (size: Breakpoint) => boolean;\n  /**\n   * Returns `true` if the current breakpoint is less than the provided one.\n   */\n  isBelow: (size: Breakpoint) => boolean;\n  /**\n   * Returns a value from the mapping based on the current breakpoint.\n   * E.g.: valueByBreakpoint({ MD: 3, LG: 2 }) returns 3 for MD and 2 for LG.\n   */\n  valueByBreakpoint: <T>(values: Partial<Record<Breakpoint, T>>) => T | undefined;\n}\n\nconst BreakpointContext = createContext<BreakpointContextType | undefined>(undefined);\n\n/**\n * Instead of using React.RefObject<HTMLElement> (which is invariant),\n * we use a structural type that accepts any object with a `current: HTMLElement | null` property.\n */\nexport interface BreakpointProviderProps {\n  /** Defined breakpoints */\n  breakpoints: Record<Breakpoint, number>;\n  /** Child components that use the context */\n  children: React.ReactNode;\n  /**\n   * Optional: Provide a ref to the element to be observed.\n   * If not provided, an internal <div ref={...}> will be rendered.\n   */\n  targetRef?: { current: HTMLElement | null };\n  /**\n   * Optional: Enable development mode to show console warnings and errors.\n   * Defaults to false in production (NODE_ENV === 'production').\n   */\n  devMode?: boolean;\n}\n\n/**\n * BreakpointProvider 🚀\n *\n * Uses react-resize-detector to measure the width of an element and determine the current breakpoint\n * based on the provided breakpoints. Additionally, it provides utility functions (isAtLeast, isBelow)\n * and valueByBreakpoint.\n *\n * ⚠️ **Edge Cases / Warnings:**\n * - If the measured width is undefined or 0, an error is logged in the console.\n * - If the current width is less than the smallest breakpoint (and width > 0), an error is logged.\n * - If duplicate breakpoint values are detected, an error is logged.\n */\nexport const BreakpointProvider: React.FC<BreakpointProviderProps> = ({\n  breakpoints,\n  children,\n  targetRef,\n  devMode,\n}) => {\n  // Determine if we should log based on devMode prop or NODE_ENV\n  const shouldLog = devMode !== undefined ? devMode : process.env.NODE_ENV !== 'production';\n  // If a targetRef is provided, useResizeDetector observes that element; otherwise, an internal ref is created.\n  const { width, ref } = useResizeDetector({ targetRef });\n\n  // Sort the breakpoints in ascending order based on their numeric values. 🔢\n  const sortedBreakpoints = useMemo(() => {\n    return Object.entries(breakpoints)\n      .map(([key, value]) => [key, value] as [Breakpoint, number])\n      .sort(([, a], [, b]) => a - b);\n  }, [breakpoints]);\n\n  /** Check for duplicate breakpoint values */\n  useEffect(() => {\n    const duplicates = sortedBreakpoints.filter(\n      ([, value], index) => sortedBreakpoints.findIndex(([, v]) => v === value) !== index\n    );\n    if (duplicates.length > 0) {\n      if (shouldLog) {\n        console.error(\n          '❌ BreakpointProvider: Duplicate breakpoint values detected. This may lead to unexpected behavior.'\n        );\n      }\n    }\n  }, [sortedBreakpoints]);\n\n  // Determine the current breakpoint based on the measured width. 📏\n  const currentBreakpoint = useMemo(() => {\n    if (width === undefined) return null;\n    let active: Breakpoint | null = null;\n    sortedBreakpoints.forEach(([key, value]) => {\n      if (width >= value) {\n        active = key;\n      }\n    });\n    return active;\n  }, [width, sortedBreakpoints]);\n\n  // Log error if width is undefined or 0\n  useEffect(() => {\n    if (width === undefined || width === 0) {\n      if (shouldLog) {\n        console.error('❌ BreakpointProvider: element width is undefined or 0');\n      }\n    }\n  }, [width, shouldLog]);\n\n  // Log error if width > 0 but no breakpoint could be determined\n  useEffect(() => {\n    if (width !== undefined && width > 0 && currentBreakpoint === null) {\n      if (sortedBreakpoints.length > 0 && width < sortedBreakpoints[0][1]) {\n        if (shouldLog) {\n          console.error(\n            `❌ BreakpointProvider: The current width (${width}px) is less than the smallest breakpoint value (${sortedBreakpoints[0][1]}px). Consider including a breakpoint with a value of 0 to cover all cases.`\n          );\n        }\n      } else {\n        if (shouldLog) {\n          console.error(\n            '❌ BreakpointProvider: No breakpoint could be determined from the provided configuration. Check your breakpoints object.'\n          );\n        }\n      }\n    }\n  }, [width, currentBreakpoint, sortedBreakpoints]);\n\n  // Helper function to get the index of a breakpoint in the sorted array. 🔍\n  const getBreakpointIndex = (size: Breakpoint): number => {\n    return sortedBreakpoints.findIndex(([key]) => key === size);\n  };\n\n  const isAtLeast = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) >= getBreakpointIndex(size);\n  };\n\n  const isBelow = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) < getBreakpointIndex(size);\n  };\n\n  // Define valueByBreakpoint as a function declaration to avoid JSX parsing issues in TSX files. 🎨\n  function valueByBreakpoint<T>(values: Partial<Record<Breakpoint, T>>): T | undefined {\n    if (!currentBreakpoint) return undefined;\n    return values[currentBreakpoint];\n  }\n\n  return (\n    <BreakpointContext.Provider\n      value={{\n        width: width ?? 0,\n        breakpoint: currentBreakpoint,\n        breakpoints,\n        isAtLeast,\n        isBelow,\n        valueByBreakpoint,\n      }}\n    >\n      {/* If a targetRef is provided, that ref is already attached to an external element.\n          Otherwise, render a <div ref={ref}> to observe its size. 📐 */}\n      {targetRef ? children : <div ref={ref}>{children}</div>}\n    </BreakpointContext.Provider>\n  );\n};\n\n/**\n * Hook for accessing the BreakpointContext.\n * Throws an error if used outside of a BreakpointProvider. ⚠️\n */\nexport const useBreakpoint = (): BreakpointContextType => {\n  const context = useContext(BreakpointContext);\n  if (!context) {\n    throw new Error('useBreakpoint must be used within a BreakpointProvider');\n  }\n  return context;\n};\n\ninterface BreakpointConditionalProps {\n  /**\n   * Array of breakpoints at which the children should be displayed.\n   * E.g.: ['MD', 'LG'] renders children only if the current breakpoint is MD or LG.\n   */\n  show?: Breakpoint[];\n  /**\n   * The children are displayed only if the current breakpoint is at least this value.\n   * E.g.: isAtLeast=\"MD\" renders children for MD, LG, or XL.\n   */\n  isAtLeast?: Breakpoint;\n  /**\n   * The children are displayed only if the current breakpoint is below this value.\n   */\n  isBelow?: Breakpoint;\n  children: React.ReactNode;\n}\n\n/**\n * BreakpointConditional 🎨\n *\n * Renders its children only if all provided conditions regarding the current breakpoint are met.\n */\nexport const BreakpointConditional: React.FC<BreakpointConditionalProps> = ({\n  show,\n  isAtLeast: minSize,\n  isBelow: maxSize,\n  children,\n}) => {\n  const { breakpoint, isAtLeast: contextIsAtLeast, isBelow: contextIsBelow } = useBreakpoint();\n\n  let shouldRender = true;\n\n  if (show && breakpoint) {\n    shouldRender = shouldRender && show.includes(breakpoint);\n  }\n  if (minSize) {\n    shouldRender = shouldRender && contextIsAtLeast(minSize);\n  }\n  if (maxSize) {\n    shouldRender = shouldRender && contextIsBelow(maxSize);\n  }\n\n  return shouldRender ? <>{children}</> : null;\n};\n"],"mappings":"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","names":["src_exports","__export","BreakpointConditional","BreakpointProvider","useBreakpoint","__toCommonJS","import_react","import_react_resize_detector","import_jsx_runtime","BreakpointContext","BreakpointProvider","breakpoints","children","targetRef","devMode","shouldLog","width","ref","sortedBreakpoints","key","value","a","b","index","v","currentBreakpoint","active","getBreakpointIndex","size","isAtLeast","isBelow","valueByBreakpoint","values","useBreakpoint","context","BreakpointConditional","show","minSize","maxSize","breakpoint","contextIsAtLeast","contextIsBelow","shouldRender"]}
+{"version":3,"sources":["../src/index.ts","../src/BreakpointContext.tsx","../src/utils/logger.ts"],"sourcesContent":["export * from './BreakpointContext';\n","import React, { createContext, useContext, useMemo, useEffect } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { logger } from './utils/logger';\n\nexport type Breakpoint = string; // Allow arbitrary breakpoint names\n\nexport interface BreakpointContextType {\n  /** Current width of the observed element */\n  width: number;\n  /** Currently active breakpoint */\n  breakpoint: Breakpoint | null;\n  /** Defined breakpoints, e.g., { XS: 0, SM: 500, MD: 700, LG: 900, XL: 1100 } */\n  breakpoints: Record<Breakpoint, number>;\n  /**\n   * Returns `true` if the current breakpoint is greater than or equal to the provided one.\n   * E.g.: isAtLeast('MD') returns true if the current breakpoint is MD,\n   * LG, or XL.\n   */\n  isAtLeast: (size: Breakpoint) => boolean;\n  /**\n   * Returns `true` if the current breakpoint is less than the provided one.\n   */\n  isBelow: (size: Breakpoint) => boolean;\n  /**\n   * Returns a value from the mapping based on the current breakpoint.\n   * E.g.: valueByBreakpoint({ MD: 3, LG: 2 }) returns 3 for MD and 2 for LG.\n   */\n  valueByBreakpoint: <T>(values: Partial<Record<Breakpoint, T>>) => T | undefined;\n}\n\nconst BreakpointContext = createContext<BreakpointContextType | undefined>(undefined);\n\n/**\n * Instead of using React.RefObject<HTMLElement> (which is invariant),\n * we use a structural type that accepts any object with a `current: HTMLElement | null` property.\n */\nexport interface BreakpointProviderProps {\n  /** Defined breakpoints */\n  breakpoints: Record<Breakpoint, number>;\n  /** Child components that use the context */\n  children: React.ReactNode;\n  /**\n   * Optional: Provide a ref to the element to be observed.\n   * If not provided, an internal <div ref={...}> will be rendered.\n   */\n  targetRef?: { current: HTMLElement | null };\n  /**\n   * Optional: Enable development mode to show console warnings and errors.\n   * Defaults to false in production (NODE_ENV === 'production').\n   */\n  devMode?: boolean;\n}\n\n/**\n * BreakpointProvider 🚀\n *\n * Uses react-resize-detector to measure the width of an element and determine the current breakpoint\n * based on the provided breakpoints. Additionally, it provides utility functions (isAtLeast, isBelow)\n * and valueByBreakpoint.\n *\n * ⚠️ **Edge Cases / Warnings:**\n * - If the measured width is undefined or 0, an error is logged in the console.\n * - If the current width is less than the smallest breakpoint (and width > 0), an error is logged.\n * - If duplicate breakpoint values are detected, an error is logged.\n */\nexport const BreakpointProvider: React.FC<BreakpointProviderProps> = ({\n  breakpoints,\n  children,\n  targetRef,\n  devMode,\n}) => {\n  // Determine if we should log based on devMode prop or NODE_ENV\n  const shouldLog = devMode !== undefined ? devMode : process.env.NODE_ENV !== 'production';\n  // If a targetRef is provided, useResizeDetector observes that element; otherwise, an internal ref is created.\n  const { width, ref } = useResizeDetector({ targetRef });\n\n  // Sort the breakpoints in ascending order based on their numeric values. 🔢\n  const sortedBreakpoints = useMemo(() => {\n    return Object.entries(breakpoints)\n      .map(([key, value]) => [key, value] as [Breakpoint, number])\n      .sort(([, a], [, b]) => a - b);\n  }, [breakpoints]);\n\n  /** Check for duplicate breakpoint values */\n  useEffect(() => {\n    const seenValues = new Set<number>();\n    const duplicates: Array<[Breakpoint, number]> = [];\n\n    for (const entry of sortedBreakpoints) {\n      const [, value] = entry;\n      if (seenValues.has(value)) {\n        duplicates.push(entry);\n      } else {\n        seenValues.add(value);\n      }\n    }\n\n    if (duplicates.length > 0) {\n      if (shouldLog) {\n        logger.error('Duplicate breakpoint values detected', {\n          duplicates: duplicates.map(([key, value]) => ({ key, value })),\n          message: 'This may lead to unexpected behavior',\n        });\n      }\n    }\n  }, [sortedBreakpoints, shouldLog]);\n\n  // Determine the current breakpoint based on the measured width. 📏\n  const currentBreakpoint = useMemo(() => {\n    if (width === undefined) return null;\n    let active: Breakpoint | null = null;\n    sortedBreakpoints.forEach(([key, value]) => {\n      if (width >= value) {\n        active = key;\n      }\n    });\n    return active;\n  }, [width, sortedBreakpoints]);\n\n  // Log error if width is undefined or 0\n  useEffect(() => {\n    if (width === undefined || width === 0) {\n      if (shouldLog) {\n        logger.error('Element width is undefined or 0', {\n          width,\n          message: 'Element cannot be measured properly',\n        });\n      }\n    }\n  }, [width, shouldLog]);\n\n  // Log error if width > 0 but no breakpoint could be determined\n  useEffect(() => {\n    if (width !== undefined && width > 0 && currentBreakpoint === null) {\n      if (sortedBreakpoints.length > 0 && width < sortedBreakpoints[0][1]) {\n        if (shouldLog) {\n          logger.error('Current width is less than smallest breakpoint', {\n            currentWidth: width,\n            smallestBreakpoint: sortedBreakpoints[0][1],\n            smallestBreakpointName: sortedBreakpoints[0][0],\n            suggestion: 'Consider including a breakpoint with a value of 0 to cover all cases',\n          });\n        }\n      } else {\n        if (shouldLog) {\n          logger.error('No breakpoint could be determined', {\n            width,\n            breakpointsConfig: sortedBreakpoints,\n            suggestion: 'Check your breakpoints object configuration',\n          });\n        }\n      }\n    }\n  }, [width, currentBreakpoint, sortedBreakpoints]);\n\n  // Helper function to get the index of a breakpoint in the sorted array. 🔍\n  const getBreakpointIndex = (size: Breakpoint): number => {\n    return sortedBreakpoints.findIndex(([key]) => key === size);\n  };\n\n  const isAtLeast = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) >= getBreakpointIndex(size);\n  };\n\n  const isBelow = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) < getBreakpointIndex(size);\n  };\n\n  // Define valueByBreakpoint as a function declaration to avoid JSX parsing issues in TSX files. 🎨\n  function valueByBreakpoint<T>(values: Partial<Record<Breakpoint, T>>): T | undefined {\n    if (!currentBreakpoint) return undefined;\n    return values[currentBreakpoint];\n  }\n\n  return (\n    <BreakpointContext.Provider\n      value={{\n        width: width ?? 0,\n        breakpoint: currentBreakpoint,\n        breakpoints,\n        isAtLeast,\n        isBelow,\n        valueByBreakpoint,\n      }}\n    >\n      {/* If a targetRef is provided, that ref is already attached to an external element.\n          Otherwise, render a <div ref={ref}> to observe its size. 📐 */}\n      {targetRef ? children : <div ref={ref}>{children}</div>}\n    </BreakpointContext.Provider>\n  );\n};\n\n/**\n * Hook for accessing the BreakpointContext.\n * Throws an error if used outside of a BreakpointProvider. ⚠️\n */\nexport const useBreakpoint = (): BreakpointContextType => {\n  const context = useContext(BreakpointContext);\n  if (!context) {\n    throw new Error('useBreakpoint must be used within a BreakpointProvider');\n  }\n  return context;\n};\n\ninterface BreakpointConditionalProps {\n  /**\n   * Array of breakpoints at which the children should be displayed.\n   * E.g.: ['MD', 'LG'] renders children only if the current breakpoint is MD or LG.\n   */\n  show?: Breakpoint[];\n  /**\n   * The children are displayed only if the current breakpoint is at least this value.\n   * E.g.: isAtLeast=\"MD\" renders children for MD, LG, or XL.\n   */\n  isAtLeast?: Breakpoint;\n  /**\n   * The children are displayed only if the current breakpoint is below this value.\n   */\n  isBelow?: Breakpoint;\n  children: React.ReactNode;\n}\n\n/**\n * BreakpointConditional 🎨\n *\n * Renders its children only if all provided conditions regarding the current breakpoint are met.\n */\nexport const BreakpointConditional: React.FC<BreakpointConditionalProps> = ({\n  show,\n  isAtLeast: minSize,\n  isBelow: maxSize,\n  children,\n}) => {\n  const { breakpoint, isAtLeast: contextIsAtLeast, isBelow: contextIsBelow } = useBreakpoint();\n\n  let shouldRender = true;\n\n  if (show && breakpoint) {\n    shouldRender = shouldRender && show.includes(breakpoint);\n  }\n  if (minSize) {\n    shouldRender = shouldRender && contextIsAtLeast(minSize);\n  }\n  if (maxSize) {\n    shouldRender = shouldRender && contextIsBelow(maxSize);\n  }\n\n  return shouldRender ? <>{children}</> : null;\n};\n","export interface Logger {\n  debug(message: string, data?: Record<string, unknown>): void;\n  info(message: string, data?: Record<string, unknown>): void;\n  warn(message: string, data?: Record<string, unknown>): void;\n  error(message: string, data?: Record<string, unknown>): void;\n}\n\ninterface LogEntry {\n  level: 'debug' | 'info' | 'warn' | 'error';\n  message: string;\n  data?: Record<string, unknown>;\n  timestamp: string;\n  context: string;\n}\n\nclass BreakpointLogger implements Logger {\n  private shouldLog(level: string): boolean {\n    const isProduction = process.env.NODE_ENV === 'production';\n    if (isProduction) return level === 'error';\n    return true; // Log everything in non-production environments\n  }\n\n  private formatMessage(level: string, message: string, data?: Record<string, unknown>): void {\n    if (!this.shouldLog(level)) return;\n\n    const entry: LogEntry = {\n      level: level as LogEntry['level'],\n      message,\n      data,\n      timestamp: new Date().toISOString(),\n      context: 'BreakpointProvider',\n    };\n\n    // Use appropriate console method based on level\n    const consoleMethod = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log;\n\n    const isProduction = process.env.NODE_ENV === 'production';\n    // In production, only log errors. In non-production, log everything.\n    if (!isProduction || level === 'error') {\n      consoleMethod(`[${entry.context}] ${entry.message}`, entry.data || '');\n    }\n  }\n\n  debug(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('debug', message, data);\n  }\n\n  info(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('info', message, data);\n  }\n\n  warn(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('warn', message, data);\n  }\n\n  error(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('error', message, data);\n  }\n}\n\nexport const logger = new BreakpointLogger();\n"],"mappings":"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","names":["src_exports","__export","BreakpointConditional","BreakpointProvider","useBreakpoint","__toCommonJS","import_react","import_react_resize_detector","BreakpointLogger","level","message","data","entry","consoleMethod","logger","import_jsx_runtime","BreakpointContext","BreakpointProvider","breakpoints","children","targetRef","devMode","shouldLog","width","ref","sortedBreakpoints","key","value","a","b","seenValues","duplicates","entry","logger","currentBreakpoint","active","getBreakpointIndex","size","isAtLeast","isBelow","valueByBreakpoint","values","useBreakpoint","context","BreakpointConditional","show","minSize","maxSize","breakpoint","contextIsAtLeast","contextIsBelow","shouldRender"]}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import{createContext as P,useContext as w,useMemo as B,useEffect as k}from"react";import{useResizeDetector as C}from"react-resize-detector";import{Fragment as T,jsx as f}from"react/jsx-runtime";var v=P(void 0),A=({breakpoints:o,children:s,targetRef:p,devMode:d})=>{let a=d!==void 0?d:process.env.NODE_ENV!=="production",{width:r,ref:u}=C({targetRef:p}),e=B(()=>Object.entries(o).map(([t,i])=>[t,i]).sort(([,t],[,i])=>t-i),[o]);k(()=>{e.filter(([,i],c)=>e.findIndex(([,m])=>m===i)!==c).length>0&&a&&console.error("\u274C BreakpointProvider: Duplicate breakpoint values detected. This may lead to unexpected behavior.")},[e]);let n=B(()=>{if(r===void 0)return null;let t=null;return e.forEach(([i,c])=>{r>=c&&(t=i)}),t},[r,e]);k(()=>{(r===void 0||r===0)&&a&&console.error("\u274C BreakpointProvider: element width is undefined or 0")},[r,a]),k(()=>{r!==void 0&&r>0&&n===null&&(e.length>0&&r<e[0][1]?a&&console.error(`\u274C BreakpointProvider: The current width (${r}px) is less than the smallest breakpoint value (${e[0][1]}px). Consider including a breakpoint with a value of 0 to cover all cases.`):a&&console.error("\u274C BreakpointProvider: No breakpoint could be determined from the provided configuration. Check your breakpoints object."))},[r,n,e]);let l=t=>e.findIndex(([i])=>i===t),b=t=>n?l(n)>=l(t):!1,h=t=>n?l(n)<l(t):!1;function x(t){if(n)return t[n]}return f(v.Provider,{value:{width:r??0,breakpoint:n,breakpoints:o,isAtLeast:b,isBelow:h,valueByBreakpoint:x},children:p?s:f("div",{ref:u,children:s})})},R=()=>{let o=w(v);if(!o)throw new Error("useBreakpoint must be used within a BreakpointProvider");return o},E=({show:o,isAtLeast:s,isBelow:p,children:d})=>{let{breakpoint:a,isAtLeast:r,isBelow:u}=R(),e=!0;return o&&a&&(e=e&&o.includes(a)),s&&(e=e&&r(s)),p&&(e=e&&u(p)),e?f(T,{children:d}):null};export{E as BreakpointConditional,A as BreakpointProvider,R as useBreakpoint};
+import{createContext as R,useContext as P,useMemo as w,useEffect as B}from"react";import{useResizeDetector as C}from"react-resize-detector";var k=class{shouldLog(e){return process.env.NODE_ENV==="production"?e==="error":!0}formatMessage(e,o,u){if(!this.shouldLog(e))return;let i={level:e,message:o,data:u,timestamp:new Date().toISOString(),context:"BreakpointProvider"},r=e==="error"?console.error:e==="warn"?console.warn:console.log;(!(process.env.NODE_ENV==="production")||e==="error")&&r(`[${i.context}] ${i.message}`,i.data||"")}debug(e,o){this.formatMessage("debug",e,o)}info(e,o){this.formatMessage("info",e,o)}warn(e,o){this.formatMessage("warn",e,o)}error(e,o){this.formatMessage("error",e,o)}},p=new k;import{Fragment as E,jsx as m}from"react/jsx-runtime";var b=R(void 0),D=({breakpoints:a,children:e,targetRef:o,devMode:u})=>{let i=u!==void 0?u:process.env.NODE_ENV!=="production",{width:r,ref:l}=C({targetRef:o}),n=w(()=>Object.entries(a).map(([t,s])=>[t,s]).sort(([,t],[,s])=>t-s),[a]);B(()=>{let t=new Set,s=[];for(let c of n){let[,f]=c;t.has(f)?s.push(c):t.add(f)}s.length>0&&i&&p.error("Duplicate breakpoint values detected",{duplicates:s.map(([c,f])=>({key:c,value:f})),message:"This may lead to unexpected behavior"})},[n,i]);let d=w(()=>{if(r===void 0)return null;let t=null;return n.forEach(([s,c])=>{r>=c&&(t=s)}),t},[r,n]);B(()=>{(r===void 0||r===0)&&i&&p.error("Element width is undefined or 0",{width:r,message:"Element cannot be measured properly"})},[r,i]),B(()=>{r!==void 0&&r>0&&d===null&&(n.length>0&&r<n[0][1]?i&&p.error("Current width is less than smallest breakpoint",{currentWidth:r,smallestBreakpoint:n[0][1],smallestBreakpointName:n[0][0],suggestion:"Consider including a breakpoint with a value of 0 to cover all cases"}):i&&p.error("No breakpoint could be determined",{width:r,breakpointsConfig:n,suggestion:"Check your breakpoints object configuration"}))},[r,d,n]);let g=t=>n.findIndex(([s])=>s===t),v=t=>d?g(d)>=g(t):!1,h=t=>d?g(d)<g(t):!1;function x(t){if(d)return t[d]}return m(b.Provider,{value:{width:r??0,breakpoint:d,breakpoints:a,isAtLeast:v,isBelow:h,valueByBreakpoint:x},children:o?e:m("div",{ref:l,children:e})})},y=()=>{let a=P(b);if(!a)throw new Error("useBreakpoint must be used within a BreakpointProvider");return a},I=({show:a,isAtLeast:e,isBelow:o,children:u})=>{let{breakpoint:i,isAtLeast:r,isBelow:l}=y(),n=!0;return a&&i&&(n=n&&a.includes(i)),e&&(n=n&&r(e)),o&&(n=n&&l(o)),n?m(E,{children:u}):null};export{I as BreakpointConditional,D as BreakpointProvider,y as useBreakpoint};
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/BreakpointContext.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo, useEffect } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nexport type Breakpoint = string; // Allow arbitrary breakpoint names\n\nexport interface BreakpointContextType {\n  /** Current width of the observed element */\n  width: number;\n  /** Currently active breakpoint */\n  breakpoint: Breakpoint | null;\n  /** Defined breakpoints, e.g., { XS: 0, SM: 500, MD: 700, LG: 900, XL: 1100 } */\n  breakpoints: Record<Breakpoint, number>;\n  /**\n   * Returns `true` if the current breakpoint is greater than or equal to the provided one.\n   * E.g.: isAtLeast('MD') returns true if the current breakpoint is MD,\n   * LG, or XL.\n   */\n  isAtLeast: (size: Breakpoint) => boolean;\n  /**\n   * Returns `true` if the current breakpoint is less than the provided one.\n   */\n  isBelow: (size: Breakpoint) => boolean;\n  /**\n   * Returns a value from the mapping based on the current breakpoint.\n   * E.g.: valueByBreakpoint({ MD: 3, LG: 2 }) returns 3 for MD and 2 for LG.\n   */\n  valueByBreakpoint: <T>(values: Partial<Record<Breakpoint, T>>) => T | undefined;\n}\n\nconst BreakpointContext = createContext<BreakpointContextType | undefined>(undefined);\n\n/**\n * Instead of using React.RefObject<HTMLElement> (which is invariant),\n * we use a structural type that accepts any object with a `current: HTMLElement | null` property.\n */\nexport interface BreakpointProviderProps {\n  /** Defined breakpoints */\n  breakpoints: Record<Breakpoint, number>;\n  /** Child components that use the context */\n  children: React.ReactNode;\n  /**\n   * Optional: Provide a ref to the element to be observed.\n   * If not provided, an internal <div ref={...}> will be rendered.\n   */\n  targetRef?: { current: HTMLElement | null };\n  /**\n   * Optional: Enable development mode to show console warnings and errors.\n   * Defaults to false in production (NODE_ENV === 'production').\n   */\n  devMode?: boolean;\n}\n\n/**\n * BreakpointProvider 🚀\n *\n * Uses react-resize-detector to measure the width of an element and determine the current breakpoint\n * based on the provided breakpoints. Additionally, it provides utility functions (isAtLeast, isBelow)\n * and valueByBreakpoint.\n *\n * ⚠️ **Edge Cases / Warnings:**\n * - If the measured width is undefined or 0, an error is logged in the console.\n * - If the current width is less than the smallest breakpoint (and width > 0), an error is logged.\n * - If duplicate breakpoint values are detected, an error is logged.\n */\nexport const BreakpointProvider: React.FC<BreakpointProviderProps> = ({\n  breakpoints,\n  children,\n  targetRef,\n  devMode,\n}) => {\n  // Determine if we should log based on devMode prop or NODE_ENV\n  const shouldLog = devMode !== undefined ? devMode : process.env.NODE_ENV !== 'production';\n  // If a targetRef is provided, useResizeDetector observes that element; otherwise, an internal ref is created.\n  const { width, ref } = useResizeDetector({ targetRef });\n\n  // Sort the breakpoints in ascending order based on their numeric values. 🔢\n  const sortedBreakpoints = useMemo(() => {\n    return Object.entries(breakpoints)\n      .map(([key, value]) => [key, value] as [Breakpoint, number])\n      .sort(([, a], [, b]) => a - b);\n  }, [breakpoints]);\n\n  /** Check for duplicate breakpoint values */\n  useEffect(() => {\n    const duplicates = sortedBreakpoints.filter(\n      ([, value], index) => sortedBreakpoints.findIndex(([, v]) => v === value) !== index\n    );\n    if (duplicates.length > 0) {\n      if (shouldLog) {\n        console.error(\n          '❌ BreakpointProvider: Duplicate breakpoint values detected. This may lead to unexpected behavior.'\n        );\n      }\n    }\n  }, [sortedBreakpoints]);\n\n  // Determine the current breakpoint based on the measured width. 📏\n  const currentBreakpoint = useMemo(() => {\n    if (width === undefined) return null;\n    let active: Breakpoint | null = null;\n    sortedBreakpoints.forEach(([key, value]) => {\n      if (width >= value) {\n        active = key;\n      }\n    });\n    return active;\n  }, [width, sortedBreakpoints]);\n\n  // Log error if width is undefined or 0\n  useEffect(() => {\n    if (width === undefined || width === 0) {\n      if (shouldLog) {\n        console.error('❌ BreakpointProvider: element width is undefined or 0');\n      }\n    }\n  }, [width, shouldLog]);\n\n  // Log error if width > 0 but no breakpoint could be determined\n  useEffect(() => {\n    if (width !== undefined && width > 0 && currentBreakpoint === null) {\n      if (sortedBreakpoints.length > 0 && width < sortedBreakpoints[0][1]) {\n        if (shouldLog) {\n          console.error(\n            `❌ BreakpointProvider: The current width (${width}px) is less than the smallest breakpoint value (${sortedBreakpoints[0][1]}px). Consider including a breakpoint with a value of 0 to cover all cases.`\n          );\n        }\n      } else {\n        if (shouldLog) {\n          console.error(\n            '❌ BreakpointProvider: No breakpoint could be determined from the provided configuration. Check your breakpoints object.'\n          );\n        }\n      }\n    }\n  }, [width, currentBreakpoint, sortedBreakpoints]);\n\n  // Helper function to get the index of a breakpoint in the sorted array. 🔍\n  const getBreakpointIndex = (size: Breakpoint): number => {\n    return sortedBreakpoints.findIndex(([key]) => key === size);\n  };\n\n  const isAtLeast = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) >= getBreakpointIndex(size);\n  };\n\n  const isBelow = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) < getBreakpointIndex(size);\n  };\n\n  // Define valueByBreakpoint as a function declaration to avoid JSX parsing issues in TSX files. 🎨\n  function valueByBreakpoint<T>(values: Partial<Record<Breakpoint, T>>): T | undefined {\n    if (!currentBreakpoint) return undefined;\n    return values[currentBreakpoint];\n  }\n\n  return (\n    <BreakpointContext.Provider\n      value={{\n        width: width ?? 0,\n        breakpoint: currentBreakpoint,\n        breakpoints,\n        isAtLeast,\n        isBelow,\n        valueByBreakpoint,\n      }}\n    >\n      {/* If a targetRef is provided, that ref is already attached to an external element.\n          Otherwise, render a <div ref={ref}> to observe its size. 📐 */}\n      {targetRef ? children : <div ref={ref}>{children}</div>}\n    </BreakpointContext.Provider>\n  );\n};\n\n/**\n * Hook for accessing the BreakpointContext.\n * Throws an error if used outside of a BreakpointProvider. ⚠️\n */\nexport const useBreakpoint = (): BreakpointContextType => {\n  const context = useContext(BreakpointContext);\n  if (!context) {\n    throw new Error('useBreakpoint must be used within a BreakpointProvider');\n  }\n  return context;\n};\n\ninterface BreakpointConditionalProps {\n  /**\n   * Array of breakpoints at which the children should be displayed.\n   * E.g.: ['MD', 'LG'] renders children only if the current breakpoint is MD or LG.\n   */\n  show?: Breakpoint[];\n  /**\n   * The children are displayed only if the current breakpoint is at least this value.\n   * E.g.: isAtLeast=\"MD\" renders children for MD, LG, or XL.\n   */\n  isAtLeast?: Breakpoint;\n  /**\n   * The children are displayed only if the current breakpoint is below this value.\n   */\n  isBelow?: Breakpoint;\n  children: React.ReactNode;\n}\n\n/**\n * BreakpointConditional 🎨\n *\n * Renders its children only if all provided conditions regarding the current breakpoint are met.\n */\nexport const BreakpointConditional: React.FC<BreakpointConditionalProps> = ({\n  show,\n  isAtLeast: minSize,\n  isBelow: maxSize,\n  children,\n}) => {\n  const { breakpoint, isAtLeast: contextIsAtLeast, isBelow: contextIsBelow } = useBreakpoint();\n\n  let shouldRender = true;\n\n  if (show && breakpoint) {\n    shouldRender = shouldRender && show.includes(breakpoint);\n  }\n  if (minSize) {\n    shouldRender = shouldRender && contextIsAtLeast(minSize);\n  }\n  if (maxSize) {\n    shouldRender = shouldRender && contextIsBelow(maxSize);\n  }\n\n  return shouldRender ? <>{children}</> : null;\n};\n"],"mappings":"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","names":["createContext","useContext","useMemo","useEffect","useResizeDetector","Fragment","jsx","BreakpointContext","BreakpointProvider","breakpoints","children","targetRef","devMode","shouldLog","width","ref","sortedBreakpoints","key","value","a","b","index","v","currentBreakpoint","active","getBreakpointIndex","size","isAtLeast","isBelow","valueByBreakpoint","values","useBreakpoint","context","BreakpointConditional","show","minSize","maxSize","breakpoint","contextIsAtLeast","contextIsBelow","shouldRender"]}
+{"version":3,"sources":["../src/BreakpointContext.tsx","../src/utils/logger.ts"],"sourcesContent":["import React, { createContext, useContext, useMemo, useEffect } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport { logger } from './utils/logger';\n\nexport type Breakpoint = string; // Allow arbitrary breakpoint names\n\nexport interface BreakpointContextType {\n  /** Current width of the observed element */\n  width: number;\n  /** Currently active breakpoint */\n  breakpoint: Breakpoint | null;\n  /** Defined breakpoints, e.g., { XS: 0, SM: 500, MD: 700, LG: 900, XL: 1100 } */\n  breakpoints: Record<Breakpoint, number>;\n  /**\n   * Returns `true` if the current breakpoint is greater than or equal to the provided one.\n   * E.g.: isAtLeast('MD') returns true if the current breakpoint is MD,\n   * LG, or XL.\n   */\n  isAtLeast: (size: Breakpoint) => boolean;\n  /**\n   * Returns `true` if the current breakpoint is less than the provided one.\n   */\n  isBelow: (size: Breakpoint) => boolean;\n  /**\n   * Returns a value from the mapping based on the current breakpoint.\n   * E.g.: valueByBreakpoint({ MD: 3, LG: 2 }) returns 3 for MD and 2 for LG.\n   */\n  valueByBreakpoint: <T>(values: Partial<Record<Breakpoint, T>>) => T | undefined;\n}\n\nconst BreakpointContext = createContext<BreakpointContextType | undefined>(undefined);\n\n/**\n * Instead of using React.RefObject<HTMLElement> (which is invariant),\n * we use a structural type that accepts any object with a `current: HTMLElement | null` property.\n */\nexport interface BreakpointProviderProps {\n  /** Defined breakpoints */\n  breakpoints: Record<Breakpoint, number>;\n  /** Child components that use the context */\n  children: React.ReactNode;\n  /**\n   * Optional: Provide a ref to the element to be observed.\n   * If not provided, an internal <div ref={...}> will be rendered.\n   */\n  targetRef?: { current: HTMLElement | null };\n  /**\n   * Optional: Enable development mode to show console warnings and errors.\n   * Defaults to false in production (NODE_ENV === 'production').\n   */\n  devMode?: boolean;\n}\n\n/**\n * BreakpointProvider 🚀\n *\n * Uses react-resize-detector to measure the width of an element and determine the current breakpoint\n * based on the provided breakpoints. Additionally, it provides utility functions (isAtLeast, isBelow)\n * and valueByBreakpoint.\n *\n * ⚠️ **Edge Cases / Warnings:**\n * - If the measured width is undefined or 0, an error is logged in the console.\n * - If the current width is less than the smallest breakpoint (and width > 0), an error is logged.\n * - If duplicate breakpoint values are detected, an error is logged.\n */\nexport const BreakpointProvider: React.FC<BreakpointProviderProps> = ({\n  breakpoints,\n  children,\n  targetRef,\n  devMode,\n}) => {\n  // Determine if we should log based on devMode prop or NODE_ENV\n  const shouldLog = devMode !== undefined ? devMode : process.env.NODE_ENV !== 'production';\n  // If a targetRef is provided, useResizeDetector observes that element; otherwise, an internal ref is created.\n  const { width, ref } = useResizeDetector({ targetRef });\n\n  // Sort the breakpoints in ascending order based on their numeric values. 🔢\n  const sortedBreakpoints = useMemo(() => {\n    return Object.entries(breakpoints)\n      .map(([key, value]) => [key, value] as [Breakpoint, number])\n      .sort(([, a], [, b]) => a - b);\n  }, [breakpoints]);\n\n  /** Check for duplicate breakpoint values */\n  useEffect(() => {\n    const seenValues = new Set<number>();\n    const duplicates: Array<[Breakpoint, number]> = [];\n\n    for (const entry of sortedBreakpoints) {\n      const [, value] = entry;\n      if (seenValues.has(value)) {\n        duplicates.push(entry);\n      } else {\n        seenValues.add(value);\n      }\n    }\n\n    if (duplicates.length > 0) {\n      if (shouldLog) {\n        logger.error('Duplicate breakpoint values detected', {\n          duplicates: duplicates.map(([key, value]) => ({ key, value })),\n          message: 'This may lead to unexpected behavior',\n        });\n      }\n    }\n  }, [sortedBreakpoints, shouldLog]);\n\n  // Determine the current breakpoint based on the measured width. 📏\n  const currentBreakpoint = useMemo(() => {\n    if (width === undefined) return null;\n    let active: Breakpoint | null = null;\n    sortedBreakpoints.forEach(([key, value]) => {\n      if (width >= value) {\n        active = key;\n      }\n    });\n    return active;\n  }, [width, sortedBreakpoints]);\n\n  // Log error if width is undefined or 0\n  useEffect(() => {\n    if (width === undefined || width === 0) {\n      if (shouldLog) {\n        logger.error('Element width is undefined or 0', {\n          width,\n          message: 'Element cannot be measured properly',\n        });\n      }\n    }\n  }, [width, shouldLog]);\n\n  // Log error if width > 0 but no breakpoint could be determined\n  useEffect(() => {\n    if (width !== undefined && width > 0 && currentBreakpoint === null) {\n      if (sortedBreakpoints.length > 0 && width < sortedBreakpoints[0][1]) {\n        if (shouldLog) {\n          logger.error('Current width is less than smallest breakpoint', {\n            currentWidth: width,\n            smallestBreakpoint: sortedBreakpoints[0][1],\n            smallestBreakpointName: sortedBreakpoints[0][0],\n            suggestion: 'Consider including a breakpoint with a value of 0 to cover all cases',\n          });\n        }\n      } else {\n        if (shouldLog) {\n          logger.error('No breakpoint could be determined', {\n            width,\n            breakpointsConfig: sortedBreakpoints,\n            suggestion: 'Check your breakpoints object configuration',\n          });\n        }\n      }\n    }\n  }, [width, currentBreakpoint, sortedBreakpoints]);\n\n  // Helper function to get the index of a breakpoint in the sorted array. 🔍\n  const getBreakpointIndex = (size: Breakpoint): number => {\n    return sortedBreakpoints.findIndex(([key]) => key === size);\n  };\n\n  const isAtLeast = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) >= getBreakpointIndex(size);\n  };\n\n  const isBelow = (size: Breakpoint): boolean => {\n    if (!currentBreakpoint) return false;\n    return getBreakpointIndex(currentBreakpoint) < getBreakpointIndex(size);\n  };\n\n  // Define valueByBreakpoint as a function declaration to avoid JSX parsing issues in TSX files. 🎨\n  function valueByBreakpoint<T>(values: Partial<Record<Breakpoint, T>>): T | undefined {\n    if (!currentBreakpoint) return undefined;\n    return values[currentBreakpoint];\n  }\n\n  return (\n    <BreakpointContext.Provider\n      value={{\n        width: width ?? 0,\n        breakpoint: currentBreakpoint,\n        breakpoints,\n        isAtLeast,\n        isBelow,\n        valueByBreakpoint,\n      }}\n    >\n      {/* If a targetRef is provided, that ref is already attached to an external element.\n          Otherwise, render a <div ref={ref}> to observe its size. 📐 */}\n      {targetRef ? children : <div ref={ref}>{children}</div>}\n    </BreakpointContext.Provider>\n  );\n};\n\n/**\n * Hook for accessing the BreakpointContext.\n * Throws an error if used outside of a BreakpointProvider. ⚠️\n */\nexport const useBreakpoint = (): BreakpointContextType => {\n  const context = useContext(BreakpointContext);\n  if (!context) {\n    throw new Error('useBreakpoint must be used within a BreakpointProvider');\n  }\n  return context;\n};\n\ninterface BreakpointConditionalProps {\n  /**\n   * Array of breakpoints at which the children should be displayed.\n   * E.g.: ['MD', 'LG'] renders children only if the current breakpoint is MD or LG.\n   */\n  show?: Breakpoint[];\n  /**\n   * The children are displayed only if the current breakpoint is at least this value.\n   * E.g.: isAtLeast=\"MD\" renders children for MD, LG, or XL.\n   */\n  isAtLeast?: Breakpoint;\n  /**\n   * The children are displayed only if the current breakpoint is below this value.\n   */\n  isBelow?: Breakpoint;\n  children: React.ReactNode;\n}\n\n/**\n * BreakpointConditional 🎨\n *\n * Renders its children only if all provided conditions regarding the current breakpoint are met.\n */\nexport const BreakpointConditional: React.FC<BreakpointConditionalProps> = ({\n  show,\n  isAtLeast: minSize,\n  isBelow: maxSize,\n  children,\n}) => {\n  const { breakpoint, isAtLeast: contextIsAtLeast, isBelow: contextIsBelow } = useBreakpoint();\n\n  let shouldRender = true;\n\n  if (show && breakpoint) {\n    shouldRender = shouldRender && show.includes(breakpoint);\n  }\n  if (minSize) {\n    shouldRender = shouldRender && contextIsAtLeast(minSize);\n  }\n  if (maxSize) {\n    shouldRender = shouldRender && contextIsBelow(maxSize);\n  }\n\n  return shouldRender ? <>{children}</> : null;\n};\n","export interface Logger {\n  debug(message: string, data?: Record<string, unknown>): void;\n  info(message: string, data?: Record<string, unknown>): void;\n  warn(message: string, data?: Record<string, unknown>): void;\n  error(message: string, data?: Record<string, unknown>): void;\n}\n\ninterface LogEntry {\n  level: 'debug' | 'info' | 'warn' | 'error';\n  message: string;\n  data?: Record<string, unknown>;\n  timestamp: string;\n  context: string;\n}\n\nclass BreakpointLogger implements Logger {\n  private shouldLog(level: string): boolean {\n    const isProduction = process.env.NODE_ENV === 'production';\n    if (isProduction) return level === 'error';\n    return true; // Log everything in non-production environments\n  }\n\n  private formatMessage(level: string, message: string, data?: Record<string, unknown>): void {\n    if (!this.shouldLog(level)) return;\n\n    const entry: LogEntry = {\n      level: level as LogEntry['level'],\n      message,\n      data,\n      timestamp: new Date().toISOString(),\n      context: 'BreakpointProvider',\n    };\n\n    // Use appropriate console method based on level\n    const consoleMethod = level === 'error' ? console.error : level === 'warn' ? console.warn : console.log;\n\n    const isProduction = process.env.NODE_ENV === 'production';\n    // In production, only log errors. In non-production, log everything.\n    if (!isProduction || level === 'error') {\n      consoleMethod(`[${entry.context}] ${entry.message}`, entry.data || '');\n    }\n  }\n\n  debug(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('debug', message, data);\n  }\n\n  info(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('info', message, data);\n  }\n\n  warn(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('warn', message, data);\n  }\n\n  error(message: string, data?: Record<string, unknown>): void {\n    this.formatMessage('error', message, data);\n  }\n}\n\nexport const logger = new BreakpointLogger();\n"],"mappings":"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","names":["createContext","useContext","useMemo","useEffect","useResizeDetector","BreakpointLogger","level","message","data","entry","consoleMethod","logger","Fragment","jsx","BreakpointContext","createContext","BreakpointProvider","breakpoints","children","targetRef","devMode","shouldLog","width","ref","useResizeDetector","sortedBreakpoints","useMemo","key","value","a","b","useEffect","seenValues","duplicates","entry","logger","currentBreakpoint","active","getBreakpointIndex","size","isAtLeast","isBelow","valueByBreakpoint","values","useBreakpoint","context","useContext","BreakpointConditional","show","minSize","maxSize","breakpoint","contextIsAtLeast","contextIsBelow","shouldRender"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-resize-detector-context",
   "description": "React context that detects element width and provides responsive breakpoint utilities with conditional rendering components",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "author": "Christopher Schwarz",
   "license": "MIT",
   "keywords": [
@@ -64,7 +64,7 @@
       "release": true
     },
     "npm": {
-      "publish": false
+      "publish": true
     }
   },
   "engines": {