sy-ui-lib 1.0.24 → 1.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/CommonMarketHeader/CommonMarketHeader.stories.d.ts +4 -0
- package/dist/components/CommonMarketRow/CommonMarketRow.stories.d.ts +2 -0
- package/dist/components/CommonMarketRow/CommonMarketRow.types.d.ts +54 -8
- package/dist/components/CommonMarketRow/RaceDetailsLayeredOddsRow.component.d.ts +3 -0
- package/dist/components/CommonMarketRow/RaceLayeredOddsRow.component.d.ts +3 -0
- package/dist/components/Icon/SvgIcons.d.ts +11 -0
- package/dist/components/Toggle/Toggle.component.d.ts +5 -7
- package/dist/components/Toggle/Toggle.types.d.ts +5 -3
- package/dist/index.cjs +18 -18
- package/dist/index.css +1 -1
- package/dist/index.js +5046 -4554
- package/package.json +1 -1
|
@@ -15,3 +15,7 @@ export declare const SportsWithSubHeader: Story;
|
|
|
15
15
|
export declare const MatchOdds: Story;
|
|
16
16
|
export declare const EventTitle: Story;
|
|
17
17
|
export declare const EventTitleWithInfoIcon: Story;
|
|
18
|
+
/** Other Market Header with Race Layered Row */
|
|
19
|
+
export declare const OtherMarketRaceLayerd: Story;
|
|
20
|
+
/** Other Market Header with Race Details Layered Row */
|
|
21
|
+
export declare const OtherMarketRaceDetailsLayerd: Story;
|
|
@@ -8,3 +8,5 @@ export declare const LayeredOddsRow: Story;
|
|
|
8
8
|
export declare const FancyOddsRow: Story;
|
|
9
9
|
export declare const OddEvenRow: Story;
|
|
10
10
|
export declare const RacingRow: Story;
|
|
11
|
+
export declare const RaceLayeredOddsRow: Story;
|
|
12
|
+
export declare const RaceDetailsLayeredOddsRow: Story;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BetSlipVariantType } from '..';
|
|
1
|
+
import { BetSlipVariantType, IconName } from '..';
|
|
2
2
|
export type BetSlipPairVariantType = "Back" | "Lay";
|
|
3
3
|
export interface OddClickHandlerProps {
|
|
4
4
|
/** Market identifier */
|
|
@@ -164,17 +164,63 @@ export interface racingRowVariant {
|
|
|
164
164
|
eventType?: string;
|
|
165
165
|
/** Provider identifier */
|
|
166
166
|
providerId?: string;
|
|
167
|
-
/** Whether odds are frozen */
|
|
168
|
-
isFreezed?: boolean;
|
|
169
|
-
/** Whether the row is suspended */
|
|
170
|
-
isSuspended?: boolean;
|
|
171
|
-
/** Message shown when the row is suspended */
|
|
172
|
-
suspendedMsg?: string;
|
|
173
167
|
/** isTV */
|
|
174
168
|
isTV?: boolean;
|
|
175
169
|
/** Callback when row redirect is triggered */
|
|
176
170
|
onClickRedirect?: (id: string, eventId: string) => void;
|
|
177
171
|
}
|
|
172
|
+
/** Props for Race odds row variant */
|
|
173
|
+
export interface RaceLayeredOddsRowVariant extends BaseOddsRowProps {
|
|
174
|
+
/** Variant identifier */
|
|
175
|
+
variant: "raceLayered";
|
|
176
|
+
/** Runner identifier */
|
|
177
|
+
runnerId: string;
|
|
178
|
+
/** Runner display name (optional) */
|
|
179
|
+
runnerName?: string;
|
|
180
|
+
/** Name of the icon to display in the Row*/
|
|
181
|
+
iconName: IconName;
|
|
182
|
+
/** Current fancy value (optional) */
|
|
183
|
+
currentValue?: number;
|
|
184
|
+
/** Projected fancy value (optional) */
|
|
185
|
+
projectedValue?: number;
|
|
186
|
+
/** Additional notes or remarks */
|
|
187
|
+
notes?: string;
|
|
188
|
+
/** Depth or level of the market */
|
|
189
|
+
level?: 1 | 2 | 3;
|
|
190
|
+
/** Callback when book button is clicked */
|
|
191
|
+
onRowClick?: (runnerId: string) => void;
|
|
192
|
+
/** Callback when an odd is clicked */
|
|
193
|
+
onOddClick?: (oddData: OddClickHandlerProps) => void;
|
|
194
|
+
}
|
|
195
|
+
/** Represents a single runner details */
|
|
196
|
+
export interface RunnerDetail {
|
|
197
|
+
label: string;
|
|
198
|
+
value: string | number;
|
|
199
|
+
}
|
|
200
|
+
/** Props for Race odds row variant */
|
|
201
|
+
export interface RaceDetailsLayeredOddsRowVariant extends BaseOddsRowProps {
|
|
202
|
+
/** Variant identifier */
|
|
203
|
+
variant: "raceDetailsLayered";
|
|
204
|
+
serialNo: string;
|
|
205
|
+
position: string;
|
|
206
|
+
/** Runner identifier */
|
|
207
|
+
runnerId: string;
|
|
208
|
+
/** Runner display name (optional) */
|
|
209
|
+
runnerName?: string;
|
|
210
|
+
details: RunnerDetail[];
|
|
211
|
+
/** Current fancy value (optional) */
|
|
212
|
+
currentValue?: number;
|
|
213
|
+
/** Projected fancy value (optional) */
|
|
214
|
+
projectedValue?: number;
|
|
215
|
+
/** Additional notes or remarks */
|
|
216
|
+
notes?: string;
|
|
217
|
+
/** Depth or level of the market */
|
|
218
|
+
level?: 1 | 2 | 3;
|
|
219
|
+
/** Callback when book button is clicked */
|
|
220
|
+
onRowClick?: (runnerId: string) => void;
|
|
221
|
+
/** Callback when an odd is clicked */
|
|
222
|
+
onOddClick?: (oddData: OddClickHandlerProps) => void;
|
|
223
|
+
}
|
|
178
224
|
/** Union type representing all supported market row variants*/
|
|
179
|
-
export type CommonMarketRowProps = FancyLayeredOddsRowVariant | PairOddsRowVariant | racingRowVariant;
|
|
225
|
+
export type CommonMarketRowProps = FancyLayeredOddsRowVariant | PairOddsRowVariant | racingRowVariant | RaceLayeredOddsRowVariant | RaceDetailsLayeredOddsRowVariant;
|
|
180
226
|
export {};
|
|
@@ -3,6 +3,15 @@ import { IconSize } from './Icon.types';
|
|
|
3
3
|
* Storing Icons as key value pairs and Exporting a collection of SVG icons as react elements
|
|
4
4
|
*/
|
|
5
5
|
export declare const icons: {
|
|
6
|
+
one: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
two: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
three: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
four: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
five: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
six: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
seven: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
eight: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
nine: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
6
15
|
logout: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
7
16
|
cancel: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
8
17
|
notes: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -81,4 +90,6 @@ export declare const icons: {
|
|
|
81
90
|
current: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
82
91
|
save: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
83
92
|
setting: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
93
|
+
dog: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
94
|
+
horse: (size: IconSize) => import("react/jsx-runtime").JSX.Element;
|
|
84
95
|
};
|
|
@@ -10,26 +10,24 @@ import { ToggleProps } from './Toggle.types';
|
|
|
10
10
|
* @param {(checked: boolean) => void} onChange Required Callback invoked when the toggle is clicked.
|
|
11
11
|
* @param {boolean} [disabled=false] Optional If true, the toggle is non-interactive and visually muted.
|
|
12
12
|
* @param {string} [ariaLabel="Toggle"] Optional Accessibility label for the toggle button.
|
|
13
|
-
* @param {string} [onColor] Optional Tailwind color class for the "on" state of the toggle knob.
|
|
14
|
-
* @param {string} [offColor] Optional Tailwind color class for the "off" state of the toggle knob.
|
|
15
13
|
* @param {"sm" | "md"} [size="md"] Controls toggle dimensions
|
|
16
14
|
*
|
|
17
15
|
* @param {Object} [content] Optional state-based UI configuration
|
|
18
|
-
* @param {{ icon?: IconName; text?: string }} [content.on] UI for "on" state
|
|
19
|
-
* @param {{ icon?: IconName; text?: string }} [content.off] UI for "off" state
|
|
16
|
+
* @param {{ icon?: IconName; text?: string; color?: string }} [content.on] UI for "on" state
|
|
17
|
+
* @param {{ icon?: IconName; text?: string; color?: string }} [content.off] UI for "off" state
|
|
20
18
|
*
|
|
21
19
|
* @example usage:
|
|
22
20
|
* <Toggle checked={true} onChange={toggleHandler} />
|
|
23
21
|
* <Toggle checked={false} disabled />
|
|
24
|
-
* <Toggle checked={isOn} onChange={toggleHandler}
|
|
22
|
+
* <Toggle checked={isOn} onChange={toggleHandler} />
|
|
25
23
|
*
|
|
26
24
|
* With content (icon + text):
|
|
27
25
|
* <Toggle
|
|
28
26
|
* checked={isOn}
|
|
29
27
|
* onChange={toggleHandler}
|
|
30
28
|
* content={{
|
|
31
|
-
* on: { icon: "check", text: "On" },
|
|
32
|
-
* off: { icon: "close", text: "Off" }
|
|
29
|
+
* on: { icon: "check", text: "On", color: "success" },
|
|
30
|
+
* off: { icon: "close", text: "Off", color: "error" }
|
|
33
31
|
* }}
|
|
34
32
|
* />
|
|
35
33
|
*
|
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import { IconName } from '../Icon';
|
|
2
|
-
/** Available visual variants of the toggle component
|
|
2
|
+
/** Available visual variants of the toggle component:-
|
|
3
|
+
* "compound" shows icon + text inside track, "default" is simple switch */
|
|
3
4
|
export type ToggleVarinat = "default" | "compound";
|
|
4
5
|
export type ToggleStateContent = {
|
|
5
6
|
/** Icon to display for a specific state */
|
|
6
7
|
icon?: IconName;
|
|
7
8
|
/** Text label to display for a specific state */
|
|
8
9
|
text?: string;
|
|
10
|
+
/** Color of the toggle knob to display for a specific state */
|
|
11
|
+
color?: string;
|
|
9
12
|
};
|
|
10
13
|
export interface ToggleProps {
|
|
11
14
|
checked?: boolean;
|
|
12
15
|
onChange: (checked: boolean) => void;
|
|
13
16
|
disabled?: boolean;
|
|
14
17
|
ariaLabel?: string;
|
|
15
|
-
onColor?: string;
|
|
16
|
-
offColor?: string;
|
|
17
18
|
size?: "sm" | "md";
|
|
18
19
|
/** Defines the visual style/structure of the toggle */
|
|
19
20
|
variant?: ToggleVarinat;
|
|
21
|
+
/** State-based UI config for ON/OFF (icon, text, color) */
|
|
20
22
|
content?: {
|
|
21
23
|
/** UI (icon/text) to render when toggle is ON */
|
|
22
24
|
on?: ToggleStateContent;
|