@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.
Files changed (61) hide show
  1. package/README.md +66 -15
  2. package/dist/index.cjs +1293 -147
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +358 -154
  5. package/dist/index.d.ts +358 -154
  6. package/dist/index.js +1278 -149
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/Avatar/Avatar.tsx +19 -71
  10. package/src/components/Badge/Badge.stories.tsx +52 -0
  11. package/src/components/Badge/Badge.tsx +131 -0
  12. package/src/components/Badge/index.ts +2 -0
  13. package/src/components/Counter/Counter.stories.tsx +46 -0
  14. package/src/components/Counter/Counter.tsx +135 -0
  15. package/src/components/Counter/index.ts +2 -0
  16. package/src/components/DatePicker/DatePicker.stories.tsx +172 -0
  17. package/src/components/DatePicker/DatePicker.tsx +628 -0
  18. package/src/components/DatePicker/index.ts +7 -0
  19. package/src/components/SegmentedToggle/SegmentedToggle.stories.tsx +63 -0
  20. package/src/components/SegmentedToggle/SegmentedToggle.tsx +221 -0
  21. package/src/components/SegmentedToggle/index.ts +2 -0
  22. package/src/components/StatCard/StatCard.stories.tsx +20 -0
  23. package/src/components/StatCard/StatCard.tsx +61 -0
  24. package/src/components/StatCard/index.ts +2 -0
  25. package/src/components/index.ts +20 -0
  26. package/src/icons/CalendarOutline/CalendarOutlineIcon.tsx +25 -0
  27. package/src/icons/CalendarOutline/CalendarOutlineIcon.web.tsx +31 -0
  28. package/src/icons/CalendarOutline/calendarOutlinePath.ts +3 -0
  29. package/src/icons/CalendarOutline/index.ts +1 -0
  30. package/src/icons/ChevronLeft/ChevronLeftIcon.tsx +21 -0
  31. package/src/icons/ChevronLeft/ChevronLeftIcon.web.tsx +27 -0
  32. package/src/icons/ChevronLeft/chevronLeftPath.ts +2 -0
  33. package/src/icons/ChevronLeft/index.ts +1 -0
  34. package/src/icons/Minus/MinusIcon.tsx +20 -0
  35. package/src/icons/Minus/MinusIcon.web.tsx +19 -0
  36. package/src/icons/Minus/index.ts +1 -0
  37. package/src/icons/Minus/minusPath.ts +1 -0
  38. package/src/icons/Plus/PlusIcon.tsx +20 -0
  39. package/src/icons/Plus/PlusIcon.web.tsx +19 -0
  40. package/src/icons/Plus/index.ts +1 -0
  41. package/src/icons/Plus/plusPath.ts +1 -0
  42. package/src/icons/Sidebar/SidebarIcon.tsx +21 -0
  43. package/src/icons/Sidebar/SidebarIcon.web.tsx +27 -0
  44. package/src/icons/Sidebar/index.ts +1 -0
  45. package/src/icons/Sidebar/sidebarPath.ts +3 -0
  46. package/src/icons/UsersAlt/UsersAltIcon.tsx +14 -0
  47. package/src/icons/UsersAlt/UsersAltIcon.web.tsx +13 -0
  48. package/src/icons/UsersAlt/index.ts +1 -0
  49. package/src/icons/UsersAlt/usersAltPath.ts +2 -0
  50. package/src/icons/index.ts +6 -0
  51. package/src/icons/registry.ts +29 -4
  52. package/src/index.ts +38 -1
  53. package/src/primitives/MenuItem/MenuItem.stories.tsx +98 -0
  54. package/src/primitives/MenuItem/MenuItem.tsx +138 -0
  55. package/src/primitives/MenuItem/index.ts +2 -0
  56. package/src/primitives/index.ts +2 -0
  57. package/src/theme/colors.test.ts +6 -0
  58. package/src/theme/colors.ts +7 -0
  59. package/src/theme/index.ts +5 -0
  60. package/src/theme/typography.ts +76 -0
  61. 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, TouchableOpacityProps, TextStyle, TextInputProps, TextInput, ViewProps } from 'react-native';
4
+ import { PressableProps, GestureResponderEvent, StyleProp, ViewStyle, TextStyle, View, ViewProps, TouchableOpacityProps, TextInputProps, TextInput } from 'react-native';
5
5
 
6
- interface AvatarMenuItem {
7
- /** Stable identity for React keys / hover tracking; falls back to `label`. */
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: () => void;
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 };