💄 Add proper alignment in tab-menu stretch variant

package.json

@@ -1,7 +1,7 @@
 {
   "name": "craftbook",
   "private": false,
-  "version": "1.5.1",
+  "version": "1.5.2",
   "author": "Yash Sehgal <[email protected]>",
   "type": "module",
   "files": [

src/components/tab-menu/tab-menu.tsx

@@ -32,10 +32,10 @@ const TabMenu = forwardRef<HTMLDivElement, TabMenuProps>(
         )}>
         <Grid
           ref={ref}
-          className={cn('w-fit', className)}
+          className={cn('w-fit', stretch && "w-full", className)}
           cols={options.length}
           alignItems="center"
-          justifyContent="center"
+          justifyContent={"center"}
           {...props}>
           {options.map((option, index) => {
             return (
@@ -62,10 +62,10 @@ const TabMenuOption = forwardRef<HTMLButtonElement, TabMenuOptionProps>(
       <button
         ref={ref}
         className={cn(
-          'tab-menu-option px-3 py-1.5 transition-all w-fit',
+          'tab-menu-option px-3 py-1.5 transition-all',
           !isSelected && 'hover:border-b-2 hover:border-black/10',
           isSelected &&
-            'border-b-2 border-b-black drop-shadow-lg before:outline-none',
+          'border-b-2 border-b-black drop-shadow-lg before:outline-none',
           className,
         )}
         aria-label={label}