react-asc 25.15.4 → 25.17.0

package/index.d.ts

@@ -18,6 +18,14 @@ declare enum POSITION {
     left = "left"
 }
 
+declare enum ScreenSize {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xxl = "xxl"
+}
+
 declare enum SIZE {
     sm = "sm",
     md = "md",
@@ -450,8 +458,9 @@ interface IColProps extends React$1.ComponentProps<'div'> {
 }
 declare const Column: (props: IColProps) => JSX.Element;
 
+type TRowDirection = 'row' | 'column';
 interface IContainerProps extends React$1.ComponentProps<'div'> {
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    direction?: TRowDirection;
 }
 declare const Row: ({ children, direction, className, ...rest }: IContainerProps) => JSX.Element;
 
@@ -1006,6 +1015,16 @@ declare const useOnDestroy: (callBack: () => void) => void;
 
 declare function usePrevious<T>(value: T): T | undefined;
 
+interface IUseScreenSizeDetect {
+    screenSize: ScreenSize;
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isSmallScreen?: boolean;
+    isDesktop?: boolean;
+    isExtraLargeScreen?: boolean;
+}
+declare function useScreenSizeDetect(): IUseScreenSizeDetect;
+
 interface IUseWindowSize {
     width: number;
     height: number;
@@ -1127,4 +1146,4 @@ declare global {
     }
 }
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, type ColumnSize, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, type HtmlBaseProps, type HtmlInputProps, type IAlertProps, type IAppBarProps, type IAppBarTitleProps, type IAutoCompleteProps, type IBackdropProps, type IBadgeProps, type IBreadcrumbItemProps, type IBreadcrumbProps, type IButtonContext, type IButtonGroupProps, type IButtonProps, type ICheckboxProps, type IChipProps, type IContainerProps, type IControls, type IDatePickerProps, type IDateSelectProps, type IDaySelectProps, type IDictionary, type IDot, type IDrawerProps, type IExpansionPanelContentProps, type IExpansionPanelHeaderProps, type IExpansionPanelProps, type IFileInputProps, type IFileUnparseConfig, type IFloatingActionButtonProps, type IFormAutoCompleteOptions, type IFormControlConfig, type IFormControlType, type IFormInputError, type IFormInputEvent, type IFormInputOptions, type IFormInputProps, type IFormProps, type IFormSelectOptions, type IFormState, type IFormTextAreaOptions, type IFormValidatorType, type IHourProps, type IIconButtonProps, type IIconProps, type IListItemProps, type IListProps, type ILoadingIndicatorContainerProps, type ILoadingIndicatorService, type ILoggerService, type IMenuBodyProps, type IMenuProps, type IMilliSecondProps, type IMinuteProps, type IModalButton, type IModalOptions, type IModalProps$1 as IModalProps, type IModalService, type IMonthProps, type INumberSelectProps, type IPortalProps, type IProgressBarProps, type ISecondProps, type ISelectOption, type ISelectProps, type ISidebarItem, type ISkeletonAvatarProps, type ISkeletonFooterProps, type ISkeletonImageProps, type ISkeletonTextProps, type ISnackbarOptions, type ISnackbarProps, type ISnackbarService, type ISpeedDialActionProps, type ISpeedDialIconProps, type ISpeedDialProps, type IStepProps, type IStepperActionsProps, type IStepperProps, type ITabPanelProps, type ITabProps, type ITableCellProps, type ITableProps, type ITabsProps, type ITextareaProps, type ITimeSelectProps, type ITooltipProps, type ITreeItemProps, type ITypographyProps, type IUseScreenSizeDetect, type IUseWindowSize, type IWrapperProps, type IYearProps, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, type MenuPosition, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, type Nullable, NumberSelect, POSITION, PlusSolidIcon, Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, type TRowDirection, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };

package/index.es.js

@@ -22,6 +22,15 @@ var POSITION;
     POSITION["left"] = "left";
 })(POSITION || (POSITION = {}));
 
+var ScreenSize;
+(function (ScreenSize) {
+    ScreenSize["xs"] = "xs";
+    ScreenSize["sm"] = "sm";
+    ScreenSize["md"] = "md";
+    ScreenSize["lg"] = "lg";
+    ScreenSize["xxl"] = "xxl";
+})(ScreenSize || (ScreenSize = {}));
+
 var SIZE;
 (function (SIZE) {
     SIZE["sm"] = "sm";
@@ -215,6 +224,41 @@ function usePrevious(value) {
     return ref.current;
 }
 
+function useScreenSizeDetect() {
+    const windowSize = useWindowSize();
+    const [screenSize, setScreenSize] = useState(ScreenSize.md);
+    const checkScreenSize = (height, width) => {
+        if (height > 0 && width > 0) {
+            if (width <= 480) {
+                setScreenSize(ScreenSize.xs);
+            }
+            if (width >= 480 && width <= 768) {
+                setScreenSize(ScreenSize.sm);
+            }
+            if (width >= 768 && width <= 1024) {
+                setScreenSize(ScreenSize.md);
+            }
+            if (width >= 1024 && width <= 1200) {
+                setScreenSize(ScreenSize.lg);
+            }
+            if (width >= 1200) {
+                setScreenSize(ScreenSize.xxl);
+            }
+        }
+    };
+    useEffect(() => {
+        windowSize && checkScreenSize(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return {
+        screenSize: screenSize,
+        isMobile: screenSize === ScreenSize.xs,
+        isTablet: screenSize === ScreenSize.sm,
+        isSmallScreen: screenSize === ScreenSize.md,
+        isDesktop: screenSize === ScreenSize.lg,
+        isExtraLargeScreen: screenSize === ScreenSize.xxl,
+    };
+}
+
 const CaretDownSolidIcon = () => (jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 
 const CheckSolidIcon = () => (jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }) }));
@@ -5615,12 +5659,25 @@ var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  fl
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
-const Row = ({ children, direction = 'row', className, ...rest }) => {
+const Row = ({ children, direction, className, ...rest }) => {
+    const [_direction, setDirection] = useState(direction);
+    const { screenSize } = useScreenSizeDetect();
+    useEffect(() => {
+        setDirection(direction);
+    }, [direction]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$y.row);
         className && cssClasses.push(className);
-        direction && cssClasses.push(`flex-${direction}`);
+        if (_direction) {
+            cssClasses.push(`flex-${_direction}`);
+        }
+        else if (screenSize === ScreenSize.xs || screenSize === ScreenSize.sm) {
+            cssClasses.push(`flex-column`);
+        }
+        else {
+            cssClasses.push(`flex-row`);
+        }
         return cssClasses.filter(css => css).join(' ');
     };
     return (jsx("div", { className: getCssClasses(), ...rest, children: children }));
@@ -7257,4 +7314,4 @@ String.prototype.capitalize = function () {
     return this.charAt(0).toUpperCase() + this.slice(1);
 };
 
-export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useWindowSize };
+export { Alert, AppBar, AppBarTitle, AutoComplete, Backdrop, Badge, Breadcrumb, BreadcrumbItem, Button, ButtonContext, ButtonGroup, Card, CardBody, CardFooter, CardImage, CardSubtitle, CardText, CardTitle, CaretDownSolidIcon, CheckSolidIcon, CheckSquareRegularIcon, Checkbox, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, Chip, CircleSolidIcon, Color, Column, ConditionalWrapper, CssTransition, DATEMODE, DatePicker, DateSelect, DaySelect, Dot, Drawer, EmailValidator, ExpansionPanel, ExpansionPanelContent, ExpansionPanelHeader, FileInput, FileService, FloatingActionButton, Form, FormControl, FormError, FormGroup, FormHint, FormInput, FormLabel, GlobalModal, HomeSolidIcon, HourSelect, Icon, IconButton, IsEmptyValidator, IsEqualValidator, Link, List, ListItem, ListItemAction, ListItemAvatar, ListItemAvatarSize, ListItemIcon, ListItemText, LoadingIndicator, LoadingIndicatorContainer, LogType, MODALBUTTONTYPE, MODALTYPE, MaxValidator, Menu, MenuBody, MenuDivider, MenuItem, MenuToggle, MilliSecondSelect, MinValidator, MinuteSelect, Modal, ModalBody, ModalFooter, ModalHeader, MonthSelect, NumberSelect, POSITION, PlusSolidIcon, Portal$1 as Portal, ProgressBar, Row, SIZE, STATUS, ScreenSize, SecondSelect, Select, Sidebar, SkeletonAvatar, SkeletonFooter, SkeletonImage, SkeletonText, Snackbar, SpeedDial, SpeedDialAction, SpeedDialIcon, SpinnerSolidIcon, SquareRegularIcon, Step, Stepper, StepperActions, TIMEMODE, Tab, TabPanel, Table, TableBody, TableCell, TableHead, TableRow, Tabs, Textarea, TimeSelect, TimesCircleSolidIcon, TimesSolidIcon, Tooltip, TooltipPlacement, TreeItem, TreeView, Typography, VARIANT, YearSelect, clipboardService, fileService, loadingIndicatorService, localService, loggerService, modalService, snackbarService, useButtonContext, useConstructor, useCssClasses, useDebounce, useHover, useMobileDetect, useOnDestroy, usePrevious, useScreenSizeDetect, useWindowSize };

package/index.js

@@ -24,6 +24,15 @@ exports.POSITION = void 0;
     POSITION["left"] = "left";
 })(exports.POSITION || (exports.POSITION = {}));
 
+exports.ScreenSize = void 0;
+(function (ScreenSize) {
+    ScreenSize["xs"] = "xs";
+    ScreenSize["sm"] = "sm";
+    ScreenSize["md"] = "md";
+    ScreenSize["lg"] = "lg";
+    ScreenSize["xxl"] = "xxl";
+})(exports.ScreenSize || (exports.ScreenSize = {}));
+
 exports.SIZE = void 0;
 (function (SIZE) {
     SIZE["sm"] = "sm";
@@ -217,6 +226,41 @@ function usePrevious(value) {
     return ref.current;
 }
 
+function useScreenSizeDetect() {
+    const windowSize = useWindowSize();
+    const [screenSize, setScreenSize] = React.useState(exports.ScreenSize.md);
+    const checkScreenSize = (height, width) => {
+        if (height > 0 && width > 0) {
+            if (width <= 480) {
+                setScreenSize(exports.ScreenSize.xs);
+            }
+            if (width >= 480 && width <= 768) {
+                setScreenSize(exports.ScreenSize.sm);
+            }
+            if (width >= 768 && width <= 1024) {
+                setScreenSize(exports.ScreenSize.md);
+            }
+            if (width >= 1024 && width <= 1200) {
+                setScreenSize(exports.ScreenSize.lg);
+            }
+            if (width >= 1200) {
+                setScreenSize(exports.ScreenSize.xxl);
+            }
+        }
+    };
+    React.useEffect(() => {
+        windowSize && checkScreenSize(windowSize.height, windowSize.width);
+    }, [windowSize]);
+    return {
+        screenSize: screenSize,
+        isMobile: screenSize === exports.ScreenSize.xs,
+        isTablet: screenSize === exports.ScreenSize.sm,
+        isSmallScreen: screenSize === exports.ScreenSize.md,
+        isDesktop: screenSize === exports.ScreenSize.lg,
+        isExtraLargeScreen: screenSize === exports.ScreenSize.xxl,
+    };
+}
+
 const CaretDownSolidIcon = () => (jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "caret-down", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" }) }));
 
 const CheckSolidIcon = () => (jsxRuntime.jsx("svg", { "aria-hidden": "true", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" }) }));
@@ -5617,12 +5661,25 @@ var css_248z$y = ".Row-module_row__bTIWp {\n  display: flex;\n  gap: 15px;\n  fl
 var styles$y = {"row":"Row-module_row__bTIWp"};
 styleInject(css_248z$y);
 
-const Row = ({ children, direction = 'row', className, ...rest }) => {
+const Row = ({ children, direction, className, ...rest }) => {
+    const [_direction, setDirection] = React.useState(direction);
+    const { screenSize } = useScreenSizeDetect();
+    React.useEffect(() => {
+        setDirection(direction);
+    }, [direction]);
     const getCssClasses = () => {
         const cssClasses = [];
         cssClasses.push(styles$y.row);
         className && cssClasses.push(className);
-        direction && cssClasses.push(`flex-${direction}`);
+        if (_direction) {
+            cssClasses.push(`flex-${_direction}`);
+        }
+        else if (screenSize === exports.ScreenSize.xs || screenSize === exports.ScreenSize.sm) {
+            cssClasses.push(`flex-column`);
+        }
+        else {
+            cssClasses.push(`flex-row`);
+        }
         return cssClasses.filter(css => css).join(' ');
     };
     return (jsxRuntime.jsx("div", { className: getCssClasses(), ...rest, children: children }));
@@ -7392,4 +7449,5 @@ exports.useHover = useHover;
 exports.useMobileDetect = useMobileDetect;
 exports.useOnDestroy = useOnDestroy;
 exports.usePrevious = usePrevious;
+exports.useScreenSizeDetect = useScreenSizeDetect;
 exports.useWindowSize = useWindowSize;

package/lib/components/Grid/Row/Row.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
+export type TRowDirection = 'row' | 'column';
 export interface IContainerProps extends React.ComponentProps<'div'> {
-    direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    direction?: TRowDirection;
 }
 export declare const Row: ({ children, direction, className, ...rest }: IContainerProps) => JSX.Element;

package/lib/enums/index.d.ts

@@ -1,5 +1,6 @@
 export * from './color.enum';
 export * from './position.enum';
+export * from './screensize.enum';
 export * from './size.enum';
 export * from './status.enum';
 export * from './variant.enum';

package/lib/enums/screensize.enum.d.ts

@@ -0,0 +1,7 @@
+export declare enum ScreenSize {
+    xs = "xs",
+    sm = "sm",
+    md = "md",
+    lg = "lg",
+    xxl = "xxl"
+}

package/lib/hooks/index.d.ts

@@ -5,4 +5,5 @@ export * from './useHover';
 export * from './useMobileDetect';
 export * from './useOnDestroy';
 export * from './usePrevious';
+export * from './useScreenSizeDetect';
 export * from './useWindowSize';

package/lib/hooks/useScreenSizeDetect.d.ts

@@ -0,0 +1,10 @@
+import { ScreenSize } from '../enums';
+export interface IUseScreenSizeDetect {
+    screenSize: ScreenSize;
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isSmallScreen?: boolean;
+    isDesktop?: boolean;
+    isExtraLargeScreen?: boolean;
+}
+export declare function useScreenSizeDetect(): IUseScreenSizeDetect;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-asc",
-	"version": "25.15.4",
+	"version": "25.17.0",
 	"description": "handcrafted react components",
 	"main": "index.js",
 	"module": "index.es.js",

package/react-asc.scss

@@ -322,11 +322,11 @@
 	font-weight: 700 !important;
 }
 
-@media (max-width: 561px) {
-	.flex-row {
-		flex-direction: column !important;
-	}
-}
+// @media (max-width: 561px) {
+// 	.flex-row {
+// 		flex-direction: column !important;
+// 	}
+// }
 
 @media (min-width: 768px) {
 	.justify-content-md-center {