match-breakpoint 1.0.0-canary.0 → 1.0.0-canary.1

package/README.md

@@ -14,15 +14,15 @@ A library of optimized React components and hooks for matching screen widths.
 # Installation
 
 ```bash
-yarn add match-breakpoint@latest
+yarn add match-breakpoint
 
 // or
 
-npm install match-breakpoint@latest
+npm install match-breakpoint
 
 // or
 
-pnpm install match-breakpoint@latest
+pnpm install match-breakpoint
 ```
 
 # Advantages
@@ -31,7 +31,7 @@ pnpm install match-breakpoint@latest
 
 ❇️ ✨ Using `Breakpoint` components allows you to avoid cumulative layout shift.
 
-❇️ 💫 Conditional content display is compatible with most CSS frameworks, preprocessors, etc. In particular, it's possible to use the Tailwind CSS class name preset out of the box.
+❇️ 🧩 Conditional content display is compatible with most CSS frameworks, preprocessors, etc. In particular, it's possible to use the Tailwind CSS class name preset out of the box.
 
 ❇️ 🛡️ The library supports breakpoint typing used in all components and hooks from one place.
 
@@ -54,11 +54,9 @@ Next you need to define the breakpoints that will be used in the application:
 
 ```tsx
 const BREAKPOINTS = {
-  // …
   md: '768px',
   lg: '1024px',
   xl: '1280px',
-  // …
 };
 
 const App: FC = () => (
@@ -75,11 +73,9 @@ You can also pass a value from some configuration as breakpoints, for example fr
 import tailwindConfig from '../../tailwind.config.ts';
 
 const DEFAULT_BREAKPOINTS = {
-  // …
   md: '768px',
   lg: '1024px',
   xl: '1280px',
-  // …
 };
 
 const breakpoints = tailwindConfig.theme?.screens ?? DEFAULT_BREAKPOINTS;
@@ -97,7 +93,7 @@ After that you can use the `Breakpoint` component, for example:
 ```tsx
 import { Breakpoint } from 'match-breakpoint';
 
-const Content: FC = () => (
+const Page: FC = () => (
   <>
     <Breakpoint size="md">Desktop Device Content</Breakpoint>
 
@@ -108,19 +104,15 @@ const Content: FC = () => (
 );
 ```
 
-Or using the `useBreakpoint` hook:
+Or this using the `useBreakpoint` hook:
 
 ```tsx
 import { useBreakpoint } from 'match-breakpoint';
 
 const Content: FC = () => {
-  const isScreenMinMd = useBreakpoint('md');
+  const isDesktop = useBreakpoint('md');
 
-  if (isScreenMinMd) {
-    return 'Desktop Device Content';
-  }
-
-  return 'Mobile Device Content';
+  return isDesktop ? 'Desktop Device Content' : 'Mobile Device Content';
 };
 ```
 
@@ -128,7 +120,7 @@ const Content: FC = () => {
 
 ## BreakpointsProvider
 
-Defined breakpoint contexts.
+Defines breakpoint contexts. Required for the library to function.
 
 ### Usage:
 
@@ -136,18 +128,17 @@ Example:
 
 ```tsx
 const BREAKPOINTS = {
-  md: 768, // Same as '768px'
-  lg: '1024px',
-  xl: {
-    min: '1280px',
-    minClassName: 'max-xl:hidden',
+  sm: 640, // Same as '640px'
+  md: '768px',
+  lg: {
+    value: 1024, // same as '1024px'
+    minClassName: 'max-lg:hidden',
+    maxClassName: 'lg:hidden',
   },
-  combined: {
-    max: '768px',
-    maxClassName: 'md:hidden',
-
-    min: '1280px',
+  xl: {
+    value: '1280px',
     minClassName: 'max-xl:hidden',
+    maxClassName: 'xl:hidden',
   },
 };
 
@@ -161,9 +152,166 @@ const App: FC = () => (
 
 ### Properties:
 
-| Property             | Type                                                 | Default value                                       | Description                                                                                                                                |
-| -------------------- | ---------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| breakpoints          | `Record<string, string \| number \| BreakpointData>` | -                                                   | Defines the set of breakpoints used in the application.                                                                                    |
-| classNamePreset      | `'tailwind' \| undefined`                            | `undefined`                                         | Defines a preset of class names used to hide elements.                                                                                     |
-| mergeClassesFunction | `MergeClassesFunction \| undefined`                  | `(...classes) => classes.filter(Boolean).join(' ')` | Defines a function for merging classes when adding them to elements. For example, you can pass a function to prevent class name conflicts. |
-| children             | `ReactNode`                                          | -                                                   | Required child elements.                                                                                                                   |
+#### 1. breakpoints
+
+Defines the set of breakpoints used in the application. The property is required.
+
+**Type:** `Record<string, string | number | BreakpointData>`
+
+**Default value:** —
+
+#### 2. cssPreset
+
+Preset of class names added to elements for conditional display. The property is optional.
+
+**Type:** `'tailwind' | undefined`
+
+**Default value:** `undefined`
+
+#### 3. mergeClassesFunction
+
+Function for merging class names when displaying elements conditionally. The property is optional.
+
+**Type:** `MergeClassesFunction | undefined`
+
+**Default value:** `(...classes) => classes.filter(Boolean).join(' ')`
+
+#### 4. children
+
+Child elements. The property is required.
+
+**Type:** `ReactNode`
+
+**Default value:** —
+
+## Breakpoint
+
+Renders content based on the current screen size.
+
+### Usage:
+
+Example:
+
+```tsx
+const Page: FC = () => (
+  <>
+    <Breakpoint size="md">Desktop Device Content</Breakpoint>
+
+    <Breakpoint size="md" matchTo="max">
+      Mobile Device Content
+    </Breakpoint>
+  </>
+);
+```
+
+### Properties:
+
+#### 1. size
+
+The breakpoint size specified when setting the `breakpoints` property in the `BreakpointsProvider` component. The property is required.
+
+**Type:** `ScreenSize`
+
+**Default value:** —
+
+#### 2. matchTo
+
+Sets which side of the breakpoint the match is made on. The property is optional.
+
+**Type:** `'min' | 'max' | undefined`
+
+**Default value:** `'min'`
+
+#### 3. isDefaultMatches
+
+Default match value that determines the match until handlers are initialized. The property is optional.
+
+**Type:** `boolean | undefined`
+
+**Default value:** `true`
+
+#### 4. children
+
+Child elements. The property is required.
+
+**Type:** `ReactNode`
+
+**Default value:** —
+
+#### 5. as
+
+Specifies which element the current `Breakpoint` should be rendered as. Once specified, props for a specified element can be passed. The property is optional.
+
+**Type:** `ElementType | undefined`
+
+**Default value:** `Fragment`
+
+# Hooks
+
+## useBreakpoint
+
+Checks whether the breakpoint matches the current screen size.
+
+### Usage:
+
+Example:
+
+```tsx
+import { useBreakpoint } from 'match-breakpoint';
+
+const Content: FC = () => {
+  const isDesktop = useBreakpoint('md');
+
+  return isDesktop ? 'Desktop Device Content' : 'Mobile Device Content';
+};
+```
+
+### Parameters
+
+#### 1. size
+
+The breakpoint size specified when setting the `breakpoints` property in the `BreakpointsProvider` component. The parameter is required.
+
+**Type:** `ScreenSize`
+
+**Default value:** —
+
+#### 2. matchTo
+
+Sets which side of the breakpoint the match is made on. The parameter is optional.
+
+**Type:** `'min' | 'max' | undefined`
+
+**Default value:** `'min'`
+
+#### 3. defaultValue
+
+Default match value that determines the match until handlers are initialized. The parameter is optional.
+
+**Type:** `boolean | undefined`
+
+**Default value:** `true`
+
+# Typing through an application
+
+You can typify breakpoint names and values by extending the `Breakpoints` interface:
+
+```tsx
+declare module 'match-breakpoint' {
+  interface Breakpoints {
+    sm: BreakpointData;
+    md: BreakpointData;
+  }
+}
+```
+
+Then, when using the `BreakpointProvider` and `Breakpoint` components and the `useBreakpoint` hook, this typing will be applied to their properties and parameters:
+
+```tsx
+const Content: FC = () => {
+  const isDesktop = useBreakpoint('lg'); // ⛔️ TypeError: Type '"lg"' is not assignable to type '"sm" | "md"'
+
+  // ⛔️ TypeError: Type '"lg"' is not assignable to type '"sm" | "md"'
+  return <Breakpoint size="lg">{/* … */}</Breakpoint>;
+};
+```

package/dist/components/Breakpoint/Breakpoint.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ExoticComponent, type FC, Fragment, type LegacyRef, type ReactNode } from 'react';
+import { type MatchTo, type ScreenSize } from '../../types/breakpoints';
+type FragmentFC = typeof Fragment;
+type ExtendedElementType = ElementType | ExoticComponent;
+type BreakpointHTMLElement<TElement extends ElementType> = TElement extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[TElement] : HTMLElement;
+type BreakpointLegacyRef<TElement extends ElementType> = LegacyRef<BreakpointHTMLElement<TElement>>;
+type BreakpointControlledProps<TElement extends ElementType> = {
+    as?: TElement;
+    size: ScreenSize;
+    matchTo?: MatchTo;
+    isDefaultMatches?: boolean;
+    children: ReactNode;
+};
+type BreakpointNativeProps<TElement extends ExtendedElementType> = TElement extends ExoticComponent ? ComponentPropsWithoutRef<TElement> : Omit<ComponentPropsWithoutRef<TElement>, keyof BreakpointControlledProps<TElement>>;
+type BreakpointProps<TElement extends ElementType> = BreakpointNativeProps<TElement> & BreakpointControlledProps<TElement>;
+type BreakpointPropsWithRef<TElement extends ElementType> = BreakpointProps<TElement> & {
+    ref?: BreakpointLegacyRef<TElement>;
+};
+interface BreakpointFunctionComponent extends FC {
+    <TElement extends ElementType = FragmentFC>(props: BreakpointPropsWithRef<TElement>): ReactNode;
+}
+declare const Breakpoint: BreakpointFunctionComponent;
+export { Breakpoint };

package/dist/{src/components → components}/Breakpoint/Breakpoint.js

@@ -52,12 +52,22 @@ function _object_spread_props(target, source) {
 }
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
     if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
             if (excluded.indexOf(key) >= 0) continue;
             if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
             target[key] = source[key];
@@ -67,12 +77,11 @@ function _object_without_properties(source, excluded) {
 }
 function _object_without_properties_loose(source, excluded) {
     if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
     for(i = 0; i < sourceKeys.length; i++){
         key = sourceKeys[i];
         if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
         target[key] = source[key];
     }
     return target;
@@ -80,17 +89,16 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Children, forwardRef, Fragment } from "react";
 import { BreakpointChild } from "./BreakpointChild";
-import { useMatchBreakpoint } from "../BreakpointsProvider";
-const DEFAULT_COMPONENT = Fragment;
-const BreakpointRenderFunction = (props, ref)=>{
-    const { as = DEFAULT_COMPONENT, size, matchTo = 'min', isDefaultMatches = true, children } = props, componentProps = _object_without_properties(props, [
+import { useBreakpoint } from "../BreakpointsProvider";
+const _Breakpoint = (props, ref)=>{
+    const { as = Fragment, size, matchTo = 'min', isDefaultMatches = true, children } = props, componentProps = _object_without_properties(props, [
         "as",
         "size",
         "matchTo",
         "isDefaultMatches",
         "children"
     ]);
-    const shouldRenderChildren = useMatchBreakpoint(size, matchTo, isDefaultMatches);
+    const shouldRenderChildren = useBreakpoint(size, matchTo, isDefaultMatches);
     if (!shouldRenderChildren) return null;
     return Children.map(children, (child)=>/*#__PURE__*/ _jsx(BreakpointChild, _object_spread_props(_object_spread({}, componentProps), {
             ref: ref,
@@ -100,4 +108,5 @@ const BreakpointRenderFunction = (props, ref)=>{
             child: child
         })));
 };
-export const Breakpoint = /*#__PURE__*/ forwardRef(BreakpointRenderFunction);
+const Breakpoint = /*#__PURE__*/ forwardRef(_Breakpoint);
+export { Breakpoint };

package/dist/components/Breakpoint/BreakpointChild.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ExoticComponent, type FC, type LegacyRef, type ReactNode } from 'react';
+import { type MatchTo, type ScreenSize } from '../../types/breakpoints';
+type ExtendedElementType = ElementType | ExoticComponent;
+type BreakpointChildHTMLElement<TElement extends ElementType> = TElement extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[TElement] : HTMLElement;
+type BreakpointChildLegacyRef<TElement extends ElementType> = LegacyRef<BreakpointChildHTMLElement<TElement>>;
+type BreakpointChildControlledProps<TElement extends ElementType> = {
+    as: TElement;
+    size: ScreenSize;
+    matchTo: MatchTo;
+    child: ReactNode;
+};
+type BreakpointChildNativeProps<TElement extends ExtendedElementType> = TElement extends ExoticComponent ? ComponentPropsWithoutRef<TElement> : Omit<ComponentPropsWithoutRef<TElement>, keyof BreakpointChildControlledProps<TElement>>;
+type BreakpointChildProps<TElement extends ElementType> = BreakpointChildNativeProps<TElement> & BreakpointChildControlledProps<TElement>;
+type BreakpointChildPropsWithRef<TElement extends ElementType> = BreakpointChildProps<TElement> & {
+    ref?: BreakpointChildLegacyRef<TElement>;
+};
+interface BreakpointChildFunctionComponent extends FC {
+    <TElement extends ElementType>(props: BreakpointChildPropsWithRef<TElement>): ReactNode;
+}
+declare const BreakpointChild: BreakpointChildFunctionComponent;
+export { BreakpointChild };

package/dist/{src/components → components}/Breakpoint/BreakpointChild.js

@@ -52,12 +52,22 @@ function _object_spread_props(target, source) {
 }
 function _object_without_properties(source, excluded) {
     if (source == null) return {};
-    var target = _object_without_properties_loose(source, excluded);
-    var key, i;
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
     if (Object.getOwnPropertySymbols) {
-        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceSymbolKeys.length; i++){
-            key = sourceSymbolKeys[i];
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
             if (excluded.indexOf(key) >= 0) continue;
             if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
             target[key] = source[key];
@@ -67,89 +77,81 @@ function _object_without_properties(source, excluded) {
 }
 function _object_without_properties_loose(source, excluded) {
     if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
     for(i = 0; i < sourceKeys.length; i++){
         key = sourceKeys[i];
         if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
         target[key] = source[key];
     }
     return target;
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cloneElement, forwardRef, Fragment, isValidElement } from "react";
-import { getMaxScreenWidth, getMinScreenWidth } from "../../utils/screen-width";
+import { ensurePx } from "../../utils/screen-width";
 import { useBreakpointsContext } from "../BreakpointsProvider/BreakpointsProvider";
-const DEFAULT_COMPONENT = Fragment;
 const CLASS_NAME_PRESETS = {
     tailwind: {
-        maxClassName: 'min-[var(--max-screen-width)]:hidden',
-        minClassName: 'max-[var(--min-screen-width)]:hidden'
+        maxClassName: 'min-[var(--breakpoint)]:hidden',
+        minClassName: 'max-[var(--breakpoint)]:hidden'
     }
 };
-const buildProps = (options)=>{
-    const { ref, initialProps, matchTo, breakpoint, classNamePreset, mergeClassesFunction } = options;
-    const classNamePresetData = classNamePreset !== undefined ? CLASS_NAME_PRESETS[classNamePreset] : null;
-    if (matchTo === 'max') {
-        var _breakpoint_data_maxClassName;
-        return _object_spread_props(_object_spread({}, initialProps), {
-            ref,
-            style: _object_spread_props(_object_spread({}, initialProps === null || initialProps === void 0 ? void 0 : initialProps.style), {
-                ['--max-screen-width']: getMaxScreenWidth(breakpoint.data)
-            }),
-            className: mergeClassesFunction(initialProps === null || initialProps === void 0 ? void 0 : initialProps.className, typeof breakpoint.data === 'object' ? (_breakpoint_data_maxClassName = breakpoint.data.maxClassName) !== null && _breakpoint_data_maxClassName !== void 0 ? _breakpoint_data_maxClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.maxClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.maxClassName)
-        });
-    }
-    var _breakpoint_data_minClassName;
+const buildComponentProps = (options)=>{
+    const { ref, initialProps, matchTo, breakpoint, cssPreset, mergeClassesFunction } = options;
+    const preset = cssPreset ? CLASS_NAME_PRESETS[cssPreset] : null;
+    const presetKey = `${matchTo}ClassName`;
+    const className = typeof breakpoint.data === 'object' ? breakpoint.data[presetKey] || (preset === null || preset === void 0 ? void 0 : preset[presetKey]) : preset === null || preset === void 0 ? void 0 : preset[presetKey];
     return _object_spread_props(_object_spread({}, initialProps), {
         ref,
         style: _object_spread_props(_object_spread({}, initialProps === null || initialProps === void 0 ? void 0 : initialProps.style), {
-            ['--min-screen-width']: getMinScreenWidth(breakpoint.data)
+            ['--breakpoint']: ensurePx(breakpoint.data)
         }),
-        className: mergeClassesFunction(initialProps === null || initialProps === void 0 ? void 0 : initialProps.className, typeof breakpoint.data === 'object' ? (_breakpoint_data_minClassName = breakpoint.data.minClassName) !== null && _breakpoint_data_minClassName !== void 0 ? _breakpoint_data_minClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.minClassName : classNamePresetData === null || classNamePresetData === void 0 ? void 0 : classNamePresetData.minClassName)
+        className: mergeClassesFunction(initialProps === null || initialProps === void 0 ? void 0 : initialProps.className, className)
     });
 };
-const BreakpointChildRenderFunction = (props, ref)=>{
-    const { as: Component = DEFAULT_COMPONENT, size, matchTo, child } = props, componentProps = _object_without_properties(props, [
+const _BreakpointChild = (props, ref)=>{
+    const context = useBreakpointsContext();
+    const { as: Component, size, matchTo, child } = props, componentProps = _object_without_properties(props, [
         "as",
         "size",
         "matchTo",
         "child"
     ]);
-    const { breakpoints, classNamePreset, mergeClassesFunction } = useBreakpointsContext();
+    const { breakpoints, cssPreset, mergeClassesFunction } = context;
     const breakpoint = breakpoints[size];
     if (!breakpoint) {
         throw new Error(`Breakpoint with screen size "${size}" is not defined`);
     }
     if (Component === Fragment && /*#__PURE__*/ isValidElement(child)) {
-        return /*#__PURE__*/ cloneElement(child, buildProps({
+        return /*#__PURE__*/ cloneElement(child, buildComponentProps({
             initialProps: child.props,
             matchTo,
             breakpoint,
-            classNamePreset,
+            cssPreset,
             mergeClassesFunction
         }));
     }
     if (Component !== Fragment) {
-        return /*#__PURE__*/ _jsx(Component, _object_spread_props(_object_spread({}, buildProps({
-            initialProps: componentProps,
+        return /*#__PURE__*/ _jsx(Component, _object_spread({}, buildComponentProps({
+            initialProps: _object_spread_props(_object_spread({}, componentProps), {
+                children: child
+            }),
             ref,
             matchTo,
             breakpoint,
-            classNamePreset,
+            cssPreset,
             mergeClassesFunction
-        })), {
-            children: child
-        }));
+        })));
     }
-    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({}, buildProps({
+    return /*#__PURE__*/ _jsx("div", _object_spread({}, buildComponentProps({
+        initialProps: {
+            children: child
+        },
         matchTo,
         breakpoint,
-        classNamePreset,
+        cssPreset,
         mergeClassesFunction
-    })), {
-        children: child
-    }));
+    })));
 };
-export const BreakpointChild = /*#__PURE__*/ forwardRef(BreakpointChildRenderFunction);
+const BreakpointChild = /*#__PURE__*/ forwardRef(_BreakpointChild);
+export { BreakpointChild };

package/dist/components/Breakpoint/index.d.ts

@@ -0,0 +1 @@
+export { Breakpoint } from '../../components/Breakpoint/Breakpoint';

package/dist/components/Breakpoint/index.js

@@ -0,0 +1 @@
+export { Breakpoint } from "./Breakpoint";

package/dist/{src/components → components}/BreakpointsProvider/BreakpointProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
-import { getMinScreenWidth } from "../../utils/screen-width";
+import { ensurePx } from "../../utils/screen-width";
 export const DEFAULT_BREAKPOINT_CONTEXT = {
     isMatches: null
 };
@@ -8,7 +8,7 @@ export const BreakpointProvider = (props)=>{
     const { breakpoint, children } = props;
     const { Provider } = breakpoint.context;
     const [isMatches, setIsMatches] = useState(DEFAULT_BREAKPOINT_CONTEXT.isMatches);
-    const minScreenWidth = getMinScreenWidth(breakpoint.data);
+    const minScreenWidth = ensurePx(breakpoint.data);
     useEffect(()=>{
         const media = window.matchMedia(`(min-width: ${minScreenWidth})`);
         setIsMatches(media.matches);
@@ -22,13 +22,13 @@ export const BreakpointProvider = (props)=>{
     }, [
         minScreenWidth
     ]);
-    const value = useMemo(()=>({
+    const context = useMemo(()=>({
             isMatches
         }), [
         isMatches
     ]);
     return /*#__PURE__*/ _jsx(Provider, {
-        value: value,
+        value: context,
         children: children
     });
 };

package/dist/{src/components → components}/BreakpointsProvider/BreakpointsProvider.d.ts

@@ -1,20 +1,20 @@
 import { type FC, type ReactNode } from 'react';
 import { type Breakpoints, type MatchTo, type ScreenSize } from '../../types/breakpoints';
-import { type ClassNamePreset, type MergeClassesFunction } from '../../types/styles';
+import { type CSSPresetName, type MergeClassesFunction } from '../../types/styles';
 import { type ContextualizedBreakpointData } from '../../components/BreakpointsProvider/BreakpointProvider';
 type ContextualizedBreakpoints = Record<ScreenSize, ContextualizedBreakpointData>;
 type BreakpointsContext = {
     breakpoints: ContextualizedBreakpoints;
-    classNamePreset?: ClassNamePreset;
+    cssPreset?: CSSPresetName;
     mergeClassesFunction: MergeClassesFunction;
 };
 type BreakpointsProviderProps = {
     breakpoints: Breakpoints;
-    classNamePreset?: ClassNamePreset;
+    cssPreset?: CSSPresetName;
     children: ReactNode;
     mergeClassesFunction?: MergeClassesFunction;
 };
 export declare const useBreakpointsContext: () => BreakpointsContext;
-export declare const useMatchBreakpoint: (size: ScreenSize, matchTo?: MatchTo, defaultValue?: boolean) => boolean;
-export declare const MatchBreakpointProvider: FC<BreakpointsProviderProps>;
+export declare const useBreakpoint: (size: ScreenSize, matchTo?: MatchTo, defaultValue?: boolean) => boolean;
+export declare const BreakpointsProvider: FC<BreakpointsProviderProps>;
 export {};

package/dist/{src/components → components}/BreakpointsProvider/BreakpointsProvider.js

@@ -59,7 +59,7 @@ const DEFAULT_BREAKPOINTS_CONTEXT = {
 };
 const BreakpointsContextInstance = /*#__PURE__*/ createContext(DEFAULT_BREAKPOINTS_CONTEXT);
 export const useBreakpointsContext = ()=>useContext(BreakpointsContextInstance);
-export const useMatchBreakpoint = (size, matchTo = 'min', defaultValue = false)=>{
+export const useBreakpoint = (size, matchTo = 'min', defaultValue = false)=>{
     const { breakpoints } = useBreakpointsContext();
     const breakpoint = breakpoints[size];
     if (!breakpoint) {
@@ -69,26 +69,26 @@ export const useMatchBreakpoint = (size, matchTo = 'min', defaultValue = false)=
     if (isMatches === null) return defaultValue;
     return matchTo === 'min' ? isMatches : !isMatches;
 };
-export const MatchBreakpointProvider = (props)=>{
-    const { breakpoints, classNamePreset, children, mergeClassesFunction = DEFAULT_BREAKPOINTS_CONTEXT.mergeClassesFunction } = props;
-    const value = useMemo(()=>({
+export const BreakpointsProvider = (props)=>{
+    const { breakpoints, cssPreset, children, mergeClassesFunction = DEFAULT_BREAKPOINTS_CONTEXT.mergeClassesFunction } = props;
+    const context = useMemo(()=>({
             breakpoints: Object.keys(breakpoints).reduce((acc, key)=>_object_spread_props(_object_spread({}, acc), {
                     [key]: {
                         data: breakpoints[key],
                         context: /*#__PURE__*/ createContext(_object_spread({}, DEFAULT_BREAKPOINT_CONTEXT))
                     }
                 }), {}),
-            classNamePreset,
+            cssPreset,
             mergeClassesFunction
         }), [
         breakpoints,
-        classNamePreset,
+        cssPreset,
         mergeClassesFunction
     ]);
     return /*#__PURE__*/ _jsx(BreakpointsContextInstance.Provider, {
-        value: value,
-        children: Object.keys(value.breakpoints).reduce((acc, size)=>/*#__PURE__*/ _jsx(BreakpointProvider, {
-                breakpoint: value.breakpoints[size],
+        value: context,
+        children: Object.keys(context.breakpoints).reduce((acc, size)=>/*#__PURE__*/ _jsx(BreakpointProvider, {
+                breakpoint: context.breakpoints[size],
                 children: acc
             }), children)
     });

package/dist/components/BreakpointsProvider/index.d.ts

@@ -0,0 +1 @@
+export { BreakpointsProvider, useBreakpoint, } from '../../components/BreakpointsProvider/BreakpointsProvider';

package/dist/components/BreakpointsProvider/index.js

@@ -0,0 +1 @@
+export { BreakpointsProvider, useBreakpoint } from "./BreakpointsProvider";

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/Breakpoint';
+export * from './components/BreakpointsProvider';
+export { type BreakpointData, type Breakpoints } from './types/breakpoints';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components/Breakpoint";
+export * from "./components/BreakpointsProvider";

package/dist/types/breakpoints.d.ts

@@ -0,0 +1,10 @@
+export type MatchTo = 'min' | 'max';
+export type BreakpointDataDetails = {
+    value: string | number;
+    minClassName?: string;
+    maxClassName?: string;
+};
+export type BreakpointData = number | string | BreakpointDataDetails;
+export interface Breakpoints {
+}
+export type ScreenSize = keyof Breakpoints extends never ? string : keyof Breakpoints;

package/dist/types/styles.d.ts

@@ -0,0 +1,6 @@
+export type CSSPresetName = 'tailwind';
+type ClassDictionary = Record<string, unknown>;
+type ClassArray = ClassValue[];
+type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined;
+export type MergeClassesFunction = (...classes: ClassValue[]) => string;
+export {};

package/dist/utils/screen-width.d.ts

@@ -0,0 +1,2 @@
+import { type BreakpointData } from '../types/breakpoints';
+export declare const ensurePx: (data: BreakpointData) => string;

package/dist/utils/screen-width.js

@@ -0,0 +1,6 @@
+export const ensurePx = (data)=>{
+    if (typeof data === 'string') return data;
+    if (typeof data === 'number') return `${data}px`;
+    if (typeof data.value === 'string') return data.value;
+    return `${data.value}px`;
+};

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "match-breakpoint",
-  "version": "1.0.0-canary.0",
-  "description": "",
+  "version": "1.0.0-canary.1",
+  "description": "A library of optimized React components and hooks for matching screen widths",
   "license": "MIT",
   "author": "Oleg Putseiko <oleg.putseiko@gmail.com> (https://github.com/oleg-putseiko)",
-  "keywords": [],
+  "keywords": [
+    "react",
+    "typescript",
+    "breakpoint",
+    "media-query",
+    "match-media",
+    "performance",
+    "tailwindcss"
+  ],
   "homepage": "https://github.com/oleg-putseiko/match-breakpoint",
   "repository": {
     "type": "git",
@@ -13,32 +21,41 @@
   "bugs": {
     "url": "https://github.com/oleg-putseiko/match-breakpoint/issues"
   },
-  "main": "dist/src/index.js",
+  "main": "dist/index.js",
   "files": [
-    "dist/src/components/**/*",
-    "dist/src/utils/**/*",
-    "dist/src/index.js"
+    "dist/components/**/*.d.ts",
+    "dist/components/**/*.js",
+    "dist/types/**/*.d.ts",
+    "dist/utils/**/*.d.ts",
+    "dist/utils/**/*.js",
+    "dist/index.d.ts",
+    "dist/index.js"
   ],
-  "exports": "./dist/src/index.js",
+  "exports": "./dist/index.js",
   "scripts": {
-    "build": "swc ./src/**/* -d dist && tsc --emitDeclarationOnly && tsc-alias",
+    "build": "swc src -d dist --strip-leading-paths && tsc --emitDeclarationOnly && tsc-alias",
     "format": "prettier -c .",
     "format:fix": "prettier -w .",
     "lint": "eslint ./src/**/*.{js,ts,tsx,json}",
     "lint:fix": "eslint ./src/**/*.{js,ts,tsx,json} --fix && yarn format:fix",
     "lint:strict": "eslint ./src/**/*.{js,ts,tsx,json} --max-warnings=0 && yarn format",
     "prepare": "husky install | chmod +x ./.husky/*",
-    "test": "jest",
     "typecheck": "tsc --noEmit --incremental false"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "tailwindcss": ">=3.2.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@commitlint/cli": "^18.2.0",
     "@commitlint/config-conventional": "^18.1.0",
-    "@swc/cli": "^0.5.1",
+    "@swc/cli": "^0.5.2",
     "@swc/core": "^1.9.3",
     "@types/react": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
@@ -57,8 +74,8 @@
     "typescript": "~5.2.2"
   },
   "engines": {
-    "node": "18.18.0",
-    "yarn": "3.6.4"
+    "node": ">=18.18.0",
+    "yarn": "^3.6.4"
   },
   "volta": {
     "node": "18.18.0",

package/dist/src/components/Breakpoint/Breakpoint.d.ts

@@ -1,17 +0,0 @@
-import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from 'react';
-import { type Breakpoints, type MatchTo, type ScreenSize } from '../../types/breakpoints';
-import { type ExtractRef } from '../../types/react';
-type BreakpointControlledProps<T extends ElementType> = {
-    as?: T;
-    size: ScreenSize;
-    breakpoints?: Breakpoints;
-    matchTo?: MatchTo;
-    isDefaultMatches?: boolean;
-    children: ReactNode;
-};
-type BreakpointComponentNativeProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, keyof BreakpointControlledProps<T>>;
-type BreakpointProps<T extends ElementType> = BreakpointComponentNativeProps<T> & BreakpointControlledProps<T>;
-export declare const Breakpoint: <T extends ElementType = import("react").ExoticComponent<{
-    children?: ReactNode;
-}>>(props: BreakpointProps<T>, ref: ExtractRef<BreakpointComponentNativeProps<T>>) => import("react/jsx-runtime").JSX.Element[] | null | undefined;
-export {};

package/dist/src/components/Breakpoint/BreakpointChild.d.ts

@@ -1,15 +0,0 @@
-import { type ComponentProps, type ElementType, type ReactNode } from 'react';
-import { type MatchTo, type ScreenSize } from '../../types/breakpoints';
-import { type ExtractRef } from '../../types/react';
-type ControlledProps<E extends ElementType> = {
-    as?: E;
-    size: ScreenSize;
-    matchTo: MatchTo;
-    child: ReactNode;
-};
-type ComponentNativeProps<E extends ElementType> = Omit<ComponentProps<E>, 'children' | keyof ControlledProps<E>>;
-type TailwindBreakpointProps<E extends ElementType> = ComponentNativeProps<E> & ControlledProps<E>;
-export declare const BreakpointChild: <T extends ElementType = import("react").ExoticComponent<{
-    children?: ReactNode;
-}>>(props: TailwindBreakpointProps<T>, ref: ExtractRef<ComponentNativeProps<T>>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/components/Breakpoint/index.d.ts

@@ -1 +0,0 @@
-export * from '../../components/Breakpoint/Breakpoint';

package/dist/src/components/Breakpoint/index.js

@@ -1 +0,0 @@
-export * from "./Breakpoint";

package/dist/src/components/BreakpointsProvider/index.d.ts

@@ -1 +0,0 @@
-export * from '../../components/BreakpointsProvider/BreakpointsProvider';

package/dist/src/components/BreakpointsProvider/index.js

@@ -1 +0,0 @@
-export * from "./BreakpointsProvider";

package/dist/src/utils/screen-width.d.ts

@@ -1,3 +0,0 @@
-import { type BreakpointData } from '../types/breakpoints';
-export declare const getMaxScreenWidth: (breakpointData: BreakpointData) => string;
-export declare const getMinScreenWidth: (breakpointData: BreakpointData) => string;

package/dist/src/utils/screen-width.js

@@ -1,12 +0,0 @@
-export const getMaxScreenWidth = (breakpointData)=>{
-    if (typeof breakpointData === 'string') return breakpointData;
-    if (typeof breakpointData === 'number') return `${breakpointData}px`;
-    if (typeof breakpointData.max === 'string') return breakpointData.max;
-    return `${breakpointData.max}px`;
-};
-export const getMinScreenWidth = (breakpointData)=>{
-    if (typeof breakpointData === 'string') return breakpointData;
-    if (typeof breakpointData === 'number') return `${breakpointData}px`;
-    if (typeof breakpointData.min === 'string') return breakpointData.min;
-    return `${breakpointData.min}px`;
-};