add with property to stateSkeletonBar for easy customization

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}
         />
     );