@yr3/ui 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -60,6 +60,7 @@ __export(index_exports, {
   Modal: () => Modal,
   ModalContainer: () => ModalContainer,
   Notistack: () => Notistack,
+  NotistackContext: () => NotistackContext,
   NotistackProvider: () => NotistackProvider,
   Pending: () => Pending,
   Phone: () => Phone,
@@ -76,6 +77,8 @@ __export(index_exports, {
   baseTokens: () => baseTokens,
   bem: () => bem,
   bemMerge: () => bemMerge,
+  breakDown: () => breakDown,
+  breakUp: () => breakUp,
   breakpoints: () => breakpoints,
   composeStyles: () => composeStyles,
   createPaletteColor: () => createPaletteColor,
@@ -94,6 +97,7 @@ __export(index_exports, {
   times: () => times,
   uiStyle: () => uiStyle,
   useBackdrop: () => useBackdrop,
+  useBreakpoint: () => useBreakpoint,
   useBreakpointValue: () => useBreakpointValue,
   useClickAway: () => useClickAway,
   useControl: () => useControl,
@@ -2592,16 +2596,51 @@ var IconSearch = (props) => {
 };
 
 // src/theme/ThemeProvider.tsx
+var React22 = __toESM(require("react"), 1);
+
+// src/theme/notistackContext.tsx
 var React21 = __toESM(require("react"), 1);
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var ThemeContext = React21.createContext(null);
+var NotistackContext = React21.createContext(null);
+var NotistackProvider = ({ children }) => {
+  const [snacks, setSnacks] = React21.useState([]);
+  const notistack = (snack) => {
+    const id = Date.now();
+    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
+    const duration = snack.duration || 3e3;
+    const exitDuration = 300;
+    setTimeout(() => {
+      setSnacks(
+        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
+      );
+    }, duration);
+    setTimeout(() => {
+      setSnacks((prev) => prev.filter((s) => s.id !== id));
+    }, duration + exitDuration);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(NotistackContext.Provider, { value: { notistack }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Notistack, { ...snack }, snack.id)) })
+  ] });
+};
+var useNotistack = () => {
+  const ctx = React21.useContext(NotistackContext);
+  if (!ctx) {
+    throw new Error("NotistackProvider missing");
+  }
+  return ctx;
+};
+
+// src/theme/ThemeProvider.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ThemeContext = React22.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(BackdropProvider, { children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(BackdropProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NotistackProvider, { children }) }) });
 };
-var useTheme = () => React21.useContext(ThemeContext);
+var useTheme = () => React22.useContext(ThemeContext);
 
 // src/theme/tokens.ts
 var baseTokens = {
@@ -2621,33 +2660,6 @@ var baseTokens = {
   }
 };
 
-// src/theme/notistackContext.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var NotistackContext = React22.createContext(null);
-var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React22.useState([]);
-  const enqueueNotistack = (snack) => {
-    const id = Date.now();
-    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
-    const duration = snack.duration || 3e3;
-    const exitDuration = 300;
-    setTimeout(() => {
-      setSnacks(
-        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
-      );
-    }, duration);
-    setTimeout(() => {
-      setSnacks((prev) => prev.filter((s) => s.id !== id));
-    }, duration + exitDuration);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Notistack, { ...snack }, snack.id)) })
-  ] });
-};
-var useNotistack = () => React22.useContext(NotistackContext);
-
 // src/theme/useMediaQuery.tsx
 var React23 = __toESM(require("react"), 1);
 function useMediaQuery(query) {
@@ -2690,6 +2702,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:
@@ -2724,6 +2771,7 @@ initTheme();
   Modal,
   ModalContainer,
   Notistack,
+  NotistackContext,
   NotistackProvider,
   Pending,
   Phone,
@@ -2740,6 +2788,8 @@ initTheme();
   baseTokens,
   bem,
   bemMerge,
+  breakDown,
+  breakUp,
   breakpoints,
   composeStyles,
   createPaletteColor,
@@ -2758,6 +2808,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: {
@@ -1079,8 +1079,105 @@ declare const baseTokens: {
     };
 };
 
+declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
+declare const bemMerge: (...args: any[]) => string;
+
+type CalendarDayProps = {
+    day: number;
+    date: Dayjs;
+    isToday: boolean;
+    isPast: boolean;
+    isFuture: boolean;
+    isCurrentMonth: boolean;
+    selected: any;
+    data?: any;
+};
+type CalendarComponentProps = {
+    calendar: (CalendarDayProps | null)[][];
+    month: number;
+    monthLabel: string;
+    yearLabel: string;
+    daysContainer: number[];
+    days: number;
+    weeks: number;
+    isWeekend: boolean;
+    date: Dayjs;
+    selected: CalendarDayProps | null;
+    currentDay: CalendarDayProps;
+    props?: any;
+};
+declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
+
+declare const adjustColor: (hex: string, amount: number) => string;
+declare const getContrast: (hex: string) => "#000000" | "#ffffff";
+declare const createPaletteColor: (main: string) => PaletteColor;
+
+declare function isEmpty(value: unknown): boolean;
+declare function times<T>(n: number, iteratee: (index: number) => T): T[];
+
+declare const cx: (...args: any[]) => string;
+
+type VariantConfig = {
+    base: string;
+    variants?: Record<string, Record<string, string>>;
+};
+declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
+
+type CountriesDial = {
+    code: string;
+    dial: string;
+    label: string;
+};
+declare const normalizePhone: (phone: string, dial: string) => {
+    number: string;
+    full: string;
+} | null;
+declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getNumberPhone: (phone: string, dial: string) => string;
+
+type NotistackAnchorProps = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
+type NotistackProps = {
+    message: string;
+    duration?: number;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    color?: keyof Theme['colors'];
+    anchor?: NotistackAnchorProps;
+    exiting?: boolean;
+    propsComponent?: {
+        notistack?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        container?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        progress?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+    };
+};
+declare const Notistack: React.FC<NotistackProps>;
+
+type Snack = NotistackProps & {
+    id: number;
+    message: string;
+    duration?: number;
+    variant?: 'success' | 'error' | 'info';
+    exiting?: boolean;
+    anchor?: NotistackAnchorProps;
+};
+type NotistackContextType = {
+    notistack: (snack: Snack) => void;
+};
+declare const NotistackContext: React$1.Context<NotistackContextType | null>;
 declare const NotistackProvider: ({ children }: any) => react_jsx_runtime.JSX.Element;
-declare const useNotistack: () => any;
+declare const useNotistack: () => NotistackContextType;
 
 declare function useMediaQuery(query: string | ((theme: any) => string)): boolean;
 type Breakpoint = keyof typeof breakpoints;
@@ -1355,63 +1452,6 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     };
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
-declare const bemMerge: (...args: any[]) => string;
-
-type CalendarDayProps = {
-    day: number;
-    date: Dayjs;
-    isToday: boolean;
-    isPast: boolean;
-    isFuture: boolean;
-    isCurrentMonth: boolean;
-    selected: any;
-    data?: any;
-};
-type CalendarComponentProps = {
-    calendar: (CalendarDayProps | null)[][];
-    month: number;
-    monthLabel: string;
-    yearLabel: string;
-    daysContainer: number[];
-    days: number;
-    weeks: number;
-    isWeekend: boolean;
-    date: Dayjs;
-    selected: CalendarDayProps | null;
-    currentDay: CalendarDayProps;
-    props?: any;
-};
-declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
-
-declare const adjustColor: (hex: string, amount: number) => string;
-declare const getContrast: (hex: string) => "#000000" | "#ffffff";
-declare const createPaletteColor: (main: string) => PaletteColor;
-
-declare function isEmpty(value: unknown): boolean;
-declare function times<T>(n: number, iteratee: (index: number) => T): T[];
-
-declare const cx: (...args: any[]) => string;
-
-type VariantConfig = {
-    base: string;
-    variants?: Record<string, Record<string, string>>;
-};
-declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
-
-type CountriesDial = {
-    code: string;
-    dial: string;
-    label: string;
-};
-declare const normalizePhone: (phone: string, dial: string) => {
-    number: string;
-    full: string;
-} | null;
-declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getNumberPhone: (phone: string, dial: string) => string;
-
 type InputAreaVariant = 'filled' | 'outlined' | 'base' | 'lined';
 type InputAreaProps = {
     value?: string;
@@ -1454,34 +1494,6 @@ type ModalProps = {
 };
 declare const Modal: React$1.FC<ModalProps>;
 
-type NotistackAnchorProps = {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'center' | 'right';
-};
-type NotistackProps = {
-    message: string;
-    duration?: number;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    color?: keyof Theme['colors'];
-    anchor?: NotistackAnchorProps;
-    exiting?: boolean;
-    propsComponent?: {
-        notistack?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        container?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        progress?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-    };
-};
-declare const Notistack: React.FC<NotistackProps>;
-
 type PendingProps = {
     variant?: 'rect' | 'circle' | 'text';
     width?: number | string;
@@ -1701,4 +1713,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, NotistackContext, type NotistackContextType, 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, type Snack, 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: {
@@ -1079,8 +1079,105 @@ declare const baseTokens: {
     };
 };
 
+declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
+declare const bemMerge: (...args: any[]) => string;
+
+type CalendarDayProps = {
+    day: number;
+    date: Dayjs;
+    isToday: boolean;
+    isPast: boolean;
+    isFuture: boolean;
+    isCurrentMonth: boolean;
+    selected: any;
+    data?: any;
+};
+type CalendarComponentProps = {
+    calendar: (CalendarDayProps | null)[][];
+    month: number;
+    monthLabel: string;
+    yearLabel: string;
+    daysContainer: number[];
+    days: number;
+    weeks: number;
+    isWeekend: boolean;
+    date: Dayjs;
+    selected: CalendarDayProps | null;
+    currentDay: CalendarDayProps;
+    props?: any;
+};
+declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
+
+declare const adjustColor: (hex: string, amount: number) => string;
+declare const getContrast: (hex: string) => "#000000" | "#ffffff";
+declare const createPaletteColor: (main: string) => PaletteColor;
+
+declare function isEmpty(value: unknown): boolean;
+declare function times<T>(n: number, iteratee: (index: number) => T): T[];
+
+declare const cx: (...args: any[]) => string;
+
+type VariantConfig = {
+    base: string;
+    variants?: Record<string, Record<string, string>>;
+};
+declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
+
+type CountriesDial = {
+    code: string;
+    dial: string;
+    label: string;
+};
+declare const normalizePhone: (phone: string, dial: string) => {
+    number: string;
+    full: string;
+} | null;
+declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
+declare const getNumberPhone: (phone: string, dial: string) => string;
+
+type NotistackAnchorProps = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
+type NotistackProps = {
+    message: string;
+    duration?: number;
+    variant?: 'info' | 'success' | 'warning' | 'error';
+    color?: keyof Theme['colors'];
+    anchor?: NotistackAnchorProps;
+    exiting?: boolean;
+    propsComponent?: {
+        notistack?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        container?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+        progress?: {
+            ui?: UIProps;
+            style?: React.CSSProperties;
+        };
+    };
+};
+declare const Notistack: React.FC<NotistackProps>;
+
+type Snack = NotistackProps & {
+    id: number;
+    message: string;
+    duration?: number;
+    variant?: 'success' | 'error' | 'info';
+    exiting?: boolean;
+    anchor?: NotistackAnchorProps;
+};
+type NotistackContextType = {
+    notistack: (snack: Snack) => void;
+};
+declare const NotistackContext: React$1.Context<NotistackContextType | null>;
 declare const NotistackProvider: ({ children }: any) => react_jsx_runtime.JSX.Element;
-declare const useNotistack: () => any;
+declare const useNotistack: () => NotistackContextType;
 
 declare function useMediaQuery(query: string | ((theme: any) => string)): boolean;
 type Breakpoint = keyof typeof breakpoints;
@@ -1355,63 +1452,6 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     };
 } & React$1.RefAttributes<HTMLInputElement>>;
 
-declare const bem: (block: string) => (element?: string, modifiers?: Record<string, any>) => string;
-declare const bemMerge: (...args: any[]) => string;
-
-type CalendarDayProps = {
-    day: number;
-    date: Dayjs;
-    isToday: boolean;
-    isPast: boolean;
-    isFuture: boolean;
-    isCurrentMonth: boolean;
-    selected: any;
-    data?: any;
-};
-type CalendarComponentProps = {
-    calendar: (CalendarDayProps | null)[][];
-    month: number;
-    monthLabel: string;
-    yearLabel: string;
-    daysContainer: number[];
-    days: number;
-    weeks: number;
-    isWeekend: boolean;
-    date: Dayjs;
-    selected: CalendarDayProps | null;
-    currentDay: CalendarDayProps;
-    props?: any;
-};
-declare function getMonthCalendar(year: number, month: number, startIndex: number, selected: CalendarDayProps, props?: any): CalendarComponentProps;
-
-declare const adjustColor: (hex: string, amount: number) => string;
-declare const getContrast: (hex: string) => "#000000" | "#ffffff";
-declare const createPaletteColor: (main: string) => PaletteColor;
-
-declare function isEmpty(value: unknown): boolean;
-declare function times<T>(n: number, iteratee: (index: number) => T): T[];
-
-declare const cx: (...args: any[]) => string;
-
-type VariantConfig = {
-    base: string;
-    variants?: Record<string, Record<string, string>>;
-};
-declare const createVariants: (config: VariantConfig) => (props?: Record<string, any>) => string;
-
-type CountriesDial = {
-    code: string;
-    dial: string;
-    label: string;
-};
-declare const normalizePhone: (phone: string, dial: string) => {
-    number: string;
-    full: string;
-} | null;
-declare const getDialPhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getCountryCodePhone: (phone: string, countries: CountriesDial[]) => string | null;
-declare const getNumberPhone: (phone: string, dial: string) => string;
-
 type InputAreaVariant = 'filled' | 'outlined' | 'base' | 'lined';
 type InputAreaProps = {
     value?: string;
@@ -1454,34 +1494,6 @@ type ModalProps = {
 };
 declare const Modal: React$1.FC<ModalProps>;
 
-type NotistackAnchorProps = {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'center' | 'right';
-};
-type NotistackProps = {
-    message: string;
-    duration?: number;
-    variant?: 'info' | 'success' | 'warning' | 'error';
-    color?: keyof Theme['colors'];
-    anchor?: NotistackAnchorProps;
-    exiting?: boolean;
-    propsComponent?: {
-        notistack?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        container?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-        progress?: {
-            ui?: UIProps;
-            style?: React.CSSProperties;
-        };
-    };
-};
-declare const Notistack: React.FC<NotistackProps>;
-
 type PendingProps = {
     variant?: 'rect' | 'circle' | 'text';
     width?: number | string;
@@ -1701,4 +1713,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, NotistackContext, type NotistackContextType, 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, type Snack, 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

@@ -2486,16 +2486,51 @@ var IconSearch = (props) => {
 };
 
 // src/theme/ThemeProvider.tsx
+import * as React22 from "react";
+
+// src/theme/notistackContext.tsx
 import * as React21 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var ThemeContext = React21.createContext(null);
+import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
+var NotistackContext = React21.createContext(null);
+var NotistackProvider = ({ children }) => {
+  const [snacks, setSnacks] = React21.useState([]);
+  const notistack = (snack) => {
+    const id = Date.now();
+    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
+    const duration = snack.duration || 3e3;
+    const exitDuration = 300;
+    setTimeout(() => {
+      setSnacks(
+        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
+      );
+    }, duration);
+    setTimeout(() => {
+      setSnacks((prev) => prev.filter((s) => s.id !== id));
+    }, duration + exitDuration);
+  };
+  return /* @__PURE__ */ jsxs16(NotistackContext.Provider, { value: { notistack }, children: [
+    children,
+    /* @__PURE__ */ jsx39("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx39(Notistack, { ...snack }, snack.id)) })
+  ] });
+};
+var useNotistack = () => {
+  const ctx = React21.useContext(NotistackContext);
+  if (!ctx) {
+    throw new Error("NotistackProvider missing");
+  }
+  return ctx;
+};
+
+// src/theme/ThemeProvider.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var ThemeContext = React22.createContext(null);
 var ThemeProvider = ({ theme, children }) => {
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     applyTheme(theme);
   }, [theme]);
-  return /* @__PURE__ */ jsx39(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx39(BackdropProvider, { children }) });
+  return /* @__PURE__ */ jsx40(ThemeContext.Provider, { value: theme, children: /* @__PURE__ */ jsx40(BackdropProvider, { children: /* @__PURE__ */ jsx40(NotistackProvider, { children }) }) });
 };
-var useTheme = () => React21.useContext(ThemeContext);
+var useTheme = () => React22.useContext(ThemeContext);
 
 // src/theme/tokens.ts
 var baseTokens = {
@@ -2515,33 +2550,6 @@ var baseTokens = {
   }
 };
 
-// src/theme/notistackContext.tsx
-import * as React22 from "react";
-import { jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
-var NotistackContext = React22.createContext(null);
-var NotistackProvider = ({ children }) => {
-  const [snacks, setSnacks] = React22.useState([]);
-  const enqueueNotistack = (snack) => {
-    const id = Date.now();
-    setSnacks((prev) => [...prev, { ...snack, id, exiting: false }]);
-    const duration = snack.duration || 3e3;
-    const exitDuration = 300;
-    setTimeout(() => {
-      setSnacks(
-        (prev) => prev.map((s) => s.id === id ? { ...s, exiting: true } : s)
-      );
-    }, duration);
-    setTimeout(() => {
-      setSnacks((prev) => prev.filter((s) => s.id !== id));
-    }, duration + exitDuration);
-  };
-  return /* @__PURE__ */ jsxs16(NotistackContext.Provider, { value: { enqueueNotistack }, children: [
-    children,
-    /* @__PURE__ */ jsx40("div", { className: "yr3NotistackContainer", children: snacks.map((snack) => /* @__PURE__ */ jsx40(Notistack, { ...snack }, snack.id)) })
-  ] });
-};
-var useNotistack = () => React22.useContext(NotistackContext);
-
 // src/theme/useMediaQuery.tsx
 import * as React23 from "react";
 function useMediaQuery(query) {
@@ -2584,6 +2592,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 {
@@ -2617,6 +2660,7 @@ export {
   Modal,
   ModalContainer,
   Notistack,
+  NotistackContext,
   NotistackProvider,
   Pending,
   Phone,
@@ -2633,6 +2677,8 @@ export {
   baseTokens,
   bem,
   bemMerge,
+  breakDown,
+  breakUp,
   breakpoints,
   composeStyles,
   createPaletteColor,
@@ -2651,6 +2697,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.13",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",