add responsive sizing to skeleton elements

src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx

@@ -1,39 +1,40 @@
 import classNames from 'classnames';
 import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../../../types';
+import { responsiveUtils } from '../../../utils';
 
 export type SkeletonBarSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface IStateSkeletonBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Responsive size attribute for the skeleton.
+     */
+    responsiveSize?: ResponsiveAttribute<SkeletonBarSize>;
     /**
      * The size of the skeleton.
      * @default 'md'
      */
     size?: SkeletonBarSize;
 }
 
-export const StateSkeletonBar = forwardRef<HTMLDivElement, IStateSkeletonBarProps>((props, ref) => {
-    const { className, size = 'md', ...otherProps } = props;
+const responsiveSizeClasses: ResponsiveAttributeClassMap<SkeletonBarSize> = {
+    sm: { sm: 'h-3', md: 'md:h-3', lg: 'lg:h-3', xl: 'xl:h-3', '2xl': '2xl:h-3' },
+    md: { sm: 'h-4', md: 'md:h-4', lg: 'lg:h-4', xl: 'xl:h-4', '2xl': '2xl:h-4' },
+    lg: { sm: 'h-5', md: 'md:h-5', lg: 'lg:h-5', xl: 'xl:h-5', '2xl': '2xl:h-5' },
+    xl: { sm: 'h-6', md: 'md:h-6', lg: 'lg:h-6', xl: 'xl:h-6', '2xl': '2xl:h-6' },
+    '2xl': { sm: 'h-8', md: 'md:h-8', lg: 'lg:h-8', xl: 'xl:h-8', '2xl': '2xl:h-8' },
+};
 
-    const sizeToHeightClasses: Record<SkeletonBarSize, string> = {
-        sm: 'h-3',
-        md: 'h-4',
-        lg: 'h-5',
-        xl: 'h-6',
-        '2xl': 'h-8',
-    };
+export const StateSkeletonBar = forwardRef<HTMLDivElement, IStateSkeletonBarProps>((props, ref) => {
+    const { className, responsiveSize = {}, size = 'md', ...otherProps } = props;
 
-    return (
-        <div
-            data-testid="stateSkeletonBar"
-            ref={ref}
-            className={classNames(
-                'w-40 animate-pulse rounded-full bg-neutral-50',
-                sizeToHeightClasses[size],
-                className,
-            )}
-            {...otherProps}
-        />
+    const classes = classNames(
+        'w-40 animate-pulse rounded-full bg-neutral-50',
+        responsiveUtils.generateClassNames(size, responsiveSize, responsiveSizeClasses),
+        className,
     );
+
+    return <div data-testid="stateSkeletonBar" ref={ref} className={classes} {...otherProps} />;
 });
 
 StateSkeletonBar.displayName = 'StateSkeletonBar';

src/core/components/states/stateSkeletonCircular/stateSkeletonCircular.tsx

@@ -1,35 +1,40 @@
 import classNames from 'classnames';
 import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { type ResponsiveAttribute, type ResponsiveAttributeClassMap } from '../../../types';
+import { responsiveUtils } from '../../../utils';
 
 export type SkeletonCircularSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export interface IStateSkeletonCircularProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Responsive size attribute for the skeleton.
+     */
+    responsiveSize?: ResponsiveAttribute<SkeletonCircularSize>;
     /**
      * The size of the skeleton.
      * @default 'md'
      */
     size?: SkeletonCircularSize;
 }
 
-export const StateSkeletonCircular = forwardRef<HTMLDivElement, IStateSkeletonCircularProps>((props, ref) => {
-    const { className, size = 'md', ...otherProps } = props;
+const responsiveSizeClasses: ResponsiveAttributeClassMap<SkeletonCircularSize> = {
+    sm: { sm: 'size-6', md: 'md:size-6', lg: 'lg:size-6', xl: 'xl:size-6', '2xl': '2xl:size-6' },
+    md: { sm: 'size-8', md: 'md:size-8', lg: 'lg:size-8', xl: 'xl:size-8', '2xl': '2xl:size-8' },
+    lg: { sm: 'size-10', md: 'md:size-10', lg: 'lg:size-10', xl: 'xl:size-10', '2xl': '2xl:size-10' },
+    xl: { sm: 'size-14', md: 'md:size-14', lg: 'lg:size-14', xl: 'xl:size-14', '2xl': '2xl:size-14' },
+    '2xl': { sm: 'size-16', md: 'md:size-16', lg: 'lg:size-16', xl: 'xl:size-16', '2xl': '2xl:size-16' },
+};
 
-    const sizeClasses: Record<SkeletonCircularSize, string> = {
-        sm: 'size-6',
-        md: 'size-8',
-        lg: 'size-10',
-        xl: 'size-14',
-        '2xl': 'size-16',
-    };
+export const StateSkeletonCircular = forwardRef<HTMLDivElement, IStateSkeletonCircularProps>((props, ref) => {
+    const { className, responsiveSize = {}, size = 'md', ...otherProps } = props;
 
-    return (
-        <div
-            data-testid="stateSkeletonCircular"
-            ref={ref}
-            className={classNames('animate-pulse rounded-full bg-neutral-50', sizeClasses[size], className)}
-            {...otherProps}
-        />
+    const classes = classNames(
+        'animate-pulse rounded-full bg-neutral-50',
+        responsiveUtils.generateClassNames(size, responsiveSize, responsiveSizeClasses),
+        className,
     );
+
+    return <div data-testid="stateSkeletonCircular" ref={ref} className={classes} {...otherProps} />;
 });
 
 StateSkeletonCircular.displayName = 'StateSkeletonCircular';