fansunited-sports-ui 0.0.5 → 0.0.7

package/dist/CONTENT_CARD.md

@@ -806,8 +806,8 @@ interface CTAGroupProps {
 
 ```tsx
 <CTAGroup
-    primaryCta={<CTAButton cta={{ text: "Learn More", href: "/learn" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Share", onClick: handleShare }} />}
+    primaryCta={<CTAButton text="Learn More" href="/learn" />}
+    secondaryCta={<CTAButton text="Share" onClick={handleShare} />}
     layout="responsive" // Vertical on mobile, horizontal on desktop
     className="mt-4"
 />
@@ -886,18 +886,10 @@ interface CallToAction {
 ```tsx
 import { CTAButton } from '@fansunited/tailwind-ui-components';
 
-<CTAButton cta={{
-  text: "Learn More",
-  href: "/learn-more",
-  variant: "primary"
-}} />
+<CTAButton text="Learn More" href="/learn-more" variant="primary" />
 
 // With custom onClick
-<CTAButton cta={{
-  text: "Subscribe",
-  onClick: () => handleSubscribe(),
-  variant: "secondary"
-}} />
+<CTAButton text="Subscribe" onClick={() => handleSubscribe()} variant="secondary" />
 ```
 
 **Variants:**
@@ -1441,8 +1433,8 @@ CTAs should be passed as separate `primaryCta` and `secondaryCta` props, not as
 // Good - CTAs as props
 <ContentCard
     content={cardContent}
-    primaryCta={<CTAButton cta={{ text: "Learn More", href: "/learn" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Share", onClick: handleShare }} />}
+    primaryCta={<CTAButton text="Learn More" href="/learn" />}
+    secondaryCta={<CTAButton text="Share" onClick={handleShare} />}
 />;
 
 // Avoid - CTAs in content (deprecated pattern)

package/dist/CTA_BUTTON.md

@@ -26,37 +26,23 @@ import type { CTAButtonProps, CallToAction } from "@fansunited/tailwind-ui-compo
 ### Primary Button
 
 ```tsx
-<CTAButton
-    cta={{
-        text: "Get Started",
-        variant: "primary",
-        onClick: () => console.log("clicked"),
-    }}
-/>
+<CTAButton text="Get Started" variant="primary" onClick={() => console.log("clicked")} />
 ```
 
 ### Link Button
 
 ```tsx
-<CTAButton
-    cta={{
-        text: "Learn More",
-        href: "/learn-more",
-        variant: "outline",
-    }}
-/>
+<CTAButton text="Learn More" href="/learn-more" variant="outline" />
 ```
 
 ### Custom Styled Button
 
 ```tsx
 <CTAButton
-    cta={{
-        text: "Custom Action",
-        variant: "custom",
-        styles: { container: "bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3" },
-        onClick: handleCustomAction,
-    }}
+    text="Custom Action"
+    variant="custom"
+    styles={{ container: "bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3" }}
+    onClick={handleCustomAction}
 />
 ```
 
@@ -105,8 +91,8 @@ import { ContentCard, CTAButton } from "@fansunited/tailwind-ui-components";
 <ContentCard
     content={cardContent}
     variant="hero"
-    primaryCta={<CTAButton cta={{ text: "Read More", href: "/article", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Watch Video", onClick: openVideo, variant: "outline" }} />}
+    primaryCta={<CTAButton text="Read More" href="/article" variant="primary" />}
+    secondaryCta={<CTAButton text="Watch Video" onClick={openVideo} variant="outline" />}
 />;
 ```
 
@@ -117,8 +103,8 @@ import { EntityHeader, CTAButton } from "@fansunited/tailwind-ui-components";
 
 <EntityHeader
     entity={{ name: "Arsenal", imageUrl: "..." }}
-    primaryCta={<CTAButton cta={{ text: "Follow", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Stats", variant: "outline" }} />}
+    primaryCta={<CTAButton text="Follow" variant="primary" />}
+    secondaryCta={<CTAButton text="Stats" variant="outline" />}
 />;
 ```
 

package/dist/CTA_GROUP.md

@@ -9,28 +9,22 @@ import { CTAGroup, CTAButton } from "@fansunited/tailwind-ui-components";
 
 // Responsive layout (default)
 <CTAGroup
-    primaryCta={<CTAButton cta={{ text: "Primary", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Secondary", variant: "outline" }} />}
+    primaryCta={<CTAButton text="Primary" variant="primary" />}
+    secondaryCta={<CTAButton text="Secondary" variant="outline" />}
 />
 
 // Vertical layout
-<CTAGroup
-    primaryCta={<CTAButton cta={{ text: "Subscribe", variant: "primary" }} />}
-    layout="vertical"
-/>
+<CTAGroup primaryCta={<CTAButton text="Subscribe" variant="primary" />} layout="vertical" />
 
 // Horizontal layout
 <CTAGroup
-    primaryCta={<CTAButton cta={{ text: "Accept", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "Decline", variant: "outline" }} />}
+    primaryCta={<CTAButton text="Accept" variant="primary" />}
+    secondaryCta={<CTAButton text="Decline" variant="outline" />}
     layout="horizontal"
 />
 
 // With custom container styling
-<CTAGroup
-    primaryCta={<CTAButton cta={{ text: "Submit", variant: "primary" }} />}
-    styles={{ container: "mt-4 gap-4" }}
-/>
+<CTAGroup primaryCta={<CTAButton text="Submit" variant="primary" />} styles={{ container: "mt-4 gap-4" }} />
 ```
 
 ## Props

package/dist/PROFILE_HEADER.md

@@ -16,8 +16,8 @@ import { ProfileHeader } from "fansunited-tailwind-ui-components";
         subtitle: "Premier League",
         styles: { imageShape: "square", imageSize: "lg" },
     }}
-    primaryCta={<CTAButton cta={{ text: "Follow", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "View Stats", variant: "outline" }} />}
+    primaryCta={<CTAButton text="Follow" variant="primary" />}
+    secondaryCta={<CTAButton text="View Stats" variant="outline" />}
 />;
 ```
 
@@ -73,7 +73,7 @@ The `entity` prop accepts all `EntityDisplayProps`:
         subtitle: "Premier League",
         styles: { imageShape: "square", imageSize: "xl" },
     }}
-    primaryCta={<CTAButton cta={{ text: "Follow", variant: "primary" }} />}
+    primaryCta={<CTAButton text="Follow" variant="primary" />}
     styles={{
         background: "bg-gradient-to-r from-primary-600 to-primary-800",
         padding: "6",
@@ -92,8 +92,8 @@ The `entity` prop accepts all `EntityDisplayProps`:
         subtitle: "Forward • Portugal",
         styles: { imageShape: "round", imageSize: "lg" },
     }}
-    primaryCta={<CTAButton cta={{ text: "Follow", variant: "primary" }} />}
-    secondaryCta={<CTAButton cta={{ text: "View Stats", variant: "outline" }} />}
+    primaryCta={<CTAButton text="Follow" variant="primary" />}
+    secondaryCta={<CTAButton text="View Stats" variant="outline" />}
     ctaLayout="stacked"
 />
 ```