sy-ui-lib 1.0.0

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

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

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

@@ -0,0 +1,20 @@
+import { StatusDisplayProps } from './StatusDisplayCard.types';
+/**
+ * StatusDisplayCard Component
+ *
+ * Renders a stylized status indicator card that includes an icon, text,
+ * and visual cues based on the current status (e.g., Active, Suspended, Locked).
+ *
+ * Props:
+ * @param {string} text - Label text to display below the icon.
+ * @param {"active" | "suspended" | "locked"} state - Indicates the current status.
+ * @param {"filled" | "outlined" | "disabled"} [variant="filled"] - Visual appearance and behavior of the card.
+ * @param {() => void} [onClick] - Optional click handler (disabled if variant is "disabled").
+ *
+ * Example usage:
+ * <StatusDisplayCard text="Active" state="active" />
+ * <StatusDisplayCard text="Locked" state="locked" variant="outlined" />
+ * <StatusDisplayCard text="Suspended" state="suspended" variant="disabled" />
+ */
+declare const StatusDisplayCard: React.FC<StatusDisplayProps>;
+export default StatusDisplayCard;

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

@@ -0,0 +1,30 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./StatusDisplayCard.types').StatusDisplayProps>;
+    argTypes: {
+        state: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        text: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Active Card*/
+export declare const ActiveCard: Story;
+/** Suspended Card*/
+export declare const SuspendedCard: Story;
+/** Locked Card*/
+export declare const LockedCard: Story;

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

@@ -0,0 +1,17 @@
+/** Defines the available card statuses */
+export type StatusType = "active" | "suspended" | "locked";
+/** Defines the card variant styles */
+export type StatusVariant = "filled" | "outlined" | "disabled";
+/** Defines the available icon colors */
+export type StatusIconColor = "white" | "success" | "error" | "slategray" | "brightgray";
+/** Props for the StatusDisplayCard component */
+export interface StatusDisplayProps {
+    /** Label text to display below the icon.*/
+    text: string;
+    /** Indicates the current status (state="active").*/
+    state: StatusType;
+    /** Visual appearance and behavior of the card.*/
+    variant?: StatusVariant;
+    /** Optional click handler.*/
+    onClick?: () => void;
+}

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

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

package/dist/components/Svgs/LoaderSvg.d.ts

@@ -0,0 +1,2 @@
+declare const LoaderSvg: React.FC<React.SVGProps<SVGSVGElement>>;
+export default LoaderSvg;

package/dist/components/Svgs/NotFoundSvg.d.ts

@@ -0,0 +1,2 @@
+declare const NotFoundSvg: React.FC<React.SVGProps<SVGSVGElement>>;
+export default NotFoundSvg;

package/dist/components/Svgs/NullStateAdminSvg.d.ts

@@ -0,0 +1,2 @@
+declare const NullStateAdminSvg: React.FC<React.SVGProps<SVGSVGElement>>;
+export default NullStateAdminSvg;

package/dist/components/Svgs/NullStateUserSvg.d.ts

@@ -0,0 +1,2 @@
+declare const NullStateUserSvg: React.FC<React.SVGProps<SVGSVGElement>>;
+export default NullStateUserSvg;

package/dist/components/Svgs/UnderMaintenanceSvg.d.ts

@@ -0,0 +1,2 @@
+declare const UnderMaintenanceSvg: React.FC<React.SVGProps<SVGSVGElement>>;
+export default UnderMaintenanceSvg;

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

@@ -0,0 +1,6 @@
+import { default as LoaderSvg } from './LoaderSvg';
+import { default as NotFoundSvg } from './NotFoundSvg';
+import { default as NullStateAdminSvg } from './NullStateAdminSvg';
+import { default as NullStateUserSvg } from './NullStateUserSvg';
+import { default as UnderMaintenanceSvg } from './UnderMaintenanceSvg';
+export { LoaderSvg, NotFoundSvg, NullStateAdminSvg, NullStateUserSvg, UnderMaintenanceSvg, };

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

@@ -0,0 +1,37 @@
+import { CustomSwiperProps } from './Swiper.types';
+/**
+ * Swiper component for displaying a carousel of images with automatic scrolling,
+ * pause-on-hover, and responsive behavior for desktop and mobile images.
+ *
+ * @param {CustomSwiperProps} props  The props for configuring the swiper.
+ * @param {Slide[]} slides Array of slides with images for desktop and mobile.
+ * @param {boolean} isLoading Controls loading state.
+ * @param {number} interval Time interval in milliseconds for automatic slide change.
+ * @param {boolean} loop Whether the slides should loop after the last one.
+ * @param {boolean} pauseOnHover Whether the auto-scroll should pause when hovered.
+ * @param {string} className Additional CSS classes for styling the swiper container.
+ *
+ * @example
+ * const slides = [
+ *   {
+ *     id: 1,
+ *     imageURL: "https://example.com/image1-desktop.jpg",
+ *     alt: "First slide image",
+ *   },
+ *   {
+ *     id: 2,
+ *     imageURL: "https://example.com/image2-desktop.jpg",
+ *     alt: "Second slide image",
+ *   },
+ * ];
+ *
+ * <Swiper
+ *   slides={slides}
+ *   interval={5000}
+ *   loop={true}
+ *   pauseOnHover={true}
+ *   className="my-custom-swiper"
+ * />
+ */
+declare const Swiper: React.FC<CustomSwiperProps>;
+export default Swiper;

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

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as Swiper } from './Swiper.component';
+/**
+ * Storybook metadata for the Swiper component.
+ * This configuration defines how the Swiper component appears in the Storybook UI,
+ * including controls for its props.
+ */
+declare const meta: Meta<typeof Swiper>;
+export default meta;
+type Story = StoryObj<typeof Swiper>;
+/**
+ * Default story for the Swiper component.
+ * Demonstrates the swiper with default settings.
+ */
+export declare const Default: Story;
+/**
+ * Story showing custom interval between slides.
+ * The interval is set to 1000 milliseconds and pauseOnHover is disabled.
+ */
+export declare const CustomInterval: Story;
+/**
+ * Story with looping disabled.
+ * The slides will stop at the last slide instead of looping back to the first.
+ */
+export declare const LoopFalse: Story;
+/**
+ * Story with pause on hover enabled.
+ * The slides will pause when the user hovers over the swiper container.
+ */
+export declare const PauseOnHover: Story;
+/** Story with loader */
+export declare const Loader: Story;

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

@@ -0,0 +1,46 @@
+/** Represents a single slide in the Swiper component. */
+export type SwiperSlide = {
+    /** Unique identifier for the slide */
+    id: number;
+    /** URL of the image to be displayed on desktop screens */
+    imageURL: string;
+    /** Optional alt text for the image */
+    alt?: string;
+};
+/** Props for the Swiper component */
+export type CustomSwiperProps = {
+    /**
+     * Array of slides to be displayed in the swiper.
+     * At least one slide should be provided.
+     */
+    slides: SwiperSlide[];
+    /**
+     * Controls loading state.
+     * @default false.
+     */
+    isLoading?: boolean;
+    /**
+     * Fallback image URL to be used when a slide does not have a valid image source
+     * or fails to load.
+     */
+    altImageUrl?: string;
+    /**
+     * Time interval in milliseconds for automatic slide transition.
+     * @default 3000 (3 seconds)
+     */
+    interval?: number;
+    /**
+     * Whether the slides should loop back to the first after reaching the last slide.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * Whether the slide transition should pause when the mouse hovers over the swiper.
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /**
+     * Additional CSS classes to apply to the swiper container.
+     */
+    className?: string;
+};

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

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

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

@@ -0,0 +1,37 @@
+import { TabListProps } from './TabList.types';
+/**
+ * TabList Component
+ *
+ * A flexible and reusable TabList component that supports:
+ * - Dynamic tab rendering based on provided data
+ * - Active/inactive tab styling based on visual variant
+ * - Portrait (vertical) and landscape (horizontal) layouts.
+ *
+ * Props:
+ * @param tabs Array of tab objects, each with `id` and `text`, and optional `iconName` and `iconPosition`.
+ * @param color Visual variant for tabs and header (portrait) or background (landscape). Can be "primary" or "secondary".
+ * @param onTabChange Callback when active tab changes.
+ * @param activeTabId ID of the initially active tab.
+ * @param title Optional title displayed above tabs (portrait only).
+ * @param layout - Layout type. Portrait shows vertical tabs with optional title; landscape shows horizontal tabs.
+ *
+ * @example
+ * function ParentComponent() {
+ *   const tabs = [
+ *     { id: "profile", text: "Profile", iconName: "profile", iconPosition: "left" },
+ *     { id: "history", text: "History", iconName: "history", iconPosition: "right" },
+ *   ];
+ *
+ *   const [activeTabId, setActiveTabId] = useState(tabs[0].id);
+ *
+ *   return (
+ *     <>
+ *       <TabList tabs={tabs} onTabChange={setActiveTabId} activeTabId={activeTabId} color="secondary" layout="portrait" title="My Account" />
+ *       {activeTabId === "profile" && <ProfileSection />}
+ *       {activeTabId === "history" && <HistorySection />}
+ *     </>
+ *   );
+ * }
+ */
+declare const TabList: React.FC<TabListProps>;
+export default TabList;

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

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as TabList } from './TabList.component';
+/** Storybook metadata for the TabList component */
+declare const meta: Meta<typeof TabList>;
+export default meta;
+type Story = StoryObj<typeof TabList>;
+/** Portrait - Primary */
+export declare const PortraitPrimary: Story;
+/** Portrait - Secondary */
+export declare const PortraitSecondary: Story;
+/** Landscape - Primary */
+export declare const LandscapePrimary: Story;
+/** Landscape - Secondary */
+export declare const LandscapeSecondary: Story;
+/** Tabs With Icons */
+export declare const TabsWithIcons: Story;

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

@@ -0,0 +1,27 @@
+import { IconName } from '../Icon';
+/** Props associated with Tab.*/
+export interface Tab {
+    /** Unique identifier for the tab.*/
+    id: string;
+    /** Text displayed on the tab.*/
+    text: string;
+    /** Optional icon displayed on the tab (from the supported icon gallery). */
+    iconName?: IconName;
+    /** Position of the icon relative to the text. Defaults to "left" if not specified. */
+    iconPosition?: "left" | "right";
+}
+/** Prop associated with TabList component*/
+export interface TabListProps {
+    /** Array of tab objects to be rendered as clickable tabs.*/
+    tabs: Tab[];
+    /** Controls the visual style of the TabList component.*/
+    color?: "primary" | "secondary";
+    /** Informs parent about active tab change.*/
+    onTabChange?: (tabId: string) => void;
+    /** Id of the active tab passed from parent (optional) */
+    activeTabId?: string;
+    /** Optional title to display above the TabList (only for portrait layout) */
+    title?: string;
+    /** Layout variant for the TabList (optional) */
+    layout?: "portrait" | "landscape";
+}

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

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

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

@@ -0,0 +1,47 @@
+import { TableProps } from './Table.types';
+/**
+ * Generic Table component using TanStack Table
+ *
+ * Renders:
+ * - Table header and dynamic columns
+ * - Skeleton rows if `isLoading` is true
+ * - Show `Null State Card` if data is empty
+ * - Actual data rows otherwise
+ *
+ * @param columns - Column definitions (with custom headers and cell rendering)
+ * @param data - Table data array
+ * @param isHeaderLoading - Boolean flag to show loading state for table headers (default: false)
+ * @param isLoading - Boolean flag to show loading state
+ * @param defaultSorting - Optional initial sorting state (e.g. [{ id: "balance", desc: true }])
+ * @param onSortChange - Callback fired whenever sorting changes
+ * @param skeletonRowCount - Optional number, how many skeleton rows to show (default = 10)
+ * @param nullStateProps - Optional configuration for custom empty/null state UI
+ * @param enableRowSelection - Boolean flag to enable checkbox row selection (default = false)
+ * @param onRowSelectionChange - Callback fired when row selection changes (returns selected row IDs)
+ * @param selectedIds - Optional controlled selection state (row IDs to keep selected)
+ * @param rowIdAccessor - Field to use as unique row ID (default = "id")
+ *
+ * @example
+ * const [selectedIds, setSelectedIds] = useState<string[]>([]);
+ *
+ * <Table<User>
+ *   columns={userColumns}
+ *   data={[]}
+ *   isLoading={false}
+ *   enableRowSelection
+ *   selectedIds={selectedIds}
+ *   onRowSelectionChange={setSelectedIds}
+ *   onSortChange={() => {}}
+ *   nullStateProps={{
+ *     title: "No users found",
+ *     description: "You haven’t added any users yet.",
+ *     buttonProps: {
+ *       text: "Add User",
+ *       iconName: "addUser",
+ *       onClick: () => openAddUserModal(),
+ *     },
+ *   }}
+ * />
+ */
+declare const Table: <TData>(props: TableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export default Table;

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

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ChipType } from '..';
+import { TableProps } from './Table.types';
+interface UserRow {
+    id: string;
+    matches: string;
+    username: string;
+    credit_ref: string;
+    exposure: number;
+    balance: number;
+    pl_total: number;
+    type: string;
+    bet_taken: string;
+    loosing_stake: string;
+    status: ChipType;
+}
+declare const meta: Meta<TableProps<UserRow>>;
+export default meta;
+type Story = StoryObj<TableProps<UserRow>>;
+export declare const DefaultTable: Story;
+export declare const CheckboxTable: Story;
+export declare const LoadingTable: Story;
+export declare const SkeletonDynamicStory: Story;
+export declare const ControlledSelectionStory: Story;
+export declare const NullDataTable: Story;

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

@@ -0,0 +1,28 @@
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+import { NullStateProps } from '..';
+/** Props for the reusable generic Table component. */
+export interface TableProps<TData> {
+    /** Each column describes how to render and access data for a given field. */
+    columns: ColumnDef<TData>[];
+    /** The actual data to be rendered in the table rows. */
+    data: TData[];
+    /** Indicates whether the table headers are in a loading state and should show skeletons or placeholders. */
+    isHeaderLoading?: boolean;
+    /** Used to show loading skeletons or placeholders. */
+    isLoading: boolean;
+    /** Optional initial sorting configuration. default value is `[]` */
+    defaultSorting?: SortingState;
+    /** Callback fired whenever sorting changes. */
+    onSortChange?: (sort: SortingState) => void;
+    /** When table is loading mode then how much skeleton row show, default value '10' */
+    skeletonRowCount?: number;
+    /** Optional props to customize the empty/null state display when the table has no data. */
+    nullStateProps?: NullStateProps;
+    /** Enable row selection checkboxes */
+    enableRowSelection?: boolean;
+    /** Return selected ids when selection changes */
+    onRowSelectionChange?: (selectedIds: string[]) => void;
+    /** Which field to use as unique row id (default = "id") */
+    rowIdAccessor?: keyof TData | "id";
+    selectedIds?: string[];
+}

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

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

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

@@ -0,0 +1,22 @@
+import { TimePickerProps } from './TimePicker.types';
+/**
+ * A reusable and customizable time picker component that allows
+ * selecting a time range (From–To) using `react-time-picker`.
+ *
+ * @param {string} [title] - Optional button text placeholder. Default is "Select Time".
+ * @param {(value: TimeRange) => void} selectedTime - Callback function
+ *        triggered when the user applies a selected time range.
+ * @param {boolean} [fullWidth] - If true, the component stretches to full width of its container.
+ * @param {string} [errorMessage] - Custom validation error message shown for invalid ranges.
+ *
+ * @returns {JSX.Element} The rendered TimePicker component.
+ *
+ * @example
+ * <TimePicker
+ *   title="Pick Time"
+ *   fullWidth
+ *   selectedTime={(value) => console.log("Selected:", value)}
+ * />
+ */
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * Represents the value returned from the time picker.
+ * - `from`: Start time
+ * - `to`: End time
+ */
+export interface TimeRange {
+    from: string | null;
+    to: string | null;
+}
+/**
+ * Props for the reusable TimePicker component.
+ */
+export interface TimePickerProps {
+    /** Optional title/label to show on the trigger button, default value "Select Time" */
+    title?: string;
+    /** Callback function that receives the selected time range */
+    selectedTime: (value: TimeRange) => void;
+    /** If true, the time picker stretches to full width of its container */
+    fullWidth?: boolean;
+    /** Custom validation error message shown when the selected time range is invalid */
+    errorMessage?: string;
+}

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

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

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

@@ -0,0 +1,22 @@
+import { TitleBarProps } from './TitleBar.types';
+/**
+ * TitleBar Component
+ *
+ * A reusable header bar that displays an avatar, title text, and optional trailing content.
+ * Commonly used in dashboards, cards, or section headers to show user info, stats, or actions.
+ *
+ * Props:
+ * @param {string} title - The title or name to display next to the avatar.
+ * @param {AvatarProps} avatarProps - Props to configure the avatar (image, fallback initials, size).
+ * @param {React.ReactNode} [titleBarContent] - Optional content to render on the right (e.g., StatsList, Chip, Button).
+ *
+ * Example usage:
+ *
+ * <TitleBar
+ *   title="John Doe"
+ *   avatarProps={{ fallbackText: "JD", size: "lg" }}
+ *   titleBarContent={<StatsList statItems={[...]} />}
+ * />
+ */
+declare const TitleBar: React.FC<TitleBarProps>;
+export default TitleBar;

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

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

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

@@ -0,0 +1,10 @@
+import { AvatarProps } from '..';
+/** Props for the TitleBar component.*/
+export type TitleBarProps = {
+    /**  The main title text to display next to the avatar.*/
+    title: string;
+    /**  Props for configuring the Avatar component, including fallback initials, image URL, alt text, and size.*/
+    avatarProps: AvatarProps;
+    /**  Optional JSX content to render on the right side of the title bar. Can be a StatsList, Chip, Button, or any other custom content.*/
+    titleBarContent?: React.ReactNode;
+};

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

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

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

@@ -0,0 +1,22 @@
+import { ToggleProps } from './Toggle.types';
+/**
+ * Toggle Component
+ *
+ * Renders a stylized toggle switch that can be fully controlled via props.
+ * Supports custom colors, disabled state, and accessibility attributes.
+ *
+ * Props:
+ * @param {boolean} checked Required Current toggle state. Must be managed by the parent.
+ * @param {(checked: boolean) => void} onChange Required Callback invoked when the toggle is clicked.
+ * @param {boolean} [disabled=false] Optional If true, the toggle is non-interactive and visually muted.
+ * @param {string} [ariaLabel="Toggle"] Optional Accessibility label for the toggle button.
+ * @param {string} [onColor] Optional Tailwind color class for the "on" state of the toggle knob.
+ * @param {string} [offColor] Optional Tailwind color class for the "off" state of the toggle knob.
+ *
+ * Example usage:
+ * <Toggle checked={true} onChange={toggleHandler} />
+ * <Toggle checked={false} disabled />
+ * <Toggle checked={isOn} onChange={toggleHandler} onColor="bg-success" offColor="bg-error" />
+ */
+declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ToggleProps } from './Toggle.types';
+declare const meta: Meta<ToggleProps>;
+export default meta;
+type Story = StoryObj<ToggleProps>;
+export declare const ControlledToggle: Story;
+export declare const DisabledToggle: Story;
+export declare const CustomColorsToggle: Story;

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

@@ -0,0 +1,8 @@
+export interface ToggleProps {
+    checked?: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    ariaLabel?: string;
+    onColor?: string;
+    offColor?: string;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { TooltipProps } from './Tooltip.types';
+/**
+ * Tooltip Component
+ *
+ * Displays a brief informative message when users hover over or focus on a target element.
+ * It supports four directional positions and a customizable message.
+ *
+ * Props:
+ * @param {string} title The content displayed inside the tooltip.
+ * @param {React.ReactNode} children The element that triggers the tooltip on hover.
+ * @param {"top" | "bottom" | "left" | "right"} [position="right"] Position of the tooltip relative to the target element.
+ *
+ * Example usage:
+ * <Tooltip title="Click to submit" position="top">
+ *   <button>Submit</button>
+ * </Tooltip>
+ */
+declare const Tooltip: React.FC<TooltipProps>;
+export default Tooltip;

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

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

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

@@ -0,0 +1,11 @@
+/** Defines the allowed positions for the Tooltip component relative to the target element.*/
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+/** Props for the Tooltip component.*/
+export interface TooltipProps {
+    /** The text content shown inside the tooltip.*/
+    title: string;
+    /** The element that triggers the tooltip on hover. Can be any valid React node, e.g. a button, icon, etc.*/
+    children?: React.ReactNode;
+    /** Position of the tooltip relative to the hovered element. Defaults to "right" if not provided.*/
+    position?: TooltipPosition;
+}

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

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