@ecohouse/ui 0.1.4 → 0.1.6
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/README.md +66 -15
- package/dist/index.cjs +1293 -147
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +358 -154
- package/dist/index.d.ts +358 -154
- package/dist/index.js +1278 -149
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Avatar/Avatar.tsx +19 -71
- package/src/components/Badge/Badge.stories.tsx +52 -0
- package/src/components/Badge/Badge.tsx +131 -0
- package/src/components/Badge/index.ts +2 -0
- package/src/components/Counter/Counter.stories.tsx +46 -0
- package/src/components/Counter/Counter.tsx +135 -0
- package/src/components/Counter/index.ts +2 -0
- package/src/components/DatePicker/DatePicker.stories.tsx +172 -0
- package/src/components/DatePicker/DatePicker.tsx +628 -0
- package/src/components/DatePicker/index.ts +7 -0
- package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx +63 -0
- package/src/components/SegmentedToggle/SegmentedToggle.tsx +221 -0
- package/src/components/SegmentedToggle/index.ts +2 -0
- package/src/components/StatCard/StatCard.stories.tsx +20 -0
- package/src/components/StatCard/StatCard.tsx +61 -0
- package/src/components/StatCard/index.ts +2 -0
- package/src/components/index.ts +20 -0
- package/src/icons/CalendarOutline/CalendarOutlineIcon.tsx +25 -0
- package/src/icons/CalendarOutline/CalendarOutlineIcon.web.tsx +31 -0
- package/src/icons/CalendarOutline/calendarOutlinePath.ts +3 -0
- package/src/icons/CalendarOutline/index.ts +1 -0
- package/src/icons/ChevronLeft/ChevronLeftIcon.tsx +21 -0
- package/src/icons/ChevronLeft/ChevronLeftIcon.web.tsx +27 -0
- package/src/icons/ChevronLeft/chevronLeftPath.ts +2 -0
- package/src/icons/ChevronLeft/index.ts +1 -0
- package/src/icons/Minus/MinusIcon.tsx +20 -0
- package/src/icons/Minus/MinusIcon.web.tsx +19 -0
- package/src/icons/Minus/index.ts +1 -0
- package/src/icons/Minus/minusPath.ts +1 -0
- package/src/icons/Plus/PlusIcon.tsx +20 -0
- package/src/icons/Plus/PlusIcon.web.tsx +19 -0
- package/src/icons/Plus/index.ts +1 -0
- package/src/icons/Plus/plusPath.ts +1 -0
- package/src/icons/Sidebar/SidebarIcon.tsx +21 -0
- package/src/icons/Sidebar/SidebarIcon.web.tsx +27 -0
- package/src/icons/Sidebar/index.ts +1 -0
- package/src/icons/Sidebar/sidebarPath.ts +3 -0
- package/src/icons/UsersAlt/UsersAltIcon.tsx +14 -0
- package/src/icons/UsersAlt/UsersAltIcon.web.tsx +13 -0
- package/src/icons/UsersAlt/index.ts +1 -0
- package/src/icons/UsersAlt/usersAltPath.ts +2 -0
- package/src/icons/index.ts +6 -0
- package/src/icons/registry.ts +29 -4
- package/src/index.ts +38 -1
- package/src/primitives/MenuItem/MenuItem.stories.tsx +98 -0
- package/src/primitives/MenuItem/MenuItem.tsx +138 -0
- package/src/primitives/MenuItem/index.ts +2 -0
- package/src/primitives/index.ts +2 -0
- package/src/theme/colors.test.ts +6 -0
- package/src/theme/colors.ts +7 -0
- package/src/theme/index.ts +5 -0
- package/src/theme/typography.ts +76 -0
- package/src/utils/dateUtils.ts +86 -0
package/dist/index.d.cts
CHANGED
|
@@ -1,21 +1,31 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode, ComponentType } from 'react';
|
|
3
3
|
import * as react_native from 'react-native';
|
|
4
|
-
import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, View,
|
|
4
|
+
import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, ViewProps, TouchableOpacityProps, TextInputProps, TextInput } from 'react-native';
|
|
5
5
|
|
|
6
|
-
interface
|
|
7
|
-
/**
|
|
8
|
-
key?: string;
|
|
9
|
-
/** Leading icon, e.g. `<CalendarIcon />` — pass it pre-colored. */
|
|
6
|
+
interface MenuItemProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
7
|
+
/** Leading icon, e.g. `<CalendarIcon size={16} />` — pass it pre-colored. */
|
|
10
8
|
icon?: ReactNode;
|
|
11
9
|
label: string;
|
|
12
|
-
onPress:
|
|
10
|
+
onPress?: (event: GestureResponderEvent) => void;
|
|
13
11
|
disabled?: boolean;
|
|
14
12
|
/** Row background at rest. Defaults to transparent. */
|
|
15
13
|
backgroundColor?: string;
|
|
16
14
|
/** Row background on hover/press. Defaults to `colors.grey600`. */
|
|
17
15
|
hoverColor?: string;
|
|
16
|
+
style?: StyleProp<ViewStyle>;
|
|
17
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
18
|
+
className?: string;
|
|
19
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
18
20
|
}
|
|
21
|
+
declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<View>>;
|
|
22
|
+
|
|
23
|
+
/** Data shape for an Avatar dropdown option — same fields as `MenuItem`. */
|
|
24
|
+
type AvatarMenuItem = Pick<MenuItemProps, "icon" | "label" | "disabled" | "backgroundColor" | "hoverColor"> & {
|
|
25
|
+
/** Stable identity for React keys; falls back to `label`. */
|
|
26
|
+
key?: string;
|
|
27
|
+
onPress: () => void;
|
|
28
|
+
};
|
|
19
29
|
interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
20
30
|
/** Logged-in user's display name. */
|
|
21
31
|
name: string;
|
|
@@ -32,7 +42,7 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
|
|
|
32
42
|
/**
|
|
33
43
|
* Account-menu options, supplied entirely by the consumer (icon, label,
|
|
34
44
|
* action, and per-item colors). When set, pressing the chip opens a
|
|
35
|
-
* dropdown listing them
|
|
45
|
+
* dropdown listing them via `MenuItem`.
|
|
36
46
|
*/
|
|
37
47
|
menuItems?: AvatarMenuItem[];
|
|
38
48
|
/** Controlled open state for the menu. */
|
|
@@ -47,148 +57,6 @@ interface AvatarProps extends Omit<PressableProps, "onPress" | "disabled" | "sty
|
|
|
47
57
|
}
|
|
48
58
|
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<View>>;
|
|
49
59
|
|
|
50
|
-
type ButtonVariant = "primary" | "secondary";
|
|
51
|
-
type ButtonSize = "lg" | "sm";
|
|
52
|
-
interface ButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled" | "style" | "children"> {
|
|
53
|
-
title?: string;
|
|
54
|
-
children?: ReactNode;
|
|
55
|
-
onPress: (event: GestureResponderEvent) => void;
|
|
56
|
-
disabled?: boolean;
|
|
57
|
-
variant?: ButtonVariant;
|
|
58
|
-
size?: ButtonSize;
|
|
59
|
-
showIcon?: boolean;
|
|
60
|
-
icon?: ReactNode;
|
|
61
|
-
style?: StyleProp<ViewStyle>;
|
|
62
|
-
textStyle?: StyleProp<TextStyle>;
|
|
63
|
-
className?: string;
|
|
64
|
-
textClassName?: string;
|
|
65
|
-
}
|
|
66
|
-
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
|
|
67
|
-
|
|
68
|
-
type CheckboxVariant = "default" | "light";
|
|
69
|
-
interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
70
|
-
value?: boolean;
|
|
71
|
-
defaultValue?: boolean;
|
|
72
|
-
onValueChange?: (value: boolean) => void;
|
|
73
|
-
disabled?: boolean;
|
|
74
|
-
variant?: CheckboxVariant;
|
|
75
|
-
label?: string;
|
|
76
|
-
children?: ReactNode;
|
|
77
|
-
style?: StyleProp<ViewStyle>;
|
|
78
|
-
labelStyle?: StyleProp<TextStyle>;
|
|
79
|
-
className?: string;
|
|
80
|
-
hitSlop?: PressableProps["hitSlop"];
|
|
81
|
-
}
|
|
82
|
-
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
|
|
83
|
-
|
|
84
|
-
type InputSize = "lg" | "sm";
|
|
85
|
-
interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
86
|
-
label?: string;
|
|
87
|
-
showLabel?: boolean;
|
|
88
|
-
hint?: string;
|
|
89
|
-
showHint?: boolean;
|
|
90
|
-
size?: InputSize;
|
|
91
|
-
/** External — validation / form error. */
|
|
92
|
-
error?: boolean;
|
|
93
|
-
/** External — non-interactive. */
|
|
94
|
-
disabled?: boolean;
|
|
95
|
-
leftIcon?: ReactNode;
|
|
96
|
-
showLeftIcon?: boolean;
|
|
97
|
-
rightIcon?: ReactNode;
|
|
98
|
-
showRightIcon?: boolean;
|
|
99
|
-
onRightIconPress?: () => void;
|
|
100
|
-
/** Accessible name for the right icon button, when `onRightIconPress` is set. */
|
|
101
|
-
rightIconAccessibilityLabel?: string;
|
|
102
|
-
style?: StyleProp<ViewStyle>;
|
|
103
|
-
fieldStyle?: StyleProp<ViewStyle>;
|
|
104
|
-
inputStyle?: StyleProp<TextStyle>;
|
|
105
|
-
className?: string;
|
|
106
|
-
inputClassName?: string;
|
|
107
|
-
}
|
|
108
|
-
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
109
|
-
|
|
110
|
-
type SelectOption = {
|
|
111
|
-
label: string;
|
|
112
|
-
value: string;
|
|
113
|
-
};
|
|
114
|
-
type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
115
|
-
label?: string;
|
|
116
|
-
showLabel?: boolean;
|
|
117
|
-
hint?: string;
|
|
118
|
-
showHint?: boolean;
|
|
119
|
-
placeholder?: string;
|
|
120
|
-
options: SelectOption[];
|
|
121
|
-
open?: boolean;
|
|
122
|
-
defaultOpen?: boolean;
|
|
123
|
-
onOpenChange?: (open: boolean) => void;
|
|
124
|
-
disabled?: boolean;
|
|
125
|
-
error?: boolean;
|
|
126
|
-
leftIcon?: ReactNode;
|
|
127
|
-
showLeftIcon?: boolean;
|
|
128
|
-
showSearch?: boolean;
|
|
129
|
-
searchPlaceholder?: string;
|
|
130
|
-
/**
|
|
131
|
-
* Called with the raw query on every keystroke. When provided, the parent owns
|
|
132
|
-
* filtering (e.g. server search) and the options prop is rendered as-is;
|
|
133
|
-
* when omitted, options are filtered locally by label.
|
|
134
|
-
*/
|
|
135
|
-
onSearchChange?: (query: string) => void;
|
|
136
|
-
/** Shows a loading row in the menu while the parent fetches options. */
|
|
137
|
-
loading?: boolean;
|
|
138
|
-
/** Text shown when no options match. */
|
|
139
|
-
emptyText?: string;
|
|
140
|
-
style?: StyleProp<ViewStyle>;
|
|
141
|
-
className?: string;
|
|
142
|
-
};
|
|
143
|
-
type SelectSingleProps = SelectBaseProps & {
|
|
144
|
-
multiple?: false;
|
|
145
|
-
value?: string;
|
|
146
|
-
defaultValue?: string;
|
|
147
|
-
onValueChange?: (value: string) => void;
|
|
148
|
-
};
|
|
149
|
-
type SelectMultipleProps = SelectBaseProps & {
|
|
150
|
-
multiple: true;
|
|
151
|
-
value?: string[];
|
|
152
|
-
defaultValue?: string[];
|
|
153
|
-
onValueChange?: (value: string[]) => void;
|
|
154
|
-
};
|
|
155
|
-
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
156
|
-
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<View>>;
|
|
157
|
-
|
|
158
|
-
interface TextareaProps extends Omit<TextInputProps, "style" | "editable" | "multiline"> {
|
|
159
|
-
label?: string;
|
|
160
|
-
showLabel?: boolean;
|
|
161
|
-
hint?: string;
|
|
162
|
-
showHint?: boolean;
|
|
163
|
-
/** External — validation / form error. */
|
|
164
|
-
error?: boolean;
|
|
165
|
-
/** External — non-interactive. */
|
|
166
|
-
disabled?: boolean;
|
|
167
|
-
style?: StyleProp<ViewStyle>;
|
|
168
|
-
fieldStyle?: StyleProp<ViewStyle>;
|
|
169
|
-
inputStyle?: StyleProp<TextStyle>;
|
|
170
|
-
className?: string;
|
|
171
|
-
inputClassName?: string;
|
|
172
|
-
}
|
|
173
|
-
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
|
|
174
|
-
|
|
175
|
-
interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
176
|
-
value?: boolean;
|
|
177
|
-
defaultValue?: boolean;
|
|
178
|
-
onValueChange?: (value: boolean) => void;
|
|
179
|
-
disabled?: boolean;
|
|
180
|
-
/** Visible label rendered next to the track. */
|
|
181
|
-
label?: string;
|
|
182
|
-
children?: ReactNode;
|
|
183
|
-
/** Accessible name for screen readers; falls back to `label`/`children` when omitted. */
|
|
184
|
-
accessibilityLabel?: string;
|
|
185
|
-
style?: StyleProp<ViewStyle>;
|
|
186
|
-
labelStyle?: StyleProp<TextStyle>;
|
|
187
|
-
className?: string;
|
|
188
|
-
hitSlop?: PressableProps["hitSlop"];
|
|
189
|
-
}
|
|
190
|
-
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
|
|
191
|
-
|
|
192
60
|
interface IconProps {
|
|
193
61
|
size?: number;
|
|
194
62
|
color?: string;
|
|
@@ -213,6 +81,9 @@ declare function BuildingIcon({ size, color, strokeWidth }: IconProps): react.JS
|
|
|
213
81
|
/** Native — react-native-svg (peer dependency). */
|
|
214
82
|
declare function CalendarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
215
83
|
|
|
84
|
+
/** Native — react-native-svg (peer dependency). */
|
|
85
|
+
declare function CalendarOutlineIcon({ size, color, strokeWidth, }: IconProps): react.JSX.Element;
|
|
86
|
+
|
|
216
87
|
declare function CameraIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
217
88
|
|
|
218
89
|
interface CheckIconProps {
|
|
@@ -233,6 +104,9 @@ interface ChevronDownIconProps {
|
|
|
233
104
|
/** Native — react-native-svg (peer dependency). */
|
|
234
105
|
declare function ChevronDownIcon({ size, color, strokeWidth, }: ChevronDownIconProps): react.JSX.Element;
|
|
235
106
|
|
|
107
|
+
/** Native — react-native-svg (peer dependency). */
|
|
108
|
+
declare function ChevronLeftIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
109
|
+
|
|
236
110
|
declare function ClockIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
237
111
|
|
|
238
112
|
declare function FacebookIcon({ size, color }: IconProps): react.JSX.Element;
|
|
@@ -259,10 +133,14 @@ declare function LogOutIcon({ size, color, strokeWidth }: IconProps): react.JSX.
|
|
|
259
133
|
|
|
260
134
|
declare function MailIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
261
135
|
|
|
136
|
+
declare function MinusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
137
|
+
|
|
262
138
|
declare function NavigateIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
263
139
|
|
|
264
140
|
declare function PhoneIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
265
141
|
|
|
142
|
+
declare function PlusIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
143
|
+
|
|
266
144
|
interface SearchIconProps {
|
|
267
145
|
size?: number;
|
|
268
146
|
color?: string;
|
|
@@ -282,6 +160,9 @@ interface ShowIconProps {
|
|
|
282
160
|
/** Native — react-native-svg (peer dependency). */
|
|
283
161
|
declare function ShowIcon({ size, color, strokeWidth }: ShowIconProps): react.JSX.Element;
|
|
284
162
|
|
|
163
|
+
/** Native — react-native-svg (peer dependency). */
|
|
164
|
+
declare function SidebarIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
165
|
+
|
|
285
166
|
interface UserIconProps {
|
|
286
167
|
size?: number;
|
|
287
168
|
color?: string;
|
|
@@ -290,6 +171,8 @@ interface UserIconProps {
|
|
|
290
171
|
/** Native — react-native-svg (peer dependency). */
|
|
291
172
|
declare function UserIcon({ size, color, strokeWidth }: UserIconProps): react.JSX.Element;
|
|
292
173
|
|
|
174
|
+
declare function UsersAltIcon({ size, color }: IconProps): react.JSX.Element;
|
|
175
|
+
|
|
293
176
|
/** Native — react-native-svg (peer dependency). */
|
|
294
177
|
declare function VideoIcon({ size, color, strokeWidth }: IconProps): react.JSX.Element;
|
|
295
178
|
|
|
@@ -299,10 +182,12 @@ declare const icons: {
|
|
|
299
182
|
readonly bell: typeof BellIcon;
|
|
300
183
|
readonly building: typeof BuildingIcon;
|
|
301
184
|
readonly calendar: typeof CalendarIcon;
|
|
185
|
+
readonly calendarOutline: typeof CalendarOutlineIcon;
|
|
302
186
|
readonly camera: typeof CameraIcon;
|
|
303
187
|
readonly check: typeof CheckIcon;
|
|
304
188
|
readonly checkBadge: typeof CheckBadgeIcon;
|
|
305
189
|
readonly chevronDown: typeof ChevronDownIcon;
|
|
190
|
+
readonly chevronLeft: typeof ChevronLeftIcon;
|
|
306
191
|
readonly clock: typeof ClockIcon;
|
|
307
192
|
readonly facebook: typeof FacebookIcon;
|
|
308
193
|
readonly heart: typeof HeartIcon;
|
|
@@ -314,23 +199,27 @@ declare const icons: {
|
|
|
314
199
|
readonly linkedin: typeof LinkedInIcon;
|
|
315
200
|
readonly logOut: typeof LogOutIcon;
|
|
316
201
|
readonly mail: typeof MailIcon;
|
|
202
|
+
readonly minus: typeof MinusIcon;
|
|
317
203
|
readonly navigate: typeof NavigateIcon;
|
|
318
204
|
readonly phone: typeof PhoneIcon;
|
|
205
|
+
readonly plus: typeof PlusIcon;
|
|
319
206
|
readonly search: typeof SearchIcon;
|
|
320
207
|
readonly settings: typeof SettingsIcon;
|
|
321
208
|
readonly show: typeof ShowIcon;
|
|
209
|
+
readonly sidebar: typeof SidebarIcon;
|
|
322
210
|
readonly user: typeof UserIcon;
|
|
211
|
+
readonly usersAlt: typeof UsersAltIcon;
|
|
323
212
|
readonly video: typeof VideoIcon;
|
|
324
213
|
};
|
|
325
214
|
type IconName = keyof typeof icons;
|
|
326
215
|
declare const iconNames: IconName[];
|
|
327
216
|
declare const iconGroups: {
|
|
328
|
-
readonly navigation: readonly ["arrowRight", "chevronDown", "home", "navigate"];
|
|
329
|
-
readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "heart"];
|
|
330
|
-
readonly objects: readonly ["bag", "building", "clock", "user", "video"];
|
|
217
|
+
readonly navigation: readonly ["arrowRight", "chevronDown", "chevronLeft", "home", "navigate"];
|
|
218
|
+
readonly actions: readonly ["show", "bell", "camera", "key", "check", "checkBadge", "search", "calendar", "calendarOutline", "heart", "minus", "plus"];
|
|
219
|
+
readonly objects: readonly ["bag", "building", "clock", "user", "usersAlt", "video"];
|
|
331
220
|
readonly communication: readonly ["mail", "phone"];
|
|
332
221
|
readonly social: readonly ["facebook", "instagram", "linkedin"];
|
|
333
|
-
readonly interface: readonly ["layoutGrid", "settings", "helpCircle", "logOut"];
|
|
222
|
+
readonly interface: readonly ["layoutGrid", "sidebar", "settings", "helpCircle", "logOut"];
|
|
334
223
|
};
|
|
335
224
|
type IconGroup = keyof typeof iconGroups;
|
|
336
225
|
declare const iconGroupNames: IconGroup[];
|
|
@@ -341,6 +230,243 @@ interface IconByNameProps extends IconProps {
|
|
|
341
230
|
}
|
|
342
231
|
declare function Icon({ name, ...props }: IconByNameProps): react.JSX.Element;
|
|
343
232
|
|
|
233
|
+
type BadgeVariant = "default" | "transparent";
|
|
234
|
+
interface BadgeProps extends Omit<ViewProps, "style" | "children"> {
|
|
235
|
+
label: string;
|
|
236
|
+
variant?: BadgeVariant;
|
|
237
|
+
icon?: IconComponent;
|
|
238
|
+
style?: StyleProp<ViewStyle>;
|
|
239
|
+
className?: string;
|
|
240
|
+
}
|
|
241
|
+
declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<View>>;
|
|
242
|
+
|
|
243
|
+
interface CounterProps extends Omit<ViewProps, "style" | "children"> {
|
|
244
|
+
value?: number;
|
|
245
|
+
defaultValue?: number;
|
|
246
|
+
onValueChange?: (value: number) => void;
|
|
247
|
+
min?: number;
|
|
248
|
+
max?: number;
|
|
249
|
+
step?: number;
|
|
250
|
+
disabled?: boolean;
|
|
251
|
+
style?: StyleProp<ViewStyle>;
|
|
252
|
+
className?: string;
|
|
253
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
254
|
+
}
|
|
255
|
+
declare const Counter: react.ForwardRefExoticComponent<CounterProps & react.RefAttributes<View>>;
|
|
256
|
+
|
|
257
|
+
interface SegmentedToggleOption {
|
|
258
|
+
value: string;
|
|
259
|
+
label: string;
|
|
260
|
+
icon?: IconComponent;
|
|
261
|
+
}
|
|
262
|
+
interface SegmentedToggleProps extends Omit<ViewProps, "style" | "children"> {
|
|
263
|
+
options: readonly [SegmentedToggleOption, SegmentedToggleOption];
|
|
264
|
+
value?: string;
|
|
265
|
+
defaultValue?: string;
|
|
266
|
+
onValueChange?: (value: string) => void;
|
|
267
|
+
fullWidth?: boolean;
|
|
268
|
+
disabled?: boolean;
|
|
269
|
+
style?: StyleProp<ViewStyle>;
|
|
270
|
+
className?: string;
|
|
271
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
272
|
+
}
|
|
273
|
+
declare const SegmentedToggle: react.ForwardRefExoticComponent<SegmentedToggleProps & react.RefAttributes<View>>;
|
|
274
|
+
|
|
275
|
+
interface StatCardProps extends Omit<ViewProps, "style" | "children"> {
|
|
276
|
+
label: string;
|
|
277
|
+
icon: IconComponent;
|
|
278
|
+
style?: StyleProp<ViewStyle>;
|
|
279
|
+
className?: string;
|
|
280
|
+
}
|
|
281
|
+
declare const StatCard: react.ForwardRefExoticComponent<StatCardProps & react.RefAttributes<View>>;
|
|
282
|
+
|
|
283
|
+
type ButtonVariant = "primary" | "secondary";
|
|
284
|
+
type ButtonSize = "lg" | "sm";
|
|
285
|
+
interface ButtonProps extends Omit<TouchableOpacityProps, "onPress" | "disabled" | "style" | "children"> {
|
|
286
|
+
title?: string;
|
|
287
|
+
children?: ReactNode;
|
|
288
|
+
onPress: (event: GestureResponderEvent) => void;
|
|
289
|
+
disabled?: boolean;
|
|
290
|
+
variant?: ButtonVariant;
|
|
291
|
+
size?: ButtonSize;
|
|
292
|
+
showIcon?: boolean;
|
|
293
|
+
icon?: ReactNode;
|
|
294
|
+
style?: StyleProp<ViewStyle>;
|
|
295
|
+
textStyle?: StyleProp<TextStyle>;
|
|
296
|
+
className?: string;
|
|
297
|
+
textClassName?: string;
|
|
298
|
+
}
|
|
299
|
+
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<View>>;
|
|
300
|
+
|
|
301
|
+
type CheckboxVariant = "default" | "light";
|
|
302
|
+
interface CheckboxProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
303
|
+
value?: boolean;
|
|
304
|
+
defaultValue?: boolean;
|
|
305
|
+
onValueChange?: (value: boolean) => void;
|
|
306
|
+
disabled?: boolean;
|
|
307
|
+
variant?: CheckboxVariant;
|
|
308
|
+
label?: string;
|
|
309
|
+
children?: ReactNode;
|
|
310
|
+
style?: StyleProp<ViewStyle>;
|
|
311
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
312
|
+
className?: string;
|
|
313
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
314
|
+
}
|
|
315
|
+
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<View>>;
|
|
316
|
+
|
|
317
|
+
type DateRange = {
|
|
318
|
+
start: Date | null;
|
|
319
|
+
end: Date | null;
|
|
320
|
+
};
|
|
321
|
+
type DatePickerBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
322
|
+
placeholder?: string;
|
|
323
|
+
open?: boolean;
|
|
324
|
+
defaultOpen?: boolean;
|
|
325
|
+
onOpenChange?: (open: boolean) => void;
|
|
326
|
+
disabled?: boolean;
|
|
327
|
+
/**
|
|
328
|
+
* When true (default), the calendar closes after a complete selection —
|
|
329
|
+
* a single date, or both ends of a range. Set false to keep it open.
|
|
330
|
+
*/
|
|
331
|
+
closeOnSelect?: boolean;
|
|
332
|
+
minDate?: Date;
|
|
333
|
+
maxDate?: Date;
|
|
334
|
+
/** First visible month when the calendar opens; defaults to the selected value's month, else today. */
|
|
335
|
+
defaultVisibleMonth?: Date;
|
|
336
|
+
/** Monday-first full month names. Defaults to Armenian. */
|
|
337
|
+
monthNames?: string[];
|
|
338
|
+
/** Weekday abbreviations, ordered starting from `weekStartsOn`. Defaults to Armenian, Monday-first. */
|
|
339
|
+
weekdayLabels?: string[];
|
|
340
|
+
/** Formats a selected date for the trigger and day accessibility labels. Defaults to "DD.MM.YYYY". */
|
|
341
|
+
formatValue?: (date: Date) => string;
|
|
342
|
+
/** First day of the week column (0 = Sunday, 1 = Monday). Defaults to Monday. */
|
|
343
|
+
weekStartsOn?: 0 | 1;
|
|
344
|
+
style?: StyleProp<ViewStyle>;
|
|
345
|
+
className?: string;
|
|
346
|
+
};
|
|
347
|
+
type DatePickerSingleProps = DatePickerBaseProps & {
|
|
348
|
+
range?: false;
|
|
349
|
+
value?: Date | null;
|
|
350
|
+
defaultValue?: Date | null;
|
|
351
|
+
onValueChange?: (value: Date | null) => void;
|
|
352
|
+
};
|
|
353
|
+
type DatePickerRangeProps = DatePickerBaseProps & {
|
|
354
|
+
range: true;
|
|
355
|
+
value?: DateRange;
|
|
356
|
+
defaultValue?: DateRange;
|
|
357
|
+
onValueChange?: (value: DateRange) => void;
|
|
358
|
+
};
|
|
359
|
+
type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
|
|
360
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<View>>;
|
|
361
|
+
|
|
362
|
+
type InputSize = "lg" | "sm";
|
|
363
|
+
interface InputProps extends Omit<TextInputProps, "style" | "editable"> {
|
|
364
|
+
label?: string;
|
|
365
|
+
showLabel?: boolean;
|
|
366
|
+
hint?: string;
|
|
367
|
+
showHint?: boolean;
|
|
368
|
+
size?: InputSize;
|
|
369
|
+
/** External — validation / form error. */
|
|
370
|
+
error?: boolean;
|
|
371
|
+
/** External — non-interactive. */
|
|
372
|
+
disabled?: boolean;
|
|
373
|
+
leftIcon?: ReactNode;
|
|
374
|
+
showLeftIcon?: boolean;
|
|
375
|
+
rightIcon?: ReactNode;
|
|
376
|
+
showRightIcon?: boolean;
|
|
377
|
+
onRightIconPress?: () => void;
|
|
378
|
+
/** Accessible name for the right icon button, when `onRightIconPress` is set. */
|
|
379
|
+
rightIconAccessibilityLabel?: string;
|
|
380
|
+
style?: StyleProp<ViewStyle>;
|
|
381
|
+
fieldStyle?: StyleProp<ViewStyle>;
|
|
382
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
383
|
+
className?: string;
|
|
384
|
+
inputClassName?: string;
|
|
385
|
+
}
|
|
386
|
+
declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<TextInput>>;
|
|
387
|
+
|
|
388
|
+
type SelectOption = {
|
|
389
|
+
label: string;
|
|
390
|
+
value: string;
|
|
391
|
+
};
|
|
392
|
+
type SelectBaseProps = Omit<ViewProps, "style" | "children"> & {
|
|
393
|
+
label?: string;
|
|
394
|
+
showLabel?: boolean;
|
|
395
|
+
hint?: string;
|
|
396
|
+
showHint?: boolean;
|
|
397
|
+
placeholder?: string;
|
|
398
|
+
options: SelectOption[];
|
|
399
|
+
open?: boolean;
|
|
400
|
+
defaultOpen?: boolean;
|
|
401
|
+
onOpenChange?: (open: boolean) => void;
|
|
402
|
+
disabled?: boolean;
|
|
403
|
+
error?: boolean;
|
|
404
|
+
leftIcon?: ReactNode;
|
|
405
|
+
showLeftIcon?: boolean;
|
|
406
|
+
showSearch?: boolean;
|
|
407
|
+
searchPlaceholder?: string;
|
|
408
|
+
/**
|
|
409
|
+
* Called with the raw query on every keystroke. When provided, the parent owns
|
|
410
|
+
* filtering (e.g. server search) and the options prop is rendered as-is;
|
|
411
|
+
* when omitted, options are filtered locally by label.
|
|
412
|
+
*/
|
|
413
|
+
onSearchChange?: (query: string) => void;
|
|
414
|
+
/** Shows a loading row in the menu while the parent fetches options. */
|
|
415
|
+
loading?: boolean;
|
|
416
|
+
/** Text shown when no options match. */
|
|
417
|
+
emptyText?: string;
|
|
418
|
+
style?: StyleProp<ViewStyle>;
|
|
419
|
+
className?: string;
|
|
420
|
+
};
|
|
421
|
+
type SelectSingleProps = SelectBaseProps & {
|
|
422
|
+
multiple?: false;
|
|
423
|
+
value?: string;
|
|
424
|
+
defaultValue?: string;
|
|
425
|
+
onValueChange?: (value: string) => void;
|
|
426
|
+
};
|
|
427
|
+
type SelectMultipleProps = SelectBaseProps & {
|
|
428
|
+
multiple: true;
|
|
429
|
+
value?: string[];
|
|
430
|
+
defaultValue?: string[];
|
|
431
|
+
onValueChange?: (value: string[]) => void;
|
|
432
|
+
};
|
|
433
|
+
type SelectProps = SelectSingleProps | SelectMultipleProps;
|
|
434
|
+
declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<View>>;
|
|
435
|
+
|
|
436
|
+
interface TextareaProps extends Omit<TextInputProps, "style" | "editable" | "multiline"> {
|
|
437
|
+
label?: string;
|
|
438
|
+
showLabel?: boolean;
|
|
439
|
+
hint?: string;
|
|
440
|
+
showHint?: boolean;
|
|
441
|
+
/** External — validation / form error. */
|
|
442
|
+
error?: boolean;
|
|
443
|
+
/** External — non-interactive. */
|
|
444
|
+
disabled?: boolean;
|
|
445
|
+
style?: StyleProp<ViewStyle>;
|
|
446
|
+
fieldStyle?: StyleProp<ViewStyle>;
|
|
447
|
+
inputStyle?: StyleProp<TextStyle>;
|
|
448
|
+
className?: string;
|
|
449
|
+
inputClassName?: string;
|
|
450
|
+
}
|
|
451
|
+
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<TextInput>>;
|
|
452
|
+
|
|
453
|
+
interface ToggleProps extends Omit<PressableProps, "onPress" | "disabled" | "style" | "children" | "hitSlop"> {
|
|
454
|
+
value?: boolean;
|
|
455
|
+
defaultValue?: boolean;
|
|
456
|
+
onValueChange?: (value: boolean) => void;
|
|
457
|
+
disabled?: boolean;
|
|
458
|
+
/** Visible label rendered next to the track. */
|
|
459
|
+
label?: string;
|
|
460
|
+
children?: ReactNode;
|
|
461
|
+
/** Accessible name for screen readers; falls back to `label`/`children` when omitted. */
|
|
462
|
+
accessibilityLabel?: string;
|
|
463
|
+
style?: StyleProp<ViewStyle>;
|
|
464
|
+
labelStyle?: StyleProp<TextStyle>;
|
|
465
|
+
className?: string;
|
|
466
|
+
hitSlop?: PressableProps["hitSlop"];
|
|
467
|
+
}
|
|
468
|
+
declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<react_native.View>>;
|
|
469
|
+
|
|
344
470
|
declare const grey: {
|
|
345
471
|
readonly "0": "#767676";
|
|
346
472
|
readonly "0.5": "#6E6E6E";
|
|
@@ -363,10 +489,17 @@ declare const colors: {
|
|
|
363
489
|
readonly primary: "#B46436";
|
|
364
490
|
readonly black: "#000000";
|
|
365
491
|
readonly white: "#ffffff";
|
|
492
|
+
readonly whiteAlpha86: "#FFFFFFDB";
|
|
493
|
+
readonly whiteAlpha40: "#FFFFFF66";
|
|
494
|
+
readonly whiteAlpha20: "#FFFFFF33";
|
|
495
|
+
readonly whiteAlpha10: "#FFFFFF1A";
|
|
496
|
+
readonly whiteAlpha5: "#FFFFFF0D";
|
|
366
497
|
readonly dark: "#090909";
|
|
367
498
|
readonly red: "#A63E3E";
|
|
368
499
|
readonly lightGrey: "#B7B7B7";
|
|
500
|
+
readonly green: "#34A853";
|
|
369
501
|
readonly primaryMuted: "#B464360F";
|
|
502
|
+
readonly primaryHover: "#B4643633";
|
|
370
503
|
readonly redMuted: "#A63E3E0F";
|
|
371
504
|
readonly redHover: "#A63E3E33";
|
|
372
505
|
readonly grey0: "#767676";
|
|
@@ -406,6 +539,38 @@ declare const buttonTypography: {
|
|
|
406
539
|
readonly letterSpacing: 0.36;
|
|
407
540
|
};
|
|
408
541
|
};
|
|
542
|
+
/** Badge label — Regular 14, line-height 112%, letter-spacing 0. */
|
|
543
|
+
declare const badgeTypography: {
|
|
544
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
545
|
+
readonly fontSize: 14;
|
|
546
|
+
readonly fontWeight: "400";
|
|
547
|
+
readonly lineHeight: 16;
|
|
548
|
+
readonly letterSpacing: 0;
|
|
549
|
+
};
|
|
550
|
+
/** Stat card label — Medium 16, line-height 100%, letter-spacing 0. */
|
|
551
|
+
declare const statCardTypography: {
|
|
552
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
553
|
+
readonly fontSize: 16;
|
|
554
|
+
readonly fontWeight: "500";
|
|
555
|
+
readonly lineHeight: 16;
|
|
556
|
+
readonly letterSpacing: 0;
|
|
557
|
+
};
|
|
558
|
+
/** Segmented toggle label — Medium 14, line-height 100%, letter-spacing 0. */
|
|
559
|
+
declare const segmentedToggleTypography: {
|
|
560
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
561
|
+
readonly fontSize: 14;
|
|
562
|
+
readonly fontWeight: "500";
|
|
563
|
+
readonly lineHeight: 14;
|
|
564
|
+
readonly letterSpacing: 0;
|
|
565
|
+
};
|
|
566
|
+
/** Counter value — Bold 14, line-height 100%, letter-spacing 0. */
|
|
567
|
+
declare const counterTypography: {
|
|
568
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
569
|
+
readonly fontSize: 14;
|
|
570
|
+
readonly fontWeight: "700";
|
|
571
|
+
readonly lineHeight: 14;
|
|
572
|
+
readonly letterSpacing: 0;
|
|
573
|
+
};
|
|
409
574
|
/** Input label / field / hint typography. */
|
|
410
575
|
declare const inputTypography: {
|
|
411
576
|
readonly label: {
|
|
@@ -478,6 +643,45 @@ declare const avatarTypography: {
|
|
|
478
643
|
readonly letterSpacing: 0;
|
|
479
644
|
};
|
|
480
645
|
};
|
|
646
|
+
/**
|
|
647
|
+
* DatePicker typography — trigger field text plus the calendar-panel type
|
|
648
|
+
* (month heading, weekday header, day-cell numbers). No label/hint chrome —
|
|
649
|
+
* the Figma trigger is a standalone field. Figma didn't spec the month
|
|
650
|
+
* heading / day-cell number sizes, so those reuse the existing type scale
|
|
651
|
+
* for visual consistency with the rest of the kit.
|
|
652
|
+
*/
|
|
653
|
+
declare const datePickerTypography: {
|
|
654
|
+
readonly field: {
|
|
655
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
656
|
+
readonly fontSize: 12;
|
|
657
|
+
readonly fontWeight: "400";
|
|
658
|
+
readonly lineHeight: 12;
|
|
659
|
+
readonly letterSpacing: 0.36;
|
|
660
|
+
};
|
|
661
|
+
/** Calendar month/year heading — Bold, centered, White. */
|
|
662
|
+
readonly monthHeading: {
|
|
663
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
664
|
+
readonly fontSize: 14;
|
|
665
|
+
readonly fontWeight: "700";
|
|
666
|
+
readonly lineHeight: 14;
|
|
667
|
+
readonly letterSpacing: 0;
|
|
668
|
+
};
|
|
669
|
+
/** Weekday header (ԵՐ, ԵՔ, ...) — Regular, uppercase, centered, Grey/300. */
|
|
670
|
+
readonly weekday: {
|
|
671
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
672
|
+
readonly fontSize: 12;
|
|
673
|
+
readonly fontWeight: "400";
|
|
674
|
+
readonly lineHeight: 12;
|
|
675
|
+
readonly letterSpacing: 0;
|
|
676
|
+
};
|
|
677
|
+
readonly day: {
|
|
678
|
+
readonly fontFamily: "Noto Sans Armenian";
|
|
679
|
+
readonly fontSize: 14;
|
|
680
|
+
readonly fontWeight: "400";
|
|
681
|
+
readonly lineHeight: 14;
|
|
682
|
+
readonly letterSpacing: 0;
|
|
683
|
+
};
|
|
684
|
+
};
|
|
481
685
|
/** Textarea label / field / hint typography — Medium/Regular 12–14, letter-spacing 3%. */
|
|
482
686
|
declare const textareaTypography: {
|
|
483
687
|
readonly label: {
|
|
@@ -503,4 +707,4 @@ declare const textareaTypography: {
|
|
|
503
707
|
};
|
|
504
708
|
};
|
|
505
709
|
|
|
506
|
-
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ClockIcon, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, NavigateIcon, PhoneIcon, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, VideoIcon, avatarTypography, buttonTypography, colors, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, selectTypography, textareaTypography };
|
|
710
|
+
export { ArrowRightIcon, Avatar, type AvatarMenuItem, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, BagIcon, BellIcon, BuildingIcon, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, CalendarOutlineIcon, CameraIcon, CheckBadgeIcon, CheckIcon, Checkbox, type CheckboxProps, type CheckboxVariant, ChevronDownIcon, ChevronLeftIcon, ClockIcon, Counter, type CounterProps, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRange, FacebookIcon, type GreyStep, HeartIcon, HelpCircleIcon, HomeIcon, Icon, type IconByNameProps, type IconComponent, type IconGroup, type IconName, type IconProps, Input, type InputProps, type InputSize, InstagramIcon, KeyIcon, LayoutGridIcon, LinkedInIcon, LogOutIcon, MailIcon, MenuItem, type MenuItemProps, MinusIcon, NavigateIcon, PhoneIcon, PlusIcon, SearchIcon, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectSingleProps, SettingsIcon, ShowIcon, SidebarIcon, StatCard, type StatCardProps, Textarea, type TextareaProps, Toggle, type ToggleProps, UserIcon, UsersAltIcon, VideoIcon, avatarTypography, badgeTypography, buttonTypography, colors, counterTypography, datePickerTypography, fonts, getIconsByGroup, grey, iconGroupNames, iconGroups, iconNames, icons, inputTypography, segmentedToggleTypography, selectTypography, statCardTypography, textareaTypography };
|