@ecohouse/ui 0.1.2 → 0.1.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 +1266 -109
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +188 -12
- package/dist/index.d.ts +188 -12
- package/dist/index.js +1260 -112
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button/Button.tsx +106 -88
- package/src/components/Checkbox/Checkbox.stories.tsx +112 -0
- package/src/components/Checkbox/Checkbox.tsx +150 -0
- package/src/components/Checkbox/index.ts +2 -0
- package/src/components/Input/Input.stories.tsx +11 -40
- package/src/components/Input/Input.tsx +58 -54
- package/src/components/Input/index.ts +1 -1
- package/src/components/Select/Select.stories.tsx +196 -0
- package/src/components/Select/Select.tsx +851 -0
- package/src/components/Select/index.ts +2 -0
- package/src/components/Textarea/Textarea.stories.tsx +71 -0
- package/src/components/Textarea/Textarea.tsx +241 -0
- package/src/components/Textarea/index.ts +2 -0
- package/src/components/Toggle/Toggle.stories.tsx +100 -0
- package/src/components/Toggle/Toggle.tsx +176 -0
- package/src/components/Toggle/index.ts +2 -0
- package/src/components/index.ts +13 -1
- package/src/icons/Check/CheckIcon.tsx +26 -0
- package/src/icons/Check/CheckIcon.web.tsx +32 -0
- package/src/icons/Check/checkPath.ts +2 -0
- package/src/icons/Check/index.ts +1 -0
- package/src/icons/ChevronDown/ChevronDownIcon.tsx +30 -0
- package/src/icons/ChevronDown/ChevronDownIcon.web.tsx +36 -0
- package/src/icons/ChevronDown/chevronDownPath.ts +2 -0
- package/src/icons/ChevronDown/index.ts +1 -0
- package/src/icons/Search/SearchIcon.tsx +37 -0
- package/src/icons/Search/SearchIcon.web.tsx +43 -0
- package/src/icons/Search/index.ts +1 -0
- package/src/icons/Search/searchPath.ts +5 -0
- package/src/icons/index.ts +3 -0
- package/src/icons/registry.ts +8 -2
- package/src/index.ts +21 -3
- package/src/theme/index.ts +7 -1
- package/src/theme/typography.ts +52 -2
- package/src/utils/mergeRefs.ts +20 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, ComponentType } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { TouchableOpacityProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, PressableProps, TextInputProps, TextInput, ViewProps } from 'react-native';
|
|
4
5
|
|
|
5
6
|
type ButtonVariant = "primary" | "secondary";
|
|
6
7
|
type ButtonSize = "lg" | "sm";
|
|
7
|
-
interface ButtonProps {
|
|
8
|
+
interface ButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled" | "style" | "children"> {
|
|
8
9
|
title?: string;
|
|
9
10
|
children?: ReactNode;
|
|
10
11
|
onPress: (event: GestureResponderEvent) => void;
|
|
@@ -18,31 +19,131 @@ interface ButtonProps {
|
|
|
18
19
|
className?: string;
|
|
19
20
|
textClassName?: string;
|
|
20
21
|
}
|
|
21
|
-
declare
|
|
22
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
|
|
23
|
+
|
|
24
|
+
type CheckboxVariant = "default" | "light";
|
|
25
|
+
interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
26
|
+
value?: boolean;
|
|
27
|
+
defaultValue?: boolean;
|
|
28
|
+
onValueChange?: (value: boolean) => void;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
variant?: CheckboxVariant;
|
|
31
|
+
label?: string;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
style?: StyleProp<ViewStyle>;
|
|
34
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
35
|
+
className?: string;
|
|
36
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
37
|
+
}
|
|
38
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
|
|
22
39
|
|
|
23
|
-
type InputState = "default" | "filled" | "active" | "error" | "disabled";
|
|
24
40
|
type InputSize = "lg" | "sm";
|
|
25
41
|
interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
26
42
|
label?: string;
|
|
27
43
|
showLabel?: boolean;
|
|
28
44
|
hint?: string;
|
|
29
45
|
showHint?: boolean;
|
|
30
|
-
state?: InputState;
|
|
31
46
|
size?: InputSize;
|
|
32
|
-
|
|
47
|
+
/** External — validation / form error. */
|
|
33
48
|
error?: boolean;
|
|
49
|
+
/** External — non-interactive. */
|
|
50
|
+
disabled?: boolean;
|
|
34
51
|
leftIcon?: ReactNode;
|
|
35
52
|
showLeftIcon?: boolean;
|
|
36
53
|
rightIcon?: ReactNode;
|
|
37
54
|
showRightIcon?: boolean;
|
|
38
55
|
onRightIconPress?: () => void;
|
|
56
|
+
/** Accessible name for the right icon button, when `onRightIconPress` is set. */
|
|
57
|
+
rightIconAccessibilityLabel?: string;
|
|
58
|
+
style?: StyleProp<ViewStyle>;
|
|
59
|
+
fieldStyle?: StyleProp<ViewStyle>;
|
|
60
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
61
|
+
className?: string;
|
|
62
|
+
inputClassName?: string;
|
|
63
|
+
}
|
|
64
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
65
|
+
|
|
66
|
+
type SelectOption = {
|
|
67
|
+
label: string;
|
|
68
|
+
value: string;
|
|
69
|
+
};
|
|
70
|
+
type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
71
|
+
label?: string;
|
|
72
|
+
showLabel?: boolean;
|
|
73
|
+
hint?: string;
|
|
74
|
+
showHint?: boolean;
|
|
75
|
+
placeholder?: string;
|
|
76
|
+
options: SelectOption[];
|
|
77
|
+
open?: boolean;
|
|
78
|
+
defaultOpen?: boolean;
|
|
79
|
+
onOpenChange?: (open: boolean) => void;
|
|
80
|
+
disabled?: boolean;
|
|
81
|
+
error?: boolean;
|
|
82
|
+
leftIcon?: ReactNode;
|
|
83
|
+
showLeftIcon?: boolean;
|
|
84
|
+
showSearch?: boolean;
|
|
85
|
+
searchPlaceholder?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Called with the raw query on every keystroke. When provided, the parent owns
|
|
88
|
+
* filtering (e.g. server search) and the options prop is rendered as-is;
|
|
89
|
+
* when omitted, options are filtered locally by label.
|
|
90
|
+
*/
|
|
91
|
+
onSearchChange?: (query: string) => void;
|
|
92
|
+
/** Shows a loading row in the menu while the parent fetches options. */
|
|
93
|
+
loading?: boolean;
|
|
94
|
+
/** Text shown when no options match. */
|
|
95
|
+
emptyText?: string;
|
|
96
|
+
style?: StyleProp<ViewStyle>;
|
|
97
|
+
className?: string;
|
|
98
|
+
};
|
|
99
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
100
|
+
multiple?: false;
|
|
101
|
+
value?: string;
|
|
102
|
+
defaultValue?: string;
|
|
103
|
+
onValueChange?: (value: string) => void;
|
|
104
|
+
};
|
|
105
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
106
|
+
multiple: true;
|
|
107
|
+
value?: string[];
|
|
108
|
+
defaultValue?: string[];
|
|
109
|
+
onValueChange?: (value: string[]) => void;
|
|
110
|
+
};
|
|
111
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
112
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<View>>;
|
|
113
|
+
|
|
114
|
+
interface TextareaProps extends Omit<TextInputProps, "style" | "editable" | "multiline"> {
|
|
115
|
+
label?: string;
|
|
116
|
+
showLabel?: boolean;
|
|
117
|
+
hint?: string;
|
|
118
|
+
showHint?: boolean;
|
|
119
|
+
/** External — validation / form error. */
|
|
120
|
+
error?: boolean;
|
|
121
|
+
/** External — non-interactive. */
|
|
122
|
+
disabled?: boolean;
|
|
39
123
|
style?: StyleProp<ViewStyle>;
|
|
40
124
|
fieldStyle?: StyleProp<ViewStyle>;
|
|
41
125
|
inputStyle?: StyleProp<TextStyle>;
|
|
42
126
|
className?: string;
|
|
43
127
|
inputClassName?: string;
|
|
44
128
|
}
|
|
45
|
-
declare
|
|
129
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
|
|
130
|
+
|
|
131
|
+
interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
132
|
+
value?: boolean;
|
|
133
|
+
defaultValue?: boolean;
|
|
134
|
+
onValueChange?: (value: boolean) => void;
|
|
135
|
+
disabled?: boolean;
|
|
136
|
+
/** Visible label rendered next to the track. */
|
|
137
|
+
label?: string;
|
|
138
|
+
children?: ReactNode;
|
|
139
|
+
/** Accessible name for screen readers; falls back to `label`/`children` when omitted. */
|
|
140
|
+
accessibilityLabel?: string;
|
|
141
|
+
style?: StyleProp<ViewStyle>;
|
|
142
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
143
|
+
className?: string;
|
|
144
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
145
|
+
}
|
|
146
|
+
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
|
|
46
147
|
|
|
47
148
|
interface IconProps {
|
|
48
149
|
size?: number;
|
|
@@ -67,8 +168,24 @@ declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
67
168
|
|
|
68
169
|
declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
69
170
|
|
|
171
|
+
interface CheckIconProps {
|
|
172
|
+
size?: number;
|
|
173
|
+
color?: string;
|
|
174
|
+
strokeWidth?: number;
|
|
175
|
+
}
|
|
176
|
+
/** Native — react-native-svg (peer dependency). */
|
|
177
|
+
declare function CheckIcon({ size, color, strokeWidth }: CheckIconProps): react.JSX.Element;
|
|
178
|
+
|
|
70
179
|
declare function CheckBadgeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
71
180
|
|
|
181
|
+
interface ChevronDownIconProps {
|
|
182
|
+
size?: number;
|
|
183
|
+
color?: string;
|
|
184
|
+
strokeWidth?: number;
|
|
185
|
+
}
|
|
186
|
+
/** Native — react-native-svg (peer dependency). */
|
|
187
|
+
declare function ChevronDownIcon({ size, color, strokeWidth, }: ChevronDownIconProps): react.JSX.Element;
|
|
188
|
+
|
|
72
189
|
declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
73
190
|
|
|
74
191
|
declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
@@ -87,6 +204,14 @@ declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
87
204
|
|
|
88
205
|
declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
89
206
|
|
|
207
|
+
interface SearchIconProps {
|
|
208
|
+
size?: number;
|
|
209
|
+
color?: string;
|
|
210
|
+
strokeWidth?: number;
|
|
211
|
+
}
|
|
212
|
+
/** Native — react-native-svg (peer dependency). */
|
|
213
|
+
declare function SearchIcon({ size, color, strokeWidth, }: SearchIconProps): react.JSX.Element;
|
|
214
|
+
|
|
90
215
|
interface ShowIconProps {
|
|
91
216
|
size?: number;
|
|
92
217
|
color?: string;
|
|
@@ -109,7 +234,9 @@ declare const icons: {
|
|
|
109
234
|
readonly bell: typeof BellIcon;
|
|
110
235
|
readonly building: typeof BuildingIcon;
|
|
111
236
|
readonly camera: typeof CameraIcon;
|
|
237
|
+
readonly check: typeof CheckIcon;
|
|
112
238
|
readonly checkBadge: typeof CheckBadgeIcon;
|
|
239
|
+
readonly chevronDown: typeof ChevronDownIcon;
|
|
113
240
|
readonly clock: typeof ClockIcon;
|
|
114
241
|
readonly facebook: typeof FacebookIcon;
|
|
115
242
|
readonly home: typeof HomeIcon;
|
|
@@ -119,14 +246,15 @@ declare const icons: {
|
|
|
119
246
|
readonly mail: typeof MailIcon;
|
|
120
247
|
readonly navigate: typeof NavigateIcon;
|
|
121
248
|
readonly phone: typeof PhoneIcon;
|
|
249
|
+
readonly search: typeof SearchIcon;
|
|
122
250
|
readonly show: typeof ShowIcon;
|
|
123
251
|
readonly user: typeof UserIcon;
|
|
124
252
|
};
|
|
125
253
|
type IconName = keyof typeof icons;
|
|
126
254
|
declare const iconNames: IconName[];
|
|
127
255
|
declare const iconGroups: {
|
|
128
|
-
readonly navigation: readonly ["arrowRight", "home", "navigate"];
|
|
129
|
-
readonly actions: readonly ["show", "bell", "camera", "key", "checkBadge"];
|
|
256
|
+
readonly navigation: readonly ["arrowRight", "chevronDown", "home", "navigate"];
|
|
257
|
+
readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search"];
|
|
130
258
|
readonly objects: readonly ["bag", "building", "clock", "user"];
|
|
131
259
|
readonly communication: readonly ["mail", "phone"];
|
|
132
260
|
readonly social: readonly ["facebook", "instagram", "linkedin"];
|
|
@@ -210,9 +338,33 @@ declare const inputTypography: {
|
|
|
210
338
|
readonly fontFamily: "Noto Sans Armenian";
|
|
211
339
|
readonly fontSize: 12;
|
|
212
340
|
readonly fontWeight: "500";
|
|
213
|
-
readonly lineHeight:
|
|
341
|
+
readonly lineHeight: 12;
|
|
342
|
+
readonly letterSpacing: 0.36;
|
|
343
|
+
};
|
|
344
|
+
readonly field: {
|
|
345
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
346
|
+
readonly fontSize: 14;
|
|
347
|
+
readonly fontWeight: "400";
|
|
348
|
+
readonly lineHeight: 19;
|
|
214
349
|
readonly letterSpacing: 0;
|
|
215
350
|
};
|
|
351
|
+
readonly hint: {
|
|
352
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
353
|
+
readonly fontSize: 12;
|
|
354
|
+
readonly fontWeight: "400";
|
|
355
|
+
readonly lineHeight: 12;
|
|
356
|
+
readonly letterSpacing: 0.36;
|
|
357
|
+
};
|
|
358
|
+
};
|
|
359
|
+
/** Select label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
|
|
360
|
+
declare const selectTypography: {
|
|
361
|
+
readonly label: {
|
|
362
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
363
|
+
readonly fontSize: 12;
|
|
364
|
+
readonly fontWeight: "500";
|
|
365
|
+
readonly lineHeight: 12;
|
|
366
|
+
readonly letterSpacing: 0.36;
|
|
367
|
+
};
|
|
216
368
|
readonly field: {
|
|
217
369
|
readonly fontFamily: "Noto Sans Armenian";
|
|
218
370
|
readonly fontSize: 14;
|
|
@@ -224,9 +376,33 @@ declare const inputTypography: {
|
|
|
224
376
|
readonly fontFamily: "Noto Sans Armenian";
|
|
225
377
|
readonly fontSize: 12;
|
|
226
378
|
readonly fontWeight: "400";
|
|
227
|
-
readonly lineHeight:
|
|
379
|
+
readonly lineHeight: 12;
|
|
380
|
+
readonly letterSpacing: 0.36;
|
|
381
|
+
};
|
|
382
|
+
};
|
|
383
|
+
/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
|
|
384
|
+
declare const textareaTypography: {
|
|
385
|
+
readonly label: {
|
|
386
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
387
|
+
readonly fontSize: 12;
|
|
388
|
+
readonly fontWeight: "500";
|
|
389
|
+
readonly lineHeight: 12;
|
|
390
|
+
readonly letterSpacing: 0.36;
|
|
391
|
+
};
|
|
392
|
+
readonly field: {
|
|
393
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
394
|
+
readonly fontSize: 14;
|
|
395
|
+
readonly fontWeight: "400";
|
|
396
|
+
readonly lineHeight: 19;
|
|
228
397
|
readonly letterSpacing: 0;
|
|
229
398
|
};
|
|
399
|
+
readonly hint: {
|
|
400
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
401
|
+
readonly fontSize: 12;
|
|
402
|
+
readonly fontWeight: "400";
|
|
403
|
+
readonly lineHeight: 12;
|
|
404
|
+
readonly letterSpacing: 0.36;
|
|
405
|
+
};
|
|
230
406
|
};
|
|
231
407
|
|
|
232
|
-
export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize,
|
|
408
|
+
export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, ComponentType } from 'react';
|
|
3
|
-
import
|
|
3
|
+
import * as react_native from 'react-native';
|
|
4
|
+
import { TouchableOpacityProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, PressableProps, TextInputProps, TextInput, ViewProps } from 'react-native';
|
|
4
5
|
|
|
5
6
|
type ButtonVariant = "primary" | "secondary";
|
|
6
7
|
type ButtonSize = "lg" | "sm";
|
|
7
|
-
interface ButtonProps {
|
|
8
|
+
interface ButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled" | "style" | "children"> {
|
|
8
9
|
title?: string;
|
|
9
10
|
children?: ReactNode;
|
|
10
11
|
onPress: (event: GestureResponderEvent) => void;
|
|
@@ -18,31 +19,131 @@ interface ButtonProps {
|
|
|
18
19
|
className?: string;
|
|
19
20
|
textClassName?: string;
|
|
20
21
|
}
|
|
21
|
-
declare
|
|
22
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
|
|
23
|
+
|
|
24
|
+
type CheckboxVariant = "default" | "light";
|
|
25
|
+
interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
26
|
+
value?: boolean;
|
|
27
|
+
defaultValue?: boolean;
|
|
28
|
+
onValueChange?: (value: boolean) => void;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
variant?: CheckboxVariant;
|
|
31
|
+
label?: string;
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
style?: StyleProp<ViewStyle>;
|
|
34
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
35
|
+
className?: string;
|
|
36
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
37
|
+
}
|
|
38
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
|
|
22
39
|
|
|
23
|
-
type InputState = "default" | "filled" | "active" | "error" | "disabled";
|
|
24
40
|
type InputSize = "lg" | "sm";
|
|
25
41
|
interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
26
42
|
label?: string;
|
|
27
43
|
showLabel?: boolean;
|
|
28
44
|
hint?: string;
|
|
29
45
|
showHint?: boolean;
|
|
30
|
-
state?: InputState;
|
|
31
46
|
size?: InputSize;
|
|
32
|
-
|
|
47
|
+
/** External — validation / form error. */
|
|
33
48
|
error?: boolean;
|
|
49
|
+
/** External — non-interactive. */
|
|
50
|
+
disabled?: boolean;
|
|
34
51
|
leftIcon?: ReactNode;
|
|
35
52
|
showLeftIcon?: boolean;
|
|
36
53
|
rightIcon?: ReactNode;
|
|
37
54
|
showRightIcon?: boolean;
|
|
38
55
|
onRightIconPress?: () => void;
|
|
56
|
+
/** Accessible name for the right icon button, when `onRightIconPress` is set. */
|
|
57
|
+
rightIconAccessibilityLabel?: string;
|
|
58
|
+
style?: StyleProp<ViewStyle>;
|
|
59
|
+
fieldStyle?: StyleProp<ViewStyle>;
|
|
60
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
61
|
+
className?: string;
|
|
62
|
+
inputClassName?: string;
|
|
63
|
+
}
|
|
64
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
65
|
+
|
|
66
|
+
type SelectOption = {
|
|
67
|
+
label: string;
|
|
68
|
+
value: string;
|
|
69
|
+
};
|
|
70
|
+
type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
71
|
+
label?: string;
|
|
72
|
+
showLabel?: boolean;
|
|
73
|
+
hint?: string;
|
|
74
|
+
showHint?: boolean;
|
|
75
|
+
placeholder?: string;
|
|
76
|
+
options: SelectOption[];
|
|
77
|
+
open?: boolean;
|
|
78
|
+
defaultOpen?: boolean;
|
|
79
|
+
onOpenChange?: (open: boolean) => void;
|
|
80
|
+
disabled?: boolean;
|
|
81
|
+
error?: boolean;
|
|
82
|
+
leftIcon?: ReactNode;
|
|
83
|
+
showLeftIcon?: boolean;
|
|
84
|
+
showSearch?: boolean;
|
|
85
|
+
searchPlaceholder?: string;
|
|
86
|
+
/**
|
|
87
|
+
* Called with the raw query on every keystroke. When provided, the parent owns
|
|
88
|
+
* filtering (e.g. server search) and the options prop is rendered as-is;
|
|
89
|
+
* when omitted, options are filtered locally by label.
|
|
90
|
+
*/
|
|
91
|
+
onSearchChange?: (query: string) => void;
|
|
92
|
+
/** Shows a loading row in the menu while the parent fetches options. */
|
|
93
|
+
loading?: boolean;
|
|
94
|
+
/** Text shown when no options match. */
|
|
95
|
+
emptyText?: string;
|
|
96
|
+
style?: StyleProp<ViewStyle>;
|
|
97
|
+
className?: string;
|
|
98
|
+
};
|
|
99
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
100
|
+
multiple?: false;
|
|
101
|
+
value?: string;
|
|
102
|
+
defaultValue?: string;
|
|
103
|
+
onValueChange?: (value: string) => void;
|
|
104
|
+
};
|
|
105
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
106
|
+
multiple: true;
|
|
107
|
+
value?: string[];
|
|
108
|
+
defaultValue?: string[];
|
|
109
|
+
onValueChange?: (value: string[]) => void;
|
|
110
|
+
};
|
|
111
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
112
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<View>>;
|
|
113
|
+
|
|
114
|
+
interface TextareaProps extends Omit<TextInputProps, "style" | "editable" | "multiline"> {
|
|
115
|
+
label?: string;
|
|
116
|
+
showLabel?: boolean;
|
|
117
|
+
hint?: string;
|
|
118
|
+
showHint?: boolean;
|
|
119
|
+
/** External — validation / form error. */
|
|
120
|
+
error?: boolean;
|
|
121
|
+
/** External — non-interactive. */
|
|
122
|
+
disabled?: boolean;
|
|
39
123
|
style?: StyleProp<ViewStyle>;
|
|
40
124
|
fieldStyle?: StyleProp<ViewStyle>;
|
|
41
125
|
inputStyle?: StyleProp<TextStyle>;
|
|
42
126
|
className?: string;
|
|
43
127
|
inputClassName?: string;
|
|
44
128
|
}
|
|
45
|
-
declare
|
|
129
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
|
|
130
|
+
|
|
131
|
+
interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
132
|
+
value?: boolean;
|
|
133
|
+
defaultValue?: boolean;
|
|
134
|
+
onValueChange?: (value: boolean) => void;
|
|
135
|
+
disabled?: boolean;
|
|
136
|
+
/** Visible label rendered next to the track. */
|
|
137
|
+
label?: string;
|
|
138
|
+
children?: ReactNode;
|
|
139
|
+
/** Accessible name for screen readers; falls back to `label`/`children` when omitted. */
|
|
140
|
+
accessibilityLabel?: string;
|
|
141
|
+
style?: StyleProp<ViewStyle>;
|
|
142
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
143
|
+
className?: string;
|
|
144
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
145
|
+
}
|
|
146
|
+
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
|
|
46
147
|
|
|
47
148
|
interface IconProps {
|
|
48
149
|
size?: number;
|
|
@@ -67,8 +168,24 @@ declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
67
168
|
|
|
68
169
|
declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
69
170
|
|
|
171
|
+
interface CheckIconProps {
|
|
172
|
+
size?: number;
|
|
173
|
+
color?: string;
|
|
174
|
+
strokeWidth?: number;
|
|
175
|
+
}
|
|
176
|
+
/** Native — react-native-svg (peer dependency). */
|
|
177
|
+
declare function CheckIcon({ size, color, strokeWidth }: CheckIconProps): react.JSX.Element;
|
|
178
|
+
|
|
70
179
|
declare function CheckBadgeIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
71
180
|
|
|
181
|
+
interface ChevronDownIconProps {
|
|
182
|
+
size?: number;
|
|
183
|
+
color?: string;
|
|
184
|
+
strokeWidth?: number;
|
|
185
|
+
}
|
|
186
|
+
/** Native — react-native-svg (peer dependency). */
|
|
187
|
+
declare function ChevronDownIcon({ size, color, strokeWidth, }: ChevronDownIconProps): react.JSX.Element;
|
|
188
|
+
|
|
72
189
|
declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
73
190
|
|
|
74
191
|
declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
@@ -87,6 +204,14 @@ declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
87
204
|
|
|
88
205
|
declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
89
206
|
|
|
207
|
+
interface SearchIconProps {
|
|
208
|
+
size?: number;
|
|
209
|
+
color?: string;
|
|
210
|
+
strokeWidth?: number;
|
|
211
|
+
}
|
|
212
|
+
/** Native — react-native-svg (peer dependency). */
|
|
213
|
+
declare function SearchIcon({ size, color, strokeWidth, }: SearchIconProps): react.JSX.Element;
|
|
214
|
+
|
|
90
215
|
interface ShowIconProps {
|
|
91
216
|
size?: number;
|
|
92
217
|
color?: string;
|
|
@@ -109,7 +234,9 @@ declare const icons: {
|
|
|
109
234
|
readonly bell: typeof BellIcon;
|
|
110
235
|
readonly building: typeof BuildingIcon;
|
|
111
236
|
readonly camera: typeof CameraIcon;
|
|
237
|
+
readonly check: typeof CheckIcon;
|
|
112
238
|
readonly checkBadge: typeof CheckBadgeIcon;
|
|
239
|
+
readonly chevronDown: typeof ChevronDownIcon;
|
|
113
240
|
readonly clock: typeof ClockIcon;
|
|
114
241
|
readonly facebook: typeof FacebookIcon;
|
|
115
242
|
readonly home: typeof HomeIcon;
|
|
@@ -119,14 +246,15 @@ declare const icons: {
|
|
|
119
246
|
readonly mail: typeof MailIcon;
|
|
120
247
|
readonly navigate: typeof NavigateIcon;
|
|
121
248
|
readonly phone: typeof PhoneIcon;
|
|
249
|
+
readonly search: typeof SearchIcon;
|
|
122
250
|
readonly show: typeof ShowIcon;
|
|
123
251
|
readonly user: typeof UserIcon;
|
|
124
252
|
};
|
|
125
253
|
type IconName = keyof typeof icons;
|
|
126
254
|
declare const iconNames: IconName[];
|
|
127
255
|
declare const iconGroups: {
|
|
128
|
-
readonly navigation: readonly ["arrowRight", "home", "navigate"];
|
|
129
|
-
readonly actions: readonly ["show", "bell", "camera", "key", "checkBadge"];
|
|
256
|
+
readonly navigation: readonly ["arrowRight", "chevronDown", "home", "navigate"];
|
|
257
|
+
readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search"];
|
|
130
258
|
readonly objects: readonly ["bag", "building", "clock", "user"];
|
|
131
259
|
readonly communication: readonly ["mail", "phone"];
|
|
132
260
|
readonly social: readonly ["facebook", "instagram", "linkedin"];
|
|
@@ -210,9 +338,33 @@ declare const inputTypography: {
|
|
|
210
338
|
readonly fontFamily: "Noto Sans Armenian";
|
|
211
339
|
readonly fontSize: 12;
|
|
212
340
|
readonly fontWeight: "500";
|
|
213
|
-
readonly lineHeight:
|
|
341
|
+
readonly lineHeight: 12;
|
|
342
|
+
readonly letterSpacing: 0.36;
|
|
343
|
+
};
|
|
344
|
+
readonly field: {
|
|
345
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
346
|
+
readonly fontSize: 14;
|
|
347
|
+
readonly fontWeight: "400";
|
|
348
|
+
readonly lineHeight: 19;
|
|
214
349
|
readonly letterSpacing: 0;
|
|
215
350
|
};
|
|
351
|
+
readonly hint: {
|
|
352
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
353
|
+
readonly fontSize: 12;
|
|
354
|
+
readonly fontWeight: "400";
|
|
355
|
+
readonly lineHeight: 12;
|
|
356
|
+
readonly letterSpacing: 0.36;
|
|
357
|
+
};
|
|
358
|
+
};
|
|
359
|
+
/** Select label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
|
|
360
|
+
declare const selectTypography: {
|
|
361
|
+
readonly label: {
|
|
362
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
363
|
+
readonly fontSize: 12;
|
|
364
|
+
readonly fontWeight: "500";
|
|
365
|
+
readonly lineHeight: 12;
|
|
366
|
+
readonly letterSpacing: 0.36;
|
|
367
|
+
};
|
|
216
368
|
readonly field: {
|
|
217
369
|
readonly fontFamily: "Noto Sans Armenian";
|
|
218
370
|
readonly fontSize: 14;
|
|
@@ -224,9 +376,33 @@ declare const inputTypography: {
|
|
|
224
376
|
readonly fontFamily: "Noto Sans Armenian";
|
|
225
377
|
readonly fontSize: 12;
|
|
226
378
|
readonly fontWeight: "400";
|
|
227
|
-
readonly lineHeight:
|
|
379
|
+
readonly lineHeight: 12;
|
|
380
|
+
readonly letterSpacing: 0.36;
|
|
381
|
+
};
|
|
382
|
+
};
|
|
383
|
+
/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
|
|
384
|
+
declare const textareaTypography: {
|
|
385
|
+
readonly label: {
|
|
386
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
387
|
+
readonly fontSize: 12;
|
|
388
|
+
readonly fontWeight: "500";
|
|
389
|
+
readonly lineHeight: 12;
|
|
390
|
+
readonly letterSpacing: 0.36;
|
|
391
|
+
};
|
|
392
|
+
readonly field: {
|
|
393
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
394
|
+
readonly fontSize: 14;
|
|
395
|
+
readonly fontWeight: "400";
|
|
396
|
+
readonly lineHeight: 19;
|
|
228
397
|
readonly letterSpacing: 0;
|
|
229
398
|
};
|
|
399
|
+
readonly hint: {
|
|
400
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
401
|
+
readonly fontSize: 12;
|
|
402
|
+
readonly fontWeight: "400";
|
|
403
|
+
readonly lineHeight: 12;
|
|
404
|
+
readonly letterSpacing: 0.36;
|
|
405
|
+
};
|
|
230
406
|
};
|
|
231
407
|
|
|
232
|
-
export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize,
|
|
408
|
+
export { ArrowRightIcon, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LinkedInIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
|