@ecohouse/ui 0.1.32 → 0.1.34

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 (68) hide show
  1. package/dist/index.cjs +30063 -607
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +173 -10
  4. package/dist/index.d.ts +173 -10
  5. package/dist/index.js +29989 -547
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/components/AccordionItem/AccordionItem.stories.tsx +54 -0
  9. package/src/components/AccordionItem/AccordionItem.tsx +220 -0
  10. package/src/components/AccordionItem/index.ts +2 -0
  11. package/src/components/AccountHeader/AccountHeader.tsx +34 -29
  12. package/src/components/Button/Button.stories.tsx +10 -1
  13. package/src/components/Button/Button.tsx +32 -3
  14. package/src/components/ContactInfoCard/ContactInfoCard.stories.tsx +30 -0
  15. package/src/components/ContactInfoCard/ContactInfoCard.tsx +141 -0
  16. package/src/components/ContactInfoCard/index.ts +2 -0
  17. package/src/components/DatePicker/DatePicker.tsx +119 -46
  18. package/src/components/Modal/Modal.stories.tsx +100 -0
  19. package/src/components/Modal/Modal.tsx +165 -0
  20. package/src/components/Modal/index.ts +2 -0
  21. package/src/components/Select/Select.tsx +5 -2
  22. package/src/components/Sidebar/Sidebar.tsx +42 -12
  23. package/src/components/StepPager/StepPager.tsx +150 -0
  24. package/src/components/StepPager/index.ts +2 -0
  25. package/src/components/ToggleRow/ToggleRow.stories.tsx +46 -0
  26. package/src/components/ToggleRow/ToggleRow.tsx +121 -0
  27. package/src/components/ToggleRow/index.ts +2 -0
  28. package/src/components/VerificationCodeInput/VerificationCodeInput.tsx +80 -60
  29. package/src/components/index.ts +15 -0
  30. package/src/icons/Ban/BanIcon.tsx +15 -0
  31. package/src/icons/Ban/banPath.ts +2 -0
  32. package/src/icons/Ban/index.ts +1 -0
  33. package/src/icons/CameraFilled/CameraFilledIcon.tsx +15 -0
  34. package/src/icons/CameraFilled/CameraFilledIcon.web.tsx +21 -0
  35. package/src/icons/CameraFilled/cameraFilledPath.ts +2 -0
  36. package/src/icons/CameraFilled/index.ts +1 -0
  37. package/src/icons/Fullscreen/FullscreenIcon.tsx +21 -0
  38. package/src/icons/Fullscreen/fullscreenPath.ts +2 -0
  39. package/src/icons/Fullscreen/index.ts +1 -0
  40. package/src/icons/Headset/HeadsetIcon.tsx +26 -0
  41. package/src/icons/Headset/HeadsetIcon.web.tsx +25 -0
  42. package/src/icons/Headset/headsetPath.ts +6 -0
  43. package/src/icons/Headset/index.ts +1 -0
  44. package/src/icons/Hide/HideIcon.tsx +21 -0
  45. package/src/icons/Hide/HideIcon.web.tsx +27 -0
  46. package/src/icons/Hide/hidePath.ts +3 -0
  47. package/src/icons/Hide/index.ts +1 -0
  48. package/src/icons/Home/homePath.ts +1 -1
  49. package/src/icons/MenuLines/MenuLinesIcon.tsx +20 -0
  50. package/src/icons/MenuLines/MenuLinesIcon.web.tsx +26 -0
  51. package/src/icons/MenuLines/index.ts +1 -0
  52. package/src/icons/MenuLines/menuLinesPath.ts +3 -0
  53. package/src/icons/Sort/SortIcon.tsx +3 -3
  54. package/src/icons/Sort/SortIcon.web.tsx +2 -2
  55. package/src/icons/Sort/sortPath.ts +3 -2
  56. package/src/icons/VideoOff/VideoOffIcon.tsx +21 -0
  57. package/src/icons/VideoOff/VideoOffIcon.web.tsx +27 -0
  58. package/src/icons/VideoOff/index.ts +1 -0
  59. package/src/icons/VideoOff/videoOffPath.ts +2 -0
  60. package/src/icons/ZoomOut/ZoomOutIcon.tsx +21 -0
  61. package/src/icons/ZoomOut/index.ts +1 -0
  62. package/src/icons/ZoomOut/zoomOutPath.ts +2 -0
  63. package/src/icons/index.ts +8 -0
  64. package/src/icons/registry.ts +23 -0
  65. package/src/index.ts +20 -0
  66. package/src/theme/colors.test.ts +1 -1
  67. package/src/theme/typography.ts +4 -4
  68. package/src/utils/popoverAlign.ts +85 -0
@@ -0,0 +1,15 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+ import { BAN_PATH } from "./banPath";
5
+
6
+ export { BAN_PATH } from "./banPath";
7
+
8
+ /** Filled prohibition / deactivated mark (28×28 viewBox). */
9
+ export function BanIcon({ size = 28, color = colors.primary }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
12
+ <Path d={BAN_PATH} fill={color} />
13
+ </Svg>
14
+ );
15
+ }
@@ -0,0 +1,2 @@
1
+ export const BAN_PATH =
2
+ "M14.0007 2.33301C11.6932 2.33301 9.43758 3.01725 7.519 4.2992C5.60043 5.58115 4.10508 7.40323 3.22206 9.53503C2.33904 11.6668 2.108 14.0126 2.55816 16.2757C3.00832 18.5388 4.11946 20.6176 5.75108 22.2493C7.38269 23.8809 9.46149 24.992 11.7246 25.4422C13.9877 25.8923 16.3335 25.6613 18.4653 24.7783C20.5971 23.8952 22.4192 22.3999 23.7011 20.4813C24.9831 18.5628 25.6673 16.3071 25.6673 13.9997C25.6673 12.4676 25.3656 10.9505 24.7793 9.53503C24.1929 8.11957 23.3336 6.83345 22.2502 5.7501C21.1669 4.66675 19.8808 3.80738 18.4653 3.22108C17.0498 2.63478 15.5327 2.33301 14.0007 2.33301ZM14.0007 23.333C11.5253 23.333 9.15133 22.3497 7.40099 20.5993C5.65065 18.849 4.66732 16.475 4.66732 13.9997C4.66475 11.9269 5.35917 9.91348 6.63899 8.28301L19.7173 21.3613C18.0869 22.6412 16.0734 23.3356 14.0007 23.333ZM21.3623 19.7163L8.28399 6.63801C9.91446 5.35819 11.9279 4.66376 14.0007 4.66634C16.476 4.66634 18.85 5.64967 20.6003 7.40001C22.3507 9.15035 23.334 11.5243 23.334 13.9997C23.3366 16.0724 22.6421 18.0859 21.3623 19.7163Z";
@@ -0,0 +1 @@
1
+ export { BanIcon, BAN_PATH } from "./BanIcon";
@@ -0,0 +1,15 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { CAMERA_FILLED_PATH } from "./cameraFilledPath";
3
+ import { colors } from "../../theme";
4
+ import type { IconProps } from "../types";
5
+
6
+ export { CAMERA_FILLED_PATH } from "./cameraFilledPath";
7
+
8
+ /** Native — filled camera, 32×32 viewBox. */
9
+ export function CameraFilledIcon({ size = 32, color = colors.primary }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 32 32" fill="none">
12
+ <Path d={CAMERA_FILLED_PATH} fill={color} />
13
+ </Svg>
14
+ );
15
+ }
@@ -0,0 +1,21 @@
1
+ import { CAMERA_FILLED_PATH } from "./cameraFilledPath";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+
5
+ /** Web / Storybook — filled camera, 32×32 viewBox. */
6
+ export function CameraFilledIcon({ size = 32, color = colors.primary }: IconProps) {
7
+ return (
8
+ <svg
9
+ width={size}
10
+ height={size}
11
+ viewBox="0 0 32 32"
12
+ fill="none"
13
+ xmlns="http://www.w3.org/2000/svg"
14
+ aria-hidden
15
+ >
16
+ <path d={CAMERA_FILLED_PATH} fill={color} />
17
+ </svg>
18
+ );
19
+ }
20
+
21
+ export { CAMERA_FILLED_PATH } from "./cameraFilledPath";
@@ -0,0 +1,2 @@
1
+ export const CAMERA_FILLED_PATH =
2
+ "M25.3327 8.66605H23.626L23.1993 7.33271C22.9228 6.55035 22.4097 5.87338 21.7312 5.39559C21.0528 4.9178 20.2425 4.66285 19.4127 4.66605H12.586C11.7481 4.66761 10.9318 4.93229 10.2524 5.42272C9.57295 5.91315 9.06469 6.60456 8.79935 7.39938L8.37268 8.73271H6.66602C5.60515 8.73271 4.58773 9.15414 3.83759 9.90428C3.08744 10.6544 2.66602 11.6718 2.66602 12.7327V23.3994C2.66602 24.4602 3.08744 25.4777 3.83759 26.2278C4.58773 26.978 5.60515 27.3994 6.66602 27.3994H25.3327C26.3935 27.3994 27.411 26.978 28.1611 26.2278C28.9113 25.4777 29.3327 24.4602 29.3327 23.3994V12.7327C29.3415 12.2018 29.2446 11.6745 29.0476 11.1815C28.8505 10.6885 28.5573 10.2396 28.1849 9.86109C27.8126 9.48256 27.3687 9.18195 26.879 8.97678C26.3893 8.7716 25.8636 8.66597 25.3327 8.66605ZM26.666 23.3327C26.666 23.6863 26.5255 24.0255 26.2755 24.2755C26.0254 24.5256 25.6863 24.666 25.3327 24.666H6.66602C6.31239 24.666 5.97326 24.5256 5.72321 24.2755C5.47316 24.0255 5.33268 23.6863 5.33268 23.3327V12.666C5.33268 12.3124 5.47316 11.9733 5.72321 11.7232C5.97326 11.4732 6.31239 11.3327 6.66602 11.3327H9.33268C9.62344 11.3479 9.91117 11.2675 10.1519 11.1038C10.3927 10.94 10.5732 10.702 10.666 10.426L11.386 8.23938C11.4755 7.97455 11.6459 7.74453 11.8732 7.58183C12.1005 7.41914 12.3732 7.33199 12.6527 7.33271H19.4793C19.7589 7.33199 20.0316 7.41914 20.2589 7.58183C20.4862 7.74453 20.6566 7.97455 20.746 8.23938L21.466 10.426C21.5516 10.6804 21.7119 10.903 21.926 11.0647C22.1401 11.2265 22.398 11.3199 22.666 11.3327H25.3327C25.6863 11.3327 26.0254 11.4732 26.2755 11.7232C26.5255 11.9733 26.666 12.3124 26.666 12.666V23.3327ZM15.9993 11.3327C14.9445 11.3327 13.9134 11.6455 13.0363 12.2315C12.1592 12.8176 11.4757 13.6505 11.072 14.6251C10.6683 15.5996 10.5627 16.672 10.7685 17.7065C10.9743 18.7411 11.4822 19.6914 12.2281 20.4373C12.974 21.1832 13.9243 21.6911 14.9589 21.8969C15.9934 22.1027 17.0658 21.9971 18.0403 21.5934C19.0149 21.1897 19.8478 20.5061 20.4339 19.6291C21.0199 18.752 21.3327 17.7209 21.3327 16.666C21.3327 15.2516 20.7708 13.895 19.7706 12.8948C18.7704 11.8946 17.4138 11.3327 15.9993 11.3327ZM15.9993 19.3327C15.4719 19.3327 14.9564 19.1763 14.5178 18.8833C14.0793 18.5903 13.7375 18.1738 13.5357 17.6865C13.3338 17.1993 13.281 16.6631 13.3839 16.1458C13.4868 15.6285 13.7408 15.1534 14.1137 14.7804C14.4867 14.4075 14.9618 14.1535 15.4791 14.0506C15.9964 13.9477 16.5326 14.0005 17.0198 14.2024C17.5071 14.4042 17.9236 14.746 18.2166 15.1845C18.5096 15.6231 18.666 16.1386 18.666 16.666C18.666 17.3733 18.3851 18.0516 17.885 18.5517C17.3849 19.0518 16.7066 19.3327 15.9993 19.3327Z";
@@ -0,0 +1 @@
1
+ export { CameraFilledIcon, CAMERA_FILLED_PATH } from "./CameraFilledIcon";
@@ -0,0 +1,21 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+ import { FULLSCREEN_PATH } from "./fullscreenPath";
5
+
6
+ export { FULLSCREEN_PATH } from "./fullscreenPath";
7
+
8
+ /** Four-corner fullscreen / maximize control (24×24 viewBox). */
9
+ export function FullscreenIcon({ size = 24, color = colors.white, strokeWidth = 2 }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
12
+ <Path
13
+ d={FULLSCREEN_PATH}
14
+ stroke={color}
15
+ strokeWidth={strokeWidth}
16
+ strokeLinecap="round"
17
+ strokeLinejoin="round"
18
+ />
19
+ </Svg>
20
+ );
21
+ }
@@ -0,0 +1,2 @@
1
+ export const FULLSCREEN_PATH =
2
+ "M16 8L21 3M21 8V3H16M8 8L3 3M8 3L3 3L3 8M8 16L3 21M3 16L3 21H8M16 16L21 21M16 21H21V16";
@@ -0,0 +1 @@
1
+ export { FullscreenIcon, FULLSCREEN_PATH } from "./FullscreenIcon";
@@ -0,0 +1,26 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import type { IconProps } from "../types";
3
+ import { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
4
+
5
+ export function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }: IconProps) {
6
+ return (
7
+ <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
8
+ <Path
9
+ d={HEADSET_PATH}
10
+ stroke={color}
11
+ strokeWidth={strokeWidth}
12
+ strokeLinecap="round"
13
+ strokeLinejoin="round"
14
+ />
15
+ <Path
16
+ d={HEADSET_MIC_PATH}
17
+ stroke={color}
18
+ strokeWidth={strokeWidth}
19
+ strokeLinecap="round"
20
+ strokeLinejoin="round"
21
+ />
22
+ </Svg>
23
+ );
24
+ }
25
+
26
+ export { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
@@ -0,0 +1,25 @@
1
+ import type { IconProps } from "../types";
2
+ import { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
3
+
4
+ export function HeadsetIcon({ size = 24, color = "#B76533", strokeWidth = 2 }: IconProps) {
5
+ return (
6
+ <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
7
+ <path
8
+ d={HEADSET_PATH}
9
+ stroke={color}
10
+ strokeWidth={strokeWidth}
11
+ strokeLinecap="round"
12
+ strokeLinejoin="round"
13
+ />
14
+ <path
15
+ d={HEADSET_MIC_PATH}
16
+ stroke={color}
17
+ strokeWidth={strokeWidth}
18
+ strokeLinecap="round"
19
+ strokeLinejoin="round"
20
+ />
21
+ </svg>
22
+ );
23
+ }
24
+
25
+ export { HEADSET_MIC_PATH, HEADSET_PATH } from "./headsetPath";
@@ -0,0 +1,6 @@
1
+ /** Headset / support hours — viewBox 0 0 24 24. */
2
+ export const HEADSET_PATH =
3
+ "M3 11H6C6.53043 11 7.03914 11.2107 7.41421 11.5858C7.78929 11.9609 8 12.4696 8 13V16C8 16.5304 7.78929 17.0391 7.41421 17.4142C7.03914 17.7893 6.53043 18 6 18H5C4.46957 18 3.96086 17.7893 3.58579 17.4142C3.21071 17.0391 3 16.5304 3 16V11ZM3 11C3 9.8181 3.23279 8.64778 3.68508 7.55585C4.13738 6.46392 4.80031 5.47177 5.63604 4.63604C6.47177 3.80031 7.46392 3.13738 8.55585 2.68508C9.64778 2.23279 10.8181 2 12 2C13.1819 2 14.3522 2.23279 15.4442 2.68508C16.5361 3.13738 17.5282 3.80031 18.364 4.63604C19.1997 5.47177 19.8626 6.46392 20.3149 7.55585C20.7672 8.64778 21 9.8181 21 11M21 11V16C21 16.5304 20.7893 17.0391 20.4142 17.4142C20.0391 17.7893 19.5304 18 19 18H18C17.4696 18 16.9609 17.7893 16.5858 17.4142C16.2107 17.0391 16 16.5304 16 16V13C16 12.4696 16.2107 11.9609 16.5858 11.5858C16.9609 11.2107 17.4696 11 18 11H21Z";
4
+
5
+ export const HEADSET_MIC_PATH =
6
+ "M21 16V18C21 19.0609 20.5786 20.0783 19.8284 20.8284C19.0783 21.5786 18.0609 22 17 22H12";
@@ -0,0 +1 @@
1
+ export { HeadsetIcon, HEADSET_MIC_PATH, HEADSET_PATH } from "./HeadsetIcon";
@@ -0,0 +1,21 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { HIDE_PATH } from "./hidePath";
3
+ import { colors } from "../../theme";
4
+ import type { IconProps } from "../types";
5
+
6
+ export { HIDE_PATH } from "./hidePath";
7
+
8
+ /** Native — react-native-svg (peer dependency). */
9
+ export function HideIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
12
+ <Path
13
+ d={HIDE_PATH}
14
+ stroke={color}
15
+ strokeWidth={strokeWidth}
16
+ strokeLinecap="round"
17
+ strokeLinejoin="round"
18
+ />
19
+ </Svg>
20
+ );
21
+ }
@@ -0,0 +1,27 @@
1
+ import { HIDE_PATH } from "./hidePath";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+
5
+ /** Web / Storybook — plain SVG (no react-native-svg). */
6
+ export function HideIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
7
+ return (
8
+ <svg
9
+ width={size}
10
+ height={size}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ xmlns="http://www.w3.org/2000/svg"
14
+ aria-hidden
15
+ >
16
+ <path
17
+ d={HIDE_PATH}
18
+ stroke={color}
19
+ strokeWidth={strokeWidth}
20
+ strokeLinecap="round"
21
+ strokeLinejoin="round"
22
+ />
23
+ </svg>
24
+ );
25
+ }
26
+
27
+ export { HIDE_PATH } from "./hidePath";
@@ -0,0 +1,3 @@
1
+ /** Hide (eye-off) icon path — 24×24 viewBox. */
2
+ export const HIDE_PATH =
3
+ "M10.7429 5.09232C11.1494 5.03223 11.5686 5 12.0004 5C17.1054 5 20.4553 9.50484 21.5807 11.2868C21.7169 11.5025 21.785 11.6103 21.8231 11.7767C21.8518 11.9016 21.8517 12.0987 21.8231 12.2236C21.7849 12.3899 21.7164 12.4985 21.5792 12.7156C21.2793 13.1901 20.8222 13.8571 20.2165 14.5805M6.72432 6.71504C4.56225 8.1817 3.09445 10.2194 2.42111 11.2853C2.28428 11.5019 2.21587 11.6102 2.17774 11.7765C2.1491 11.9014 2.14909 12.0984 2.17771 12.2234C2.21583 12.3897 2.28393 12.4975 2.42013 12.7132C3.54554 14.4952 6.89541 19 12.0004 19C14.0588 19 15.8319 18.2676 17.2888 17.2766M3.00042 3L21.0004 21M9.8791 9.87868C9.3362 10.4216 9.00042 11.1716 9.00042 12C9.00042 13.6569 10.3436 15 12.0004 15C12.8288 15 13.5788 14.6642 14.1217 14.1213";
@@ -0,0 +1 @@
1
+ export { HideIcon, HIDE_PATH } from "./HideIcon";
@@ -1,2 +1,2 @@
1
1
  export const HOME_PATH =
2
- "M1.66675 16.6667H3.33341M3.33341 16.6667H8.33341M3.33341 16.6667V9.54352C3.33341 9.09823 3.33341 8.87548 3.38756 8.66828C3.43554 8.48466 3.51491 8.31089 3.6215 8.15387C3.74178 7.97668 3.90895 7.82974 4.24406 7.53652L8.24538 4.03537C8.86662 3.49178 9.17726 3.21997 9.5271 3.11652C9.83559 3.02529 10.1644 3.02529 10.4729 3.11652C10.823 3.22005 11.1341 3.49212 11.7563 4.03652L15.7563 7.53652C16.0914 7.82974 16.2586 7.97668 16.3789 8.15387C16.4855 8.31089 16.5642 8.48466 16.6122 8.66828C16.6664 8.87548 16.6667 9.09824 16.6667 9.54352V16.6667M8.33341 16.6667H11.6667M8.33341 16.6667V13.3334C8.33341 12.4129 9.07961 11.6667 10.0001 11.6667C10.9206 11.6667 11.6667 12.4129 11.6667 13.3334V16.6667M11.6667 16.6667H16.6667M16.6667 16.6667H18.3334";
2
+ "M6.77168 11.6663C7.14172 13.104 8.4468 14.1663 10 14.1663C11.5532 14.1663 12.8583 13.104 13.2283 11.6663M9.18141 2.30297L3.52949 6.6989C3.15168 6.99276 2.96278 7.13968 2.82669 7.32368C2.70614 7.48667 2.61633 7.67029 2.56169 7.86551C2.5 8.0859 2.5 8.32521 2.5 8.80384V14.833C2.5 15.7664 2.5 16.2331 2.68166 16.5896C2.84144 16.9032 3.09641 17.1582 3.41002 17.318C3.76654 17.4996 4.23325 17.4996 5.16667 17.4996H14.8333C15.7668 17.4996 16.2335 17.4996 16.59 17.318C16.9036 17.1582 17.1586 16.9032 17.3183 16.5896C17.5 16.2331 17.5 15.7664 17.5 14.833V8.80384C17.5 8.32521 17.5 8.0859 17.4383 7.86551C17.3837 7.67029 17.2939 7.48667 17.1733 7.32368C17.0372 7.13968 16.8483 6.99276 16.4705 6.69891L10.8186 2.30297C10.5258 2.07526 10.3794 1.9614 10.2178 1.91763C10.0752 1.87902 9.92484 1.87902 9.78221 1.91763C9.62057 1.9614 9.47418 2.07526 9.18141 2.30297Z";
@@ -0,0 +1,20 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { MENU_LINES_PATH } from "./menuLinesPath";
3
+ import { colors } from "../../theme";
4
+ import type { IconProps } from "../types";
5
+
6
+ export { MENU_LINES_PATH } from "./menuLinesPath";
7
+
8
+ export function MenuLinesIcon({ size = 28, color = colors.white, strokeWidth = 2 }: IconProps) {
9
+ return (
10
+ <Svg width={size} height={size} viewBox="0 0 28 28" fill="none">
11
+ <Path
12
+ d={MENU_LINES_PATH}
13
+ stroke={color}
14
+ strokeWidth={strokeWidth}
15
+ strokeLinecap="round"
16
+ strokeLinejoin="round"
17
+ />
18
+ </Svg>
19
+ );
20
+ }
@@ -0,0 +1,26 @@
1
+ import { MENU_LINES_PATH } from "./menuLinesPath";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+
5
+ export function MenuLinesIcon({ size = 28, color = colors.white, strokeWidth = 2 }: IconProps) {
6
+ return (
7
+ <svg
8
+ width={size}
9
+ height={size}
10
+ viewBox="0 0 28 28"
11
+ fill="none"
12
+ xmlns="http://www.w3.org/2000/svg"
13
+ aria-hidden
14
+ >
15
+ <path
16
+ d={MENU_LINES_PATH}
17
+ stroke={color}
18
+ strokeWidth={strokeWidth}
19
+ strokeLinecap="round"
20
+ strokeLinejoin="round"
21
+ />
22
+ </svg>
23
+ );
24
+ }
25
+
26
+ export { MENU_LINES_PATH } from "./menuLinesPath";
@@ -0,0 +1 @@
1
+ export { MenuLinesIcon, MENU_LINES_PATH } from "./MenuLinesIcon";
@@ -0,0 +1,3 @@
1
+ /** Account header hamburger — 28×28 viewBox, left-aligned uneven lines. */
2
+ export const MENU_LINES_PATH =
3
+ "M5.83398 19.8337H15.1673M5.83398 14.0003H22.1673M5.83398 8.16699H15.1673";
@@ -5,10 +5,10 @@ import type { IconProps } from "../types";
5
5
 
6
6
  export { SORT_PATH } from "./sortPath";
7
7
 
8
- /** Native react-native-svg (peer dependency). */
9
- export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
8
+ /** Bidirectional sort (20×20 viewBox). */
9
+ export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
10
10
  return (
11
- <Svg width={size} height={size} viewBox="0 0 12 12" fill="none">
11
+ <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
12
12
  <Path
13
13
  d={SORT_PATH}
14
14
  stroke={color}
@@ -3,12 +3,12 @@ import { colors } from "../../theme";
3
3
  import type { IconProps } from "../types";
4
4
 
5
5
  /** Web / Storybook — plain SVG (no react-native-svg). */
6
- export function SortIcon({ size = 12, color = colors.grey150, strokeWidth = 1.5 }: IconProps) {
6
+ export function SortIcon({ size = 20, color = colors.grey300, strokeWidth = 2 }: IconProps) {
7
7
  return (
8
8
  <svg
9
9
  width={size}
10
10
  height={size}
11
- viewBox="0 0 12 12"
11
+ viewBox="0 0 20 20"
12
12
  fill="none"
13
13
  xmlns="http://www.w3.org/2000/svg"
14
14
  aria-hidden
@@ -1,2 +1,3 @@
1
- /** Bidirectional sort icon path — 12×12 viewBox. */
2
- export const SORT_PATH = "M3.5 2V10M5.5 8L3.5 10L1.5 8M8.5 10V2M10.5 4L8.5 2L6.5 4";
1
+ /** Bidirectional sort icon path — 20×20 viewBox. */
2
+ export const SORT_PATH =
3
+ "M5.83333 3.33301V16.6663M9.16667 13.333L5.83333 16.6663L2.5 13.333M14.1667 16.6663V3.33301M17.5 6.66634L14.1667 3.33301L10.8333 6.66634";
@@ -0,0 +1,21 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+ import { VIDEO_OFF_PATH } from "./videoOffPath";
5
+
6
+ export { VIDEO_OFF_PATH } from "./videoOffPath";
7
+
8
+ /** Video / camera off (24×24 viewBox). */
9
+ export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
12
+ <Path
13
+ d={VIDEO_OFF_PATH}
14
+ stroke={color}
15
+ strokeWidth={strokeWidth}
16
+ strokeLinecap="round"
17
+ strokeLinejoin="round"
18
+ />
19
+ </Svg>
20
+ );
21
+ }
@@ -0,0 +1,27 @@
1
+ import { VIDEO_OFF_PATH } from "./videoOffPath";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+
5
+ /** Web / Storybook — plain SVG (no react-native-svg). */
6
+ export function VideoOffIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
7
+ return (
8
+ <svg
9
+ width={size}
10
+ height={size}
11
+ viewBox="0 0 24 24"
12
+ fill="none"
13
+ xmlns="http://www.w3.org/2000/svg"
14
+ aria-hidden
15
+ >
16
+ <path
17
+ d={VIDEO_OFF_PATH}
18
+ stroke={color}
19
+ strokeWidth={strokeWidth}
20
+ strokeLinecap="round"
21
+ strokeLinejoin="round"
22
+ />
23
+ </svg>
24
+ );
25
+ }
26
+
27
+ export { VIDEO_OFF_PATH } from "./videoOffPath";
@@ -0,0 +1 @@
1
+ export { VideoOffIcon, VIDEO_OFF_PATH } from "./VideoOffIcon";
@@ -0,0 +1,2 @@
1
+ export const VIDEO_OFF_PATH =
2
+ "M5 5C3.34315 5 2 6.34315 2 8V16C2 17.6569 3.34315 19 5 19H14C15.3527 19 16.4962 18.1048 16.8705 16.8745M17 12L20.6343 8.36569C21.0627 7.93731 21.2769 7.72312 21.4608 7.70865C21.6203 7.69609 21.7763 7.76068 21.8802 7.88238C22 8.02265 22 8.32556 22 8.93137V15.0686C22 15.6744 22 15.9774 21.8802 16.1176C21.7763 16.2393 21.6203 16.3039 21.4608 16.2914C21.2769 16.2769 21.0627 16.0627 20.6343 15.6343L17 12ZM17 12V9.8C17 8.11984 17 7.27976 16.673 6.63803C16.3854 6.07354 15.9265 5.6146 15.362 5.32698C14.7202 5 13.8802 5 12.2 5H9.5M2 2L22 22";
@@ -0,0 +1,21 @@
1
+ import Svg, { Path } from "react-native-svg";
2
+ import { colors } from "../../theme";
3
+ import type { IconProps } from "../types";
4
+ import { ZOOM_OUT_PATH } from "./zoomOutPath";
5
+
6
+ export { ZOOM_OUT_PATH } from "./zoomOutPath";
7
+
8
+ /** Exit-fullscreen / zoom-out corners control (24×24 viewBox). */
9
+ export function ZoomOutIcon({ size = 24, color = colors.primary, strokeWidth = 2 }: IconProps) {
10
+ return (
11
+ <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
12
+ <Path
13
+ d={ZOOM_OUT_PATH}
14
+ stroke={color}
15
+ strokeWidth={strokeWidth}
16
+ strokeLinecap="round"
17
+ strokeLinejoin="round"
18
+ />
19
+ </Svg>
20
+ );
21
+ }
@@ -0,0 +1 @@
1
+ export { ZoomOutIcon, ZOOM_OUT_PATH } from "./ZoomOutIcon";
@@ -0,0 +1,2 @@
1
+ export const ZOOM_OUT_PATH =
2
+ "M3 8H3.2C4.88016 8 5.72024 8 6.36197 7.67302C6.92646 7.3854 7.3854 6.92646 7.67302 6.36197C8 5.72024 8 4.88016 8 3.2V3M3 16H3.2C4.88016 16 5.72024 16 6.36197 16.327C6.92646 16.6146 7.3854 17.0735 7.67302 17.638C8 18.2798 8 19.1198 8 20.8V21M16 3V3.2C16 4.88016 16 5.72024 16.327 6.36197C16.6146 6.92646 17.0735 7.3854 17.638 7.67302C18.2798 8 19.1198 8 20.8 8H21M16 21V20.8C16 19.1198 16 18.2798 16.327 17.638C16.6146 17.0735 17.0735 16.6146 17.638 16.327C18.2798 16 19.1198 16 20.8 16H21";
@@ -11,11 +11,13 @@ export { AlertTriangleIcon } from "./AlertTriangle";
11
11
  export { AppleIcon } from "./Store";
12
12
  export { ArrowRightIcon } from "./ArrowRight";
13
13
  export { BagIcon } from "./Bag";
14
+ export { BanIcon } from "./Ban";
14
15
  export { BellIcon } from "./Bell";
15
16
  export { BuildingIcon } from "./Building";
16
17
  export { CalendarIcon } from "./Calendar";
17
18
  export { CalendarOutlineIcon } from "./CalendarOutline";
18
19
  export { CameraIcon } from "./Camera";
20
+ export { CameraFilledIcon } from "./CameraFilled";
19
21
  export { CheckIcon } from "./Check";
20
22
  export { CheckBadgeIcon } from "./CheckBadge";
21
23
  export { ChevronDownIcon } from "./ChevronDown";
@@ -45,10 +47,13 @@ export {
45
47
  export { QuietHoursIcon, NoSmokingIcon, PawIcon, TrashIcon } from "./HouseRules";
46
48
  export { FacebookIcon } from "./Facebook";
47
49
  export { FiltersIcon } from "./Filters";
50
+ export { FullscreenIcon } from "./Fullscreen";
48
51
  export { HeartIcon } from "./Heart";
52
+ export { HeadsetIcon } from "./Headset";
49
53
  export { GlobeIcon } from "./Globe";
50
54
  export { GooglePlayIcon } from "./Store";
51
55
  export { HelpCircleIcon } from "./HelpCircle";
56
+ export { HideIcon } from "./Hide";
52
57
  export { HomeIcon } from "./Home";
53
58
  export { InstagramIcon } from "./Instagram";
54
59
  export { KeyIcon } from "./Key";
@@ -64,6 +69,7 @@ export { MapViewIcon } from "./MapView";
64
69
  export { MapCollapseIcon, MapExpandIcon } from "./MapControls";
65
70
  export { MenuIcon } from "./Menu";
66
71
  export type { MenuIconProps } from "./Menu";
72
+ export { MenuLinesIcon } from "./MenuLines";
67
73
  export { NavigateIcon } from "./Navigate";
68
74
  export { PhoneIcon } from "./Phone";
69
75
  export { PlusIcon } from "./Plus";
@@ -80,4 +86,6 @@ export { StarFilledIcon } from "./StarFilled";
80
86
  export { UserIcon } from "./User";
81
87
  export { UsersAltIcon } from "./UsersAlt";
82
88
  export { VideoIcon } from "./Video";
89
+ export { VideoOffIcon } from "./VideoOff";
90
+ export { ZoomOutIcon } from "./ZoomOut";
83
91
  export type { StarIconProps } from "./Star";
@@ -2,11 +2,13 @@ import { ArrowRightIcon } from "./ArrowRight";
2
2
  import { AlertTriangleIcon } from "./AlertTriangle";
3
3
  import { AppleIcon, GooglePlayIcon } from "./Store";
4
4
  import { BagIcon } from "./Bag";
5
+ import { BanIcon } from "./Ban";
5
6
  import { BellIcon } from "./Bell";
6
7
  import { BuildingIcon } from "./Building";
7
8
  import { CalendarIcon } from "./Calendar";
8
9
  import { CalendarOutlineIcon } from "./CalendarOutline";
9
10
  import { CameraIcon } from "./Camera";
11
+ import { CameraFilledIcon } from "./CameraFilled";
10
12
  import { CheckIcon } from "./Check";
11
13
  import { CheckBadgeIcon } from "./CheckBadge";
12
14
  import { ChevronDownIcon } from "./ChevronDown";
@@ -36,9 +38,12 @@ import {
36
38
  import { NoSmokingIcon, PawIcon, QuietHoursIcon, TrashIcon } from "./HouseRules";
37
39
  import { FacebookIcon } from "./Facebook";
38
40
  import { FiltersIcon } from "./Filters";
41
+ import { FullscreenIcon } from "./Fullscreen";
39
42
  import { HeartIcon } from "./Heart";
43
+ import { HeadsetIcon } from "./Headset";
40
44
  import { GlobeIcon } from "./Globe";
41
45
  import { HelpCircleIcon } from "./HelpCircle";
46
+ import { HideIcon } from "./Hide";
42
47
  import { HomeIcon } from "./Home";
43
48
  import { InstagramIcon } from "./Instagram";
44
49
  import { KeyIcon } from "./Key";
@@ -53,6 +58,7 @@ import { MailIcon } from "./Mail";
53
58
  import { MapViewIcon } from "./MapView";
54
59
  import { MapCollapseIcon, MapExpandIcon } from "./MapControls";
55
60
  import { MenuIcon } from "./Menu";
61
+ import { MenuLinesIcon } from "./MenuLines";
56
62
  import { MinusIcon } from "./Minus";
57
63
  import { NavigateIcon } from "./Navigate";
58
64
  import { PhoneIcon } from "./Phone";
@@ -69,6 +75,8 @@ import { StarFilledIcon } from "./StarFilled";
69
75
  import { UserIcon } from "./User";
70
76
  import { UsersAltIcon } from "./UsersAlt";
71
77
  import { VideoIcon } from "./Video";
78
+ import { VideoOffIcon } from "./VideoOff";
79
+ import { ZoomOutIcon } from "./ZoomOut";
72
80
  import type { IconComponent } from "./types";
73
81
 
74
82
  export const icons = {
@@ -77,11 +85,13 @@ export const icons = {
77
85
  apple: AppleIcon,
78
86
  arrowRight: ArrowRightIcon,
79
87
  bag: BagIcon,
88
+ ban: BanIcon,
80
89
  bell: BellIcon,
81
90
  building: BuildingIcon,
82
91
  calendar: CalendarIcon,
83
92
  calendarOutline: CalendarOutlineIcon,
84
93
  camera: CameraIcon,
94
+ cameraFilled: CameraFilledIcon,
85
95
  check: CheckIcon,
86
96
  checkBadge: CheckBadgeIcon,
87
97
  checkSuccess: CheckSuccessIcon,
@@ -98,11 +108,14 @@ export const icons = {
98
108
  cardLocation: CardLocationIcon,
99
109
  facebook: FacebookIcon,
100
110
  filters: FiltersIcon,
111
+ fullscreen: FullscreenIcon,
101
112
  guests: GuestsIcon,
102
113
  heart: HeartIcon,
114
+ headset: HeadsetIcon,
103
115
  globe: GlobeIcon,
104
116
  googlePlay: GooglePlayIcon,
105
117
  helpCircle: HelpCircleIcon,
118
+ hide: HideIcon,
106
119
  home: HomeIcon,
107
120
  instagram: InstagramIcon,
108
121
  key: KeyIcon,
@@ -118,6 +131,7 @@ export const icons = {
118
131
  mapCollapse: MapCollapseIcon,
119
132
  mapExpand: MapExpandIcon,
120
133
  menu: MenuIcon,
134
+ menuLines: MenuLinesIcon,
121
135
  minus: MinusIcon,
122
136
  navigate: NavigateIcon,
123
137
  noSmoking: NoSmokingIcon,
@@ -143,7 +157,9 @@ export const icons = {
143
157
  user: UserIcon,
144
158
  usersAlt: UsersAltIcon,
145
159
  video: VideoIcon,
160
+ videoOff: VideoOffIcon,
146
161
  whatsApp: WhatsAppIcon,
162
+ zoomOut: ZoomOutIcon,
147
163
  } as const satisfies Record<string, IconComponent>;
148
164
 
149
165
  export type IconName = keyof typeof icons;
@@ -163,11 +179,14 @@ export const iconGroups = {
163
179
  "mapExpand",
164
180
  "mapView",
165
181
  "menu",
182
+ "menuLines",
166
183
  "navigate",
167
184
  ],
168
185
  actions: [
169
186
  "show",
187
+ "hide",
170
188
  "alertTriangle",
189
+ "ban",
171
190
  "bell",
172
191
  "camera",
173
192
  "key",
@@ -185,7 +204,10 @@ export const iconGroups = {
185
204
  "saveHeart",
186
205
  "share",
187
206
  "filters",
207
+ "fullscreen",
188
208
  "heart",
209
+ "headset",
210
+ "zoomOut",
189
211
  "star",
190
212
  "starFilled",
191
213
  "minus",
@@ -212,6 +234,7 @@ export const iconGroups = {
212
234
  "user",
213
235
  "usersAlt",
214
236
  "video",
237
+ "videoOff",
215
238
  "whatsApp",
216
239
  ],
217
240
  communication: ["mail", "phone"],