@yr3/ui 1.0.11 → 1.0.12

package/dist/index.cjs

@@ -76,6 +76,8 @@ __export(index_exports, {
   baseTokens: () => baseTokens,
   bem: () => bem,
   bemMerge: () => bemMerge,
+  breakDown: () => breakDown,
+  breakUp: () => breakUp,
   breakpoints: () => breakpoints,
   composeStyles: () => composeStyles,
   createPaletteColor: () => createPaletteColor,
@@ -94,6 +96,7 @@ __export(index_exports, {
   times: () => times,
   uiStyle: () => uiStyle,
   useBackdrop: () => useBackdrop,
+  useBreakpoint: () => useBreakpoint,
   useBreakpointValue: () => useBreakpointValue,
   useClickAway: () => useClickAway,
   useControl: () => useControl,
@@ -2690,6 +2693,41 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
   };
 };
 
+// src/hooks/useBreakpoint.ts
+var React24 = __toESM(require("react"), 1);
+var breakUp = (bp) => `(min-width: ${bp}px)`;
+var breakDown = (bp) => `(max-width: ${bp}px)`;
+function useBreakpoint(queryInput) {
+  const theme = useTheme?.();
+  const query = typeof queryInput === "function" ? queryInput(theme) : queryInput;
+  const getMatch = () => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  };
+  const [matches, setMatches] = React24.useState(getMatch);
+  React24.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    const listener = (e) => {
+      setMatches(e.matches);
+    };
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      media.removeEventListener("change", listener);
+    }
+    setMatches(media.matches);
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeEventListener("change", listener);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
 // src/index.ts
 initTheme();
 // Annotate the CommonJS export names for ESM import in node:
@@ -2740,6 +2778,8 @@ initTheme();
   baseTokens,
   bem,
   bemMerge,
+  breakDown,
+  breakUp,
   breakpoints,
   composeStyles,
   createPaletteColor,
@@ -2758,6 +2798,7 @@ initTheme();
   times,
   uiStyle,
   useBackdrop,
+  useBreakpoint,
   useBreakpointValue,
   useClickAway,
   useControl,

package/dist/index.d.cts

@@ -1054,13 +1054,13 @@ declare const useControl: () => null;
 
 declare function initTheme(): void;
 
-declare const ThemeContext: React$1.Context<null>;
+declare const ThemeContext: React$1.Context<Theme | null>;
 type ThemeProviderProps = {
     theme: any;
     children: React$1.ReactNode;
 };
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
-declare const useTheme: () => null;
+declare const useTheme: () => Theme | null;
 
 declare const baseTokens: {
     colors: {
@@ -1701,4 +1701,9 @@ declare const usePlaces: ({ input, language, apiKey, provider }: UsePlacesProps)
     selectPlace: (id: string) => Promise<_yr3_autocomplete_places.Place>;
 };
 
-export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };
+type QueryInput = string | ((theme: any) => string);
+declare const breakUp: (bp: number) => string;
+declare const breakDown: (bp: number) => string;
+declare function useBreakpoint(queryInput: QueryInput): boolean;
+
+export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakDown, breakUp, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpoint, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };

package/dist/index.d.ts

@@ -1054,13 +1054,13 @@ declare const useControl: () => null;
 
 declare function initTheme(): void;
 
-declare const ThemeContext: React$1.Context<null>;
+declare const ThemeContext: React$1.Context<Theme | null>;
 type ThemeProviderProps = {
     theme: any;
     children: React$1.ReactNode;
 };
 declare const ThemeProvider: React$1.FC<ThemeProviderProps>;
-declare const useTheme: () => null;
+declare const useTheme: () => Theme | null;
 
 declare const baseTokens: {
     colors: {
@@ -1701,4 +1701,9 @@ declare const usePlaces: ({ input, language, apiKey, provider }: UsePlacesProps)
     selectPlace: (id: string) => Promise<_yr3_autocomplete_places.Place>;
 };
 
-export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };
+type QueryInput = string | ((theme: any) => string);
+declare const breakUp: (bp: number) => string;
+declare const breakDown: (bp: number) => string;
+declare function useBreakpoint(queryInput: QueryInput): boolean;
+
+export { Avatar, type AvatarProps, Backdrop, BackdropContext, type BackdropContextType, BackdropProvider, Box, type BoxProps, Button, type ButtonProps, type ButtonVariant, Calendar, type CalendarComponentProps, type CalendarDayProps, type CalendarProps, Checkbox, type CheckboxProps, Chip, type ChipProps, Collapse, type CollapseProps, Container, type ContainerProps, Control, ControlContext, type ControlProps, type ControlVariants, type CountriesDial, Divider, type DividerProps, Drawer, type DrawerProps, Fade, type FadeProps, Flex, type FlexProps, Grid, type GridProps, Group, type GroupProps, type GroupsVariant, IconClose, IconDown, IconSearch, Image, ImageDropzone, type ImageProps, Input, InputArea, type InputAreaProps, type InputAreaVariant, type InputProps, Label, type LabelProps, Modal, ModalContainer, type ModalContainerProps, type ModalProps, Notistack, type NotistackAnchorProps, type NotistackProps, NotistackProvider, type Option, Pending, type PendingProps, Phone, type PhoneInputProps, type PlaceData, PlacesAutocomplete, type PropsPlaces, Radio, type RadioVariant, Select, type SelectChangeEvent, type SelectOptionsProps, type SelectProps, type SelectorChangeEvent, type SelectorProps, Slide, type SlideContentProps, type SlideProps, Switch, type SwitchProps, Text, type TextProps, type TextVariant, type TextWeight, type Theme, ThemeContext, ThemeProvider, type UIProps, adjustColor, applyTheme, baseTokens, bem, bemMerge, breakDown, breakUp, breakpoints, composeStyles, createPaletteColor, createTheme, createVariants, cx, getContrast, getCountryCodePhone, getDialPhone, getMonthCalendar, getNumberPhone, initTheme, isEmpty, normalizePhone, text, times, uiStyle, useBackdrop, useBreakpoint, useBreakpointValue, useClickAway, useControl, useMediaQuery, useNotistack, usePlaces, useTheme };

package/dist/index.js

@@ -2584,6 +2584,41 @@ var usePlaces = ({ input, language, apiKey, provider }) => {
   };
 };
 
+// src/hooks/useBreakpoint.ts
+import * as React24 from "react";
+var breakUp = (bp) => `(min-width: ${bp}px)`;
+var breakDown = (bp) => `(max-width: ${bp}px)`;
+function useBreakpoint(queryInput) {
+  const theme = useTheme?.();
+  const query = typeof queryInput === "function" ? queryInput(theme) : queryInput;
+  const getMatch = () => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(query).matches;
+  };
+  const [matches, setMatches] = React24.useState(getMatch);
+  React24.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const media = window.matchMedia(query);
+    const listener = (e) => {
+      setMatches(e.matches);
+    };
+    if (media.addEventListener) {
+      media.addEventListener("change", listener);
+    } else {
+      media.removeEventListener("change", listener);
+    }
+    setMatches(media.matches);
+    return () => {
+      if (media.removeEventListener) {
+        media.removeEventListener("change", listener);
+      } else {
+        media.removeEventListener("change", listener);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
 // src/index.ts
 initTheme();
 export {
@@ -2633,6 +2668,8 @@ export {
   baseTokens,
   bem,
   bemMerge,
+  breakDown,
+  breakUp,
   breakpoints,
   composeStyles,
   createPaletteColor,
@@ -2651,6 +2688,7 @@ export {
   times,
   uiStyle,
   useBackdrop,
+  useBreakpoint,
   useBreakpointValue,
   useClickAway,
   useControl,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yr3/ui",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",