@szymonpiatek/designsystem 0.0.2 → 0.0.3
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 +4126 -36
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +296 -4
- package/dist/index.d.ts +296 -4
- package/dist/index.js +4107 -40
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/dist/index.d.cts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, MouseEventHandler } from 'react';
|
|
2
|
+
import { ReactNode, MouseEventHandler, AriaAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import { ThemeOptions, Theme } from '@mui/material/styles';
|
|
4
5
|
import * as _mui_material from '@mui/material';
|
|
5
6
|
|
|
6
7
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
7
8
|
|
|
9
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
10
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
8
11
|
interface ButtonProps {
|
|
9
|
-
variant?:
|
|
10
|
-
size?:
|
|
12
|
+
variant?: ButtonVariant;
|
|
13
|
+
size?: ButtonSize;
|
|
11
14
|
disabled?: boolean;
|
|
12
15
|
loading?: boolean;
|
|
13
16
|
fullWidth?: boolean;
|
|
@@ -16,8 +19,297 @@ interface ButtonProps {
|
|
|
16
19
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
17
20
|
type?: 'button' | 'submit' | 'reset';
|
|
18
21
|
children: ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
'aria-label'?: string;
|
|
24
|
+
'aria-current'?: AriaAttributes['aria-current'];
|
|
19
25
|
}
|
|
20
26
|
|
|
27
|
+
declare const BaseInput: react.ForwardRefExoticComponent<BaseInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
28
|
+
|
|
29
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
30
|
+
|
|
31
|
+
interface BaseInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
32
|
+
label?: string;
|
|
33
|
+
helperText?: string;
|
|
34
|
+
error?: boolean;
|
|
35
|
+
size?: InputSize;
|
|
36
|
+
fullWidth?: boolean;
|
|
37
|
+
startAdornment?: ReactNode;
|
|
38
|
+
endAdornment?: ReactNode;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
interface CheckboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
42
|
+
label?: string;
|
|
43
|
+
helperText?: string;
|
|
44
|
+
error?: boolean;
|
|
45
|
+
size?: InputSize;
|
|
46
|
+
indeterminate?: boolean;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
declare const CheckboxInput: react.ForwardRefExoticComponent<CheckboxInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
50
|
+
|
|
51
|
+
interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'placeholder'> {
|
|
52
|
+
label?: string;
|
|
53
|
+
helperText?: string;
|
|
54
|
+
error?: boolean;
|
|
55
|
+
size?: InputSize;
|
|
56
|
+
fullWidth?: boolean;
|
|
57
|
+
variant?: 'compact' | 'dropzone';
|
|
58
|
+
/** Label on the Browse button (compact). */
|
|
59
|
+
browseLabel?: string;
|
|
60
|
+
/** Text shown when no file is selected (compact). */
|
|
61
|
+
noFileLabel?: string;
|
|
62
|
+
/** Content shown in the dropzone center when empty. Replaces the default "Drop or browse" line. */
|
|
63
|
+
dropzoneLabel?: React.ReactNode;
|
|
64
|
+
/** Secondary hint text shown below the main dropzone label. */
|
|
65
|
+
dropzoneSublabel?: string;
|
|
66
|
+
/** Text shown while dragging over the dropzone. */
|
|
67
|
+
dropToUploadLabel?: string;
|
|
68
|
+
/** Label for the "N files selected" summary in the compact wrapper. */
|
|
69
|
+
filesSelectedLabel?: (count: number) => string;
|
|
70
|
+
/** Text on the Remove button (single file). */
|
|
71
|
+
removeLabel?: string;
|
|
72
|
+
/** Text on the Remove all button (multiple files). */
|
|
73
|
+
removeAllLabel?: string;
|
|
74
|
+
/** Text on the Change button. */
|
|
75
|
+
changeLabel?: string;
|
|
76
|
+
/** aria-label on the compact clear (×) button. */
|
|
77
|
+
clearAriaLabel?: string;
|
|
78
|
+
/** aria-label on the per-file remove button; receives the file name. */
|
|
79
|
+
removeFileAriaLabel?: (fileName: string) => string;
|
|
80
|
+
/** aria-label on the Remove all button. */
|
|
81
|
+
removeAllAriaLabel?: string;
|
|
82
|
+
/** aria-label on the Change button. */
|
|
83
|
+
changeAriaLabel?: string;
|
|
84
|
+
/** aria-label on the dropzone browse button when no label prop is provided. */
|
|
85
|
+
chooseFileAriaLabel?: string;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
89
|
+
|
|
90
|
+
type EmailInputProps = Omit<BaseInputProps, 'type'>;
|
|
91
|
+
|
|
92
|
+
declare const EmailInput: react.ForwardRefExoticComponent<EmailInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
93
|
+
|
|
94
|
+
declare const BaseSelectInput: {
|
|
95
|
+
({ options, value, placeholder, onSelect, renderTrigger, renderOption, isSelected, open: controlledOpen, onOpenChange, label, helperText, error, size, fullWidth, disabled, id, }: BaseSelectInputProps): react_jsx_runtime.JSX.Element;
|
|
96
|
+
displayName: string;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
interface SelectOption {
|
|
100
|
+
label: string;
|
|
101
|
+
value: string;
|
|
102
|
+
disabled?: boolean;
|
|
103
|
+
}
|
|
104
|
+
interface BaseSelectInputProps {
|
|
105
|
+
options: SelectOption[];
|
|
106
|
+
value?: string;
|
|
107
|
+
placeholder?: string;
|
|
108
|
+
onSelect?: (option: SelectOption, close: () => void) => void;
|
|
109
|
+
/** Overrides the trigger button content. By default, shows the selected option label or placeholder. */
|
|
110
|
+
renderTrigger?: () => ReactNode;
|
|
111
|
+
/** Overrides the visual content of each option row. BaseSelectInput still handles the click. */
|
|
112
|
+
renderOption?: (option: SelectOption) => ReactNode;
|
|
113
|
+
/** Determines aria-selected for each option. Defaults to value === option.value. */
|
|
114
|
+
isSelected?: (option: SelectOption) => boolean;
|
|
115
|
+
open?: boolean;
|
|
116
|
+
onOpenChange?: (open: boolean) => void;
|
|
117
|
+
label?: string;
|
|
118
|
+
helperText?: string;
|
|
119
|
+
error?: boolean;
|
|
120
|
+
size?: InputSize;
|
|
121
|
+
fullWidth?: boolean;
|
|
122
|
+
disabled?: boolean;
|
|
123
|
+
id?: string;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
127
|
+
|
|
128
|
+
interface NumberInputProps extends Omit<BaseInputProps, 'type'> {
|
|
129
|
+
min?: number;
|
|
130
|
+
max?: number;
|
|
131
|
+
step?: number;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
interface MultiSelectInputProps extends Omit<BaseSelectInputProps, 'onSelect' | 'renderTrigger' | 'renderOption' | 'value'> {
|
|
135
|
+
value?: string[];
|
|
136
|
+
onChange?: (value: string[]) => void;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
declare const MultiSelectInput: {
|
|
140
|
+
({ value, onChange, options, placeholder, ...rest }: MultiSelectInputProps): react_jsx_runtime.JSX.Element;
|
|
141
|
+
displayName: string;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
interface PasswordInputProps extends Omit<BaseInputProps, 'type' | 'endAdornment'> {
|
|
145
|
+
showPasswordLabel?: string;
|
|
146
|
+
hidePasswordLabel?: string;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
150
|
+
|
|
151
|
+
interface SearchInputProps extends Omit<BaseInputProps, 'type' | 'startAdornment' | 'endAdornment'> {
|
|
152
|
+
onClear?: () => void;
|
|
153
|
+
clearAriaLabel?: string;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
157
|
+
|
|
158
|
+
interface SelectInputProps extends Omit<BaseSelectInputProps, 'onSelect' | 'renderTrigger' | 'renderOption'> {
|
|
159
|
+
onChange?: (value: string) => void;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
declare const SelectInput: {
|
|
163
|
+
({ onChange, value, ...rest }: SelectInputProps): react_jsx_runtime.JSX.Element;
|
|
164
|
+
displayName: string;
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
declare const TextareaInput: react.ForwardRefExoticComponent<TextareaInputProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
168
|
+
|
|
169
|
+
interface TextareaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
|
|
170
|
+
label?: string;
|
|
171
|
+
helperText?: string;
|
|
172
|
+
error?: boolean;
|
|
173
|
+
size?: InputSize;
|
|
174
|
+
fullWidth?: boolean;
|
|
175
|
+
rows?: number;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
declare const PhoneInput: react.ForwardRefExoticComponent<PhoneInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
179
|
+
|
|
180
|
+
interface PhoneCountry {
|
|
181
|
+
flagCode: string;
|
|
182
|
+
country: string;
|
|
183
|
+
dialCode: string;
|
|
184
|
+
maxLength: number;
|
|
185
|
+
minLength: number;
|
|
186
|
+
}
|
|
187
|
+
interface PhoneInputMeta {
|
|
188
|
+
country: PhoneCountry;
|
|
189
|
+
dialCode: string;
|
|
190
|
+
fullNumber: string;
|
|
191
|
+
}
|
|
192
|
+
interface PhoneInputProps {
|
|
193
|
+
value?: string;
|
|
194
|
+
defaultValue?: string;
|
|
195
|
+
defaultCountry?: string;
|
|
196
|
+
onChange?: (value: string, meta: PhoneInputMeta) => void;
|
|
197
|
+
onCountryChange?: (country: PhoneCountry) => void;
|
|
198
|
+
label?: string;
|
|
199
|
+
helperText?: string;
|
|
200
|
+
error?: boolean;
|
|
201
|
+
size?: InputSize;
|
|
202
|
+
fullWidth?: boolean;
|
|
203
|
+
disabled?: boolean;
|
|
204
|
+
placeholder?: string;
|
|
205
|
+
id?: string;
|
|
206
|
+
/** aria-label on the country trigger button. Receives current country name and dial code. */
|
|
207
|
+
countrySelectAriaLabel?: (country: string, dialCode: string) => string;
|
|
208
|
+
/** aria-label on the phone number input when no label prop is provided. */
|
|
209
|
+
phoneAriaLabel?: string;
|
|
210
|
+
/** aria-label on the country listbox dropdown. */
|
|
211
|
+
countryListAriaLabel?: string;
|
|
212
|
+
/** Placeholder inside the country search box. */
|
|
213
|
+
countrySearchPlaceholder?: string;
|
|
214
|
+
/** aria-label on the country search input. */
|
|
215
|
+
countrySearchAriaLabel?: string;
|
|
216
|
+
/** Suffix used in the auto-generated digit-count placeholder (e.g. 'cyfr'). */
|
|
217
|
+
digitsLabel?: string;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
221
|
+
|
|
222
|
+
interface TextInputProps extends Omit<BaseInputProps, 'type'> {
|
|
223
|
+
type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
interface CountryFlagProps extends HTMLAttributes<HTMLSpanElement> {
|
|
227
|
+
countryCode: string;
|
|
228
|
+
size?: InputSize;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
declare const CountryFlag: {
|
|
232
|
+
({ countryCode, size, style, ...rest }: CountryFlagProps): react_jsx_runtime.JSX.Element;
|
|
233
|
+
displayName: string;
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
237
|
+
type GapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
|
|
238
|
+
type GridValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
239
|
+
type ResponsiveValue<T> = T | {
|
|
240
|
+
[K in Breakpoint]?: T;
|
|
241
|
+
};
|
|
242
|
+
interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
243
|
+
direction?: ResponsiveValue<'row' | 'col'>;
|
|
244
|
+
wrap?: ResponsiveValue<'wrap' | 'nowrap'>;
|
|
245
|
+
gap?: ResponsiveValue<GapValue>;
|
|
246
|
+
cols?: ResponsiveValue<GridValue>;
|
|
247
|
+
rows?: ResponsiveValue<GridValue>;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
|
|
251
|
+
|
|
252
|
+
type ContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
253
|
+
interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
254
|
+
maxWidth?: ContainerMaxWidth;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
|
|
258
|
+
|
|
259
|
+
type SectionProps = HTMLAttributes<HTMLElement>;
|
|
260
|
+
|
|
261
|
+
declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
|
|
262
|
+
|
|
263
|
+
type MainProps = HTMLAttributes<HTMLElement>;
|
|
264
|
+
|
|
265
|
+
declare const Main: react.ForwardRefExoticComponent<MainProps & react.RefAttributes<HTMLElement>>;
|
|
266
|
+
|
|
267
|
+
type ProseProps = HTMLAttributes<HTMLDivElement>;
|
|
268
|
+
|
|
269
|
+
declare const Prose: react.ForwardRefExoticComponent<ProseProps & react.RefAttributes<HTMLDivElement>>;
|
|
270
|
+
|
|
271
|
+
type ArticleProps = HTMLAttributes<HTMLElement>;
|
|
272
|
+
|
|
273
|
+
declare const Article: react.ForwardRefExoticComponent<ArticleProps & react.RefAttributes<HTMLElement>>;
|
|
274
|
+
|
|
275
|
+
type PaginationBarSize = 'sm' | 'md' | 'lg';
|
|
276
|
+
interface PaginationBarProps {
|
|
277
|
+
currentPage: number;
|
|
278
|
+
totalPages: number;
|
|
279
|
+
onPageChange: (page: number) => void;
|
|
280
|
+
siblingCount?: number;
|
|
281
|
+
showFirstLast?: boolean;
|
|
282
|
+
size?: PaginationBarSize;
|
|
283
|
+
disabled?: boolean;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
declare const PaginationBar: {
|
|
287
|
+
({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, size, disabled, }: PaginationBarProps): react_jsx_runtime.JSX.Element;
|
|
288
|
+
displayName: string;
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
type PaginationButtonSize = 'sm' | 'md' | 'lg';
|
|
292
|
+
type PaginationButtonVariant = 'page' | 'nav';
|
|
293
|
+
interface PaginationButtonProps {
|
|
294
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
295
|
+
isActive?: boolean;
|
|
296
|
+
disabled?: boolean;
|
|
297
|
+
size?: PaginationButtonSize;
|
|
298
|
+
variant?: PaginationButtonVariant;
|
|
299
|
+
'aria-label': string;
|
|
300
|
+
children: React.ReactNode;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
declare const PaginationButton: react.ForwardRefExoticComponent<PaginationButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
304
|
+
|
|
305
|
+
interface Props {
|
|
306
|
+
size?: PaginationButtonSize;
|
|
307
|
+
}
|
|
308
|
+
declare const PaginationEllipsis: {
|
|
309
|
+
({ size }: Props): react_jsx_runtime.JSX.Element;
|
|
310
|
+
displayName: string;
|
|
311
|
+
};
|
|
312
|
+
|
|
21
313
|
interface CreateMyThemeOptions {
|
|
22
314
|
mode?: 'light' | 'dark' | 'highContrast';
|
|
23
315
|
overrides?: ThemeOptions;
|
|
@@ -66,4 +358,4 @@ declare const themeLight: _mui_material.Theme;
|
|
|
66
358
|
declare const themeDark: _mui_material.Theme;
|
|
67
359
|
declare const themeHighContrast: _mui_material.Theme;
|
|
68
360
|
|
|
69
|
-
export { Button, type ButtonProps, type CreateMyThemeOptions, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
|
|
361
|
+
export { Article, type ArticleProps, BaseInput, type BaseInputProps, BaseSelectInput, type BaseSelectInputProps, Box, type BoxProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Container, type ContainerMaxWidth, type ContainerProps, CountryFlag, type CountryFlagProps, type CreateMyThemeOptions, EmailInput, type EmailInputProps, FileInput, type FileInputProps, type GapValue, type GridValue, Main, type MainProps, MultiSelectInput, type MultiSelectInputProps, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, NumberInput, type NumberInputProps, PaginationBar, type PaginationBarProps, type PaginationBarSize, PaginationButton, type PaginationButtonProps, type PaginationButtonSize, PaginationEllipsis, PasswordInput, type PasswordInputProps, type PhoneCountry, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Prose, type ProseProps, type ResponsiveValue, SearchInput, type SearchInputProps, Section, type SectionProps, SelectInput, type SelectInputProps, type SelectOption, TextInput, type TextInputProps, TextareaInput, type TextareaInputProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { ReactNode, MouseEventHandler } from 'react';
|
|
2
|
+
import { ReactNode, MouseEventHandler, AriaAttributes, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes } from 'react';
|
|
3
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
4
|
import { ThemeOptions, Theme } from '@mui/material/styles';
|
|
4
5
|
import * as _mui_material from '@mui/material';
|
|
5
6
|
|
|
6
7
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
7
8
|
|
|
9
|
+
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
10
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
8
11
|
interface ButtonProps {
|
|
9
|
-
variant?:
|
|
10
|
-
size?:
|
|
12
|
+
variant?: ButtonVariant;
|
|
13
|
+
size?: ButtonSize;
|
|
11
14
|
disabled?: boolean;
|
|
12
15
|
loading?: boolean;
|
|
13
16
|
fullWidth?: boolean;
|
|
@@ -16,8 +19,297 @@ interface ButtonProps {
|
|
|
16
19
|
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
17
20
|
type?: 'button' | 'submit' | 'reset';
|
|
18
21
|
children: ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
'aria-label'?: string;
|
|
24
|
+
'aria-current'?: AriaAttributes['aria-current'];
|
|
19
25
|
}
|
|
20
26
|
|
|
27
|
+
declare const BaseInput: react.ForwardRefExoticComponent<BaseInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
28
|
+
|
|
29
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
30
|
+
|
|
31
|
+
interface BaseInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
32
|
+
label?: string;
|
|
33
|
+
helperText?: string;
|
|
34
|
+
error?: boolean;
|
|
35
|
+
size?: InputSize;
|
|
36
|
+
fullWidth?: boolean;
|
|
37
|
+
startAdornment?: ReactNode;
|
|
38
|
+
endAdornment?: ReactNode;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
interface CheckboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
42
|
+
label?: string;
|
|
43
|
+
helperText?: string;
|
|
44
|
+
error?: boolean;
|
|
45
|
+
size?: InputSize;
|
|
46
|
+
indeterminate?: boolean;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
declare const CheckboxInput: react.ForwardRefExoticComponent<CheckboxInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
50
|
+
|
|
51
|
+
interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'placeholder'> {
|
|
52
|
+
label?: string;
|
|
53
|
+
helperText?: string;
|
|
54
|
+
error?: boolean;
|
|
55
|
+
size?: InputSize;
|
|
56
|
+
fullWidth?: boolean;
|
|
57
|
+
variant?: 'compact' | 'dropzone';
|
|
58
|
+
/** Label on the Browse button (compact). */
|
|
59
|
+
browseLabel?: string;
|
|
60
|
+
/** Text shown when no file is selected (compact). */
|
|
61
|
+
noFileLabel?: string;
|
|
62
|
+
/** Content shown in the dropzone center when empty. Replaces the default "Drop or browse" line. */
|
|
63
|
+
dropzoneLabel?: React.ReactNode;
|
|
64
|
+
/** Secondary hint text shown below the main dropzone label. */
|
|
65
|
+
dropzoneSublabel?: string;
|
|
66
|
+
/** Text shown while dragging over the dropzone. */
|
|
67
|
+
dropToUploadLabel?: string;
|
|
68
|
+
/** Label for the "N files selected" summary in the compact wrapper. */
|
|
69
|
+
filesSelectedLabel?: (count: number) => string;
|
|
70
|
+
/** Text on the Remove button (single file). */
|
|
71
|
+
removeLabel?: string;
|
|
72
|
+
/** Text on the Remove all button (multiple files). */
|
|
73
|
+
removeAllLabel?: string;
|
|
74
|
+
/** Text on the Change button. */
|
|
75
|
+
changeLabel?: string;
|
|
76
|
+
/** aria-label on the compact clear (×) button. */
|
|
77
|
+
clearAriaLabel?: string;
|
|
78
|
+
/** aria-label on the per-file remove button; receives the file name. */
|
|
79
|
+
removeFileAriaLabel?: (fileName: string) => string;
|
|
80
|
+
/** aria-label on the Remove all button. */
|
|
81
|
+
removeAllAriaLabel?: string;
|
|
82
|
+
/** aria-label on the Change button. */
|
|
83
|
+
changeAriaLabel?: string;
|
|
84
|
+
/** aria-label on the dropzone browse button when no label prop is provided. */
|
|
85
|
+
chooseFileAriaLabel?: string;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
declare const FileInput: react.ForwardRefExoticComponent<FileInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
89
|
+
|
|
90
|
+
type EmailInputProps = Omit<BaseInputProps, 'type'>;
|
|
91
|
+
|
|
92
|
+
declare const EmailInput: react.ForwardRefExoticComponent<EmailInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
93
|
+
|
|
94
|
+
declare const BaseSelectInput: {
|
|
95
|
+
({ options, value, placeholder, onSelect, renderTrigger, renderOption, isSelected, open: controlledOpen, onOpenChange, label, helperText, error, size, fullWidth, disabled, id, }: BaseSelectInputProps): react_jsx_runtime.JSX.Element;
|
|
96
|
+
displayName: string;
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
interface SelectOption {
|
|
100
|
+
label: string;
|
|
101
|
+
value: string;
|
|
102
|
+
disabled?: boolean;
|
|
103
|
+
}
|
|
104
|
+
interface BaseSelectInputProps {
|
|
105
|
+
options: SelectOption[];
|
|
106
|
+
value?: string;
|
|
107
|
+
placeholder?: string;
|
|
108
|
+
onSelect?: (option: SelectOption, close: () => void) => void;
|
|
109
|
+
/** Overrides the trigger button content. By default, shows the selected option label or placeholder. */
|
|
110
|
+
renderTrigger?: () => ReactNode;
|
|
111
|
+
/** Overrides the visual content of each option row. BaseSelectInput still handles the click. */
|
|
112
|
+
renderOption?: (option: SelectOption) => ReactNode;
|
|
113
|
+
/** Determines aria-selected for each option. Defaults to value === option.value. */
|
|
114
|
+
isSelected?: (option: SelectOption) => boolean;
|
|
115
|
+
open?: boolean;
|
|
116
|
+
onOpenChange?: (open: boolean) => void;
|
|
117
|
+
label?: string;
|
|
118
|
+
helperText?: string;
|
|
119
|
+
error?: boolean;
|
|
120
|
+
size?: InputSize;
|
|
121
|
+
fullWidth?: boolean;
|
|
122
|
+
disabled?: boolean;
|
|
123
|
+
id?: string;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
declare const NumberInput: react.ForwardRefExoticComponent<NumberInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
127
|
+
|
|
128
|
+
interface NumberInputProps extends Omit<BaseInputProps, 'type'> {
|
|
129
|
+
min?: number;
|
|
130
|
+
max?: number;
|
|
131
|
+
step?: number;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
interface MultiSelectInputProps extends Omit<BaseSelectInputProps, 'onSelect' | 'renderTrigger' | 'renderOption' | 'value'> {
|
|
135
|
+
value?: string[];
|
|
136
|
+
onChange?: (value: string[]) => void;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
declare const MultiSelectInput: {
|
|
140
|
+
({ value, onChange, options, placeholder, ...rest }: MultiSelectInputProps): react_jsx_runtime.JSX.Element;
|
|
141
|
+
displayName: string;
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
interface PasswordInputProps extends Omit<BaseInputProps, 'type' | 'endAdornment'> {
|
|
145
|
+
showPasswordLabel?: string;
|
|
146
|
+
hidePasswordLabel?: string;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
150
|
+
|
|
151
|
+
interface SearchInputProps extends Omit<BaseInputProps, 'type' | 'startAdornment' | 'endAdornment'> {
|
|
152
|
+
onClear?: () => void;
|
|
153
|
+
clearAriaLabel?: string;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
157
|
+
|
|
158
|
+
interface SelectInputProps extends Omit<BaseSelectInputProps, 'onSelect' | 'renderTrigger' | 'renderOption'> {
|
|
159
|
+
onChange?: (value: string) => void;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
declare const SelectInput: {
|
|
163
|
+
({ onChange, value, ...rest }: SelectInputProps): react_jsx_runtime.JSX.Element;
|
|
164
|
+
displayName: string;
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
declare const TextareaInput: react.ForwardRefExoticComponent<TextareaInputProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
168
|
+
|
|
169
|
+
interface TextareaInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
|
|
170
|
+
label?: string;
|
|
171
|
+
helperText?: string;
|
|
172
|
+
error?: boolean;
|
|
173
|
+
size?: InputSize;
|
|
174
|
+
fullWidth?: boolean;
|
|
175
|
+
rows?: number;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
declare const PhoneInput: react.ForwardRefExoticComponent<PhoneInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
179
|
+
|
|
180
|
+
interface PhoneCountry {
|
|
181
|
+
flagCode: string;
|
|
182
|
+
country: string;
|
|
183
|
+
dialCode: string;
|
|
184
|
+
maxLength: number;
|
|
185
|
+
minLength: number;
|
|
186
|
+
}
|
|
187
|
+
interface PhoneInputMeta {
|
|
188
|
+
country: PhoneCountry;
|
|
189
|
+
dialCode: string;
|
|
190
|
+
fullNumber: string;
|
|
191
|
+
}
|
|
192
|
+
interface PhoneInputProps {
|
|
193
|
+
value?: string;
|
|
194
|
+
defaultValue?: string;
|
|
195
|
+
defaultCountry?: string;
|
|
196
|
+
onChange?: (value: string, meta: PhoneInputMeta) => void;
|
|
197
|
+
onCountryChange?: (country: PhoneCountry) => void;
|
|
198
|
+
label?: string;
|
|
199
|
+
helperText?: string;
|
|
200
|
+
error?: boolean;
|
|
201
|
+
size?: InputSize;
|
|
202
|
+
fullWidth?: boolean;
|
|
203
|
+
disabled?: boolean;
|
|
204
|
+
placeholder?: string;
|
|
205
|
+
id?: string;
|
|
206
|
+
/** aria-label on the country trigger button. Receives current country name and dial code. */
|
|
207
|
+
countrySelectAriaLabel?: (country: string, dialCode: string) => string;
|
|
208
|
+
/** aria-label on the phone number input when no label prop is provided. */
|
|
209
|
+
phoneAriaLabel?: string;
|
|
210
|
+
/** aria-label on the country listbox dropdown. */
|
|
211
|
+
countryListAriaLabel?: string;
|
|
212
|
+
/** Placeholder inside the country search box. */
|
|
213
|
+
countrySearchPlaceholder?: string;
|
|
214
|
+
/** aria-label on the country search input. */
|
|
215
|
+
countrySearchAriaLabel?: string;
|
|
216
|
+
/** Suffix used in the auto-generated digit-count placeholder (e.g. 'cyfr'). */
|
|
217
|
+
digitsLabel?: string;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
declare const TextInput: react.ForwardRefExoticComponent<TextInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
221
|
+
|
|
222
|
+
interface TextInputProps extends Omit<BaseInputProps, 'type'> {
|
|
223
|
+
type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
interface CountryFlagProps extends HTMLAttributes<HTMLSpanElement> {
|
|
227
|
+
countryCode: string;
|
|
228
|
+
size?: InputSize;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
declare const CountryFlag: {
|
|
232
|
+
({ countryCode, size, style, ...rest }: CountryFlagProps): react_jsx_runtime.JSX.Element;
|
|
233
|
+
displayName: string;
|
|
234
|
+
};
|
|
235
|
+
|
|
236
|
+
type Breakpoint = 'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
237
|
+
type GapValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
|
|
238
|
+
type GridValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
239
|
+
type ResponsiveValue<T> = T | {
|
|
240
|
+
[K in Breakpoint]?: T;
|
|
241
|
+
};
|
|
242
|
+
interface BoxProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
243
|
+
direction?: ResponsiveValue<'row' | 'col'>;
|
|
244
|
+
wrap?: ResponsiveValue<'wrap' | 'nowrap'>;
|
|
245
|
+
gap?: ResponsiveValue<GapValue>;
|
|
246
|
+
cols?: ResponsiveValue<GridValue>;
|
|
247
|
+
rows?: ResponsiveValue<GridValue>;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLDivElement>>;
|
|
251
|
+
|
|
252
|
+
type ContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
253
|
+
interface ContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
254
|
+
maxWidth?: ContainerMaxWidth;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
|
|
258
|
+
|
|
259
|
+
type SectionProps = HTMLAttributes<HTMLElement>;
|
|
260
|
+
|
|
261
|
+
declare const Section: react.ForwardRefExoticComponent<SectionProps & react.RefAttributes<HTMLElement>>;
|
|
262
|
+
|
|
263
|
+
type MainProps = HTMLAttributes<HTMLElement>;
|
|
264
|
+
|
|
265
|
+
declare const Main: react.ForwardRefExoticComponent<MainProps & react.RefAttributes<HTMLElement>>;
|
|
266
|
+
|
|
267
|
+
type ProseProps = HTMLAttributes<HTMLDivElement>;
|
|
268
|
+
|
|
269
|
+
declare const Prose: react.ForwardRefExoticComponent<ProseProps & react.RefAttributes<HTMLDivElement>>;
|
|
270
|
+
|
|
271
|
+
type ArticleProps = HTMLAttributes<HTMLElement>;
|
|
272
|
+
|
|
273
|
+
declare const Article: react.ForwardRefExoticComponent<ArticleProps & react.RefAttributes<HTMLElement>>;
|
|
274
|
+
|
|
275
|
+
type PaginationBarSize = 'sm' | 'md' | 'lg';
|
|
276
|
+
interface PaginationBarProps {
|
|
277
|
+
currentPage: number;
|
|
278
|
+
totalPages: number;
|
|
279
|
+
onPageChange: (page: number) => void;
|
|
280
|
+
siblingCount?: number;
|
|
281
|
+
showFirstLast?: boolean;
|
|
282
|
+
size?: PaginationBarSize;
|
|
283
|
+
disabled?: boolean;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
declare const PaginationBar: {
|
|
287
|
+
({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, size, disabled, }: PaginationBarProps): react_jsx_runtime.JSX.Element;
|
|
288
|
+
displayName: string;
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
type PaginationButtonSize = 'sm' | 'md' | 'lg';
|
|
292
|
+
type PaginationButtonVariant = 'page' | 'nav';
|
|
293
|
+
interface PaginationButtonProps {
|
|
294
|
+
onClick?: MouseEventHandler<HTMLButtonElement>;
|
|
295
|
+
isActive?: boolean;
|
|
296
|
+
disabled?: boolean;
|
|
297
|
+
size?: PaginationButtonSize;
|
|
298
|
+
variant?: PaginationButtonVariant;
|
|
299
|
+
'aria-label': string;
|
|
300
|
+
children: React.ReactNode;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
declare const PaginationButton: react.ForwardRefExoticComponent<PaginationButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
304
|
+
|
|
305
|
+
interface Props {
|
|
306
|
+
size?: PaginationButtonSize;
|
|
307
|
+
}
|
|
308
|
+
declare const PaginationEllipsis: {
|
|
309
|
+
({ size }: Props): react_jsx_runtime.JSX.Element;
|
|
310
|
+
displayName: string;
|
|
311
|
+
};
|
|
312
|
+
|
|
21
313
|
interface CreateMyThemeOptions {
|
|
22
314
|
mode?: 'light' | 'dark' | 'highContrast';
|
|
23
315
|
overrides?: ThemeOptions;
|
|
@@ -66,4 +358,4 @@ declare const themeLight: _mui_material.Theme;
|
|
|
66
358
|
declare const themeDark: _mui_material.Theme;
|
|
67
359
|
declare const themeHighContrast: _mui_material.Theme;
|
|
68
360
|
|
|
69
|
-
export { Button, type ButtonProps, type CreateMyThemeOptions, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
|
|
361
|
+
export { Article, type ArticleProps, BaseInput, type BaseInputProps, BaseSelectInput, type BaseSelectInputProps, Box, type BoxProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, Container, type ContainerMaxWidth, type ContainerProps, CountryFlag, type CountryFlagProps, type CreateMyThemeOptions, EmailInput, type EmailInputProps, FileInput, type FileInputProps, type GapValue, type GridValue, Main, type MainProps, MultiSelectInput, type MultiSelectInputProps, type MyThemeMode, MyThemeProvider, type MyThemeProviderProps, NumberInput, type NumberInputProps, PaginationBar, type PaginationBarProps, type PaginationBarSize, PaginationButton, type PaginationButtonProps, type PaginationButtonSize, PaginationEllipsis, PasswordInput, type PasswordInputProps, type PhoneCountry, PhoneInput, type PhoneInputMeta, type PhoneInputProps, Prose, type ProseProps, type ResponsiveValue, SearchInput, type SearchInputProps, Section, type SectionProps, SelectInput, type SelectInputProps, type SelectOption, TextInput, type TextInputProps, TextareaInput, type TextareaInputProps, createMyTheme, myTheme, themeDark, themeHighContrast, themeLight };
|