From 4e2ab32e17378775d532836eecbf15d683285d82 Mon Sep 17 00:00:00 2001
From: Fabrice Francois <fabricevladimir@gmail.com>
Date: Tue, 16 Apr 2024 12:00:50 -0400
Subject: [PATCH] add with property to stateSkeletonBar for easy customization

---
 .../states/stateSkeletonBar/stateSkeletonBar.tsx  | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx b/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx
index 200815acb..dbbeb09a0 100644
--- a/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx
+++ b/src/core/components/states/stateSkeletonBar/stateSkeletonBar.tsx
@@ -15,6 +15,18 @@ export interface IStateSkeletonBarProps extends ComponentPropsWithoutRef<'span'>
      * @default 'md'
      */
     size?: StateSkeletonBarSize;
+    /**
+     * Specifies the width of the skeleton element.
+     * Can be provided as a number (interpreted as pixels)
+     * or a string with explicit units (e.g., px, %, em).
+     * @default 160
+     *
+     * @example
+     * width={200}    // Sets width to 200 pixels.
+     * width="100px"  // Sets width to 100 pixels.
+     * width="10%"    // Sets width to 10% of its parent container.
+     */
+    width?: string | number;
 }
 
 const responsiveSizeClasses: ResponsiveAttributeClassMap<StateSkeletonBarSize> = {
@@ -26,7 +38,7 @@ const responsiveSizeClasses: ResponsiveAttributeClassMap<StateSkeletonBarSize> =
 };
 
 export const StateSkeletonBar = forwardRef<HTMLDivElement, IStateSkeletonBarProps>((props, ref) => {
-    const { className, responsiveSize = {}, size = 'md', ...otherProps } = props;
+    const { className, responsiveSize = {}, size = 'md', width, ...otherProps } = props;
 
     const classes = classNames(
         'w-40 animate-pulse rounded-full bg-neutral-50',
@@ -41,6 +53,7 @@ export const StateSkeletonBar = forwardRef<HTMLDivElement, IStateSkeletonBarProp
             className={classes}
             tabIndex={-1}
             aria-hidden={true}
+            style={{ width }}
             {...otherProps}
         />
     );