sy-ui-lib 1.0.0

package/dist/components/EventCard/EventCard.component.d.ts

@@ -0,0 +1,48 @@
+import { MatchCardProps } from './EventCard.types';
+/**
+ * EventCard Component
+ *
+ * Renders a card displaying match details, bet timers, and bet limits.
+ * Includes an interactive toggle to enable/disable the match or market,
+ * and a button to trigger edit actions.
+ *
+ * Behavior:
+ * - Displays match title and scheduled start time in the header.
+ * - Shows a toggle reflecting `isOn` state. Toggle calls `onToggle` when changed.
+ * - Bet Timer section displays waiting times (in seconds) for matchOdds, bookmaker, and fancy markets.
+ * - Bet Limits section shows min/max values for markets that support limits; for others, a "View" button is displayed.
+ * - Fully responsive: adjusts typography and layout based on screen size.
+ *
+ * Props:
+ * @param eventId Event Id unique for each event
+ * @param eventName Main match title displayed in the header (e.g., "Team A vs Team B").
+ * @param eventStartTime Scheduled start time of the match (displayed in header).
+ * @param betTiming API data containing bet waiting times and min/max limits for matchOdds, bookmaker, and fancy markets.
+ * @param betLimits Pre-computed min/max limits for supported markets.
+ * @param visible Controls the state of the toggle button. True = enabled, False = disabled
+ * @param onToggle Callback triggered when the toggle is clicked. Receives the new toggle state.
+ * @param onEdit Callback triggered when the Edit button is clicked.
+ * @param onView Callback triggered when a View button is clicked for a market without limits.
+ *
+ * @example
+ * <EventCard
+ *   eventId="evt123"
+ *   eventName="Manchester United vs Liverpool"
+ *   eventStartTime="10:00 AM, 10 Feb 2026"
+ *   betTiming={[
+ *    { key: "matchOdds", label: "Match Odds", value: "5s" },
+ *    { key: "bookmaker", label: "Bookmaker", value: "7s" },
+ *    { key: "fancy", label: "Fancy", value: "3s" },
+ *   ]}
+ *   betLimits={
+ *     matchOdds: { min: 10, max: 1000 },
+ *     bookmaker: { min: 20, max: 2000 },
+ *   }
+ *   visible={true}
+ *   onToggle={handleToggle}
+ *   onEdit={handleEdit}
+ *   onView={handleView}
+ *  />
+ */
+declare const EventCard: React.FC<MatchCardProps>;
+export default EventCard;

package/dist/components/EventCard/EventCard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { MatchCardProps } from './EventCard.types';
+declare const meta: Meta<MatchCardProps>;
+export default meta;
+type Story = StoryObj<MatchCardProps>;
+export declare const Default: Story;

package/dist/components/EventCard/EventCard.types.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Keys representing available betting markets.
+ */
+export type MarketKey = "matchOdds" | "bookmaker" | "fancy";
+/**
+ * Configuration for a single market's betting parameters.
+ */
+export type BetMarketData = {
+    key: MarketKey;
+    value?: number;
+    label?: string;
+};
+export interface MatchCardProps {
+    eventId: string;
+    /** Main match title displayed in the header (e.g., "Team A vs Team B") */
+    eventName: string;
+    /** Scheduled start time of the match */
+    eventStartTime: string;
+    /** Array of bet waiting times for each market. */
+    betTiming: BetMarketData[];
+    /** Already computed min/max for supported markets */
+    betLimits: {
+        matchOdds: {
+            min: number;
+            max: number;
+        };
+        bookmaker: {
+            min: number;
+            max: number;
+        };
+        fancy?: {
+            min: number;
+            max: number;
+        };
+    };
+    /** Controls the state of the toggle button. True = enabled, False = disabled */
+    visible: boolean;
+    /** Callback triggered when the toggle button is clicked, receives the new state */
+    onToggle: (eventId: string, value: boolean) => void;
+    /** Callback triggered when the Edit button is clicked */
+    onEdit: (eventId: string) => void;
+    /** Callback triggered when any "View" button is clicked for markets without limits */
+    onView: (eventId: string) => void;
+}

package/dist/components/EventCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventCard } from './EventCard.component';
+export { EventCard };
+export * from './EventCard.types';

package/dist/components/EventDisplayCard/EventDisplayCard.component.d.ts

@@ -0,0 +1,24 @@
+import { EventDisplayCardProps } from './EventDisplayCard.types';
+/**
+ * EventDisplayCard Component
+ *
+ * A reusable card layout to display an event or label with an icon,
+ * title, and optional action buttons on the right.
+ *
+ * Props:
+ * @param {string} iconName - The icon to be shown on the left.
+ * @param {string} title - The main heading or event label.
+ * @param {ButtonProps[]} [actions] - An optional array of button props to render CTAs.
+ *
+ * Example usage:
+ * <EventDisplayCard
+ *   iconName="cricketBat"
+ *   title="Bangladesh Emerg v/s South Africa Emerg"
+ *   actions={[
+ *     { text: "Details", iconName: "notes", variant: "secondary", size: "small", onClick: () => {} },
+ *     { text: "Delete", variant: "danger", size: "small", onClick: () => {} },
+ *   ]}
+ * />
+ */
+declare const EventDisplayCard: React.FC<EventDisplayCardProps>;
+export default EventDisplayCard;

package/dist/components/EventDisplayCard/EventDisplayCard.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as EventDisplayCard } from './EventDisplayCard.component';
+/** Storybook metadata for the Tooltip component */
+declare const meta: Meta<typeof EventDisplayCard>;
+export default meta;
+type Story = StoryObj<typeof EventDisplayCard>;
+/** Default story showing tooltip on hover */
+export declare const Default: Story;

package/dist/components/EventDisplayCard/EventDisplayCard.types.d.ts

@@ -0,0 +1,10 @@
+import { ButtonProps, IconName } from '..';
+/** Props for the EventDisplayCard component.*/
+export interface EventDisplayCardProps {
+    /**  Name of the icon to display on the left side.*/
+    iconName: IconName;
+    /** Title or label to be shown next to the icon.*/
+    title: string;
+    /** Optional array of buttons (CTAs) to render on the right side. */
+    actions?: ButtonProps[];
+}

package/dist/components/EventDisplayCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventDisplayCard } from './EventDisplayCard.component';
+export { EventDisplayCard };
+export type * from './EventDisplayCard.types';

package/dist/components/EventInfoCard/EventInfoCard.component.d.ts

@@ -0,0 +1,38 @@
+import { EventInfoCardProps } from './EventInfoCard.types';
+/**
+ * EventInfoCard component
+ * Displays a sports/event summary card with competition info,
+ * live status, event timing, and a CTA to view event details.
+ * Behavior:
+ * - When `isLive` is `true`
+ *    → The top chip shows "Live" in active state
+ *    → The status chip shows `startStatus`
+ * - When `isLive` is `false`
+ *    → The top chip appears in locked state
+ *    → The status chip displays "Tomorrow"
+ * The component is fully responsive and adapts padding and spacing across base and medium screen sizes.
+ * @param {string} competition
+ * Name of the competition or tournament displayed in the header.
+ * @param {boolean} isLive
+ * Controls live/locked state styling and status chip behavior.
+ * @param {string} startStatus
+ * Text displayed in the start status chip (e.g. "Started", "Tomorrow").
+ * @param {string} title
+ * Main event title (e.g. team vs team).
+ * @param {string} time
+ * Scheduled start time of the event.
+ * @param {string} id
+ * Unique event identifier displayed at the bottom of the card.
+ * @example
+ * <EventInfoCard
+ *   competition="ICC Mens T20 WC Warm Up Matches"
+ *   isLive={true}
+ *   startStatus="Started"
+ *   title="Zimbabwe v Oman"
+ *   time="08:30 PM"
+ *   id="match-123"
+ *   onClick={(id) => console.log(id)}
+ * />
+ */
+declare const EventInfoCard: React.FC<EventInfoCardProps>;
+export default EventInfoCard;

package/dist/components/EventInfoCard/EventInfoCard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { EventInfoCardProps } from './EventInfoCard.types';
+declare const meta: Meta<EventInfoCardProps>;
+export default meta;
+type Story = StoryObj<EventInfoCardProps>;
+export declare const Default: Story;

package/dist/components/EventInfoCard/EventInfoCard.types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Props for the EventInfoCard component.
+ */
+export interface EventInfoCardProps {
+    /** Name of the competition or tournament */
+    competition: string;
+    /** Whether the event is live */
+    isLive: boolean;
+    /** Text displayed in the started status chip (e.g. "Started") */
+    startStatus: string;
+    /** Main event title (e.g. team vs team) */
+    title: string;
+    /** Event start time or scheduled time */
+    time: string;
+    /** Unique identifier for the event */
+    id: string;
+    /** Click handler triggered when View button is clicked */
+    onClick?: (id: string) => void;
+}

package/dist/components/EventInfoCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as EventInfoCard } from './EventInfoCard.component';
+export { EventInfoCard };
+export * from './EventInfoCard.types';

package/dist/components/FileUploader/FileUploader.component.d.ts

@@ -0,0 +1,55 @@
+import { UploadPaymentSlipProps } from './FileUploader.types';
+/**
+ * FileUploader Component
+ *
+ * A reusable and accessible file upload component that supports both
+ * drag-and-drop and manual file selection. It validates file formats,
+ * handles a maximum file upload limit, and displays error messages.
+ *
+ * Props:
+ * @param {string} [id] – Unique identifier for the input element.
+ * @param {string} [name] – Name attribute for the input (useful for forms).
+ * @param {string} [label] – Label text displayed above the uploader.
+ * @param {boolean} [isRequired=false] – If true, appends an asterisk (*) to the label.
+ * @param {boolean} [hasError=false] – If true, marks the field as invalid and displays an error.
+ * @param {string} [errorMessage] – Custom error message to display when `hasError` is true.
+ * @param {boolean} [isDisabled=false] – Disables user interaction (drag, drop, browse).
+ * @param {function} [onChange] – Callback fired when selected files change.
+ *   Receives a synthetic event similar to a native input change event:
+ *   `(e: React.ChangeEvent<HTMLInputElement>) => void`.
+ * @param {string} instructionText – Instructional text shown before the clickable hyperlink (e.g., “Drag & drop your files or”).
+ * @param {string} hyperText – Clickable hyperlink text that opens the file browser (e.g., “browse”).
+ * @param {string} supportText – Text shown before the list of supported formats (e.g., “Supported formats”).
+ * @param {string[]} supportFormate – Array of allowed file extensions (e.g., ["jpg", "png", "pdf"]).
+ * @param {number} [maxFiles=10] – Maximum number of files allowed to be uploaded at once.
+ * @param {string} [maxLimitMessage="You have reached the maximum uploads limit."] –
+ *   Message displayed when the user exceeds the upload limit.
+ * @param {string} [invalidFileMessage="Invalid file type."] –
+ *   Message displayed when unsupported file types are uploaded.
+ *
+ * Features:
+ * - Supports drag-and-drop and manual file browsing
+ * - Validates file extensions
+ * - Restricts uploads based on a configurable maximum file count
+ * - Displays selected file names with remove icons
+ * - Handles disabled, required, and error states
+ *
+ *  @example
+ * Example usage:
+ * <FileUploader
+ *   id="paymentSlip"
+ *   name="paymentSlip"
+ *   label="Upload Payment Slip"
+ *   isRequired
+ *   instructionText="Drag & drop your files or"
+ *   hyperText="browse"
+ *   supportText="Supported formats"
+ *   supportFormate={["jpg", "jpeg", "png", "pdf"]}
+ *   maxFiles={5}
+ *   maxLimitMessage="You can upload a maximum of 5 files."
+ *   invalidFileMessage="Only JPG, PNG, or PDF files are allowed."
+ *   onChange={(e) => console.log("Files selected:", e.target.files)}
+ * />
+ */
+declare const FileUploader: React.FC<UploadPaymentSlipProps>;
+export default FileUploader;

package/dist/components/FileUploader/FileUploader.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as FileUploader } from './FileUploader.component';
+declare const meta: Meta<typeof FileUploader>;
+export default meta;
+type Story = StoryObj<typeof FileUploader>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;

package/dist/components/FileUploader/FileUploader.types.d.ts

@@ -0,0 +1,23 @@
+import { InputFieldProps } from '../InputField';
+export interface UploadPaymentSlipProps extends InputFieldProps {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Instructional text displayed before the browse link */
+    instructionText: string;
+    /** Text label preceding the supported format list */
+    supportText: string;
+    /** Array of supported file extensions (e.g., ["jpg", "png", "pdf"]) */
+    supportFormate: string[];
+    /** Maximum number of files that can be uploaded at once */
+    maxFiles?: number;
+    /** Custom message displayed when the max upload limit is reached */
+    maxLimitMessage?: string;
+    /** Custom message displayed when a file with an unsupported format is uploaded */
+    invalidFileMessage?: string;
+    /**
+     * Maximum allowed file size in bytes.
+     * Example: `5 * 1024 * 1024` for a 5MB limit.
+     */
+    maxFileSize: number;
+    /** Custom error message displayed when a selected file exceeds the `maxFileSize` limit.*/
+    maxFileSizeMessage?: string;
+}

package/dist/components/FileUploader/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FileUploader } from './FileUploader.component';
+export type * from './FileUploader.types';
+export { FileUploader };

package/dist/components/FlashNotification/FlashNotification.component.d.ts

@@ -0,0 +1,34 @@
+import { FlashNotificationProps } from './FlashNotification.types';
+/**
+ * FlashNotification component
+ *
+ * A blinking notification banner used to display
+ * important system-level messages such as alerts,
+ * suspended states, or critical notices.
+ *
+ * @param {boolean} isVisible - Controls whether the notification is rendered.
+ * @param {object}  typographyProps - Typography configuration for the message content.
+ * @param {string}  typographyProps.text - Text to be displayed inside the notification.
+ * @param {string} [typographyProps.variant = "overline"] - Typography variant for the text.
+ * @param {string} [typographyProps.color = "white"] - Text color token.
+ * @param {FlashNotificationColor} [color = "error"] - Background and border color token.
+ *
+ * Example usage:
+ * <FlashNotification
+ *   isVisible
+ *   color="error"
+ *   typographyProps={{ text: "ACCOUNT SUSPENDED" }}
+ * />
+ *
+ * <FlashNotification
+ *   isVisible
+ *   color="goldenYellow"
+ *   typographyProps={{
+ *     text: "SYSTEM PAUSED",
+ *     variant: "h6",
+ *     color: "black",
+ *   }}
+ * />
+ */
+declare const FlashNotification: React.FC<FlashNotificationProps>;
+export default FlashNotification;

package/dist/components/FlashNotification/FlashNotification.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as FlashNotification } from './FlashNotification.component';
+declare const meta: Meta<typeof FlashNotification>;
+export default meta;
+type Story = StoryObj<typeof FlashNotification>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const CustomTypography: Story;
+export declare const Hidden: Story;

package/dist/components/FlashNotification/FlashNotification.types.d.ts

@@ -0,0 +1,13 @@
+import { TypographyProps } from '../Typography';
+/** Supported color tokens for FlashNotification background and border */
+type FlashNotificationColor = "primary" | "secondary" | "error" | "success" | "black" | "smokyblack" | "slategray" | "neutralGray" | "babyBlue" | "watermelonRed" | "goldenYellow";
+/** Props definition for FlashNotification component */
+export interface FlashNotificationProps {
+    /** Controls whether the notification is rendered */
+    isVisible: boolean;
+    /** Typography configuration for the notification text */
+    typographyProps: Pick<TypographyProps, "text"> & Partial<Omit<TypographyProps, "text">>;
+    /** Background and border color token (defaults to "error") */
+    color?: FlashNotificationColor;
+}
+export {};

package/dist/components/FlashNotification/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FlashNotification } from './FlashNotification.component';
+export { FlashNotification };
+export * from './FlashNotification.types';

package/dist/components/Icon/Icon.component.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { IconProps } from './Icon.types';
+/**
+ * Icon Component
+ *
+ * Renders SVG icon
+ * Can be used to display any svg icon from the icon gallery throughout the app with consistent styling.
+ *
+ * Props:
+ * @param {IconName} icon Name of the icon to be displayed (only predefined icons permitted)/s
+ * @param {number} size Size of the icon in pixels (supports 20 or 24). Defaults to 20
+ * @param {string} color Color of the icon (fill/stroke). Defaults to design system color
+ * @param {function} onClick If provided, icon becomes clickable and renders as a <button>
+ * @param {boolean} cursorPointer Enables pointer cursor styling when true. Defaults to true.
+ *
+ * Example usage:
+ *  <Icon icon='view' size={24} size={20} color="smokyblack" onClick={()=> console.log("clicked")} />
+ */
+declare const Icon: React.FC<IconProps>;
+export default Icon;

package/dist/components/Icon/Icon.types.d.ts

@@ -0,0 +1,43 @@
+import { icons } from './SvgIcons';
+/**
+ * IconName is a union type of all valid icon names available in the `icons` object.
+ * This ensures type-safe usage of icon names throughout the app.
+ */
+export type IconName = keyof typeof icons;
+/**
+ * IconSize defines the supported icon sizes in pixels.
+ */
+export type IconSize = 12 | 16 | 20 | 24;
+/** A constant mapping of semantic color names to their corresponding CSS variable tokens */
+export declare const iconColor: {
+    readonly primary: "--color-primary";
+    readonly secondary: "--color-secondary";
+    readonly success: "--color-success";
+    readonly error: "--color-error";
+    readonly black: "--color-black";
+    readonly smokyblack: "--color-smokyblack";
+    readonly slategray: "--color-slategray";
+    readonly brightgray: "--color-brightgray";
+    readonly offwhite: "--color-offwhite";
+    readonly white: "--color-white";
+    readonly goldenYellow: "--color-goldenYellow";
+    readonly neutralGray: "--color-neutralGray";
+    readonly techBlue: "--color-techBlue";
+};
+/** A union type representing all valid theme color names used in the iconColor map */
+export type IconColor = keyof typeof iconColor;
+/** Props associated with Icon Component */
+export type IconProps = {
+    /** The name of the Icon to be rendered */
+    icon: IconName;
+    /** Optional size of the icon (in px). Defaults to 20 */
+    size?: IconSize;
+    /** Optional fill or stroke color. Defaults to icon's native color */
+    color?: IconColor;
+    /** Optional click handler for the icon  */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    /** Optional. Enables pointer cursor styling (default: true). */
+    cursorPointer?: boolean;
+    /** Optional Tailwind or custom class */
+    className?: string;
+};

package/dist/components/Icon/SvgIcons.d.ts

@@ -0,0 +1,80 @@
+import { IconSize } from './Icon.types';
+/**
+ * Storing Icons as key value pairs and Exporting a collection of SVG icons as react elements
+ */
+export declare const icons: {
+    logout: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    cancel: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    notes: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    search: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    secure: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    active: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    locked: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    suspended: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    bet: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    hide: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    view: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    back: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    upArrow: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    downArrow: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    forwardArrow: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    tv: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    addUser: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    calendar: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    caretDown: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    caretLeft: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    caretRight: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    caretUp: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    banking: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    edit: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    profile: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    downline: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    reports: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    bank: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    betlist: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    analysis: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    theme: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    loader: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    done: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    cricketBat: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    menu: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    handshake: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    searchFilter: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    filter: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    play: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    cricket: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    refresh: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    plus: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    minus: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    tennis: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    date: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    info: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    multiMarket: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    glob: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    notification: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    home: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    inPlay: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    upcoming: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    pin: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    pinned: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    soccer: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    specialMarket: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    doneFill: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    circlePlus: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    circleMinus: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    deposit: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    withdraw: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    upload: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    jpg: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    png: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    pdf: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    file: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    delete: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    letterB: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    letterF: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    graph: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    timer: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    casino: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    kabaddi: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+    virtualEvents: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Icon } from './Icon.component';
+export { Icon };
+export type * from './Icon.types';

package/dist/components/ImageCard/ImageCard.component.d.ts

@@ -0,0 +1,22 @@
+import { ImageCardProps } from './ImageCard.types';
+/**
+ * ImageCard component
+ *
+ * A clickable image card with:
+ * - Background image
+ * - Title label
+ * - Responsive sizing (mobile + desktop)
+ *
+ * @param imageUrl URL of the image to display.
+ * @param title Text displayed below the image.
+ * @param onClick Optional click handler for the card.
+ *
+ * @example
+ * <ImageCard
+ *   imageUrl="/images/sample.png"
+ *   title="Cricket"
+ *   onClick={() => console.log("Card clicked")}
+ * />
+ */
+declare const ImageCard: React.FC<ImageCardProps>;
+export default ImageCard;

package/dist/components/ImageCard/ImageCard.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as ImageCard } from './ImageCard.component';
+declare const meta: Meta<typeof ImageCard>;
+export default meta;
+/** Type alias for a story object of ImageCard*/
+type Story = StoryObj<typeof ImageCard>;
+/** Default ImageCard without title prop.*/
+export declare const Default: Story;
+export declare const MultipleCards: Story;

package/dist/components/ImageCard/ImageCard.types.d.ts

@@ -0,0 +1,8 @@
+export interface ImageCardProps {
+    /** URL of the image to display */
+    imageUrl: string;
+    /** Text displayed below the image */
+    title: string;
+    /** Optional click handler for the card */
+    onClick?: () => void;
+}

package/dist/components/ImageCard/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ImageCard } from './ImageCard.component';
+export { ImageCard };
+export * from './ImageCard.types';

package/dist/components/InputField/InputField.component.d.ts

@@ -0,0 +1,28 @@
+import { InputFieldProps } from './InputField.types';
+/**
+ * InputField Component
+ *
+ * This component use for input field
+ *
+ * Props:
+ *  @param {string} label The label text displayed above the input field.
+ *  @param {string} id The HTML `id` attribute for the input
+ *  @param {string} name The name of the input .
+ *  @param {"text" | "email" | "number"} type The type of input
+ *  @param {string} placeholder Text displayed inside the input when it's empty.
+ *  @param {boolean} isRequired If field is mandatory then set 'true' otherwise default value is 'false'.
+ *  @param {boolean} hasError would be more appropriate here Shows an error state with red border and error message when `true`.
+ *  @param {string} errorMessage The message displayed when there's an error and `hasError` is `true`.
+ *  @param {boolean} isDisabled Disables the input field when `true`.
+ *  @param {string} value The current value of the input.
+ *  @param {string} className Optional custom CSS classes to style the input.
+ *  @param {void} onChange Handler function called when the input value changes.
+ *  @param {string} iconName Give icon name for icon show in input field.
+ *  @param {void} onClick Handler function on icon onclick event.
+ *  @returns A styled div with label and input box the given props
+ *
+ * Example usage:
+ * <InputField type='text' label='Username' placeholder='Username' />
+ */
+declare const InputField: React.FC<InputFieldProps>;
+export default InputField;

package/dist/components/InputField/InputField.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InputFieldProps } from './InputField.types';
+declare const meta: Meta<InputFieldProps>;
+export default meta;
+type Story = StoryObj<InputFieldProps>;
+export declare const Default: Story;
+export declare const ErrorInput: Story;
+export declare const Focused: Story;
+export declare const Disabled: Story;
+export declare const InputFieldWithIcon: Story;