@udixio/ui-react 2.10.12 → 2.10.14
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/index.cjs +3 -3
- package/dist/index.js +2696 -2710
- package/dist/lib/effects/ThemeProvider.d.ts.map +1 -1
- package/dist/theme.worker.js +6633 -0
- package/package.json +4 -1
- package/.eslintrc.mjs +0 -22
- package/.storybook/main.ts +0 -20
- package/.storybook/preview.ts +0 -1
- package/CHANGELOG.md +0 -1130
- package/dist/scrollDriven-AP2yWhzi.js +0 -121
- package/postcss.config.mjs +0 -5
- package/src/index.css +0 -4
- package/src/index.ts +0 -1
- package/src/lib/components/AnchorPositioner.tsx +0 -185
- package/src/lib/components/Button.tsx +0 -208
- package/src/lib/components/Card.tsx +0 -47
- package/src/lib/components/Carousel.tsx +0 -437
- package/src/lib/components/CarouselItem.tsx +0 -61
- package/src/lib/components/Checkbox.tsx +0 -120
- package/src/lib/components/Chip.tsx +0 -341
- package/src/lib/components/Chips.tsx +0 -331
- package/src/lib/components/ContextMenu.tsx +0 -109
- package/src/lib/components/DatePicker.tsx +0 -432
- package/src/lib/components/Divider.tsx +0 -20
- package/src/lib/components/Fab.tsx +0 -127
- package/src/lib/components/FabMenu.tsx +0 -239
- package/src/lib/components/IconButton.tsx +0 -146
- package/src/lib/components/Menu.tsx +0 -88
- package/src/lib/components/MenuGroup.tsx +0 -34
- package/src/lib/components/MenuHeadline.tsx +0 -9
- package/src/lib/components/MenuItem.tsx +0 -215
- package/src/lib/components/NavigationRail.tsx +0 -186
- package/src/lib/components/NavigationRailItem.tsx +0 -227
- package/src/lib/components/ProgressIndicator.tsx +0 -214
- package/src/lib/components/SideSheet.tsx +0 -135
- package/src/lib/components/Slider.tsx +0 -374
- package/src/lib/components/Snackbar.tsx +0 -77
- package/src/lib/components/Switch.tsx +0 -107
- package/src/lib/components/Tab.tsx +0 -123
- package/src/lib/components/TabGroup.tsx +0 -66
- package/src/lib/components/TabGroupContext.tsx +0 -16
- package/src/lib/components/TabPanel.tsx +0 -27
- package/src/lib/components/TabPanels.tsx +0 -76
- package/src/lib/components/Tabs.tsx +0 -105
- package/src/lib/components/TextField.tsx +0 -586
- package/src/lib/components/Tooltip.tsx +0 -217
- package/src/lib/components/index.ts +0 -34
- package/src/lib/config/config.interface.ts +0 -9
- package/src/lib/config/define-config.ts +0 -16
- package/src/lib/config/index.ts +0 -2
- package/src/lib/effects/AnimateOnScroll.ts +0 -391
- package/src/lib/effects/State.tsx +0 -90
- package/src/lib/effects/SyncedFixedWrapper.tsx +0 -62
- package/src/lib/effects/ThemeProvider.tsx +0 -172
- package/src/lib/effects/block-scroll.effect.tsx +0 -313
- package/src/lib/effects/custom-scroll/custom-scroll.effect.tsx +0 -407
- package/src/lib/effects/custom-scroll/custom-scroll.interface.ts +0 -29
- package/src/lib/effects/custom-scroll/custom-scroll.style.ts +0 -32
- package/src/lib/effects/custom-scroll/index.ts +0 -3
- package/src/lib/effects/index.ts +0 -7
- package/src/lib/effects/ripple/RippleEffect.tsx +0 -116
- package/src/lib/effects/ripple/index.tsx +0 -1
- package/src/lib/effects/scrollDriven.ts +0 -239
- package/src/lib/effects/smooth-scroll.effect.tsx +0 -112
- package/src/lib/effects/theme.worker.ts +0 -97
- package/src/lib/hooks/index.ts +0 -10
- package/src/lib/hooks/useTooltipTrigger.ts +0 -270
- package/src/lib/icon/icon.tsx +0 -125
- package/src/lib/icon/index.ts +0 -1
- package/src/lib/index.ts +0 -8
- package/src/lib/interfaces/button.interface.ts +0 -65
- package/src/lib/interfaces/card.interface.ts +0 -11
- package/src/lib/interfaces/carousel-item.interface.ts +0 -12
- package/src/lib/interfaces/carousel.interface.ts +0 -41
- package/src/lib/interfaces/checkbox.interface.ts +0 -39
- package/src/lib/interfaces/chip.interface.ts +0 -97
- package/src/lib/interfaces/chips.interface.ts +0 -37
- package/src/lib/interfaces/date-picker.interface.ts +0 -79
- package/src/lib/interfaces/divider.interface.ts +0 -7
- package/src/lib/interfaces/fab-menu.interface.ts +0 -12
- package/src/lib/interfaces/fab.interface.ts +0 -27
- package/src/lib/interfaces/icon-button.interface.ts +0 -38
- package/src/lib/interfaces/index.ts +0 -26
- package/src/lib/interfaces/menu-group.interface.ts +0 -13
- package/src/lib/interfaces/menu-item.interface.ts +0 -29
- package/src/lib/interfaces/menu.interface.ts +0 -19
- package/src/lib/interfaces/navigation-rail-item.interface.ts +0 -39
- package/src/lib/interfaces/navigation-rail.interface.ts +0 -39
- package/src/lib/interfaces/progress-indicator.interface.ts +0 -41
- package/src/lib/interfaces/side-sheet.interface.tsx +0 -28
- package/src/lib/interfaces/slider.interface.ts +0 -27
- package/src/lib/interfaces/snackbar.interface.ts +0 -13
- package/src/lib/interfaces/switch.interface.ts +0 -14
- package/src/lib/interfaces/tab-group.interface.ts +0 -13
- package/src/lib/interfaces/tab-panels.interface.ts +0 -21
- package/src/lib/interfaces/tab.interface.ts +0 -31
- package/src/lib/interfaces/tabs.interface.ts +0 -22
- package/src/lib/interfaces/text-field.interface.ts +0 -61
- package/src/lib/interfaces/tooltip.interface.ts +0 -61
- package/src/lib/styles/button.style.ts +0 -136
- package/src/lib/styles/card.style.ts +0 -29
- package/src/lib/styles/carousel-item.style.ts +0 -24
- package/src/lib/styles/carousel.style.ts +0 -22
- package/src/lib/styles/checkbox.style.ts +0 -64
- package/src/lib/styles/chip.style.ts +0 -62
- package/src/lib/styles/chips.style.ts +0 -20
- package/src/lib/styles/date-picker.style.ts +0 -43
- package/src/lib/styles/divider.style.ts +0 -31
- package/src/lib/styles/fab-menu.style.ts +0 -29
- package/src/lib/styles/fab.style.ts +0 -49
- package/src/lib/styles/icon-button.style.ts +0 -168
- package/src/lib/styles/index.ts +0 -25
- package/src/lib/styles/menu-group.style.ts +0 -34
- package/src/lib/styles/menu-headline.style.ts +0 -20
- package/src/lib/styles/menu-item.style.ts +0 -45
- package/src/lib/styles/menu.style.ts +0 -32
- package/src/lib/styles/navigation-rail-item.style.ts +0 -56
- package/src/lib/styles/navigation-rail.style.ts +0 -36
- package/src/lib/styles/progress-indicator.style.ts +0 -72
- package/src/lib/styles/side-sheet.style.ts +0 -45
- package/src/lib/styles/slider.style.ts +0 -41
- package/src/lib/styles/snackbar.style.ts +0 -26
- package/src/lib/styles/switch.style.ts +0 -67
- package/src/lib/styles/tab-panels.style.ts +0 -35
- package/src/lib/styles/tab.style.ts +0 -78
- package/src/lib/styles/tabs.style.ts +0 -22
- package/src/lib/styles/text-field.style.ts +0 -115
- package/src/lib/styles/tooltip.style.ts +0 -48
- package/src/lib/utils/component-helper.ts +0 -134
- package/src/lib/utils/component.ts +0 -34
- package/src/lib/utils/index.ts +0 -7
- package/src/lib/utils/string.ts +0 -9
- package/src/lib/utils/styles/classnames.ts +0 -49
- package/src/lib/utils/styles/get-classname.ts +0 -96
- package/src/lib/utils/styles/index.ts +0 -4
- package/src/lib/utils/styles/use-classnames.ts +0 -25
- package/src/stories/action/button.stories.tsx +0 -86
- package/src/stories/action/fab.stories.tsx +0 -54
- package/src/stories/action/icon-button.stories.tsx +0 -134
- package/src/stories/assets/accessibility.png +0 -0
- package/src/stories/assets/accessibility.svg +0 -5
- package/src/stories/assets/addon-library.png +0 -0
- package/src/stories/assets/assets.png +0 -0
- package/src/stories/assets/context.png +0 -0
- package/src/stories/assets/discord.svg +0 -15
- package/src/stories/assets/docs.png +0 -0
- package/src/stories/assets/figma-plugin.png +0 -0
- package/src/stories/assets/github.svg +0 -3
- package/src/stories/assets/share.png +0 -0
- package/src/stories/assets/styling.png +0 -0
- package/src/stories/assets/testing.png +0 -0
- package/src/stories/assets/theming.png +0 -0
- package/src/stories/assets/tutorials.svg +0 -12
- package/src/stories/assets/youtube.svg +0 -4
- package/src/stories/communication/ProgressIndicator.stories.tsx +0 -57
- package/src/stories/communication/SnackBar.stories.tsx +0 -32
- package/src/stories/communication/tool-tip.stories.tsx +0 -133
- package/src/stories/containment/card.stories.tsx +0 -42
- package/src/stories/containment/carousel.stories.tsx +0 -65
- package/src/stories/containment/divider.stories.tsx +0 -35
- package/src/stories/containment/slide-sheet.stories.tsx +0 -45
- package/src/stories/effect/smooth-scroll.stories.tsx +0 -54
- package/src/stories/navigation/navigation-rail/navigation-rail-item.stories.tsx +0 -65
- package/src/stories/navigation/navigation-rail/navigation-rail.stories.tsx +0 -122
- package/src/stories/navigation/tabs/tab.stories.tsx +0 -57
- package/src/stories/navigation/tabs/tabs.stories.tsx +0 -102
- package/src/stories/selection/slider.stories.tsx +0 -85
- package/src/stories/selection/switch.stories.tsx +0 -46
- package/src/stories/text-inputs/text-field.stories.tsx +0 -135
- package/src/tests/Button.spec.tsx +0 -67
- package/src/tests/useClassNames.spec.tsx +0 -82
- package/src/udixio.css +0 -120
- package/theme.config.ts +0 -7
- package/tsconfig.json +0 -16
- package/tsconfig.lib.json +0 -51
- package/tsconfig.spec.json +0 -37
- package/tsconfig.storybook.json +0 -38
- package/vite.config.ts +0 -82
- /package/dist/{scrollDriven-DWAu7CR0.cjs → scrollDriven.js} +0 -0
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { ActionOrLink } from '../utils';
|
|
2
|
-
import type { Icon } from '../icon';
|
|
3
|
-
|
|
4
|
-
// Ce que Chips a besoin de connaître pour (re)construire un Chip
|
|
5
|
-
export type ChipItem = {
|
|
6
|
-
label: string;
|
|
7
|
-
icon?: Icon;
|
|
8
|
-
activated?: boolean;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
variant?: 'outlined' | 'elevated';
|
|
11
|
-
href?: string; // si tu utilises ActionOrLink côté Chip
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
type ChipsVariant = 'input';
|
|
15
|
-
|
|
16
|
-
type Props = {
|
|
17
|
-
/** Style du conteneur de chips */
|
|
18
|
-
variant?: ChipsVariant;
|
|
19
|
-
|
|
20
|
-
/** Active/masse un comportement de container (si utile) */
|
|
21
|
-
scrollable?: boolean;
|
|
22
|
-
|
|
23
|
-
draggable?: boolean; // optionnel
|
|
24
|
-
|
|
25
|
-
/** Mode contrôlé: la source de vérité */
|
|
26
|
-
items?: ChipItem[];
|
|
27
|
-
|
|
28
|
-
/** Notifie toute modification de la liste (remove, toggle, etc.) */
|
|
29
|
-
onItemsChange?: (next: ChipItem[]) => void;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
type Elements = ['chips'];
|
|
33
|
-
|
|
34
|
-
export type ChipsInterface = ActionOrLink<Props> & {
|
|
35
|
-
elements: Elements;
|
|
36
|
-
states: {};
|
|
37
|
-
};
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
|
-
export type DateRange = [Date | null, Date | null];
|
|
4
|
-
|
|
5
|
-
type Props = {
|
|
6
|
-
/**
|
|
7
|
-
* Selection mode: 'single' for one date, 'range' for start/end period.
|
|
8
|
-
* @default 'single'
|
|
9
|
-
*/
|
|
10
|
-
mode?: 'single' | 'range';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* The currently selected date(s).
|
|
14
|
-
* Date for single mode, [start, end] tuple for range mode.
|
|
15
|
-
*/
|
|
16
|
-
value?: Date | DateRange | null;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Default selected date(s) for uncontrolled usage.
|
|
20
|
-
*/
|
|
21
|
-
defaultValue?: Date | DateRange | null;
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Callback fired when selection changes.
|
|
25
|
-
* Returns Date in single mode, DateRange in range mode.
|
|
26
|
-
*/
|
|
27
|
-
onChange?: (value: any) => void;
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Minimum selectable date.
|
|
31
|
-
*/
|
|
32
|
-
minDate?: Date;
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* Maximum selectable date.
|
|
36
|
-
*/
|
|
37
|
-
maxDate?: Date;
|
|
38
|
-
|
|
39
|
-
/**
|
|
40
|
-
* Disables specific dates.
|
|
41
|
-
*/
|
|
42
|
-
shouldDisableDate?: (date: Date) => boolean;
|
|
43
|
-
|
|
44
|
-
/**
|
|
45
|
-
* Locale for formatting dates.
|
|
46
|
-
*/
|
|
47
|
-
locale?: string;
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* First day of the week (0=Sunday, 1=Monday).
|
|
51
|
-
* @default 0
|
|
52
|
-
*/
|
|
53
|
-
weekStartDay?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
54
|
-
|
|
55
|
-
className?: string;
|
|
56
|
-
style?: React.CSSProperties;
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
export type DatePickerStates = {
|
|
60
|
-
// Can be expanded if we need specific state-driven styles exposed to the config
|
|
61
|
-
hasSelected: boolean;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
export interface DatePickerInterface {
|
|
65
|
-
type: 'div';
|
|
66
|
-
props: Props;
|
|
67
|
-
states: DatePickerStates;
|
|
68
|
-
elements: [
|
|
69
|
-
'datePicker',
|
|
70
|
-
'header',
|
|
71
|
-
'monthNav',
|
|
72
|
-
'monthLabel',
|
|
73
|
-
'weekDays',
|
|
74
|
-
'weekDay',
|
|
75
|
-
'daysGrid',
|
|
76
|
-
'dayCell',
|
|
77
|
-
'dayButton', // The interactive part of the day
|
|
78
|
-
];
|
|
79
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { FabInterface } from './fab.interface';
|
|
2
|
-
|
|
3
|
-
export interface FabMenuInterface {
|
|
4
|
-
type: 'div';
|
|
5
|
-
props: FabInterface['props'] & {
|
|
6
|
-
variant?: 'primary' | 'secondary' | 'tertiary';
|
|
7
|
-
open?: boolean;
|
|
8
|
-
defaultOpen?: boolean;
|
|
9
|
-
onOpenChange?: (open: boolean) => void;
|
|
10
|
-
};
|
|
11
|
-
elements: ['fabMenu', 'fab', 'actions', 'action'];
|
|
12
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { ActionOrLink } from '../utils/component';
|
|
2
|
-
import { Transition } from 'motion';
|
|
3
|
-
import { Icon } from '../icon';
|
|
4
|
-
import { ReactNode } from 'react';
|
|
5
|
-
|
|
6
|
-
export type FabVariant =
|
|
7
|
-
| 'primary'
|
|
8
|
-
| 'secondary'
|
|
9
|
-
| 'tertiary'
|
|
10
|
-
| 'primaryContainer'
|
|
11
|
-
| 'secondaryContainer'
|
|
12
|
-
| 'tertiaryContainer';
|
|
13
|
-
type Props = {
|
|
14
|
-
variant?: FabVariant;
|
|
15
|
-
label?: string;
|
|
16
|
-
children?: ReactNode;
|
|
17
|
-
icon: Icon;
|
|
18
|
-
size?: 'small' | 'medium' | 'large';
|
|
19
|
-
extended?: boolean;
|
|
20
|
-
transition?: Transition;
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
export type Elements = ['fab', 'stateLayer', 'icon', 'label'];
|
|
24
|
-
|
|
25
|
-
export type FabInterface = ActionOrLink<Props> & {
|
|
26
|
-
elements: Elements;
|
|
27
|
-
};
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
|
-
import { IconButtonVariant } from '../components/IconButton';
|
|
3
|
-
import { ActionOrLink } from '../utils/component';
|
|
4
|
-
import { Transition } from 'motion';
|
|
5
|
-
import { Icon } from '../icon';
|
|
6
|
-
|
|
7
|
-
type Props = {
|
|
8
|
-
label?: string;
|
|
9
|
-
children?: string;
|
|
10
|
-
icon?: Icon;
|
|
11
|
-
size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
|
|
12
|
-
width?: 'default' | 'narrow' | 'wide';
|
|
13
|
-
iconSelected?: IconDefinition;
|
|
14
|
-
onToggle?: (isActive: boolean) => void;
|
|
15
|
-
variant?: IconButtonVariant;
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
activated?: boolean;
|
|
18
|
-
title?: string | null;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* The shape of the button defines whether it is squared or rounded.
|
|
22
|
-
*/
|
|
23
|
-
shape?: 'squared' | 'rounded';
|
|
24
|
-
|
|
25
|
-
allowShapeTransformation?: boolean;
|
|
26
|
-
|
|
27
|
-
transition?: Transition;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export type IconButtonStates = {
|
|
31
|
-
isActive: boolean;
|
|
32
|
-
};
|
|
33
|
-
type Elements = ['iconButton', 'stateLayer', 'touchTarget', 'icon'];
|
|
34
|
-
|
|
35
|
-
export type IconButtonInterface = ActionOrLink<Props> & {
|
|
36
|
-
states: IconButtonStates;
|
|
37
|
-
elements: Elements;
|
|
38
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export * from './button.interface';
|
|
2
|
-
export * from './card.interface';
|
|
3
|
-
export * from './carousel-item.interface';
|
|
4
|
-
export * from './carousel.interface';
|
|
5
|
-
export * from './checkbox.interface';
|
|
6
|
-
export * from './chip.interface';
|
|
7
|
-
export * from './chips.interface';
|
|
8
|
-
export * from './divider.interface';
|
|
9
|
-
export * from './fab.interface';
|
|
10
|
-
export * from './fab-menu.interface';
|
|
11
|
-
export * from './icon-button.interface';
|
|
12
|
-
export * from './menu.interface';
|
|
13
|
-
export * from './menu-group.interface';
|
|
14
|
-
export * from './menu-item.interface';
|
|
15
|
-
export * from './progress-indicator.interface';
|
|
16
|
-
export * from './side-sheet.interface';
|
|
17
|
-
export * from './slider.interface';
|
|
18
|
-
export * from './snackbar.interface';
|
|
19
|
-
export * from './switch.interface';
|
|
20
|
-
export * from './tab.interface';
|
|
21
|
-
export * from './tabs.interface';
|
|
22
|
-
export * from './tab-group.interface';
|
|
23
|
-
export * from './tab-panels.interface';
|
|
24
|
-
export * from './text-field.interface';
|
|
25
|
-
export * from './navigation-rail-item.interface';
|
|
26
|
-
export * from './tooltip.interface';
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export interface MenuGroupProps {
|
|
2
|
-
children: React.ReactNode;
|
|
3
|
-
className?: string;
|
|
4
|
-
variant?: 'standard' | 'vibrant';
|
|
5
|
-
label?: string;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export interface MenuGroupInterface {
|
|
9
|
-
type: 'div';
|
|
10
|
-
props: MenuGroupProps;
|
|
11
|
-
states: object;
|
|
12
|
-
elements: ['menuGroup', 'groupLabel'];
|
|
13
|
-
}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { ActionOrLink } from '../utils/component';
|
|
2
|
-
|
|
3
|
-
type Props = {
|
|
4
|
-
label?: string;
|
|
5
|
-
children?: React.ReactNode;
|
|
6
|
-
leadingIcon?: any;
|
|
7
|
-
trailingIcon?: any;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
variant?: 'standard' | 'vibrant'; // Injected by parent
|
|
10
|
-
onClick?: (e?: React.MouseEvent) => void;
|
|
11
|
-
onToggle?: (activated: boolean) => void;
|
|
12
|
-
activated?: boolean;
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
type Elements = [
|
|
16
|
-
'menuItem',
|
|
17
|
-
'selectedItem',
|
|
18
|
-
'itemLabel',
|
|
19
|
-
'itemIcon',
|
|
20
|
-
'leadingIcon',
|
|
21
|
-
'trailingIcon',
|
|
22
|
-
];
|
|
23
|
-
|
|
24
|
-
export type MenuItemInterface = ActionOrLink<Props> & {
|
|
25
|
-
states: {
|
|
26
|
-
isActive: boolean;
|
|
27
|
-
};
|
|
28
|
-
elements: Elements;
|
|
29
|
-
};
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
export type MenuStates = Record<string, any>;
|
|
2
|
-
|
|
3
|
-
export interface MenuProps {
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
selected?: string | number | (string | number)[];
|
|
6
|
-
className?: string;
|
|
7
|
-
variant?: 'standard' | 'vibrant';
|
|
8
|
-
// options prop REMOVED as requested by user ("options passed as children")
|
|
9
|
-
// However, for backward compat or data-driven, one might want it, but I will strictly follow "options as children"
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface MenuInterface {
|
|
13
|
-
type: 'div';
|
|
14
|
-
props: MenuProps;
|
|
15
|
-
states: {
|
|
16
|
-
hasGroups: boolean;
|
|
17
|
-
};
|
|
18
|
-
elements: ['menu'];
|
|
19
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { ActionOrLink } from '../utils';
|
|
2
|
-
import { Dispatch, RefObject, SetStateAction } from 'react';
|
|
3
|
-
import { Transition } from 'motion';
|
|
4
|
-
import { Icon } from '../icon';
|
|
5
|
-
|
|
6
|
-
export type NavProps = {
|
|
7
|
-
selected?: boolean;
|
|
8
|
-
variant?: 'vertical' | 'horizontal';
|
|
9
|
-
label?: string;
|
|
10
|
-
children?: string;
|
|
11
|
-
icon: Icon;
|
|
12
|
-
iconSelected: Icon;
|
|
13
|
-
selectedItem?: number | null;
|
|
14
|
-
setSelectedItem?: Dispatch<SetStateAction<number | null>>;
|
|
15
|
-
onItemSelected?: (
|
|
16
|
-
args: { index: number } & Pick<NavProps, 'label' | 'icon'> & {
|
|
17
|
-
ref: RefObject<any>;
|
|
18
|
-
},
|
|
19
|
-
) => void;
|
|
20
|
-
index?: number;
|
|
21
|
-
transition?: Transition;
|
|
22
|
-
extendedOnly?: boolean;
|
|
23
|
-
isExtended?: boolean;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
type Elements = [
|
|
27
|
-
'navigationRailItem',
|
|
28
|
-
'stateLayer',
|
|
29
|
-
'icon',
|
|
30
|
-
'label',
|
|
31
|
-
'container',
|
|
32
|
-
];
|
|
33
|
-
|
|
34
|
-
export type NavigationRailItemInterface = ActionOrLink<NavProps> & {
|
|
35
|
-
states: {
|
|
36
|
-
isSelected: boolean;
|
|
37
|
-
};
|
|
38
|
-
elements: Elements;
|
|
39
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
|
|
2
|
-
import { Transition } from 'motion';
|
|
3
|
-
import { ReactProps } from '../utils';
|
|
4
|
-
import { NavigationRailItemInterface } from './navigation-rail-item.interface';
|
|
5
|
-
import { Icon } from '../icon';
|
|
6
|
-
|
|
7
|
-
type MenuState = {
|
|
8
|
-
icon: Icon;
|
|
9
|
-
label: string;
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export interface NavigationRailInterface {
|
|
13
|
-
type: 'div';
|
|
14
|
-
props: {
|
|
15
|
-
variant?: 'standard' | 'modal';
|
|
16
|
-
onItemSelected?: (
|
|
17
|
-
args: { index: number } & Pick<
|
|
18
|
-
ReactProps<NavigationRailItemInterface>,
|
|
19
|
-
'label' | 'icon'
|
|
20
|
-
> & {
|
|
21
|
-
ref: RefObject<any>;
|
|
22
|
-
},
|
|
23
|
-
) => void;
|
|
24
|
-
children: ReactNode;
|
|
25
|
-
selectedItem?: number | null;
|
|
26
|
-
setSelectedItem?: Dispatch<SetStateAction<number | null>>;
|
|
27
|
-
extended?: boolean;
|
|
28
|
-
onExtendedChange?: (extended: boolean) => void;
|
|
29
|
-
alignment?: 'middle' | 'top';
|
|
30
|
-
menu?: {
|
|
31
|
-
closed: MenuState;
|
|
32
|
-
opened: MenuState;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
transition?: Transition;
|
|
36
|
-
};
|
|
37
|
-
states: { isExtended?: boolean };
|
|
38
|
-
elements: ['navigationRail', 'header', 'menuIcon', 'segments'];
|
|
39
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Type for the different variants of the ProgressIndicator component.
|
|
3
|
-
*/
|
|
4
|
-
export type ProgressIndicatorVariant =
|
|
5
|
-
| 'linear-determinate'
|
|
6
|
-
| 'linear-indeterminate'
|
|
7
|
-
| 'circular-determinate'
|
|
8
|
-
| 'circular-indeterminate';
|
|
9
|
-
|
|
10
|
-
export interface ProgressIndicatorInterface {
|
|
11
|
-
type: 'div';
|
|
12
|
-
props: {
|
|
13
|
-
/**
|
|
14
|
-
* The percentage of the progress completed.
|
|
15
|
-
*/
|
|
16
|
-
value?: number;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* The duration of the transition animation in milliseconds.
|
|
20
|
-
*/
|
|
21
|
-
transitionDuration?: number;
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* The variant of the ProgressIndicator.
|
|
25
|
-
*/
|
|
26
|
-
variant?: ProgressIndicatorVariant;
|
|
27
|
-
/**
|
|
28
|
-
* The minimum height of the line used to draw the linear indicator.
|
|
29
|
-
*/
|
|
30
|
-
minHeight?: number;
|
|
31
|
-
};
|
|
32
|
-
states: { isVisible: boolean };
|
|
33
|
-
|
|
34
|
-
elements: [
|
|
35
|
-
'progressIndicator',
|
|
36
|
-
'stop',
|
|
37
|
-
'activeIndicator',
|
|
38
|
-
'lastTrack',
|
|
39
|
-
'firstTrack',
|
|
40
|
-
];
|
|
41
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { Transition } from 'motion';
|
|
2
|
-
import { Icon } from '../icon';
|
|
3
|
-
|
|
4
|
-
export interface SideSheetInterface {
|
|
5
|
-
type: 'div';
|
|
6
|
-
props: {
|
|
7
|
-
variant?: 'standard' | 'modal';
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
title?: string;
|
|
10
|
-
position?: 'left' | 'right';
|
|
11
|
-
extended?: boolean;
|
|
12
|
-
onExtendedChange?: (extended: boolean) => void;
|
|
13
|
-
transition?: Transition;
|
|
14
|
-
closeIcon?: Icon;
|
|
15
|
-
divider?: boolean;
|
|
16
|
-
};
|
|
17
|
-
states: { isExtended: boolean };
|
|
18
|
-
elements: [
|
|
19
|
-
'sideSheet',
|
|
20
|
-
'container',
|
|
21
|
-
'title',
|
|
22
|
-
'content',
|
|
23
|
-
'header',
|
|
24
|
-
'closeButton',
|
|
25
|
-
'divider',
|
|
26
|
-
'overlay',
|
|
27
|
-
];
|
|
28
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export interface SliderInterface {
|
|
2
|
-
type: 'div';
|
|
3
|
-
props: {
|
|
4
|
-
value?: number;
|
|
5
|
-
name: string;
|
|
6
|
-
onChange?: (value: number) => void;
|
|
7
|
-
valueFormatter?: (value: number) => string | number;
|
|
8
|
-
step?: number;
|
|
9
|
-
min?: number;
|
|
10
|
-
max?: number;
|
|
11
|
-
marks?: {
|
|
12
|
-
value: number;
|
|
13
|
-
label?: string;
|
|
14
|
-
}[];
|
|
15
|
-
};
|
|
16
|
-
states: {
|
|
17
|
-
isChanging: boolean;
|
|
18
|
-
};
|
|
19
|
-
elements: [
|
|
20
|
-
'slider',
|
|
21
|
-
'activeTrack',
|
|
22
|
-
'handle',
|
|
23
|
-
'inactiveTrack',
|
|
24
|
-
'valueIndicator',
|
|
25
|
-
'dot',
|
|
26
|
-
];
|
|
27
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Icon } from '../icon';
|
|
2
|
-
|
|
3
|
-
export interface SnackbarInterface {
|
|
4
|
-
type: 'div';
|
|
5
|
-
props: {
|
|
6
|
-
duration?: number;
|
|
7
|
-
onClose?: () => void;
|
|
8
|
-
message: string;
|
|
9
|
-
closeIcon?: Icon;
|
|
10
|
-
};
|
|
11
|
-
states: { isVisible: boolean };
|
|
12
|
-
elements: ['snackbar', 'container', 'supportingText', 'action', 'icon'];
|
|
13
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Icon } from '../icon';
|
|
2
|
-
|
|
3
|
-
export interface SwitchInterface {
|
|
4
|
-
type: 'div';
|
|
5
|
-
props: {
|
|
6
|
-
selected?: boolean;
|
|
7
|
-
activeIcon?: Icon;
|
|
8
|
-
inactiveIcon?: Icon;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
onChange?: (checked: boolean) => void;
|
|
11
|
-
};
|
|
12
|
-
states: { isSelected: boolean };
|
|
13
|
-
elements: ['switch', 'handleContainer', 'icon', 'handleStateLayer', 'handle'];
|
|
14
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface TabGroupInterface {
|
|
4
|
-
type: 'div';
|
|
5
|
-
props: {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
selectedTab?: number | null;
|
|
8
|
-
setSelectedTab?: Dispatch<SetStateAction<number | null>>;
|
|
9
|
-
defaultTab?: number;
|
|
10
|
-
};
|
|
11
|
-
states: object;
|
|
12
|
-
elements: ['tabGroup'];
|
|
13
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
|
|
3
|
-
export interface TabPanelsInterface {
|
|
4
|
-
type: 'div';
|
|
5
|
-
props: {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
};
|
|
8
|
-
states: object;
|
|
9
|
-
elements: ['tabPanels'];
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface TabPanelInterface {
|
|
13
|
-
type: 'div';
|
|
14
|
-
props: {
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
};
|
|
17
|
-
states: {
|
|
18
|
-
isSelected: boolean;
|
|
19
|
-
};
|
|
20
|
-
elements: ['tabPanel'];
|
|
21
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { ActionOrLink } from '../utils/component';
|
|
2
|
-
import { TabsVariant } from './tabs.interface';
|
|
3
|
-
import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
|
|
4
|
-
import { Icon } from '../icon';
|
|
5
|
-
|
|
6
|
-
export type TabProps = {
|
|
7
|
-
selected?: boolean;
|
|
8
|
-
variant?: TabsVariant;
|
|
9
|
-
label?: string;
|
|
10
|
-
icon?: Icon;
|
|
11
|
-
selectedTab?: number | null;
|
|
12
|
-
setSelectedTab?: Dispatch<SetStateAction<number | null>>;
|
|
13
|
-
tabsId?: string;
|
|
14
|
-
onTabSelected?: (
|
|
15
|
-
args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
|
|
16
|
-
ref: RefObject<any>;
|
|
17
|
-
},
|
|
18
|
-
) => void;
|
|
19
|
-
index?: number;
|
|
20
|
-
scrollable?: boolean;
|
|
21
|
-
children?: ReactNode;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
type Elements = ['tab', 'stateLayer', 'icon', 'label', 'content', 'underline'];
|
|
25
|
-
|
|
26
|
-
export type TabInterface = ActionOrLink<TabProps> & {
|
|
27
|
-
states: {
|
|
28
|
-
isSelected: boolean;
|
|
29
|
-
};
|
|
30
|
-
elements: Elements;
|
|
31
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { TabProps } from './tab.interface';
|
|
2
|
-
import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
|
|
3
|
-
|
|
4
|
-
export type TabsVariant = 'primary' | 'secondary';
|
|
5
|
-
|
|
6
|
-
export interface TabsInterface {
|
|
7
|
-
type: 'div';
|
|
8
|
-
props: {
|
|
9
|
-
variant?: TabsVariant;
|
|
10
|
-
onTabSelected?: (
|
|
11
|
-
args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
|
|
12
|
-
ref: RefObject<any>;
|
|
13
|
-
},
|
|
14
|
-
) => void;
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
selectedTab?: number | null;
|
|
17
|
-
setSelectedTab?: Dispatch<SetStateAction<number | null>>;
|
|
18
|
-
scrollable?: boolean;
|
|
19
|
-
};
|
|
20
|
-
states: object;
|
|
21
|
-
elements: ['tabs'];
|
|
22
|
-
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { IconButton } from '../components/IconButton';
|
|
3
|
-
import { Icon } from '../icon';
|
|
4
|
-
import { MenuItemInterface } from './menu-item.interface';
|
|
5
|
-
|
|
6
|
-
export type TextFieldVariant = 'filled' | 'outlined';
|
|
7
|
-
|
|
8
|
-
type Props = {
|
|
9
|
-
placeholder?: string;
|
|
10
|
-
name?: string;
|
|
11
|
-
label: string;
|
|
12
|
-
disabled?: boolean;
|
|
13
|
-
errorText?: string | null;
|
|
14
|
-
supportingText?: string;
|
|
15
|
-
trailingIcon?: React.ReactElement<typeof IconButton> | Icon;
|
|
16
|
-
leadingIcon?: React.ReactElement<typeof IconButton> | Icon;
|
|
17
|
-
onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
|
|
18
|
-
showSupportingText?: boolean;
|
|
19
|
-
suffix?: string;
|
|
20
|
-
|
|
21
|
-
value?: string;
|
|
22
|
-
defaultValue?: string;
|
|
23
|
-
id?: string;
|
|
24
|
-
style?: React.CSSProperties;
|
|
25
|
-
variant?: TextFieldVariant;
|
|
26
|
-
options?: Array<
|
|
27
|
-
{
|
|
28
|
-
value: string | number;
|
|
29
|
-
type?: 'divider' | 'headline';
|
|
30
|
-
} & MenuItemInterface['props']
|
|
31
|
-
>;
|
|
32
|
-
type?: 'text' | 'password' | 'number' | 'date' | 'select';
|
|
33
|
-
autoComplete?: 'on' | 'off' | string;
|
|
34
|
-
autoFocus?: boolean;
|
|
35
|
-
multiline?: boolean;
|
|
36
|
-
onFocus?: () => void;
|
|
37
|
-
onBlur?: () => void;
|
|
38
|
-
};
|
|
39
|
-
export type TextFieldStates = {
|
|
40
|
-
isFocused: boolean;
|
|
41
|
-
showErrorIcon: boolean;
|
|
42
|
-
showSupportingText: boolean;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export interface TextFieldInterface {
|
|
46
|
-
type: 'div';
|
|
47
|
-
props: Props;
|
|
48
|
-
states: TextFieldStates;
|
|
49
|
-
elements: [
|
|
50
|
-
'textField',
|
|
51
|
-
'content',
|
|
52
|
-
'label',
|
|
53
|
-
'input',
|
|
54
|
-
'activeIndicator',
|
|
55
|
-
'supportingText',
|
|
56
|
-
'leadingIcon',
|
|
57
|
-
'trailingIcon',
|
|
58
|
-
'suffix',
|
|
59
|
-
'stateLayer',
|
|
60
|
-
];
|
|
61
|
-
}
|