sy-ui-lib 1.0.0

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

@@ -0,0 +1,51 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./Chip.types').ChipProps>;
+    args: {
+        onClick: import('@vitest/spy').Mock<(...args: any[]) => any>;
+    };
+    argTypes: {
+        state: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        isEditable: {
+            control: "boolean";
+        };
+        iconName: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** Active with filled example of Chip */
+export declare const ActiveWithField: Story;
+/** Active with outlined example of Chip */
+export declare const ActiveWithOutlined: Story;
+/** Suspended with filled example of Chip */
+export declare const SuspendedWithField: Story;
+/** Suspended with outlined example of Chip */
+export declare const SuspendedWithOutlined: Story;
+/** Locked with filled example of Chip */
+export declare const LockedWithField: Story;
+/** Locked with outlined example of Chip */
+export declare const LockedWithOutlined: Story;
+/** Pending with filled example of Chip */
+export declare const PendingWithField: Story;
+/** Pending with outlined example of Chip */
+export declare const PendingWithOutlined: Story;
+/** Pending with outlined example of Chip */
+export declare const InfoChip: Story;

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

@@ -0,0 +1,22 @@
+import { IconName } from '../Icon/Icon.types';
+/** Defines the available chip statuses */
+export type ChipType = "active" | "suspended" | "locked" | "pending" | "info";
+/** Defines the chip variant styles */
+export type ChipVariant = "filled" | "outlined";
+/** Defines the available icon colors */
+export type ChipIconColor = "white" | "success" | "error" | "slategray" | "goldenYellow" | "techBlue";
+/** Props for the Chip component */
+export interface ChipProps {
+    /** Text content to be displayed inside the chip */
+    text: string;
+    /** Status of the chip, which determines color and style */
+    state: ChipType;
+    /** Visual variant of the chip */
+    variant?: ChipVariant;
+    /** Enables editing mode and shows the edit icon if true */
+    isEditable?: boolean;
+    /** Click handler for the chip */
+    onClick?: () => void;
+    /** Optional icon to be displayed in future use */
+    iconName?: IconName;
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+/** Default loader without title prop.*/
+export declare const Default: Story;

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

@@ -0,0 +1,3 @@
+import { CommonMarketHeaderProps } from './CommonMarketHeader.types';
+declare const CommonMarketHeader: React.FC<CommonMarketHeaderProps>;
+export default CommonMarketHeader;

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

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CommonMarketHeaderProps } from './CommonMarketHeader.types';
+declare const meta: Meta<CommonMarketHeaderProps>;
+export default meta;
+type Story = StoryObj<CommonMarketHeaderProps>;
+/**  Other Market Header */
+export declare const OtherMarket: Story;
+/**  Fancy Market Header */
+export declare const FancyMarket: Story;
+/** Multi Market Header */
+export declare const MultiMarket: Story;
+/**  Sports Header (with Sub Header)*/
+export declare const SportsWithSubHeader: Story;
+/** Match Odds Header */
+export declare const MatchOdds: Story;
+export declare const EventTitle: Story;
+export declare const EventTitleWithInfoIcon: Story;

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

@@ -0,0 +1,35 @@
+export interface MultiMarketButtonProps {
+    eventId: string;
+    onClick: (eventId: string) => void;
+}
+export type HeaderVariant = "OtherMarket" | "MatchOdds" | "FancyMarket" | "MultiMarket" | "Sports" | "EventTitle";
+export interface CommonMarketHeaderProps {
+    /** Controls header layout & behavior */
+    variant: HeaderVariant;
+    /** Market title shown in header */
+    title: string;
+    /** Market identifier */
+    marketId?: string;
+    /** Event ID used for navigation Used in: MultiMarket */
+    eventId?: string;
+    /** Total matched amount Used in: MatchOdds*/
+    totalMatched?: number;
+    /** Number of selections Used in: MultiMarket*/
+    selectionCount?: number;
+    /** Minimum stake value Used in: OtherMarket, MatchOdds */
+    min?: number;
+    /** Maximum stake value Used in: OtherMarket, MatchOdds*/
+    max?: number;
+    /** Bet waiting time (seconds) Reserved for future use */
+    betWaitingTime?: number;
+    /** Controls number of odds columns Used in: Sports  @default 3 */
+    level?: 1 | 2 | 3;
+    /**Controls whether the sub-header is rendered or not   */
+    isSubHeader?: boolean;
+    /** Click handler (e.g. navigate to Match Odds) Used in: MultiMarket*/
+    onClick?: (eventId: string) => void;
+    /** Prop to show or hide inplay marker */
+    eventDetails?: string;
+    /** Info icon click handler (shows icon when provided) */
+    onInfoClick?: () => void;
+}

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

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

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CommonMarketRowProps } from './CommonMarketRow.types';
+declare const CommonMarketRow: FC<CommonMarketRowProps>;
+export default CommonMarketRow;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { default as CommonMarketRow } from './CommonMarketRow.component';
+declare const meta: Meta<typeof CommonMarketRow>;
+export default meta;
+type Story = StoryObj<typeof CommonMarketRow>;
+export declare const PairOddsRow: Story;
+export declare const LayeredOddsRow: Story;
+export declare const FancyOddsRow: Story;
+export declare const OddEvenRow: Story;

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

@@ -0,0 +1,151 @@
+import { BetSlipVariantType } from '..';
+export type BetSlipPairVariantType = "Back" | "Lay";
+export interface OddClickHandlerProps {
+    /** Market identifier */
+    marketId: string;
+    /** Event identifier */
+    eventId: string;
+    /** Provider identifier */
+    providerId: string;
+    /** Runner identifier */
+    runnerId: string;
+    /** Runner display name */
+    runnerName: string;
+    /** Bet slip variant type */
+    type: BetSlipVariantType;
+    /** Selected odds value */
+    odds: number;
+    /** Available size for the odds */
+    size: number;
+    /** Maximum allowed stake (optional) */
+    max?: number;
+    /** Minimum allowed stake (optional) */
+    min?: number;
+    /** Whether the best available odds should be accepted or not */
+    acceptBestOdds: boolean;
+}
+/** Represents a single odds item */
+export interface OddItem {
+    /** Odds value (e.g. 1.45, 94) */
+    odds: number;
+    /** Available size for the odds (optional) */
+    oddsSize?: number;
+}
+export type ButtonColor = "bg-cloudBlue" | "bg-pastelBlue" | "bg-babyBlue" | "bg-watermelonRed" | "bg-softPink" | "bg-softRosePink";
+/** Props for the OddButton component */
+export interface OddButtonProps {
+    /** Market identifier */
+    marketId: string;
+    /** Event identifier */
+    eventId: string;
+    /** Provider identifier */
+    providerId: string;
+    /** Runner identifier */
+    runnerId: string;
+    /** Runner display name */
+    runnerName: string;
+    /** Odds data containing value and size */
+    item: OddItem;
+    /** Position index (used for styling/color logic) */
+    index: number;
+    /** button color according to (Back | Lay | Yes | No | Even | Odd)  */
+    color: ButtonColor;
+    /** Bet type (BACK | LAY | Yes | No) */
+    type: BetSlipVariantType;
+    /** Whether the button is disabled or frozen */
+    disabled: boolean;
+    /** Whether to display odds size below the odds */
+    showSize: boolean;
+    /** Minimum stake allowed (optional) */
+    min?: number;
+    /** Maximum stake allowed (optional) */
+    max?: number;
+    /** Callback when odd button is clicked */
+    onClick: (oddData: OddClickHandlerProps) => void;
+}
+/** Props that are shared across ALL odds row variants*/
+interface BaseOddsRowProps {
+    /** Back odds array */
+    batb?: OddItem[];
+    /** Lay odds array */
+    batl?: OddItem[];
+    /** Market identifier */
+    marketId?: string;
+    /** Event identifier */
+    eventId?: string;
+    /** Provider identifier */
+    providerId?: string;
+    /** Whether odds are frozen */
+    isFreezed?: boolean;
+    /** Whether the row is suspended */
+    isSuspended?: boolean;
+    /** Message shown when the row is suspended */
+    suspendedMsg?: string;
+    /** Whether to show odds size values */
+    showOddsSize?: boolean;
+    /** Maximum allowed stake (optional) */
+    max?: number;
+    /** Minimum allowed stake (optional) */
+    min?: number;
+}
+/** Props for Fancy odds row variant */
+export interface FancyLayeredOddsRowVariant extends BaseOddsRowProps {
+    /** Variant identifier */
+    variant: "fancy" | "layered";
+    /** Runner identifier */
+    runnerId: string;
+    /** Runner display name (optional) */
+    runnerName?: string;
+    /** Current fancy value (optional) */
+    currentValue?: number;
+    /** Projected fancy value (optional) */
+    projectedValue?: number;
+    /** Additional notes or remarks */
+    notes?: string;
+    /** Depth or level of the market */
+    level?: 1 | 2 | 3;
+    /**Whether the event is yes no or odd even */
+    isYesNO?: boolean;
+    /** Callback when book button is clicked */
+    onRowClick?: (runnerId: string) => void;
+    /** Callback when an odd is clicked */
+    onOddClick?: (oddData: OddClickHandlerProps) => void;
+}
+/**Props for Pair odds row variant*/
+export interface PairOddsRowVariant extends BaseOddsRowProps {
+    /** Variant identifier */
+    variant: "pair";
+    /** Unique row identifier */
+    id: string;
+    /** Event display name (optional) */
+    eventName?: string;
+    /** Event type (optional) */
+    eventType?: string;
+    /** Whether the event is currently in play */
+    inPlay?: boolean;
+    /** Event start date/time */
+    openDate?: string;
+    /**Whether to display the bookmaker icon. @default false */
+    showBookmakerIcon?: boolean;
+    /**Whether to display the fancy icon. @default false */
+    showFancyIcon?: boolean;
+    /** Whether total matched value should be shown */
+    showTotalMatched?: boolean;
+    /** Total matched amount */
+    totalMatched?: number;
+    /** Depth or level of the market */
+    level?: 1 | 2 | 3;
+    /** Associated market identifiers */
+    marketIds?: string[];
+    /** Whether the row is pinned */
+    pinned?: boolean;
+    /** Callback when row redirect is triggered */
+    onClickRedirect?: (id: string) => void;
+    /** Callback when pin/unpin action is triggered */
+    onPinClick?: (pinned: boolean) => void;
+    /** Callback when an odd is clicked */
+    onOddClick?: (type: string, odds: number | null) => void;
+}
+/** Union type representing all supported market row variants*/
+export type CommonMarketRowProps = FancyLayeredOddsRowVariant | PairOddsRowVariant;
+export {};

package/dist/components/CommonMarketRow/CommonOddButton.component.d.ts

@@ -0,0 +1,132 @@
+import { OddButtonProps } from './CommonMarketRow.types';
+/**
+ * CommonMarketRow Component
+ *
+ * A polymorphic UI component used to render different types of market rows
+ * in odds tables. The rendered layout and behavior depend on the `variant` prop.
+ *
+ * Supported variants:
+ * - "pair"     → Event-based pair odds (Back / Lay)
+ * - "layered"  → Multi-level odds depth (Back / Lay stacks)
+ * - "fancy"    → Fancy market odds with min/max and notes
+ *
+ * ───────────────────────────
+ * COMMON PROPS (Shared)
+ * ───────────────────────────
+ * @param {"pair" | "layered" | "fancy"} variant – Determines which market row variant to render.
+ * @param {OddItem[]} [batb] – Back odds array.
+ * @param {OddItem[]} [batl] – Lay odds array.
+ * @param {boolean} [isFreezed] – Freezes odds interaction.
+ * @param {boolean} [isSuspended] – Suspends the row and shows overlay.
+ * @param {string} [suspendedMsg] – Message shown when row is suspended.
+ * @param {boolean} [showOddsSize] – Whether to display odds size.
+ * @param {number} [min] – Minimum allowed stake.
+ * @param {number} [max] – Maximum allowed stake.
+ *
+ * ───────────────────────────
+ * PAIR ODDS ROW (variant="pair")
+ * ───────────────────────────
+ * @param {string} id – Unique identifier for the event row.
+ * @param {string} [eventName] – Event display name.
+ * @param {boolean} [inPlay] – Whether the event is live.
+ * @param {string} [openDate] – Event start date/time.
+ * @param {string[]} [tags] – Market tags (e.g. BOOKMAKER, FANCY_MARKET).
+ * @param {boolean} [showTotalMatched] – Whether to show total matched amount.
+ * @param {number} [totalMatched] – Total matched value.
+ * @param {1 | 2 | 3} [level] – Odds depth level.
+ * @param {boolean} [pinned] – Whether the row is pinned.
+ * @param {function} onClickRedirect – Callback when event name is clicked.
+ * @param {function} [onOddClick] – Callback when an odd is selected.
+ * @param {function} [onPinClick] – Callback when pin/unpin is toggled.
+ *
+ * Example usage:
+ *
+ * <CommonMarketRow
+ *   variant="pair"
+ *   id="match-1"
+ *   eventName="India vs Australia"
+ *   inPlay
+ *   openDate="Today 7:30 PM"
+ *   tags={["BOOKMAKER"]}
+ *   showTotalMatched
+ *   totalMatched={125000}
+ *   level={3}
+ *   batb={[
+ *     { odds: 1.85, oddsSize: 1200 },
+ *     { odds: 1.84, oddsSize: 900 },
+ *     { odds: 1.83, oddsSize: 600 }
+ *   ]}
+ *   batl={[
+ *     { odds: 1.86, oddsSize: 1100 },
+ *     { odds: 1.87, oddsSize: 800 },
+ *     { odds: 1.88, oddsSize: 500 }
+ *   ]}
+ *   onClickRedirect={(id) => console.log("Redirect:", id)}
+ *   onOddClick={(type, odds) => console.log(type, odds)}
+ *   onPinClick={(pinned) => console.log("Pinned:", pinned)}
+ * />
+ *
+ * ───────────────────────────
+ * LAYERED ODDS ROW (variant="layered")
+ * ───────────────────────────
+ * @param {string} marketId Market identifier.
+ * @param {string} runnerId Runner identifier.
+ * @param {string} runnerName Runner display name.
+ * @param {number} currentValue Current value.
+ * @param {number} projectedValue Projected value.
+ * @param {1 | 2 | 3} level Number of odds layers.
+ * @param {function} onOddClick Callback when an odd is clicked.
+ *
+ * <CommonMarketRow
+ *   variant="layered"
+ *   marketId="market-1"
+ *   runnerId="runner-1"
+ *   runnerName="Team A"
+ *   currentValue={120}
+ *   projectedValue={30}
+ *   level={3}
+ *   showOddsSize
+ *   batb={[
+ *     { odds: 0, oddsSize: 0 },
+ *     { odds: 85, oddsSize: 400 },
+ *     { odds: 80, oddsSize: 300 }
+ *   ]}
+ *   batl={[
+ *     { odds: 95, oddsSize: 600 },
+ *     { odds: 100, oddsSize: 700 },
+ *     { odds: 105, oddsSize: 800 }
+ *   ]}
+ *   onOddClick={(data) => console.log(data)}
+ * />
+ *
+ * ───────────────────────────
+ * FANCY ODDS ROW (variant="fancy")
+ * ───────────────────────────
+ * @param {string} runnerId Runner identifier.
+ * @param {string} runnerName Runner display name.
+ * @param {string} min_and_max Label for min/max section.
+ * @param {number} currentValue Current fancy value.
+ * @param {number} projectedValue Projected fancy value.
+ * @param {string[]} notes Notes or remarks.
+ * @param {function} onClick Callback when an odd is clicked.
+ *
+ * Example (Fancy Odds Row):
+ *
+ * <CommonMarketRow
+ *   variant="fancy"
+ *   runnerId="fancy-1"
+ *   runnerName="Total Sixes"
+ *   min_and_max="Min / Max"
+ *   min={100}
+ *   max={5000}
+ *   currentValue={10}
+ *   projectedValue={2}
+ *   notes={["Session based", "Runs counted"]}
+ *   showOddsSize
+ *   batb={[{ odds: 1.9, oddsSize: 1000 }]}
+ *   batl={[{ odds: 2.0, oddsSize: 1200 }]}
+ *   onClick={(data) => console.log(data)}
+ * />
+ */
+declare const OddButton: React.FC<OddButtonProps>;
+export default OddButton;

package/dist/components/CommonMarketRow/FancyOddsRow.component.d.ts

@@ -0,0 +1,3 @@
+import { FancyLayeredOddsRowVariant } from './CommonMarketRow.types';
+declare const FancyOddsRow: React.FC<FancyLayeredOddsRowVariant>;
+export default FancyOddsRow;

package/dist/components/CommonMarketRow/LayeredOddsRow.component.d.ts

@@ -0,0 +1,3 @@
+import { FancyLayeredOddsRowVariant } from './CommonMarketRow.types';
+declare const LayeredOddsRow: React.FC<FancyLayeredOddsRowVariant>;
+export default LayeredOddsRow;

package/dist/components/CommonMarketRow/PairOddsRow.component.d.ts

@@ -0,0 +1,3 @@
+import { PairOddsRowVariant } from './CommonMarketRow.types';
+declare const PairOddsRow: React.FC<PairOddsRowVariant>;
+export default PairOddsRow;

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

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

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

@@ -0,0 +1,28 @@
+import { DatePickerProps } from './DatePicker.types';
+/**
+ * A reusable and customizable date picker component that supports both
+ * single date and date range selection using `react-day-picker`.
+ *
+ * @param {string} [title] - Optional button text placeholder. Default is "Select Date".
+ * @param {(value: HandleSelectDatePicker) => void} selectedDate - Callback function
+ *        triggered when the user applies a selected date or range.
+ * @param {HandleSelectDatePicker} [value] - Controlled selected value (single date or date range).
+ * @param {boolean} [fullWidth] - If true, the date picker will stretch to full width of its container.
+ * @param {number} [maxPastDays] - Maximum number of past days selectable.
+ * @param {number} [maxRangeDays] - Maximum range in days (for range mode).
+ * @param {boolean} [currentSelected] - If true, today is pre-selected on mount.
+ *
+ * @returns {JSX.Element} The rendered DatePicker component.
+ *
+ * @example
+ * <DatePicker
+ *   title="Pick a date"
+ *   fullWidth
+ *   maxPastDays={30}
+ *   maxRangeDays={14}
+ *   currentSelected
+ *   selectedDate={(value) => console.log("Selected:", value)}
+ * />
+ */
+declare const DatePicker: React.FC<DatePickerProps>;
+export default DatePicker;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePickerProps } from './DatePicker.types';
+declare const meta: Meta<DatePickerProps>;
+export default meta;
+type Story = StoryObj<DatePickerProps>;
+export declare const Default: Story;
+export declare const CustomTitle: Story;
+export declare const CurrentDateSelected: Story;
+export declare const MaxPastDays: Story;
+export declare const MaxRangeDays: Story;

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

@@ -0,0 +1,33 @@
+import { DateRange } from 'react-day-picker';
+/**
+ * The selection mode for the date picker.
+ * - "single": For selecting a single date
+ * - "range": For selecting a date range
+ */
+export type DatePickerMode = "single" | "range";
+/**
+ * Represents the value returned from the date picker based on the selected mode.
+ * - `Date`: when mode is "single"
+ * - `DateRange`: when mode is "range" (includes `from` and optional `to`)
+ * - `undefined`: when no date is selected
+ */
+export type HandleSelectDatePicker = Date | DateRange | undefined;
+/**
+ * Props for the reusable DatePicker component.
+ */
+export interface DatePickerProps {
+    /** Optional title/label to show above the date picker, default value "Select Date"  */
+    title?: string;
+    /** Callback function that receives the selected date or date range */
+    selectedDate: (value: HandleSelectDatePicker) => void;
+    /** External selected value to control DatePicker state (single or range) */
+    value?: HandleSelectDatePicker;
+    /** Defines the size of the date picker ("sm" or "lg"). */
+    size?: "sm" | "lg" | "full";
+    /** Maximum number of past days selectable. */
+    maxPastDays?: number;
+    /** Maximum range in days (for range mode).*/
+    maxRangeDays?: number;
+    /** If true, today is pre-selected on mount.*/
+    currentSelected?: boolean;
+}

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

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

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

@@ -0,0 +1,38 @@
+import { DropdownProps } from './Dropdown.types';
+/**
+ * Dropdown Component
+ *
+ * A reusable dropdown select component that supports custom options, size variants,
+ * optional selection state, static labels, and click-outside-to-close functionality.
+ *
+ * Props:
+ * @param {string} label - The placeholder label shown when no option is selected.
+ * @param {"sm" | "lg" | "full"} [size="sm"] - Optional size of the dropdown.
+ *        Use `"sm"` for compact, `"lg"` for larger dropdowns, and `"full"` for full width.
+ * @param {DropdownOptionValues[]} options - The list of selectable options, each with a `label` and `value`.
+ * @param {DropdownOptionValues} [selected] - The currently selected option object. When omitted, the dropdown works in stateless mode.
+ * @param {(value: DropdownOptionValues) => void} onSelect - Callback function triggered when a new option is selected. Required even in stateless mode for handling user action.
+ *
+ * @returns A styled dropdown menu component with toggle button and option list.
+ *
+ * Example usage:
+ * Stateful usage: Dropdown manages selected value and label updates.
+ * <Dropdown
+ *   label="Select status"
+ *   size="sm"
+ *   options={[{ label: "Active", value: "active" }]}
+ *   selected={{ label: "Active", value: "active" }}
+ *   onSelect={(val) => console.log(val)}
+ * />
+ *
+ *  Stateless Dropdown: Used when no selected state tracking is needed.
+ *  Useful for actions like triggering downloads or commands without showing selection.
+ * <Dropdown
+ *   label="Download as"
+ *   size="sm"
+ *   options={[{ label: "PDF", value: "pdf" }, { label: "CSV", value: "csv" }]}
+ *   onSelect={(val) => downloadFile(val)}
+ * />
+ */
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DropdownProps } from './Dropdown.types';
+declare const meta: Meta<DropdownProps>;
+export default meta;
+type Story = StoryObj<DropdownProps>;
+export declare const SmallDropdown: Story;
+export declare const LargeDropdown: Story;
+export declare const SelectedOption: Story;
+/** Stateless dropdown for downloads (doesn’t store selected)*/
+export declare const StatelessDropdown: Story;

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

@@ -0,0 +1,26 @@
+/**
+ * Represents an individual option in the dropdown.
+ */
+export interface DropdownOptionValues {
+    /** The visible label shown in the dropdown list and selected state */
+    label: string;
+    /** The underlying value associated with the option */
+    value: string;
+}
+/** Props associated with Dropdown component*/
+export interface DropdownProps {
+    /** The fallback label to display when no option is selected. */
+    label: string;
+    /** Defines the size of the dropdown button and options. default value is "sm" */
+    size?: "sm" | "lg" | "full";
+    /** List of dropdown options available for selection. */
+    options: DropdownOptionValues[];
+    /** Currently selected option. Must be one of the items from `options`. */
+    /** Optional selected value — if not passed, fallback label is shown */
+    selected?: DropdownOptionValues;
+    /**
+     * Callback function that is triggered when a new option is selected.
+     * @param value - The option object selected by the user.
+     */
+    onSelect: (value: DropdownOptionValues) => void;
+}

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

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