sy-ui-lib 1.0.0

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

@@ -0,0 +1,23 @@
+import { TooltipPropsExt } from './TooltipExt.types';
+/**
+ * TooltipExt Component
+ *
+ * Displays a tooltip message when users hover over a target element.
+ * The tooltip dynamically adjusts its position based on available viewport space
+ * and flips direction when necessary.
+ *
+ * The tooltip also updates its position on window resize and scroll
+ * to ensure that it remains visible within the viewport.
+ *
+ * Props:
+ * @param {React.ReactNode | string | number} title - Content displayed inside the tooltip. Supports text, numbers, or custom JSX content.
+ * @param {React.ReactNode} children - The element that triggers the tooltip on hover.
+ * @param {"top" | "bottom" | "left" | "right"} [position="top"] - Preferred position of the tooltip relative to the target element. The component may automatically flip the position if there is insufficient space.
+ *
+ * Example usage:
+ * <TooltipExt title="Click to submit" position="top">
+ *   <button>Submit</button>
+ * </TooltipExt>
+ */
+declare const TooltipExt: React.FC<TooltipPropsExt>;
+export default TooltipExt;

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

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as TooltipExt } from './TooltipExt.component';
+/**
+ * Storybook metadata for the TooltipExt component.
+ * This configuration defines how the TooltipExt component appears in the Storybook UI.
+ */
+declare const meta: Meta<typeof TooltipExt>;
+export default meta;
+type Story = StoryObj<typeof TooltipExt>;
+/** Default story demonstrating a basic tooltip with simple text content. */
+export declare const Basic: Story;
+/** Story showing a tooltip with custom JSX content. */
+export declare const CustomContent: Story;
+/** Story demonstrating tooltip behavior with long text content. */
+export declare const LongText: Story;
+/** Story to test tooltip flipping when placed near the screen edge. */
+export declare const EdgeFlip: Story;
+/** Story demonstrating tooltip behavior inside a scrollable container. */
+export declare const ScrollContainer: Story;

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

@@ -0,0 +1,11 @@
+/** Defines the allowed positions for the TooltipExt component relative to the target element. */
+export type TooltipPositionExt = "top" | "bottom" | "left" | "right";
+/** Props for the TooltipExt component. */
+export interface TooltipPropsExt {
+    /** Content displayed inside the tooltip. */
+    title?: string | number | React.ReactNode;
+    /** Element that triggers the tooltip on hover. */
+    children: React.ReactNode;
+    /** Position of the tooltip relative to the target element. Defaults to "top". */
+    position?: TooltipPositionExt;
+}

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

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

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

@@ -0,0 +1,24 @@
+import { TypographyProps } from './Typography.types.ts';
+/**
+ * Typography Component
+ *
+ * A flexible and reusable text component that supports multiple
+ * variants, colors, underline, and optional HTML tag customization.
+ *
+ * Additional features:
+ * - letter-based ellipsis support
+ *
+ * @param ellipsis - Enable letter-based ellipsis
+ * @param ellipsisCount - Number of letter to show before ellipsis
+ * @param variant - Typography variant to control the visual style of the text.
+ * @param text - The content to render inside the Typography component.
+ * @param color - Optional color to apply to the text.
+ * @param underline - Optional prop to apply underline. If true, applies underline in same color as text.
+ * @param component -  Optional HTML tag to render as the root element.
+ * @returns A styled text element based on the given props.
+ *
+ * Example usage:
+ * <Typography variant='subtitle1' text='Demo text for example' color='primary underline />
+ */
+declare const Typography: React.FC<TypographyProps>;
+export default Typography;

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

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

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

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/** Allowed typography variants */
+export type TypoVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "button" | "caption" | "overline" | "inherit" | "captionBold" | "smallCaps" | "smallBold" | "smallMedium";
+/** Allowed text color options for the Typography component */
+export type TypoColor = "primary" | "secondary" | "error" | "success" | "black" | "smokyblack" | "slategray" | "brightgray" | "offWhite" | "white" | "neutralGray" | "babyBlue" | "watermelonRed" | "goldenYellow" | "techBlue";
+/** Maps each color option to its corresponding Tailwind css text color class */
+export declare const colorClasses: Record<TypoColor, string>;
+/**  Maps each variant to its corresponding Tailwind font style */
+export declare const variantClasses: Record<TypoVariant, string>;
+/** Maps each variant to a default HTML tag */
+export declare const variantToTagMap: Record<TypoVariant, keyof React.JSX.IntrinsicElements>;
+export interface TypographyProps {
+    /**
+     * Typography variant to control the visual style of the text.
+     * Typically affects size, weight, and other styling aspects.
+     */
+    variant: TypoVariant;
+    /**
+     * The content to render inside the Typography component.
+     * Can be a string, number, or any valid React node.
+     */
+    text: React.ReactNode;
+    /**
+     * Optional color to apply to the text.
+     * Should match one of the predefined color tokens.
+     * @default Black
+     */
+    color?: TypoColor;
+    /**
+     * Optional HTML tag to render as the root element (e.g., 'p', 'span', 'h1').
+     * Useful for semantic or structural control.
+     */
+    component?: keyof React.JSX.IntrinsicElements;
+    /** Optional prop to apply underline with the same color as the text.*/
+    underline?: boolean;
+    /**
+     * Enables text truncation with ellipsis (`...`).
+     * When true, text will be shortened based on `ellipsisCount`.
+     */
+    ellipsis?: boolean;
+    /**
+     * Maximum number of characters (letters) to display
+     * before appending ellipsis (`...`).
+     *
+     * Works only when `ellipsis` is set to true.
+     */
+    ellipsisCount?: number;
+    /**
+     * When enabled, the text color changes based on the value:
+     * - Negative values are displayed in red
+     * - Positive values are displayed in green
+     */
+    isNumberTypography?: boolean;
+}

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

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

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

@@ -0,0 +1,45 @@
+import { UserBetSlipProps } from './UserBetSlip.types';
+/**
+ * UserBetSlip component renders a list of user bet slips with support for
+ * toggling between a compact view and a detailed view using a checkbox.
+ *
+ * - Compact view (default): Shows bet type, subtitle, result, and odds.
+ * - Detailed view (when checkbox is enabled): Expands each bet slip to show reference, date & time, and a breakdown of odds.
+ * - On mobile screens: This component is typically rendered inside a `Modal` for better UX on limited screen space.
+ * - Supports i18n/localization via `titles` prop (all labels in one place).
+ *
+ * @param {UserBetSlipProps} props - Contains bet slip data and UI labels.
+ * @returns {JSX.Element} Structured layout of bet slips.
+ *
+ * @example
+ * const bets = [
+ *  {
+ *    id: "1",
+ *    type: "Back",
+ *    subTitle: "Tseng, Chun Hsin",
+ *    result: "Winner",
+ *    reference: "386560789",
+ *    time: "02-07-2025 11:33",
+ *    oddsDetails: [
+ *      { title: "Odds", value: 13.5 },
+ *      { title: "Stake", value: 10.001 },
+ *      { title: "P&L", value: 125.0 },
+ *    ],
+ *  },
+ * ];
+ * @example
+ * <UserBetSlip
+ *   titles={{
+ *     slipTitle: "Open Bets",
+ *     betFor: "Bet For",
+ *     betAgainst: "Bet Against",
+ *     betInfo: "Bet Info",
+ *     reference: "Ref:",
+ *     time: "Time:",
+ *     nullMessage: "No bets available at the moment.",
+ *   }}
+ *   bets={bets}
+ * />
+ */
+declare const UserBetSlip: React.FC<UserBetSlipProps>;
+export default UserBetSlip;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as UserBetSlip } from './UserBetSlip.component';
+declare const meta: Meta<typeof UserBetSlip>;
+/** Type alias for the story object of AdminBetSlip */
+type Story = StoryObj<typeof UserBetSlip>;
+/** Default story configuration for AdminBetSlip */
+export declare const Default: Story;
+export declare const ForMobile: Story;
+export default meta;

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

@@ -0,0 +1,56 @@
+import { BET_TYPE } from '../../utils/constants';
+/** Types of bets */
+export type UserBetType = (typeof BET_TYPE)[keyof typeof BET_TYPE];
+/** Odds / Stake / Profit details */
+export interface UserOddsDetails {
+    title: string;
+    value: string | number;
+}
+/** Single bet slip entry */
+export interface UserBetSlipDetails {
+    id: string;
+    /** Bet type: Back / Lay */
+    type: UserBetType;
+    /** Player or team name */
+    subTitle: string;
+    /** Outcome (e.g., Winner, Loser) */
+    result: string;
+    /** Reference ID of bet */
+    reference: string;
+    /** Time of bet */
+    time: string;
+    /** Odds / Stake / P&L details */
+    oddsDetails: UserOddsDetails[];
+}
+/** UI labels for UserBetSlip */
+export interface UserBetSlipTitles {
+    /** Section title (e.g., "Open Bets") */
+    slipTitle?: string;
+    /** Label for bet type: Back */
+    betFor: string;
+    /** Label for bet type: Lay */
+    betAgainst: string;
+    /** Label for Bet Info toggle */
+    betInfo: string;
+    /** Label for reference field */
+    reference: string;
+    /** Label for time field */
+    time: string;
+    /** Message shown when no bets are available */
+    nullMessage: string;
+}
+/** Props for UserBetSlip */
+export interface UserBetSlipProps {
+    titles: UserBetSlipTitles;
+    bets: UserBetSlipDetails[];
+}
+/** Props for OddsDetails component */
+export interface OddsDetailsProps {
+    odds: UserOddsDetails[];
+    showTitles?: boolean;
+}
+/** Props for BetInfo component */
+export interface BetInfoProps {
+    label: string;
+    value: string;
+}

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

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

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

@@ -0,0 +1,59 @@
+import { WalletInfoProps } from './WalletInfo.types';
+/**
+ * WalletInfo component displays a user's wallet summary including key balance data,
+ * quick action buttons (Deposit, Withdraw, etc.), and useful redirect links.
+ *
+ * - Shows key-value wallet data (e.g., Main Balance, Bonus Balance, etc.) with optional tooltip info.
+ * - Displays footer CTAs (Call To Actions) like Deposit / Withdraw for quick user actions.
+ * - Shows redirect links such as “Transaction History” or “Wallet Settings” at the bottom.
+ * - Automatically adjusts for mobile screens (e.g., hides tooltip icons on smaller viewports).
+ * - Integrates with design system components like `Typography`, `Button`, `Tooltip`, and `Icon`.
+ *
+ * @param walletData Array of wallet information objects.
+ * Each object includes a `key` (label), `value` (display amount), optional `color`, and `info` (tooltip config).
+ * @param footerCTA List of button configurations (text, variant, onClick handler)
+ * shown below the wallet data for primary actions like Deposit or Withdraw.
+ * @param redirectLinks List of redirect links displayed below the footer.
+ * Each link has a title and an optional `onClick` navigation handler.
+ *
+ * @returns {JSX.Element} A styled wallet summary card UI.
+ *
+ * @example
+ * const walletData = [
+ *   {
+ *     key: "Main Balance",
+ *     value: "$1,200.00",
+ *     color: "green",
+ *     info: { title: "Your available wallet balance", position: "top" },
+ *   },
+ *   {
+ *     key: "Bonus Balance",
+ *     value: "$150.00",
+ *     color: "yellow",
+ *     info: { title: "Bonus funds usable for bets", position: "top" },
+ *   },
+ * ];
+ *
+ * const footerCTA = [
+ *   { text: "Deposit", variant: "primary", onClick: handleDeposit },
+ *   { text: "Withdraw", variant: "secondary", onClick: handleWithdraw },
+ * ];
+ *
+ * const redirectLinks = [
+ *   { title: "View Transactions", onClick: handleTransactions },
+ *   { title: "Wallet Settings", onClick: handleSettings },
+ * ];
+ *
+ * <WalletInfo
+ *   walletData={walletData}
+ *   footerCTA={footerCTA}
+ *   redirectLinks={redirectLinks}
+ * />
+ *
+ * @example
+ * Responsive behavior (mobile):
+ * On mobile screens, the tooltip icons are hidden to reduce clutter.
+ * Button layout adapts using flex-wrap for better alignment.
+ */
+declare const WalletInfo: React.FC<WalletInfoProps>;
+export default WalletInfo;

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

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

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

@@ -0,0 +1,25 @@
+import { ButtonProps, TypoColor, statTooltipProps } from '..';
+export interface walletDataDetails {
+    /** Label for the wallet data item (e.g., "Balance") */
+    key: string;
+    /** Value to be displayed (e.g., "$120.00") */
+    value: string;
+    /** Tooltip configuration for displaying info icons */
+    info: statTooltipProps;
+    /** Optional color for the value text (default: "white") */
+    color?: TypoColor;
+}
+export interface redirectLinksDetails {
+    /** Display text for the redirect link */
+    title: string;
+    /** Click handler for the link */
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+export interface WalletInfoProps {
+    /**  Array of wallet data items (e.g., balance, bonus, etc.).*/
+    walletData: walletDataDetails[];
+    /** Array of call-to-action buttons shown in the footer.*/
+    footerCTA: ButtonProps[];
+    /** Array of redirect links displayed below the footer.*/
+    redirectLinks: redirectLinksDetails[];
+}

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

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

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

@@ -0,0 +1,2 @@
+declare const ZIndexPreview: () => import("react/jsx-runtime").JSX.Element;
+export default ZIndexPreview;

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

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as ZIndexPreview } from './ZIndex.component';
+declare const meta: Meta<typeof ZIndexPreview>;
+export default meta;
+export declare const Default: StoryObj<typeof ZIndexPreview>;

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

@@ -0,0 +1,2 @@
+import { default as ZIndexPreview } from './ZIndex.component';
+export { ZIndexPreview };

package/dist/components/index.d.ts

@@ -0,0 +1,50 @@
+export * from './Avatar';
+export * from './Button';
+export * from './DatePicker';
+export * from './Dropdown';
+export * from './Chip';
+export * from './Icon';
+export * from './InputField';
+export * from './Modal';
+export * from './NullState';
+export * from './Pagination';
+export * from './PasswordFieldGroup';
+export * from './SearchBar';
+export * from './Skeleton';
+export * from './StatsList';
+export * from './Table';
+export * from './TabList';
+export * from './Typography';
+export * from './StatusDisplayCard';
+export * from './Loader';
+export * from './Tooltip';
+export * from './EventDisplayCard';
+export * from './MultiSelectDropdown';
+export * from './Checkbox';
+export * from './TitleBar';
+export * from './SnackBar';
+export * from './NotFoundPage';
+export * from './MaintenancePage';
+export * from './AdminBetSlip';
+export * from './RadioButton';
+export * from './NotificationBanner';
+export * from './UserBetSlip';
+export * from './Swiper';
+export * from './BetSlip';
+export * from './PhoneNumberInput';
+export * from './Menu';
+export * from './ProgressBar';
+export * from './WalletInfo';
+export * from './FileUploader';
+export * from './ZIndex';
+export * from './BetSlipModal';
+export * from './FlashNotification';
+export * from './CommonMarketHeader';
+export * from './CommonMarketRow';
+export * from './Toggle';
+export * from './EventInfoCard';
+export * from './EventCard';
+export * from './TimePicker';
+export * from './TooltipExt';
+export * from './BannerCard';
+export * from './ImageCard';