chore: Bump package version to 1.0.229 and update Badge and Card component styles

- Updated package version in package.json to 1.0.229
- Enhanced Badge component styles for better visual consistency
- Adjusted Card component styles for improved text visibility and layout
- Updated snapshots to reflect changes in Badge and Card components

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.228",
+  "version": "1.0.229",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Badge component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <span
-    class="yl:rounded yl:px-2 yl:py-1 yl:text-sm yl:font-medium yl:bg-primary yl:text-background yl:border-2 yl:border-background/50"
+    class="yl:rounded yl:px-2 yl:py-1 yl:text-sm yl:font-medium yl:bg-primary yl:text-background yl:border-2 yl:border-background/80"
   >
     Test Badge
   </span>

src/Components/Badge/index.tsx

@@ -6,9 +6,9 @@ import { BadgeVariantEnum, IBadgeProps } from "./types";
 const Badge: FC<IBadgeProps> = ({ title, className, variant }) => {
   const variants = {
     [BadgeVariantEnum.FILLED]:
-      "yl:bg-primary yl:text-background yl:border-2 yl:border-background/50",
+      "yl:bg-primary yl:text-background yl:border-2 yl:border-background/80",
     [BadgeVariantEnum.OUTLINE]:
-      "yl:bg-transparent yl:border-primary yl:text-primary yl:border-2 yl:border-primary/50"
+      "yl:bg-transparent yl:border-primary yl:text-primary yl:border-2 yl:border-primary/80"
   };
 
   const baseClassNames = "yl:rounded yl:px-2 yl:py-1 yl:text-sm yl:font-medium";

src/Components/Card/Components/CardAuthor.tsx

@@ -23,34 +23,34 @@ const CardAuthor: FC<ICardAuthor> = ({
   if (!author && !date) return null;
 
   return (
-    <div className='yl:flex yl:items-center yl:mb-4'>
-      <div className='yl:flex yl:flex-1 yl:justify-between yl:gap-2'>
-        <div className='yl:flex yl:flex-col yl:md:flex-row yl:md:items-center yl:md:gap-2'>
-          {author && (
-            <>
-              {author.url ? (
-                <NavLink
-                  to={author.url}
-                  onClick={onAuthorClick}
-                  className='yl:flex yl:items-center yl:gap-2 yl:text-primary yl:hover:text-primary yl:hover:underline yl:transition-colors'
-                >
-                  <Avatar src={author.avatarUrl} size={24} />
-                  {author.name}
-                </NavLink>
-              ) : (
-                <span className='yl:flex yl:items-center yl:gap-2 yl:text-muted'>
-                  <Avatar src={author.avatarUrl} size={24} />
-                  {author.name}
-                </span>
-              )}
-            </>
+    <div className='yl:flex yl:items-center yl:mb-4 yl:gap-2 yl:flex-wrap'>
+      {author && (
+        <>
+          {author.url ? (
+            <NavLink
+              to={author.url}
+              onClick={onAuthorClick}
+              className='yl:flex yl:items-center yl:gap-2 yl:text-primary yl:hover:text-primary yl:hover:underline yl:transition-colors'
+            >
+              <Avatar src={author.avatarUrl} size={24} />
+              <span className='yl:text-sm yl:md:text-base'>{author.name}</span>
+            </NavLink>
+          ) : (
+            <span className='yl:flex yl:items-center yl:gap-2 yl:text-muted'>
+              <Avatar src={author.avatarUrl} size={24} />
+              <span className='yl:text-sm yl:md:text-base'>{author.name}</span>
+            </span>
           )}
+        </>
+      )}
 
-          {author && date && <span className='yl:text-muted'>|</span>}
+      {author && date && (
+        <span className='yl:text-muted yl:text-xs yl:md:text-sm'>•</span>
+      )}
 
-          {date && <time className='yl:text-muted'>{date}</time>}
-        </div>
-      </div>
+      {date && (
+        <time className='yl:text-muted yl:text-xs yl:md:text-sm'>{date}</time>
+      )}
     </div>
   );
 };

src/Components/Card/Components/CardHeader.tsx

@@ -35,7 +35,7 @@ const CardHeader: FC<ICardHeader> = ({
           <h3
             id={`card-title-${cardId}`}
             className={classNames(
-              "yl:flex yl:items-center yl:justify-start yl:gap-2 yl:text-lg yl:font-semibold yl:m-0 yl:text-text",
+              "yl:flex yl:items-center yl:justify-start yl:gap-2 yl:text-xl yl:md:text-lg yl:font-semibold yl:m-0 yl:text-text",
               getLineClampClass(maxTitleLines)
             )}
           >
@@ -55,7 +55,7 @@ const CardHeader: FC<ICardHeader> = ({
           <h3
             id={`card-title-${cardId}`}
             className={classNames(
-              "yl:text-lg yl:font-semibold yl:m-0 yl:group-hover:text-primary yl:transition-colors yl:text-text",
+              "yl:text-xl yl:md:text-lg yl:font-semibold yl:m-0 yl:group-hover:text-primary yl:transition-colors yl:text-text",
               getLineClampClass(maxTitleLines)
             )}
           >

src/Components/Card/index.tsx

@@ -172,7 +172,7 @@ const Card: FC<ICard> = memo(
             <p
               id={`card-description-${cardId}`}
               className={classNames(
-                "yl:flex-1 yl:text-muted yl:m-0",
+                "yl:flex-1 yl:text-text/80 yl:m-0",
                 getLineClampClass(maxDescriptionLines)
               )}
             >