@kivid/native-components 1.0.0-alpha.6 → 1.0.0-alpha.8

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 (183) hide show
  1. package/dist/commonjs/components/Avatar/index.js +5 -4
  2. package/dist/commonjs/components/Avatar/index.js.map +1 -1
  3. package/dist/commonjs/components/ChatBubble/assets/class-variants.js +6 -6
  4. package/dist/commonjs/components/ChatBubble/assets/class-variants.js.map +1 -1
  5. package/dist/commonjs/components/ChatBubble/components/ChatBubbleSeal/index.js +5 -5
  6. package/dist/commonjs/components/ChatBubble/components/ChatBubbleSeal/index.js.map +1 -1
  7. package/dist/commonjs/components/ChatBubble/components/ChatBubbleText/index.js +4 -4
  8. package/dist/commonjs/components/ChatBubble/components/ChatBubbleText/index.js.map +1 -1
  9. package/dist/commonjs/components/ChatBubble/{context.js → contexts/ChatBubbleContext/index.js} +1 -1
  10. package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/index.js.map +1 -0
  11. package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/types.js +6 -0
  12. package/dist/commonjs/components/ChatBubble/contexts/ChatBubbleContext/types.js.map +1 -0
  13. package/dist/commonjs/components/ChatBubble/contexts/index.js +17 -0
  14. package/dist/commonjs/components/ChatBubble/contexts/index.js.map +1 -0
  15. package/dist/commonjs/components/ChatBubble/index.js +10 -9
  16. package/dist/commonjs/components/ChatBubble/index.js.map +1 -1
  17. package/dist/commonjs/components/IconButton/assets/class-variants.js +82 -0
  18. package/dist/commonjs/components/IconButton/assets/class-variants.js.map +1 -0
  19. package/dist/commonjs/components/IconButton/assets/design-system-showcase.js +119 -0
  20. package/dist/commonjs/components/IconButton/assets/design-system-showcase.js.map +1 -0
  21. package/dist/commonjs/components/IconButton/enums.js +33 -0
  22. package/dist/commonjs/components/IconButton/enums.js.map +1 -0
  23. package/dist/commonjs/components/IconButton/index.js +108 -0
  24. package/dist/commonjs/components/IconButton/index.js.map +1 -0
  25. package/dist/commonjs/components/IconButton/types.js +6 -0
  26. package/dist/commonjs/components/IconButton/types.js.map +1 -0
  27. package/dist/commonjs/components/ListButton/assets/class-variants.js +2 -10
  28. package/dist/commonjs/components/ListButton/assets/class-variants.js.map +1 -1
  29. package/dist/commonjs/components/ListButton/assets/design-system-showcase.js +424 -0
  30. package/dist/commonjs/components/ListButton/assets/design-system-showcase.js.map +1 -0
  31. package/dist/commonjs/components/ListButton/enums/index.js +0 -11
  32. package/dist/commonjs/components/ListButton/enums/index.js.map +1 -1
  33. package/dist/commonjs/components/ListButton/index.js +41 -36
  34. package/dist/commonjs/components/ListButton/index.js.map +1 -1
  35. package/dist/commonjs/components/OtpInput/assets/class-variant.js +1 -1
  36. package/dist/commonjs/components/OtpInput/assets/class-variant.js.map +1 -1
  37. package/dist/commonjs/components/OtpInput/components/InformationStatus/index.js +13 -11
  38. package/dist/commonjs/components/OtpInput/components/InformationStatus/index.js.map +1 -1
  39. package/dist/commonjs/components/OtpInput/enums/index.js +7 -8
  40. package/dist/commonjs/components/OtpInput/enums/index.js.map +1 -1
  41. package/dist/commonjs/components/OtpInput/index.js +66 -101
  42. package/dist/commonjs/components/OtpInput/index.js.map +1 -1
  43. package/dist/commonjs/components/PasswordInput/index.js +42 -0
  44. package/dist/commonjs/components/PasswordInput/index.js.map +1 -0
  45. package/dist/commonjs/components/PasswordInput/types.js +6 -0
  46. package/dist/commonjs/components/PasswordInput/types.js.map +1 -0
  47. package/dist/commonjs/components/TextInput/index.js +14 -3
  48. package/dist/commonjs/components/TextInput/index.js.map +1 -1
  49. package/dist/commonjs/components/Tooltip/index.js +44 -5
  50. package/dist/commonjs/components/Tooltip/index.js.map +1 -1
  51. package/dist/commonjs/components/index.js +33 -0
  52. package/dist/commonjs/components/index.js.map +1 -1
  53. package/dist/commonjs/iconography/Icons/index.js +1 -1
  54. package/dist/commonjs/iconography/Icons/index.js.map +1 -1
  55. package/dist/module/components/Avatar/index.js +5 -4
  56. package/dist/module/components/Avatar/index.js.map +1 -1
  57. package/dist/module/components/ChatBubble/assets/class-variants.js +6 -6
  58. package/dist/module/components/ChatBubble/assets/class-variants.js.map +1 -1
  59. package/dist/module/components/ChatBubble/components/ChatBubbleSeal/index.js +4 -4
  60. package/dist/module/components/ChatBubble/components/ChatBubbleSeal/index.js.map +1 -1
  61. package/dist/module/components/ChatBubble/components/ChatBubbleText/index.js +5 -4
  62. package/dist/module/components/ChatBubble/components/ChatBubbleText/index.js.map +1 -1
  63. package/dist/module/components/ChatBubble/{context.js → contexts/ChatBubbleContext/index.js} +1 -1
  64. package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/index.js.map +1 -0
  65. package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/types.js +4 -0
  66. package/dist/module/components/ChatBubble/contexts/ChatBubbleContext/types.js.map +1 -0
  67. package/dist/module/components/ChatBubble/contexts/index.js +4 -0
  68. package/dist/module/components/ChatBubble/contexts/index.js.map +1 -0
  69. package/dist/module/components/ChatBubble/index.js +9 -8
  70. package/dist/module/components/ChatBubble/index.js.map +1 -1
  71. package/dist/module/components/IconButton/assets/class-variants.js +79 -0
  72. package/dist/module/components/IconButton/assets/class-variants.js.map +1 -0
  73. package/dist/module/components/IconButton/assets/design-system-showcase.js +115 -0
  74. package/dist/module/components/IconButton/assets/design-system-showcase.js.map +1 -0
  75. package/dist/module/components/IconButton/enums.js +29 -0
  76. package/dist/module/components/IconButton/enums.js.map +1 -0
  77. package/dist/module/components/IconButton/index.js +103 -0
  78. package/dist/module/components/IconButton/index.js.map +1 -0
  79. package/dist/module/components/IconButton/types.js +4 -0
  80. package/dist/module/components/IconButton/types.js.map +1 -0
  81. package/dist/module/components/ListButton/assets/class-variants.js +2 -10
  82. package/dist/module/components/ListButton/assets/class-variants.js.map +1 -1
  83. package/dist/module/components/ListButton/assets/design-system-showcase.js +420 -0
  84. package/dist/module/components/ListButton/assets/design-system-showcase.js.map +1 -0
  85. package/dist/module/components/ListButton/enums/index.js +0 -1
  86. package/dist/module/components/ListButton/enums/index.js.map +1 -1
  87. package/dist/module/components/ListButton/index.js +44 -39
  88. package/dist/module/components/ListButton/index.js.map +1 -1
  89. package/dist/module/components/OtpInput/assets/class-variant.js +1 -1
  90. package/dist/module/components/OtpInput/assets/class-variant.js.map +1 -1
  91. package/dist/module/components/OtpInput/components/InformationStatus/index.js +15 -13
  92. package/dist/module/components/OtpInput/components/InformationStatus/index.js.map +1 -1
  93. package/dist/module/components/OtpInput/enums/index.js +6 -7
  94. package/dist/module/components/OtpInput/enums/index.js.map +1 -1
  95. package/dist/module/components/OtpInput/index.js +66 -101
  96. package/dist/module/components/OtpInput/index.js.map +1 -1
  97. package/dist/module/components/PasswordInput/index.js +37 -0
  98. package/dist/module/components/PasswordInput/index.js.map +1 -0
  99. package/dist/module/components/PasswordInput/types.js +4 -0
  100. package/dist/module/components/PasswordInput/types.js.map +1 -0
  101. package/dist/module/components/TextInput/index.js +14 -3
  102. package/dist/module/components/TextInput/index.js.map +1 -1
  103. package/dist/module/components/Tooltip/index.js +45 -6
  104. package/dist/module/components/Tooltip/index.js.map +1 -1
  105. package/dist/module/components/index.js +3 -0
  106. package/dist/module/components/index.js.map +1 -1
  107. package/dist/module/iconography/Icons/index.js +2 -2
  108. package/dist/module/iconography/Icons/index.js.map +1 -1
  109. package/dist/typescript/components/Avatar/types.d.ts +1 -0
  110. package/dist/typescript/components/ChatBubble/assets/class-variants.d.ts +1 -1
  111. package/dist/typescript/components/ChatBubble/components/ChatBubbleSeal/types.d.ts +1 -1
  112. package/dist/typescript/components/ChatBubble/components/ChatBubbleText/types.d.ts +1 -1
  113. package/dist/typescript/components/ChatBubble/contexts/ChatBubbleContext/index.d.ts +3 -0
  114. package/dist/typescript/components/ChatBubble/contexts/ChatBubbleContext/types.d.ts +6 -0
  115. package/dist/typescript/components/ChatBubble/contexts/index.d.ts +1 -0
  116. package/dist/typescript/components/ChatBubble/types.d.ts +2 -2
  117. package/dist/typescript/components/IconButton/assets/class-variants.d.ts +8 -0
  118. package/dist/typescript/components/IconButton/assets/design-system-showcase.d.ts +17 -0
  119. package/dist/typescript/components/IconButton/enums.d.ts +22 -0
  120. package/dist/typescript/components/IconButton/index.d.ts +2 -0
  121. package/dist/typescript/components/IconButton/types.d.ts +15 -0
  122. package/dist/typescript/components/ListButton/assets/class-variants.d.ts +1 -4
  123. package/dist/typescript/components/ListButton/assets/design-system-showcase.d.ts +14 -0
  124. package/dist/typescript/components/ListButton/enums/index.d.ts +0 -1
  125. package/dist/typescript/components/ListButton/types.d.ts +7 -5
  126. package/dist/typescript/components/OtpInput/components/InformationStatus/types.d.ts +2 -2
  127. package/dist/typescript/components/OtpInput/enums/index.d.ts +2 -3
  128. package/dist/typescript/components/OtpInput/index.d.ts +1 -1
  129. package/dist/typescript/components/OtpInput/types.d.ts +4 -4
  130. package/dist/typescript/components/PasswordInput/index.d.ts +2 -0
  131. package/dist/typescript/components/PasswordInput/types.d.ts +3 -0
  132. package/dist/typescript/components/TextInput/index.d.ts +1 -1
  133. package/dist/typescript/components/TextInput/types.d.ts +3 -0
  134. package/dist/typescript/components/Tooltip/components/Content/types.d.ts +1 -0
  135. package/dist/typescript/components/Tooltip/types.d.ts +2 -1
  136. package/dist/typescript/components/index.d.ts +6 -0
  137. package/package.json +5 -5
  138. package/src/components/Avatar/index.tsx +4 -4
  139. package/src/components/Avatar/types.ts +1 -0
  140. package/src/components/ChatBubble/assets/class-variants.ts +6 -6
  141. package/src/components/ChatBubble/components/ChatBubbleSeal/index.tsx +5 -4
  142. package/src/components/ChatBubble/components/ChatBubbleSeal/types.ts +1 -1
  143. package/src/components/ChatBubble/components/ChatBubbleText/index.tsx +4 -3
  144. package/src/components/ChatBubble/components/ChatBubbleText/types.ts +1 -1
  145. package/src/components/ChatBubble/{context.tsx → contexts/ChatBubbleContext/index.tsx} +1 -10
  146. package/src/components/ChatBubble/contexts/ChatBubbleContext/types.ts +11 -0
  147. package/src/components/ChatBubble/contexts/index.ts +1 -0
  148. package/src/components/ChatBubble/index.tsx +12 -10
  149. package/src/components/ChatBubble/types.ts +2 -3
  150. package/src/components/IconButton/assets/class-variants.ts +126 -0
  151. package/src/components/IconButton/assets/design-system-showcase.ts +246 -0
  152. package/src/components/IconButton/enums.ts +26 -0
  153. package/src/components/IconButton/index.tsx +124 -0
  154. package/src/components/IconButton/types.ts +22 -0
  155. package/src/components/ListButton/assets/class-variants.ts +2 -11
  156. package/src/components/ListButton/assets/design-system-showcase.ts +502 -0
  157. package/src/components/ListButton/enums/index.ts +0 -1
  158. package/src/components/ListButton/index.tsx +44 -41
  159. package/src/components/ListButton/types.ts +7 -5
  160. package/src/components/OtpInput/assets/class-variant.ts +1 -1
  161. package/src/components/OtpInput/components/InformationStatus/index.tsx +15 -14
  162. package/src/components/OtpInput/components/InformationStatus/types.ts +2 -2
  163. package/src/components/OtpInput/enums/index.ts +1 -2
  164. package/src/components/OtpInput/index.tsx +77 -136
  165. package/src/components/OtpInput/types.ts +4 -4
  166. package/src/components/PasswordInput/index.tsx +37 -0
  167. package/src/components/PasswordInput/types.ts +4 -0
  168. package/src/components/TextInput/index.tsx +17 -3
  169. package/src/components/TextInput/types.ts +3 -0
  170. package/src/components/Tooltip/components/Content/types.ts +1 -0
  171. package/src/components/Tooltip/index.tsx +57 -5
  172. package/src/components/Tooltip/types.ts +2 -1
  173. package/src/components/index.ts +8 -0
  174. package/src/iconography/Icons/index.tsx +2 -3
  175. package/dist/commonjs/components/ChatBubble/context.js.map +0 -1
  176. package/dist/commonjs/components/ListButton/enums/icon-color.js +0 -18
  177. package/dist/commonjs/components/ListButton/enums/icon-color.js.map +0 -1
  178. package/dist/module/components/ChatBubble/context.js.map +0 -1
  179. package/dist/module/components/ListButton/enums/icon-color.js +0 -14
  180. package/dist/module/components/ListButton/enums/icon-color.js.map +0 -1
  181. package/dist/typescript/components/ChatBubble/context.d.ts +0 -8
  182. package/dist/typescript/components/ListButton/enums/icon-color.d.ts +0 -10
  183. package/src/components/ListButton/enums/icon-color.ts +0 -10
@@ -8,15 +8,15 @@ import { Button } from "../../../Button";
8
8
  import { HighlightedText } from "../../../HighlightedText";
9
9
  import LoadingDots from "../../../LoadingDots";
10
10
  import { Chip } from "../../../Chip";
11
- import { Text } from "react-native";
11
+ import { Text, View } from "react-native";
12
12
  import { ChipVariantEnum } from "../../../Chip/enums";
13
13
  import { SealVariantEnum } from "../../../Seal/enums";
14
- import { InformationStatusEnum } from "../../enums";
14
+ import { OTPInputInformationStatusEnum } from "../../enums";
15
15
  import { SizeEnum, CornersEnum } from "../../../../enums";
16
16
 
17
17
  export function InformationStatus(props: InformationStatusProps) {
18
18
  const {
19
- status = InformationStatusEnum.DEFAULT,
19
+ status = OTPInputInformationStatusEnum.DEFAULT,
20
20
  disabled = false,
21
21
  onPress,
22
22
  } = props;
@@ -24,7 +24,7 @@ export function InformationStatus(props: InformationStatusProps) {
24
24
  const renderInformation = useMemo(() => {
25
25
  const textStyle = merge("", disabled && "opacity-50");
26
26
 
27
- if (status === InformationStatusEnum.DEFAULT) {
27
+ if (status === OTPInputInformationStatusEnum.DEFAULT) {
28
28
  return (
29
29
  <>
30
30
  <Button
@@ -47,7 +47,7 @@ export function InformationStatus(props: InformationStatusProps) {
47
47
  );
48
48
  }
49
49
 
50
- if (status === InformationStatusEnum.LOADING) {
50
+ if (status === OTPInputInformationStatusEnum.LOADING) {
51
51
  return (
52
52
  <>
53
53
  <LoadingDots variant="dark" />
@@ -61,25 +61,26 @@ export function InformationStatus(props: InformationStatusProps) {
61
61
  );
62
62
  }
63
63
 
64
- if (status === InformationStatusEnum.SUCCESS) {
64
+ if (status === OTPInputInformationStatusEnum.SUCCESS) {
65
65
  return (
66
- <>
67
- <Chip
68
- variant={ChipVariantEnum.OUTLINE}
69
- sealVariant={SealVariantEnum.SUCCESS}
70
- label="Confirmado"
71
- />
66
+ <View className="flex flex-col mt-600 gap-600 items-center">
72
67
  <HighlightedText
73
68
  highlightText="Código validado"
74
69
  text="com sucesso."
75
70
  reverse
76
71
  className={textStyle}
77
72
  />
78
- </>
73
+ <Chip
74
+ variant={ChipVariantEnum.OUTLINE}
75
+ sealVariant={SealVariantEnum.SUCCESS}
76
+ label="Confirmado"
77
+ className="max-w-fit"
78
+ />
79
+ </View>
79
80
  );
80
81
  }
81
82
 
82
- if (status === InformationStatusEnum.ERROR) {
83
+ if (status === OTPInputInformationStatusEnum.ERROR) {
83
84
  return (
84
85
  <>
85
86
  <Button
@@ -1,6 +1,6 @@
1
- import type { InformationStatusEnum } from "../../enums";
1
+ import type { OTPInputInformationStatusEnum } from "../../enums";
2
2
  export interface InformationStatusProps {
3
- status: InformationStatusEnum;
3
+ status: OTPInputInformationStatusEnum;
4
4
  disabled?: boolean;
5
5
  onPress?: () => void;
6
6
  }
@@ -1,7 +1,6 @@
1
- export enum InformationStatusEnum {
1
+ export enum OTPInputInformationStatusEnum {
2
2
  DEFAULT = "default",
3
3
  ERROR = "error",
4
4
  SUCCESS = "success",
5
5
  LOADING = "loading",
6
- COOLDOWN = "cooldown",
7
6
  }
@@ -1,175 +1,116 @@
1
1
  import { useRef, useState } from "react";
2
- import {
3
- View,
4
- TextInput,
5
- NativeSyntheticEvent,
6
- TextInputKeyPressEventData,
7
- Platform,
8
- TextInputFocusEventData,
9
- TextInputChangeEventData,
10
- } from "react-native";
11
- import type { OtpInputProps } from "./types";
2
+ import { OTPInputInformationStatusEnum } from "./enums";
3
+ import { OtpInputProps } from "./types";
4
+ import { TextInput, Text, View, Platform } from "react-native";
12
5
  import { merge } from "@kivid/tailwind-preset";
13
- import { InformationStatus } from "./components";
14
- import { InformationStatusEnum } from "./enums";
15
6
  import { inputVariants } from "./assets/class-variant";
7
+ import { InformationStatus } from "./components";
16
8
 
17
9
  export function OtpInput(props: OtpInputProps) {
18
10
  const {
19
- status = InformationStatusEnum.DEFAULT,
20
- OTPInputsQuantity = 6,
11
+ status = OTPInputInformationStatusEnum.DEFAULT,
12
+ length = 6,
21
13
  customInformation,
22
14
  rounded = false,
23
15
  disabled = false,
24
16
  inputClassName,
25
17
  onChange,
26
18
  onPressRetryToken,
19
+
27
20
  } = props;
21
+ const hasError = status === OTPInputInformationStatusEnum.ERROR;
22
+
23
+ const [code, setCode] = useState('');
28
24
 
29
- const inputsRef = useRef<Array<TextInput | null>>([]);
30
- const [inputValues, setInputValues] = useState<string[]>(
31
- Array(OTPInputsQuantity).fill("")
25
+ const textInputRef = useRef<TextInput>(null)
26
+ const codeDigitsArray = new Array(length).fill(0)
27
+
28
+ const inputStyle = merge(
29
+ inputVariants({ rounded, hasError, disabled }),
30
+ inputClassName
32
31
  );
33
- const hasError = status === InformationStatusEnum.ERROR;
34
32
 
35
- function handlePress() {
36
- const values = [...inputValues];
37
- const inputRefValuesJoined = values.join("");
33
+ const [inputContainerIsFocused, setInputContainerIsFocused] = useState(false)
38
34
 
39
- if (inputRefValuesJoined.length === OTPInputsQuantity) {
40
- onPressRetryToken?.(inputRefValuesJoined);
41
- }
35
+ function handleOnPress() {
36
+ setInputContainerIsFocused(true)
37
+ textInputRef.current?.focus()
42
38
  }
43
39
 
44
- const handleChange = (
45
- event: NativeSyntheticEvent<TextInputChangeEventData>,
46
- index: number
47
- ) => {
48
- const text = event.nativeEvent.text;
49
- const newValues = [...inputValues];
50
-
51
- if (text.length > 1) {
52
- const chars = text.split("");
53
- let targetIndex = index;
54
- chars.forEach((char) => {
55
- if (targetIndex < OTPInputsQuantity) {
56
- newValues[targetIndex] = char;
57
- targetIndex++;
58
- }
59
- });
60
- setInputValues(newValues);
61
- onChange?.(newValues.join(""));
62
-
63
- const nextEmptyIndex = newValues.findIndex((value) => !value);
64
- if (nextEmptyIndex !== -1) {
65
- inputsRef.current[nextEmptyIndex]?.focus();
66
- } else {
67
- inputsRef.current[OTPInputsQuantity - 1]?.focus();
68
- }
69
- return;
70
- }
40
+ function handleOnBlur() {
41
+ setInputContainerIsFocused(false)
42
+ }
71
43
 
72
- newValues[index] = text;
73
- setInputValues(newValues);
74
- onChange?.(newValues.join(""));
44
+ function handleChangeText(text: string) {
45
+ const textInputQuantity = text.replace(/\s+/g, '').slice(0, length);
46
+ setCode(textInputQuantity);
75
47
 
76
- if (text && index < OTPInputsQuantity - 1) {
77
- const nextEmptyIndex = newValues.findIndex((v, i) => i > index && !v);
78
- if (nextEmptyIndex !== -1) {
79
- inputsRef.current[nextEmptyIndex]?.focus();
80
- }
81
- }
82
- };
83
-
84
- const handleKeyDown = (
85
- e: NativeSyntheticEvent<TextInputKeyPressEventData>,
86
- index: number
87
- ) => {
88
- if (e.nativeEvent.key === "Backspace") {
89
- const hasValueAhead = inputValues.slice(index + 1).some((value) => value);
90
-
91
- if (hasValueAhead) {
92
- const lastFilledIndex = [...inputValues]
93
- .map((value, i) => (value ? i : -1))
94
- .filter((i) => i !== -1)
95
- .pop();
96
-
97
- if (lastFilledIndex !== undefined) {
98
- inputsRef.current[lastFilledIndex]?.focus();
99
- }
100
- return;
101
- }
102
-
103
- if (inputValues[index]) {
104
- const newValues = [...inputValues];
105
- newValues[index] = "";
106
- setInputValues(newValues);
107
- }
108
- if (index > 0) {
109
- inputsRef.current[index - 1]?.focus();
110
- }
111
- }
112
- };
113
-
114
- const handleFocus = (
115
- event: NativeSyntheticEvent<TextInputFocusEventData>,
116
- index: number
117
- ) => {
118
- const firstEmptyIndex = inputValues.findIndex((value) => !value);
119
-
120
- if (firstEmptyIndex !== -1 && index > firstEmptyIndex) {
121
- inputsRef.current[firstEmptyIndex]?.focus();
122
- event.preventDefault();
123
- return;
48
+ if (textInputQuantity.length === length) {
49
+ onChange?.(textInputQuantity);
124
50
  }
51
+ }
125
52
 
126
- if (firstEmptyIndex === -1 && index < OTPInputsQuantity - 1) {
127
- inputsRef.current[OTPInputsQuantity - 1]?.focus();
128
- event.preventDefault();
53
+ function handleInformationStatusOnPress() {
54
+ if (code.length === length) {
55
+ onPressRetryToken?.(code);
129
56
  }
130
- };
57
+ }
58
+
131
59
 
132
60
  function renderInformationStatus() {
133
61
  if (customInformation) {
134
62
  return <>{customInformation}</>;
135
63
  }
136
64
 
137
- return <InformationStatus status={status} onPress={handlePress} />;
65
+ return <InformationStatus status={status} onPress={handleInformationStatusOnPress} />;
138
66
  }
139
67
 
140
- const inputStyle = merge(
141
- inputVariants({ rounded, hasError, disabled }),
142
- inputClassName
143
- );
68
+ function renderDigit(_value: string, index: number) {
69
+ const isCurrentDigit = index === code.length;
70
+ const isLastDigit = index === length - 1;
71
+ const isCodeFull = code.length === length;
72
+
73
+ const isDigitFocused = isCurrentDigit && inputContainerIsFocused || (isLastDigit && isCodeFull && inputContainerIsFocused)
74
+
75
+ return (
76
+ <Text
77
+ key={index}
78
+ className={inputStyle}
79
+ style={{
80
+ ...(isDigitFocused ? { borderColor: '#98A3A3' } : {}),
81
+ ...(code[index] ? {} : { color: '#98A3A3' })
82
+ }}
83
+ >
84
+ {code[index] ?? "•"}
85
+ </Text>
86
+ )
87
+ }
144
88
 
145
89
  return (
146
- <View className="flex flex-col items-center gap-600">
147
- <View className="flex-row gap-300 max-w-[280px] items-center justify-between">
148
- {Array.from({ length: OTPInputsQuantity }).map((_, i) => (
149
- <TextInput
150
- ref={(ref) => {
151
- inputsRef.current[i] = ref;
152
- }}
153
- key={`otp-input-${i}`}
154
- textContentType="oneTimeCode"
155
- placeholder="_"
156
- className={inputStyle}
157
- autoComplete={
158
- Platform.OS === "android" ? "sms-otp" : "one-time-code"
159
- }
160
- placeholderTextColor="#DEE7E7"
161
- editable={!disabled}
162
- value={inputValues[i]}
163
- onChange={(e) => handleChange(e, i)}
164
- onKeyPress={(e) => handleKeyDown(e, i)}
165
- onFocus={(e) => handleFocus(e, i)}
166
- />
167
- ))}
90
+ <View className='flex-col gap-300 max-w-[280px] items-center justify-between'>
91
+ <View className='w-full flex-row justify-around gap-400'>
92
+ {codeDigitsArray.map(renderDigit)}
168
93
  </View>
169
-
94
+ <TextInput
95
+ className='w-full h-1000 absolute text-transparent'
96
+ value={code}
97
+ onChangeText={handleChangeText}
98
+ maxLength={length}
99
+ editable={!disabled}
100
+ returnKeyType="done"
101
+ textContentType='oneTimeCode'
102
+ ref={textInputRef}
103
+ onBlur={handleOnBlur}
104
+ onPress={handleOnPress}
105
+ caretHidden={true}
106
+ autoComplete={
107
+ Platform.OS === "android" ? "sms-otp" : "one-time-code"
108
+ }
109
+ />
170
110
  {renderInformationStatus()}
171
111
  </View>
172
- );
112
+
113
+ )
173
114
  }
174
115
 
175
- export default OtpInput;
116
+ export default OtpInput;
@@ -1,13 +1,13 @@
1
1
  import type React from "react";
2
- import type { InformationStatusEnum } from "./enums";
2
+ import { OTPInputInformationStatusEnum } from "./enums";
3
3
 
4
4
  export interface OtpInputProps {
5
- OTPInputsQuantity?: number;
5
+ length?: number;
6
6
  rounded?: boolean;
7
7
  disabled?: boolean;
8
- status?: InformationStatusEnum;
8
+ status?: OTPInputInformationStatusEnum;
9
9
  customInformation?: React.ReactNode;
10
- onChange: (value: string) => void;
10
+ onChange: (value?: string) => void;
11
11
  onPressRetryToken?: (value: string) => void;
12
12
  inputClassName?: string;
13
13
  }
@@ -0,0 +1,37 @@
1
+ import { useState } from "react";
2
+ import TextInput from "../TextInput";
3
+ import { IconButton } from "../IconButton";
4
+ import { PasswordInputProps } from "./types";
5
+ import { Eye, EyeOff } from "@kivid/icons/native";
6
+ import { IconButtonVariantEnum } from "../IconButton/enums";
7
+
8
+ export function PasswordInput(props: PasswordInputProps) {
9
+ const [shouldHidePassword, setShouldHidePassword] = useState(true);
10
+
11
+ function toogleHidePassword() {
12
+ setShouldHidePassword(!shouldHidePassword);
13
+ }
14
+
15
+ function renderIcon() {
16
+ if (shouldHidePassword) {
17
+ return <Eye size={24} className="text-chia-900" />;
18
+ }
19
+
20
+ return <EyeOff size={24} className="text-chia-900" />;
21
+ }
22
+
23
+ return (
24
+ <TextInput
25
+ {...props}
26
+ secureTextEntry={shouldHidePassword}
27
+ rightIcon={
28
+ <IconButton
29
+ onPress={toogleHidePassword}
30
+ accessibilityLabel="Toggle Password Visibility"
31
+ variant={IconButtonVariantEnum.GHOST}
32
+ icon={renderIcon()}
33
+ />
34
+ }
35
+ />
36
+ );
37
+ }
@@ -0,0 +1,4 @@
1
+ import { TextInputProps } from "../TextInput/types";
2
+
3
+ export interface PasswordInputProps
4
+ extends Omit<TextInputProps, "secureTextEntry"> {}
@@ -31,6 +31,9 @@ export function TextInput({
31
31
  containerTestID,
32
32
  ref,
33
33
  tooltipClassName = "",
34
+ tooltipPointerClassName,
35
+ tooltipContainerClassName,
36
+ rightIcon,
34
37
  ...rest
35
38
  }: TextInputProps) {
36
39
  const inputRef = useRef<RNTextInput>(null);
@@ -52,6 +55,14 @@ export function TextInput({
52
55
  );
53
56
  };
54
57
 
58
+ const renderRightIcon = () => {
59
+ if (rightIcon) {
60
+ return rightIcon;
61
+ }
62
+
63
+ return renderSeal();
64
+ };
65
+
55
66
  const handleChangeText = (text: string) => {
56
67
  onChangeText?.(text);
57
68
  };
@@ -70,10 +81,12 @@ export function TextInput({
70
81
 
71
82
  return (
72
83
  <Tooltip
73
- isVisible={hasError}
74
- message="This is a error"
84
+ isOpenedByVariantError={hasError}
85
+ message={error}
75
86
  variant={TooltipVariantEnum.ERROR}
76
87
  className={tooltipClassName}
88
+ pointerClassName={tooltipPointerClassName}
89
+ containerClassName={tooltipContainerClassName}
77
90
  >
78
91
  <Pressable
79
92
  testID={containerTestID}
@@ -134,7 +147,8 @@ export function TextInput({
134
147
  }}
135
148
  />
136
149
  </View>
137
- {renderSeal()}
150
+
151
+ {renderRightIcon()}
138
152
  </Pressable>
139
153
  </Tooltip>
140
154
  );
@@ -19,6 +19,9 @@ export interface TextInputProps
19
19
  labelClassName?: string;
20
20
  containerTestID?: string;
21
21
  tooltipClassName?: string;
22
+ tooltipPointerClassName?: string;
23
+ tooltipContainerClassName?: string;
24
+ rightIcon?: React.ReactNode;
22
25
  onChangeText?: (text: string) => void;
23
26
  ref?: React.RefObject<RNTextInput | null>;
24
27
  }
@@ -11,4 +11,5 @@ export interface ContentProps {
11
11
  onLayout?: (event: LayoutChangeEvent) => void;
12
12
  translateX?: number;
13
13
  pointerOffset?: TooltipPointerOffsetEnum;
14
+ onChangeVisibility?: (isVisible: boolean) => void;
14
15
  }
@@ -1,38 +1,90 @@
1
- import { View } from "react-native";
1
+ import { View, Pressable } from "react-native";
2
2
  import { Content } from "./components";
3
3
  import { useTooltipPosition } from "./hooks";
4
4
  import { TooltipProps } from "./types";
5
5
 
6
6
  import { TooltipVariantEnum } from "./enum";
7
+ import { useState, useCallback, cloneElement, isValidElement, ReactElement } from "react";
7
8
 
8
9
  export function Tooltip(props: TooltipProps) {
9
10
  const {
10
11
  children,
11
12
  message,
12
13
  variant = TooltipVariantEnum.TRIGGER,
13
- isVisible,
14
14
  className,
15
15
  containerClassName,
16
16
  pointerClassName,
17
+ isOpenedByVariantError,
18
+ onChangeVisibility
17
19
  } = props;
18
20
  const { positionData, onTriggerLayout, onTooltipLayout } =
19
21
  useTooltipPosition();
20
22
 
23
+ const [isVisible, setIsVisible] = useState(false);
24
+
25
+ const handleVisibilityChange = useCallback((visible: boolean) => {
26
+ setIsVisible(visible);
27
+ onChangeVisibility?.(visible);
28
+ }, [onChangeVisibility]);
29
+
30
+ const handleToggleVisibility = useCallback(() => {
31
+ const newVisibility = !isVisible;
32
+ handleVisibilityChange(newVisibility);
33
+ }, [isVisible, handleVisibilityChange]);
34
+
35
+ const renderTriggerContent = () => {
36
+ if (variant !== TooltipVariantEnum.TRIGGER) {
37
+ return children;
38
+ }
39
+
40
+ if (isValidElement(children)) {
41
+ const child = children as ReactElement;
42
+ const childProps = child.props as any;
43
+
44
+ const componentType = child.type as any;
45
+ const componentName = (typeof componentType === 'function'
46
+ ? componentType.displayName || componentType.name
47
+ : componentType) || '';
48
+ const isButton = componentName === 'Button' ||
49
+ componentName === 'Pressable' ||
50
+ componentName === 'TouchableOpacity';
51
+
52
+ if (isButton || (childProps && typeof childProps.onPress === 'function')) {
53
+ return cloneElement(child, {
54
+ ...childProps,
55
+ onPress: (...args: any[]) => {
56
+ if (typeof childProps.onPress === 'function') {
57
+ childProps.onPress(...args);
58
+ handleToggleVisibility();
59
+ }
60
+ }
61
+ })
62
+ }
63
+ }
64
+
65
+ return (
66
+ <Pressable onPress={handleToggleVisibility}>
67
+ {children}
68
+ </Pressable>
69
+ );
70
+ };
71
+
21
72
  return (
22
73
  <View className="relative" onLayout={onTriggerLayout}>
23
- {children}
74
+ {renderTriggerContent()}
24
75
 
25
76
  <Content
26
77
  message={message}
27
78
  variant={variant}
28
- isVisible={isVisible}
79
+ isVisible={variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError}
29
80
  onLayout={onTooltipLayout}
30
81
  translateX={positionData.adjustedPosition.translateX}
31
82
  pointerOffset={positionData.pointerOffset}
32
83
  className={className}
33
84
  containerClassName={containerClassName}
34
85
  pointerClassName={pointerClassName}
86
+ onChangeVisibility={handleVisibilityChange}
35
87
  />
36
88
  </View>
37
89
  );
38
- }
90
+ }
@@ -8,6 +8,7 @@ export interface TooltipProps {
8
8
  className?: string;
9
9
  pointerClassName?: string;
10
10
  containerClassName?: string;
11
- isVisible: boolean;
12
11
  style?: ViewStyle;
12
+ onChangeVisibility?: (isVisible: boolean) => void;
13
+ isOpenedByVariantError?: boolean;
13
14
  }
@@ -4,6 +4,7 @@ export type * from "./Button/types";
4
4
 
5
5
  export * from "./ChatBubble";
6
6
  export type * from "./ChatBubble/types";
7
+ export type * from "./ChatBubble/contexts/ChatBubbleContext/types";
7
8
 
8
9
  export * from "./Chip";
9
10
  export * from "./Chip/types";
@@ -63,3 +64,10 @@ export * from "./SelectButton/enums";
63
64
  export * from "./RadioInput";
64
65
  export type * from "./RadioInput/types";
65
66
  export * from "./RadioInput/enums";
67
+
68
+ export * from "./IconButton";
69
+ export type * from "./IconButton/types";
70
+ export * from "./IconButton/enums";
71
+
72
+ export * from "./PasswordInput";
73
+ export type * from "./PasswordInput/types";
@@ -5,7 +5,6 @@ import {
5
5
  Alert,
6
6
  FlatList,
7
7
  Pressable,
8
- SafeAreaView,
9
8
  Text,
10
9
  TextInput,
11
10
  View,
@@ -36,7 +35,7 @@ export function Icons(props: IconsProps) {
36
35
  }
37
36
 
38
37
  return (
39
- <SafeAreaView className="m-16">
38
+ <View className="m-16">
40
39
  <TextInput
41
40
  placeholder="Pesquisar ícones..."
42
41
  placeholderTextColor="#98A3A3"
@@ -90,6 +89,6 @@ export function Icons(props: IconsProps) {
90
89
  </View>
91
90
  )}
92
91
  />
93
- </SafeAreaView>
92
+ </View>
94
93
  );
95
94
  }
@@ -1 +0,0 @@
1
- {"version":3,"names":["_react","require","ChatBubbleContext","exports","createContext","useChatBubbleContext","context","useContext","Error"],"sourceRoot":"../../../../src","sources":["components/ChatBubble/context.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAaO,MAAMC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,gBAAG,IAAAE,oBAAa,EAC5C,IACF,CAAC;AAEM,MAAMC,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACL,iBAAiB,CAAC;EAC7C,IAAI,CAACI,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CACb,iEACF,CAAC;EACH;EACA,OAAOF,OAAO;AAChB,CAAC;AAACH,OAAA,CAAAE,oBAAA,GAAAA,oBAAA","ignoreList":[]}
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.ListButtonIconColorEnum = void 0;
7
- let ListButtonIconColorEnum = exports.ListButtonIconColorEnum = /*#__PURE__*/function (ListButtonIconColorEnum) {
8
- ListButtonIconColorEnum["GRAPE"] = "grape";
9
- ListButtonIconColorEnum["JAVA"] = "java";
10
- ListButtonIconColorEnum["PEAR"] = "pear";
11
- ListButtonIconColorEnum["TANGERINE"] = "tangerine";
12
- ListButtonIconColorEnum["PITAYA"] = "pitaya";
13
- ListButtonIconColorEnum["BLACKBERRY"] = "blackberry";
14
- ListButtonIconColorEnum["CHIA"] = "chia";
15
- ListButtonIconColorEnum["GHOST"] = "ghost";
16
- return ListButtonIconColorEnum;
17
- }({});
18
- //# sourceMappingURL=icon-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["ListButtonIconColorEnum","exports"],"sourceRoot":"../../../../../src","sources":["components/ListButton/enums/icon-color.ts"],"mappings":";;;;;;IAAYA,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,0BAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA","ignoreList":[]}
@@ -1 +0,0 @@
1
- {"version":3,"names":["createContext","useContext","ChatBubbleContext","useChatBubbleContext","context","Error"],"sourceRoot":"../../../../src","sources":["components/ChatBubble/context.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAajD,OAAO,MAAMC,iBAAiB,gBAAGF,aAAa,CAC5C,IACF,CAAC;AAED,OAAO,MAAMG,oBAAoB,GAAGA,CAAA,KAAM;EACxC,MAAMC,OAAO,GAAGH,UAAU,CAACC,iBAAiB,CAAC;EAC7C,IAAI,CAACE,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CACb,iEACF,CAAC;EACH;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}
@@ -1,14 +0,0 @@
1
- "use strict";
2
-
3
- export let ListButtonIconColorEnum = /*#__PURE__*/function (ListButtonIconColorEnum) {
4
- ListButtonIconColorEnum["GRAPE"] = "grape";
5
- ListButtonIconColorEnum["JAVA"] = "java";
6
- ListButtonIconColorEnum["PEAR"] = "pear";
7
- ListButtonIconColorEnum["TANGERINE"] = "tangerine";
8
- ListButtonIconColorEnum["PITAYA"] = "pitaya";
9
- ListButtonIconColorEnum["BLACKBERRY"] = "blackberry";
10
- ListButtonIconColorEnum["CHIA"] = "chia";
11
- ListButtonIconColorEnum["GHOST"] = "ghost";
12
- return ListButtonIconColorEnum;
13
- }({});
14
- //# sourceMappingURL=icon-color.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["ListButtonIconColorEnum"],"sourceRoot":"../../../../../src","sources":["components/ListButton/enums/icon-color.ts"],"mappings":";;AAAA,WAAYA,uBAAuB,0BAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAvBA,uBAAuB;EAAA,OAAvBA,uBAAuB;AAAA","ignoreList":[]}