fansunited-sports-ui 0.0.8 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "fansunited-sports-ui",
-    "version": "0.0.8",
-    "description": "Sports UI components built with React and Tailwind CSS",
+    "version": "0.3.0",
+    "description": "A comprehensive React component library for building sports websites and applications. Built with Tailwind CSS v4 for seamless theming integration.",
     "author": "Fans United",
     "license": "MIT",
     "keywords": [

package/LICENSE

@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Fans United
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-

package/dist/BADGE.md

@@ -1,50 +0,0 @@
-# Badge
-
-A visual badge component for displaying labels, tags, or status indicators.
-
-## Usage
-
-```tsx
-import { Badge } from "@fansunited/tailwind-ui-components";
-
-// Primary badge
-<Badge badge={{ text: "NEW", variant: "primary", position: "top-right" }} />
-
-// Success badge
-<Badge badge={{ text: "Live", variant: "success", position: "top-left" }} />
-
-// Custom styled badge
-<Badge badge={{ text: "VIP", variant: "custom", position: "top-right", styles: { container: "bg-gold text-black" } }} />
-```
-
-## Props
-
-| Prop    | Type          | Description                |
-| ------- | ------------- | -------------------------- |
-| `badge` | `BadgeConfig` | Badge configuration object |
-
-### BadgeConfig
-
-| Property   | Type                                                                                                | Default     | Description                        |
-| ---------- | --------------------------------------------------------------------------------------------------- | ----------- | ---------------------------------- |
-| `text`     | `string`                                                                                            | -           | Badge text content                 |
-| `variant`  | `"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info" \| "custom"` | `"default"` | Visual variant                     |
-| `position` | `"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"`                                      | -           | Position when used in card context |
-| `styles`   | `BadgeStyles`                                                                                       | -           | Style customization options        |
-
-### BadgeStyles
-
-| Property    | Type     | Description                                                 |
-| ----------- | -------- | ----------------------------------------------------------- |
-| `container` | `string` | Tailwind classes for the badge (used with "custom" variant) |
-
-## Variants
-
-- **default**: Neutral gray background
-- **primary**: Primary color background
-- **secondary**: Secondary color background
-- **success**: Green background
-- **warning**: Yellow background
-- **danger**: Red background
-- **info**: Cyan background
-- **custom**: No default styles - use `styles.container` for full customization

package/dist/BADGE_GROUP.md

@@ -1,43 +0,0 @@
-# BadgeGroup
-
-A component for rendering multiple badges at specific positions within a container.
-
-## Usage
-
-```tsx
-import { BadgeGroup } from "@fansunited/tailwind-ui-components";
-
-// Render all badges
-<BadgeGroup badges={content.badges} />
-
-// Only render top badges
-<BadgeGroup badges={content.badges} positions={["top-left", "top-right"]} />
-
-// With custom container styling
-<BadgeGroup badges={content.badges} styles={{ container: "p-4" }} />
-```
-
-## Props
-
-| Prop        | Type                                                                  | Default       | Description                 |
-| ----------- | --------------------------------------------------------------------- | ------------- | --------------------------- |
-| `badges`    | `BadgeConfig[]`                                                       | -             | Array of badge configs      |
-| `positions` | `Array<"top-left" \| "top-right" \| "bottom-left" \| "bottom-right">` | All positions | Filter badges by position   |
-| `styles`    | `BadgeGroupStyles`                                                    | -             | Style customization options |
-
-### BadgeGroupStyles
-
-| Property    | Type     | Description                                        |
-| ----------- | -------- | -------------------------------------------------- |
-| `container` | `string` | Tailwind classes for each position group container |
-
-## Positioning
-
-Badges are automatically positioned using absolute positioning:
-
-- **top-left**: Top left corner with padding
-- **top-right**: Top right corner with padding
-- **bottom-left**: Bottom left corner with padding
-- **bottom-right**: Bottom right corner with padding
-
-Multiple badges at the same position are displayed in a flex row with gap.

package/dist/BETTING_ODDS.md

@@ -1,245 +0,0 @@
-# BettingOdds Component
-
-A flexible React component for displaying betting odds with operator branding, change indicators, and multiple display modes.
-
-## Features
-
-- **Responsive Layouts**: Automatically switches between horizontal and grid layouts based on the number of odds
-- **Operator Branding**: Display betting operator logos with custom colors
-- **Change Indicators**: Visual arrows showing odds movement (up/down)
-- **Deep Linking**: Support for clickable odds and operator logos
-- **Flash Mode**: Alternating display between operator logo and odds
-- **Customizable Styling**: Configurable padding, typography, and display modes
-
-## Installation
-
-```tsx
-import { BettingOdds } from "@fansunited/tailwind-ui-components";
-import type { BettingOddsProps } from "@fansunited/tailwind-ui-components";
-```
-
-## Basic Usage
-
-### Simple 1X2 Odds
-
-```tsx
-<BettingOdds
-    odds={[
-        { label: "1", value: 2.8, change: "up" },
-        { label: "X", value: 3.1, change: "none" },
-        { label: "2", value: 2.5, change: "down" },
-    ]}
-    operator={{
-        name: "Bet365",
-        logo: { url: "https://example.com/bet365-logo.png", alt: "Bet365" },
-        url: "https://www.bet365.com",
-        backgroundColor: "#037b5b",
-        textColor: "#ffffff",
-    }}
-/>
-```
-
-### Moneyline (2 Odds)
-
-```tsx
-<BettingOdds
-    odds={[
-        { label: "Home Win", value: 1.85, url: "https://example.com/home" },
-        { label: "Away Win", value: 2.05, url: "https://example.com/away" },
-    ]}
-    operator={{
-        name: "William Hill",
-        url: "https://www.williamhill.com",
-    }}
-/>
-```
-
-## Layout Behavior
-
-The component automatically adjusts its layout based on the number of odds:
-
-- **1-3 odds**: Horizontal layout with operator logo (max 110px width) on the left
-- **4+ odds**: Vertical layout with full-width operator logo on top and odds in a 3-column grid
-
-## Props
-
-### `BettingOddsProps`
-
-| Prop       | Type                | Required | Default | Description                                  |
-| ---------- | ------------------- | -------- | ------- | -------------------------------------------- |
-| `odds`     | `OddsValue[]`       | Yes      | -       | Array of odds values to display              |
-| `operator` | `BettingOperator`   | No       | -       | Betting operator providing the odds          |
-| `label`    | `string`            | No       | -       | Overall label for odds section (e.g., "1X2") |
-| `styles`   | `BettingOddsStyles` | No       | `{}`    | Style configuration                          |
-
-### `OddsValue`
-
-| Property      | Type                       | Required | Description                                         |
-| ------------- | -------------------------- | -------- | --------------------------------------------------- |
-| `label`       | `string`                   | Yes      | Label for the odd (e.g., "1", "X", "2", "Over 2.5") |
-| `value`       | `number \| string`         | Yes      | Odds value (e.g., 2.8, "1")                         |
-| `url`         | `string`                   | No       | Deep link URL for this specific odd                 |
-| `change`      | `"up" \| "down" \| "none"` | No       | Change indicator (default: "none")                  |
-| `onClick`     | `(odd: OddsValue) => void` | No       | Click handler (suppresses default navigation)       |
-| `eventId`     | `string`                   | No       | Optional event ID for platform integration          |
-| `selectionId` | `string`                   | No       | Optional selection ID for platform integration      |
-
-### `BettingOperator`
-
-| Property          | Type                                  | Required | Description                                   |
-| ----------------- | ------------------------------------- | -------- | --------------------------------------------- |
-| `name`            | `string`                              | Yes      | Operator name (e.g., "Bet365")                |
-| `url`             | `string`                              | Yes      | Deep link URL to the betting page             |
-| `logo`            | `ImageWithVariations`                 | No       | Operator logo                                 |
-| `backgroundColor` | `string`                              | No       | Custom background color (e.g., "#1e3a8a")     |
-| `textColor`       | `string`                              | No       | Custom text color (e.g., "#ffffff")           |
-| `onClick`         | `(operator: BettingOperator) => void` | No       | Click handler (suppresses default navigation) |
-
-### `BettingOddsStyles`
-
-| Property        | Type                             | Default     | Description                         |
-| --------------- | -------------------------------- | ----------- | ----------------------------------- |
-| `padding`       | `"none" \| "sm" \| "md" \| "lg"` | `"md"`      | Padding size                        |
-| `typography`    | `"sm" \| "md" \| "lg"`           | `"md"`      | Typography size                     |
-| `mode`          | `"default" \| "flash"`           | `"default"` | Display mode                        |
-| `flashInterval` | `number`                         | `3000`      | Flash mode interval in milliseconds |
-
-## Advanced Examples
-
-### Flash Mode
-
-Flash mode alternates between showing the operator logo and the odds at a configurable interval:
-
-```tsx
-<BettingOdds
-    odds={[
-        { label: "1", value: 2.8 },
-        { label: "X", value: 3.1 },
-        { label: "2", value: 2.5 },
-    ]}
-    operator={{
-        name: "Bet365",
-        logo: { url: "https://example.com/bet365-logo.png", alt: "Bet365" },
-        url: "https://www.bet365.com",
-        backgroundColor: "#037b5b",
-    }}
-    styles={{
-        mode: "flash",
-        flashInterval: 3000, // Switch every 3 seconds
-    }}
-/>
-```
-
-### Multiple Odds (Grid Layout)
-
-When displaying 4 or more odds, the component automatically uses a grid layout with 3 odds per row:
-
-```tsx
-<BettingOdds
-    odds={[
-        { label: "1-0", value: 8.5, change: "up" },
-        { label: "2-0", value: 12.0 },
-        { label: "2-1", value: 9.0, change: "down" },
-        { label: "0-0", value: 11.0 },
-        { label: "1-1", value: 6.5, change: "up" },
-    ]}
-    operator={{
-        name: "Bet365",
-        url: "https://www.bet365.com",
-    }}
-    label="Correct Score"
-/>
-```
-
-### Custom Styling
-
-```tsx
-<BettingOdds
-    odds={[
-        { label: "Over 2.5", value: 1.85 },
-        { label: "Under 2.5", value: 2.05 },
-    ]}
-    operator={{
-        name: "Betfair",
-        url: "https://www.betfair.com",
-    }}
-    styles={{
-        padding: "lg",
-        typography: "lg",
-    }}
-/>
-```
-
-### Custom Click Handlers
-
-You can provide custom click handlers to intercept clicks on odds or the operator logo. When provided, these handlers suppress the default navigation behavior:
-
-```tsx
-<BettingOdds
-    odds={[
-        {
-            label: "1",
-            value: 2.8,
-            url: "https://www.bet365.com/home-win",
-            onClick: (odd) => {
-                // Custom tracking or navigation logic
-                console.log("Clicked odd:", odd.label, odd.value);
-                // Navigate programmatically or trigger analytics
-                trackBetClick(odd);
-            },
-        },
-        {
-            label: "X",
-            value: 3.1,
-            url: "https://www.bet365.com/draw",
-            onClick: (odd) => {
-                trackBetClick(odd);
-            },
-        },
-        {
-            label: "2",
-            value: 2.5,
-            url: "https://www.bet365.com/away-win",
-            onClick: (odd) => {
-                trackBetClick(odd);
-            },
-        },
-    ]}
-    operator={{
-        name: "Bet365",
-        url: "https://www.bet365.com",
-        onClick: (operator) => {
-            // Custom operator click handling
-            console.log("Clicked operator:", operator.name);
-            trackOperatorClick(operator);
-        },
-    }}
-/>
-```
-
-This is useful for:
-
-- Analytics tracking before navigation
-- Custom navigation logic (e.g., opening modals, in-app browsers)
-- Integration with state management
-- Platform-specific deep linking
-
-## Styling
-
-The component uses Tailwind CSS utility classes and respects your application's theme configuration. Key design tokens used:
-
-- `bg-muted` / `bg-muted/50` - Background colors
-- `text-foreground` / `text-muted-foreground` - Text colors
-- `text-green-500` / `text-red-500` - Change indicators
-- Custom colors via `backgroundColor` and `textColor` props
-
-## Accessibility
-
-- All clickable odds and operator logos are properly linked with `<a>` tags
-- External links include `target="_blank"` and `rel="noopener noreferrer"`
-- Click events include `stopPropagation()` to prevent unwanted bubbling
-- Operator logos include proper `alt` text
-
-## Examples
-
-For complete working examples, see `src/examples/BettingOddsExamples.tsx` in the repository.