sy-ui-lib 1.0.0

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

@@ -0,0 +1,14 @@
+/** Props for the Pagination component */
+export interface PaginationProps {
+    /** The currently active page number (1-based index) */
+    currentPage: number;
+    /** The total number of pages available*/
+    totalPages: number;
+    /**
+     * Callback function triggered when the page is changed
+     * @param page - The new page number to navigate to
+     */
+    onPageChange: (page: number) => void;
+    /** Number of pagination buttons to show around the current page (Defaults '5')  */
+    visiblePages?: number;
+}

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

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

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

@@ -0,0 +1,28 @@
+import { PasswordFieldGroupProps } from './PasswordFieldGroup.types';
+/**
+ * PasswordFieldGroup Component
+ *
+ * This component renders two input fields:
+ *  - Password
+ *  - Confirm Password
+ * It handles visibility toggling, validates if the two values match,
+ * and conditionally displays a success or error message.
+ *
+ * Props:
+ * @param {string} passwordLabel - Label text for the password field.
+ * @param {string} confirmPasswordLabel - Label text for the confirm password field.
+ * @param {boolean} showMismatchError - Whether to display error message when passwords do not match. Default: true.
+ * @param {string} mismatchErrorMessage - Error message shown when passwords do not match.
+ * @param {string} matchSuccessMessage - Success message shown when passwords match.
+ * @param {boolean} isRequired - Marks both fields as required. Default: false.
+ * @param {string} className - Optional Tailwind CSS classes for custom styling.
+ * @param {(password: string, confirmPassword: string, isMatching: boolean) => void} onChange - Callback triggered when either input value changes.
+ *
+ * Example usage:
+ * <PasswordFieldGroup
+ *   isRequired
+ *   onChange={(password, confirmPassword, match) => console.log(password, confirmPassword, match)}
+ * />
+ */
+declare const PasswordFieldGroup: React.FC<PasswordFieldGroupProps>;
+export default PasswordFieldGroup;

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

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

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

@@ -0,0 +1,21 @@
+export interface PasswordFieldGroupProps {
+    /** Label for password field */
+    passwordLabel?: string;
+    /** Label for confirm password field */
+    confirmPasswordLabel?: string;
+    /** Whether to show an error when passwords mismatch */
+    showMismatchError?: boolean;
+    /** Text shown when passwords do not match */
+    mismatchErrorMessage?: string;
+    /** Text shown when passwords is matched */
+    matchSuccessMessage?: string;
+    /** If fields are required */
+    isRequired?: boolean;
+    /**
+     * Triggered on any input change
+     * @param password string
+     * @param confirmPassword string
+     * @param isMatching boolean
+     */
+    onChange?: (password: string, confirmPassword: string, isMatching: boolean) => void;
+}

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

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

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

@@ -0,0 +1,38 @@
+import { PhoneNumberInputProps } from '..';
+/**
+ * PhoneNumberInput Component
+ *
+ * A fully controlled input component for phone numbers with country code selection.
+ * Supports validation, error display, disabled state, and dropdown for selecting countries.
+ *
+ * Props:
+ * @param {string} label - The label text displayed above the input field.
+ * @param {string} value - The current input value in the format "countryCode-phoneNumber".
+ * @param {(value: string) => void} onChange - Handler function called when the input value changes.
+ * @param {string} placeholder - Text displayed inside the input when empty.
+ * @param {boolean} isRequired - If true, shows a required indicator (*) next to the label.
+ * @param {boolean} isDisabled - Disables the input field and dropdown when true.
+ * @param {string} errorMessage - The message displayed when the input has an error.
+ * @param {string} className - Optional custom CSS classes for the input element.
+ * @param {...rest} - Any other native HTML input props.
+ *
+ * Behavior:
+ * - Only numeric input is allowed in the phone number part; non-numeric input triggers an error state.
+ * - Clicking outside the country code dropdown closes it automatically.
+ * - Selected country is highlighted in the dropdown.
+ * - Dynamically updates border and text color based on error state.
+ *
+ * Example usage:
+ * <PhoneNumberInput
+ *   label="Phone"
+ *   value={value}
+ *   onChange={setValue}
+ *   placeholder="Enter phone number"
+ *   isRequired
+ *   errorMessage="Only numbers allowed"
+ *   isDisabled={false}
+ * />
+ *
+ */
+declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
+export default PhoneNumberInput;

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

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

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

@@ -0,0 +1,6 @@
+import { InputFieldProps } from '../InputField';
+/** Props associated with PhoneNumberInput component */
+export interface PhoneNumberInputProps extends Omit<InputFieldProps, "type" | "iconName" | "onClick" | "onChange"> {
+    /** Handler function called when the phone input value changes. Receives the new value as a string. */
+    onChange?: (value: string) => void;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { ProgressBarProps } from './ProgressBar.types';
+/**
+ * ProgressBar Component
+ *
+ * Displays a multi-step horizontal progress indicator with three visual states —
+ * `completed`, `inProgress`, and `pending`.
+ * Each step includes a circular visual indicator and a text label with full Typography support.
+ * Titles use the Typography component, allowing any variant or color.
+ *
+ * @param {ProgressBarProps} props.steps - Array of step objects defining title and status.
+ *
+ * Example usage:
+ * <ProgressBar
+ *   steps={[
+ *     { title: { text: "Payment Completed" }, status: "completed" },
+ *     { title: { text: "Upload Payment Slip" }, status: "inProgress" },
+ *     { title: { text: "Request Successful" }, status: "pending" },
+ *   ]}
+ * />
+ */
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite/*';
+import { default as ProgressBar } from './ProgressBar.component';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+/** Default ProgressBar with standard step statuses */
+export declare const Default: Story;
+/** Example showing custom Typography variants and colors */
+export declare const CustomTypography: Story;

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

@@ -0,0 +1,12 @@
+import { TypographyProps } from '../Typography';
+/** A single step in the progress bar */
+export interface ProgressBarStep {
+    /** Typography configuration for the step title (text required, others optional) */
+    title: Pick<TypographyProps, "text"> & Partial<Omit<TypographyProps, "text">>;
+    status: "completed" | "inProgress" | "pending";
+}
+/** Props for the ProgressBar component */
+export interface ProgressBarProps {
+    /** Array of progress steps */
+    steps: ProgressBarStep[];
+}

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

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

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

@@ -0,0 +1,15 @@
+import { RadioGroupProps } from './RadioButton.types';
+/**
+ * RadioGroup component for rendering a group of radio buttons.
+ * Supports both controlled and uncontrolled usage.
+ *
+ * @component
+ * @param {RadioOptions[]} options - List of options to render as radio buttons.
+ * @param {string} [selectedValue] - Selected value for controlled mode.
+ * @param {string} [defaultValue=""] - Initial selected value for uncontrolled mode.
+ * @param {(value: string) => void} [onChange] - Callback when a radio is selected.
+ * @param {boolean} [disabled=false] - Disables all buttons in the group.
+ * @param {string} [name] - Name for the radio group
+ */
+declare const RadioGroup: ({ options, selectedValue, defaultValue, onChange, disabled, name, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioGroup;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as RadioGroup } from './RadioButton.component';
+declare const meta: Meta<typeof RadioGroup>;
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const BasicRadioGroup: Story;
+export declare const ControlledRadioGroup: Story;
+export declare const DisabledRadioGroup: Story;

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

@@ -0,0 +1,31 @@
+export interface RadioOptions {
+    label: string;
+    value: string | number;
+}
+export interface RadioGroupProps {
+    /**
+     * Array of options to render radio buttons.
+     * Example: ['Option 1', 'Option 2']
+     */
+    options: RadioOptions[];
+    /**
+     * Name for the radio group (prevents conflicts).
+     */
+    name: string;
+    /**
+     * Currently selected value (for controlled usage).
+     */
+    selectedValue?: string | number;
+    /**
+     * Default selected value (for uncontrolled usage).
+     */
+    defaultValue?: string;
+    /**
+     * Callback triggered when selected value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Disables all radio buttons in the group.
+     */
+    disabled?: boolean;
+}

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

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

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

@@ -0,0 +1,18 @@
+import { SearchBarProps } from './SearchBar.types';
+/**
+ * SearchBar Component
+ *
+ * This component use for getting searching input text
+ *
+ * Props:
+ *  @param {string} placeholder Placeholder text shown when the input is empty.
+ *  @param {"sm" | "lg" | "full"} size Defines the size of the input ("small", "large" or "fullWidth"). Default: "small".
+ *  @param {void} onSearch  Callback triggered on input value change.
+ *  @param {number} debounceTime Set debounce time default value is "500" milliseconds.
+ *  @param {string} className  Additional Tailwind CSS classes for custom styling. Default: "".
+ *
+ * Example usage:
+ * <SearchBar placeholder='Search here' size = 'sm' />
+ */
+declare const SearchBar: React.FC<SearchBarProps>;
+export default SearchBar;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchBarProps } from './SearchBar.types';
+declare const meta: Meta<SearchBarProps>;
+export default meta;
+type Story = StoryObj<SearchBarProps>;
+export declare const SmallSize: Story;
+export declare const LargeSize: Story;
+export declare const SearchWithDebounce: Story;

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

@@ -0,0 +1,11 @@
+/** Props associated with SearchBar component*/
+export interface SearchBarProps {
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** Defines the size of the input ("sm" or "lg"). */
+    size?: "sm" | "lg" | "full";
+    /** Callback triggered on input value change. */
+    onSearch?: (value: string) => void;
+    /** Set debounce time and default time is "500" milliseconds. */
+    debounceTime?: number;
+}

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

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

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

@@ -0,0 +1,29 @@
+import { SkeletonProps } from './Skeleton.types';
+/**
+ * Skeleton Component
+ *
+ * A customizable placeholder loader component that mimics the shape of the content being loaded.
+ * Supports different variants (text, rectangle, circle), custom sizes, and multiple instances.
+ *
+ * @param {'text' | 'rect' | 'circle'} variant - Shape of the skeleton: text, rect, or circle.
+ * @param {number|string} width - Width of the skeleton. Accepts number (as px) or string (%, rem, etc).
+ * @param {number|string} height - Height of the skeleton. Accepts number (as px) or string (%, rem, etc).
+ * @param {number} count - Number of skeleton elements to render, default value 1.
+ * @param {string} className - Additional Tailwind classes for styling.
+ *
+ * @returns {JSX.Element} Rendered skeleton(s) based on the provided props.
+ *
+ * @example
+ * // Single text-style skeleton
+ * <Skeleton width={200} height={16} />
+ *
+ * @example
+ * // Circle avatar skeleton
+ * <Skeleton variant="circle" width={40} height={40} />
+ *
+ * @example
+ * // Multiple skeleton lines
+ * <Skeleton count={3} width="100%" height={14} className="mb-2" />
+ */
+declare const Skeleton: React.FC<SkeletonProps>;
+export default Skeleton;

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

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

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

@@ -0,0 +1,26 @@
+/**
+ * Available shape variants for the Skeleton component.
+ * - 'text': Rounded small skeleton line, like a text placeholder.
+ * - 'rect': Standard rectangle, like a block or image placeholder.
+ * - 'circle': Perfect circle, useful for avatars or icons.
+ */
+export type SkeletonVariant = "text" | "rect" | "circle";
+/** Props for the Skeleton component. */
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Shape of the skeleton element. default - 'text' */
+    variant?: SkeletonVariant;
+    /**
+     * Width of the skeleton element.
+     * Accepts a number (px) or string (%, rem, etc).
+     */
+    width?: number | string;
+    /**
+     * Height of the skeleton element.
+     * Accepts a number (px) or string (%, rem, etc).
+     */
+    height?: number | string;
+    /** Number of skeleton elements to render. default 1 */
+    count?: number;
+    /** Optional Tailwind utility classes to apply to the skeleton. */
+    className?: string;
+}

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

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

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

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+import { SnackBarProps } from './SnackBar.types';
+/**
+ * Internal Snackbar component
+ *
+ * ⚠️ This component is rendered automatically by `SnackbarProvider`.
+ * You should not use it directly in your app.
+ *
+ * Instead, trigger snackbars globally using the `snackbar` utility.
+ *
+ *
+ * ✅ Example usage (via utility):
+ *
+ *
+ * import { snackbar } from "@/components/Snackbar/SnackbarFetcher";
+ *
+ *  Default snackbar:
+ * snackbar.success("Data saved");
+ *
+ *  With dismiss button:
+ * snackbar.error("Something went wrong", {
+ *   variant: "dismiss",
+ *   dismissProps: { title: "Close" },
+ * });
+ *
+ *  With action button:
+ * snackbar.info("Upload failed", {
+ *   variant: "action",
+ *   actionProps: {
+ *     actionLabel: "Retry",
+ *     onAction: () => retryUpload(),
+ *   },
+ * });
+ *
+ * @component
+ * @param {string} message - The message text to show in the snackbar.
+ * @param {"info" | "success" | "error"} [type="info"] - The type of snackbar (affects color).
+ * @param {"default" | "action" | "dismiss"} [variant="default"] - Type of interaction allowed.
+ * @param {number} [duration=3000] - Duration in milliseconds before it auto-dismisses.
+ * @param {ActionProps} [actionProps] - Props for action button (used with variant: "action").
+ * @param {DismissProps} [dismissProps] - Props for dismiss button (used with variant: "dismiss").
+ * @param {() => void} onClose - Called when snackbar closes (internal).
+ */
+declare const Snackbar: React.FC<SnackBarProps & {
+    onClose: () => void;
+}>;
+export default Snackbar;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as SnackbarProvider } from './SnackbarProvider';
+/** Storybook metadata for the SnackbarProvider component */
+declare const meta: Meta<typeof SnackbarProvider>;
+export default meta;
+type Story = StoryObj<typeof SnackbarProvider>;
+/** Story using Storybook controls to trigger different snackbar variants */
+export declare const ControlledSnackbar: Story;

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

@@ -0,0 +1,41 @@
+/** Types of snackbar variants. */
+export type SnackBarVariant = "default" | "action" | "dismiss";
+/** Types of snackbar message types. */
+export type SnackBarType = "info" | "success" | "error";
+/** Props for the Action button (only for "action" variant) */
+export interface ActionProps {
+    /** Label for the action button (only for "action" variant) */
+    actionLabel: string;
+    /** Callback for the action button (only for "action" variant) */
+    onAction: () => void;
+}
+/** Props for the Dismiss button (only for "dismiss" variant) */
+export interface DismissProps {
+    title: string;
+}
+/** Base props common to all snackbar variants */
+interface SnackBarBaseProps {
+    /** Message text to display in the snackbar */
+    message: string;
+    /** Time (in milliseconds) before the snackbar auto-dismisses */
+    duration?: number;
+    /** Type of message (info, success, error) to control the snackbar color */
+    type?: SnackBarType;
+}
+/** Props for the default variant */
+interface DefaultSnackBarProps extends SnackBarBaseProps {
+    variant: "default";
+}
+/** Props for the dismiss variant */
+interface DismissSnackBarProps extends SnackBarBaseProps {
+    variant: "dismiss";
+    dismissProps: DismissProps;
+}
+/** Props for the action variant */
+interface ActionSnackBarProps extends SnackBarBaseProps {
+    variant: "action";
+    actionProps: ActionProps;
+}
+/** Combined discriminated union type */
+export type SnackBarProps = DefaultSnackBarProps | DismissSnackBarProps | ActionSnackBarProps;
+export {};

package/dist/components/SnackBar/SnackBarQueue.d.ts

@@ -0,0 +1,9 @@
+import { SnackBarProps } from './SnackBar.types';
+declare let pushSnackbar: (props: SnackBarProps) => void;
+/** External queue interface to trigger snackbars from anywhere */
+export declare const snackbarQueue: {
+    show: (props: SnackBarProps) => void;
+};
+/** Set the internal push handler (called by the SnackbarProvider) */
+export declare const setPushSnackbar: (fn: typeof pushSnackbar) => void;
+export {};

package/dist/components/SnackBar/SnackbarFetcher.d.ts

@@ -0,0 +1,34 @@
+/** Options for displaying a snackbar, based on the variant type.*/
+type SnackbarOptions = {
+    /** Default variant */
+    variant: "default";
+    /** Auto-close duration (ms) */
+    duration?: number;
+} | {
+    /** Action variant */
+    variant: "action";
+    duration?: number;
+    /** Action button config */
+    actionProps: {
+        actionLabel: string;
+        onAction: () => void;
+    };
+} | {
+    /** Dismiss variant */
+    variant: "dismiss";
+    duration?: number;
+    /** Dismiss button config */
+    dismissProps: {
+        title: string;
+    };
+};
+/** Trigger global snackbars.*/
+export declare const snackbar: {
+    /** Show success snackbar */
+    success: (message: string, options?: SnackbarOptions) => void;
+    /** Show error snackbar */
+    error: (message: string, options?: SnackbarOptions) => void;
+    /** Show info snackbar */
+    info: (message: string, options?: SnackbarOptions) => void;
+};
+export {};

package/dist/components/SnackBar/SnackbarProvider.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+/**
+ *  SnackbarProvider
+ *
+ * Global provider to display toast/snackbar notifications via a portal.
+ * Mount it once at the app root (e.g., in `App.tsx`).
+ *
+ *  Usage:
+ * 1. Add provider:
+ *    <MainRouter />
+ *    <SnackbarProvider />
+ *    ```
+ * 2. Trigger notifications:
+ *    snackbar.success("Saved!");
+ *    snackbar.error("Error", { variant: "dismiss" });
+ *    snackbar.info("Retry?", { variant: "action", actionProps: { ... } });
+ *    ```
+ *
+ *  Notes:
+ * - Automatically renders all snackbars.
+ * - No need to use `<Snackbar />` manually.
+ * - `snackbar.*` functions work only if this provider is mounted.
+ */
+declare const SnackbarProvider: React.FC;
+export default SnackbarProvider;

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

@@ -0,0 +1,4 @@
+import { snackbar } from './SnackbarFetcher';
+import { default as SnackbarProvider } from './SnackbarProvider';
+export { SnackbarProvider, snackbar };
+export type * from './SnackBar.types';

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

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+import { StatsListProp } from './StatsList.types';
+/**
+ * StatsList Component:
+ *
+ * Displays a list of statistical data in three layout variants: `card`, `linear`, or `gradient`.
+ *
+ * - In `card` mode: shows each stat in a scrollable card layout with "PTH" prefix before the value.
+ * - Supports an optional info icon (ℹ) when `tooltipProps` is provided.
+ * - On hover, a tooltip displays additional details for the card.
+ * - In `linear` mode: shows stats inline with the title and value.
+ * - In `gradient` mode: Displays stats in a flexible layout with a transparent gradient background.
+ *
+ * Props:
+ *  @param {"card" | "linear" | "gradient"} [type="linear"] - Determines the layout style of the stats list.
+ *  @param {StatItem[]} [statItems] - Array of stat items with name and value object.
+ *  StatItem[statTitle] Optional. In `card` variant, shows an info icon with tooltip.
+ *   - `title`: Tooltip text.
+ *   - `position`: Tooltip placement (default `"top"`).
+ *
+ * Example usage:
+ * <StatsList
+ *    type="card"
+ *    statItems={[
+ *      {
+ *        statName: { title: "Total Balance", color: "primary" },
+ *        statValue: { value: "10343.34", color: "success"},
+ *        statTitle: { title: "This is your total balance including deposits & winnings.", position: "right" }
+ *      }
+ *   ]}
+ * />
+ */
+declare const StatsList: React.FC<StatsListProp>;
+export default StatsList;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StatsList } from '..';
+declare const meta: Meta<typeof StatsList>;
+export default meta;
+type Story = StoryObj<typeof StatsList>;
+/** Card Story: Displays the StatsList in a card layout. */
+export declare const Card: Story;
+/** Linear Story: Displays the stats in a horizontal linear layout. */
+export declare const Linear: Story;
+/** Gradient Story: Displays the stats in a gradient-styled layout */
+export declare const Gradient: Story;

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

@@ -0,0 +1,39 @@
+import { TooltipPositionExt, TypoColor } from '..';
+/** Layout options for the StatsList component. */
+export type StatType = "linear" | "card" | "gradient";
+/** Title selection of the stat item. */
+export interface StatName {
+    /** The title or the label of the stat. */
+    title: string;
+    /** Optional color for the stat title. */
+    color?: TypoColor;
+}
+/** Value selection of the stat item. */
+export interface StatValue {
+    /** The value of the stat*/
+    value: string | number;
+    /** Optional color of the stat value. */
+    color?: TypoColor;
+}
+export interface statTooltipProps {
+    /** Content displayed inside the tooltip. Supports text, numbers, JSX, or components. */
+    title?: string | number | React.ReactNode;
+    /** Position of the tooltip relative to the hovered element. Defaults to "right" if not provided.*/
+    position?: TooltipPositionExt;
+}
+/** Single Item inside the stats list. */
+export interface StatItem {
+    /** The name or label of the stat */
+    statName: StatName;
+    /** The displayed value and optional color for the stat. */
+    statValue: StatValue;
+    /** On hover, a tooltip displays additional details for the card. */
+    statTitle?: statTooltipProps;
+}
+/** Props for the statsList component. */
+export interface StatsListProp {
+    /** Layout type of the stats list. */
+    type?: StatType;
+    /** Array of the stats item to display. */
+    statItems: StatItem[];
+}