@itilite/lumina-ui 1.1.5 → 1.1.7

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 (164) hide show
  1. package/dist/atom/LoadingSpinner/LoadingSpinner.d.mts +19 -0
  2. package/dist/atom/LoadingSpinner/LoadingSpinner.d.ts +19 -0
  3. package/dist/atom/LoadingSpinner/LoadingSpinner.js +90 -0
  4. package/dist/atom/LoadingSpinner/LoadingSpinner.mjs +9 -0
  5. package/dist/atom/RangePicker/RangePicker.js +266 -136
  6. package/dist/atom/RangePicker/RangePicker.mjs +4 -2
  7. package/dist/atom/Select/Select.d.mts +6 -3
  8. package/dist/atom/Select/Select.d.ts +6 -3
  9. package/dist/atom/Select/Select.js +214 -91
  10. package/dist/atom/Select/Select.mjs +3 -1
  11. package/dist/atom/Slider/Slider.d.mts +34 -0
  12. package/dist/atom/Slider/Slider.d.ts +34 -0
  13. package/dist/atom/Slider/Slider.js +107 -0
  14. package/dist/atom/Slider/Slider.mjs +9 -0
  15. package/dist/chunk-22VF7AVT.mjs +618 -0
  16. package/dist/chunk-2BNAAOBU.mjs +670 -0
  17. package/dist/chunk-2IMRLK6M.mjs +44 -0
  18. package/dist/chunk-2JIINZEK.mjs +618 -0
  19. package/dist/chunk-2LBFKQDZ.mjs +660 -0
  20. package/dist/chunk-2ZJBF5C4.mjs +618 -0
  21. package/dist/chunk-3IMCN4K3.mjs +670 -0
  22. package/dist/chunk-3KBQQCET.mjs +674 -0
  23. package/dist/chunk-3KUHXNFH.mjs +678 -0
  24. package/dist/chunk-3PPNOIXN.mjs +618 -0
  25. package/dist/chunk-3XFY3TXJ.mjs +611 -0
  26. package/dist/chunk-3XW7HS5W.mjs +618 -0
  27. package/dist/chunk-447HZYZ4.mjs +612 -0
  28. package/dist/chunk-46F3B4U6.mjs +618 -0
  29. package/dist/chunk-4K5RZHL4.mjs +618 -0
  30. package/dist/chunk-4QHFP4YD.mjs +666 -0
  31. package/dist/chunk-4TFX4DHY.mjs +702 -0
  32. package/dist/chunk-4TWO6JES.mjs +666 -0
  33. package/dist/chunk-4UQVJ3ZU.mjs +666 -0
  34. package/dist/chunk-5247J65D.mjs +670 -0
  35. package/dist/chunk-66H5WSEJ.mjs +618 -0
  36. package/dist/chunk-6OC6URNL.mjs +73 -0
  37. package/dist/chunk-6OGEXG5U.mjs +618 -0
  38. package/dist/chunk-6ROQXYVN.mjs +672 -0
  39. package/dist/chunk-6WNI6X5Q.mjs +618 -0
  40. package/dist/chunk-72PPCN6D.mjs +675 -0
  41. package/dist/chunk-74EGXFNN.mjs +618 -0
  42. package/dist/chunk-77NCDGJA.mjs +707 -0
  43. package/dist/chunk-7L3WTWF3.mjs +677 -0
  44. package/dist/chunk-7NGBIPZT.mjs +618 -0
  45. package/dist/chunk-7NM4FNMQ.mjs +666 -0
  46. package/dist/chunk-7YBBSVUA.mjs +672 -0
  47. package/dist/chunk-7Z52UP7P.mjs +618 -0
  48. package/dist/chunk-B3LDL3KD.mjs +670 -0
  49. package/dist/chunk-B63IXC6M.mjs +618 -0
  50. package/dist/chunk-B65LGQ47.mjs +666 -0
  51. package/dist/chunk-B6MTRO54.mjs +618 -0
  52. package/dist/chunk-BJBP5XYB.mjs +618 -0
  53. package/dist/chunk-BLLSWPCC.mjs +618 -0
  54. package/dist/chunk-BOYB7REJ.mjs +670 -0
  55. package/dist/chunk-BP2D64XI.mjs +618 -0
  56. package/dist/chunk-BRT5IPGQ.mjs +618 -0
  57. package/dist/chunk-C2J3VBFZ.mjs +670 -0
  58. package/dist/chunk-CDOR7GQP.mjs +618 -0
  59. package/dist/chunk-CI2RMA4V.mjs +612 -0
  60. package/dist/chunk-CNUIZOQJ.mjs +669 -0
  61. package/dist/chunk-CPBXPEST.mjs +672 -0
  62. package/dist/chunk-CVOLXLMU.mjs +618 -0
  63. package/dist/chunk-CWUCNC36.mjs +666 -0
  64. package/dist/chunk-CZBGN6GS.mjs +612 -0
  65. package/dist/chunk-D3APB62N.mjs +618 -0
  66. package/dist/chunk-D3N7VFER.mjs +73 -0
  67. package/dist/chunk-D7TWXVL2.mjs +674 -0
  68. package/dist/chunk-DAZ53AD7.mjs +671 -0
  69. package/dist/chunk-DBY5U6IU.mjs +618 -0
  70. package/dist/chunk-DXTVU4M5.mjs +618 -0
  71. package/dist/chunk-DZBTD6QK.mjs +666 -0
  72. package/dist/chunk-EAK2IMM4.mjs +37 -0
  73. package/dist/chunk-EQT2Q2LW.mjs +610 -0
  74. package/dist/chunk-EWMCELQV.mjs +670 -0
  75. package/dist/chunk-EYKWBEHX.mjs +612 -0
  76. package/dist/chunk-FHLCFUP6.mjs +666 -0
  77. package/dist/chunk-FMPFLQZV.mjs +670 -0
  78. package/dist/chunk-G25YXZ74.mjs +618 -0
  79. package/dist/chunk-GSG6ZC3R.mjs +37 -0
  80. package/dist/chunk-H3MQUFTJ.mjs +618 -0
  81. package/dist/chunk-HKZRLVBX.mjs +618 -0
  82. package/dist/chunk-HQALJGVT.mjs +618 -0
  83. package/dist/chunk-I5GBZ3UX.mjs +676 -0
  84. package/dist/chunk-IQHBVGA4.mjs +677 -0
  85. package/dist/chunk-IV4V55OA.mjs +672 -0
  86. package/dist/chunk-J2RAFKAD.mjs +618 -0
  87. package/dist/chunk-JL34UFI7.mjs +670 -0
  88. package/dist/chunk-JTKSGGQM.mjs +611 -0
  89. package/dist/chunk-JZC2RRDH.mjs +618 -0
  90. package/dist/chunk-K3Y7VKT6.mjs +670 -0
  91. package/dist/chunk-KEVXNUFG.mjs +672 -0
  92. package/dist/chunk-KRYAP7NG.mjs +670 -0
  93. package/dist/chunk-KU655POK.mjs +657 -0
  94. package/dist/chunk-L55SLVNX.mjs +618 -0
  95. package/dist/chunk-LCRYOZEV.mjs +618 -0
  96. package/dist/chunk-LH7PP6V2.mjs +618 -0
  97. package/dist/chunk-LJMMYKE2.mjs +618 -0
  98. package/dist/chunk-LK5TROLL.mjs +666 -0
  99. package/dist/chunk-MDR7DAKM.mjs +618 -0
  100. package/dist/chunk-MJZLCWZ5.mjs +666 -0
  101. package/dist/chunk-MKZTEJLS.mjs +612 -0
  102. package/dist/chunk-MOD7MLCD.mjs +64 -0
  103. package/dist/chunk-MQCOQHHP.mjs +618 -0
  104. package/dist/chunk-MSM4KUBM.mjs +618 -0
  105. package/dist/chunk-MTIUER63.mjs +676 -0
  106. package/dist/chunk-NBLV3UX5.mjs +618 -0
  107. package/dist/chunk-NLADSOJS.mjs +618 -0
  108. package/dist/chunk-NPMTWR3Y.mjs +618 -0
  109. package/dist/chunk-NQ6GKEO7.mjs +670 -0
  110. package/dist/chunk-NZSFYNUK.mjs +618 -0
  111. package/dist/chunk-OANBDTKG.mjs +73 -0
  112. package/dist/chunk-OCNF4O5U.mjs +612 -0
  113. package/dist/chunk-OCW5QSWA.mjs +618 -0
  114. package/dist/chunk-OQF7JZFS.mjs +670 -0
  115. package/dist/chunk-OT675HGC.mjs +670 -0
  116. package/dist/chunk-P47TCYKN.mjs +618 -0
  117. package/dist/chunk-P7TOGXPI.mjs +672 -0
  118. package/dist/chunk-PCAXXEEQ.mjs +618 -0
  119. package/dist/chunk-PDHMG7OZ.mjs +672 -0
  120. package/dist/chunk-PFGVOZGM.mjs +618 -0
  121. package/dist/chunk-PQSSDK3E.mjs +618 -0
  122. package/dist/chunk-PST7W3NG.mjs +618 -0
  123. package/dist/chunk-QGPBZ2YV.mjs +664 -0
  124. package/dist/chunk-QKTMWS4J.mjs +43 -0
  125. package/dist/chunk-QOPCJITC.mjs +618 -0
  126. package/dist/chunk-QSE52CRC.mjs +618 -0
  127. package/dist/chunk-QTP2QMPL.mjs +669 -0
  128. package/dist/chunk-R47XX6IW.mjs +611 -0
  129. package/dist/chunk-RL6AEU6E.mjs +612 -0
  130. package/dist/chunk-T7T4HCHH.mjs +618 -0
  131. package/dist/chunk-TED2WCDG.mjs +618 -0
  132. package/dist/chunk-TJLIMMMB.mjs +612 -0
  133. package/dist/chunk-TNOJDLON.mjs +611 -0
  134. package/dist/chunk-TOR67IHH.mjs +672 -0
  135. package/dist/chunk-TOV7NVKM.mjs +618 -0
  136. package/dist/chunk-TSYMIRRN.mjs +618 -0
  137. package/dist/chunk-TTSRI4V7.mjs +708 -0
  138. package/dist/chunk-UBS3DTE5.mjs +672 -0
  139. package/dist/chunk-UBW6RYVF.mjs +670 -0
  140. package/dist/chunk-UJNUFKR5.mjs +43 -0
  141. package/dist/chunk-VAZZJOSJ.mjs +618 -0
  142. package/dist/chunk-VCWXOX2B.mjs +618 -0
  143. package/dist/chunk-VHCLEOHZ.mjs +618 -0
  144. package/dist/chunk-VTZSCGME.mjs +666 -0
  145. package/dist/chunk-W33KZ2XR.mjs +618 -0
  146. package/dist/chunk-WOVMTYDV.mjs +612 -0
  147. package/dist/chunk-WR3USBWK.mjs +672 -0
  148. package/dist/chunk-WXYQARQ6.mjs +618 -0
  149. package/dist/chunk-XSDANHCE.mjs +618 -0
  150. package/dist/chunk-Y6XKW4NG.mjs +618 -0
  151. package/dist/chunk-YQSNJFZE.mjs +618 -0
  152. package/dist/chunk-Z6VG6AG7.mjs +678 -0
  153. package/dist/chunk-ZAPKQ4C3.mjs +678 -0
  154. package/dist/chunk-ZCWDQNHL.mjs +618 -0
  155. package/dist/chunk-ZF5JBNCI.mjs +618 -0
  156. package/dist/chunk-ZN7BHWOF.mjs +672 -0
  157. package/dist/chunk-ZUQJKA5J.mjs +666 -0
  158. package/dist/chunk-ZWHWIGYQ.mjs +618 -0
  159. package/dist/index.d.mts +3 -0
  160. package/dist/index.d.ts +3 -0
  161. package/dist/index.js +299 -136
  162. package/dist/index.mjs +21 -13
  163. package/dist/styles.css +288 -181
  164. package/package.json +3 -2
@@ -0,0 +1,666 @@
1
+ import {
2
+ Tooltip_default
3
+ } from "./chunk-MLCMZRUC.mjs";
4
+ import {
5
+ LoadingSpinner_default
6
+ } from "./chunk-QKTMWS4J.mjs";
7
+ import {
8
+ __objRest,
9
+ __spreadProps,
10
+ __spreadValues
11
+ } from "./chunk-FWCSY2DS.mjs";
12
+
13
+ // src/atom/Select/Select.tsx
14
+ import { memo as memo3, useCallback, useEffect, useMemo, useRef, useState } from "react";
15
+ import clsx from "clsx";
16
+
17
+ // src/icons/Chevron.tsx
18
+ import * as React from "react";
19
+ import { jsx } from "react/jsx-runtime";
20
+ var Chevron = React.memo(
21
+ (_a) => {
22
+ var _b = _a, { size = 16, color = "#6b7280", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
23
+ return /* @__PURE__ */ jsx(
24
+ "svg",
25
+ __spreadProps(__spreadValues({
26
+ xmlns: "http://www.w3.org/2000/svg",
27
+ width: size,
28
+ height: size,
29
+ fill: "none",
30
+ viewBox: "0 0 16 16",
31
+ className
32
+ }, rest), {
33
+ children: /* @__PURE__ */ jsx(
34
+ "path",
35
+ {
36
+ fill: color,
37
+ d: "M11.78 6.22a.75.75 0 00-1.06 0L8 8.94 5.28 6.22a.75.75 0 00-1.06 1.06l3.25 3.25a.75.75 0 001.06 0l3.25-3.25a.75.75 0 000-1.06z"
38
+ }
39
+ )
40
+ })
41
+ );
42
+ }
43
+ );
44
+ Chevron.displayName = "Chevron";
45
+
46
+ // src/icons/CrossV2.tsx
47
+ import * as React2 from "react";
48
+ import { jsx as jsx2 } from "react/jsx-runtime";
49
+ var CrossV2 = React2.memo(
50
+ (_a) => {
51
+ var _b = _a, { size = 16, color = "#111827", className } = _b, rest = __objRest(_b, ["size", "color", "className"]);
52
+ return /* @__PURE__ */ jsx2(
53
+ "svg",
54
+ __spreadProps(__spreadValues({
55
+ xmlns: "http://www.w3.org/2000/svg",
56
+ width: size,
57
+ height: size,
58
+ fill: "none",
59
+ viewBox: "0 0 16 16",
60
+ className
61
+ }, rest), {
62
+ children: /* @__PURE__ */ jsx2(
63
+ "path",
64
+ {
65
+ fill: color,
66
+ fillRule: "evenodd",
67
+ d: "M4.293 4.293a1 1 0 011.414 0L8 6.586l2.293-2.293a1 1 0 111.414 1.414L9.414 8l2.293 2.293a1 1 0 01-1.414 1.414L8 9.414l-2.293 2.293a1 1 0 01-1.414-1.414L6.586 8 4.293 5.707a1 1 0 010-1.414z",
68
+ clipRule: "evenodd"
69
+ }
70
+ )
71
+ })
72
+ );
73
+ }
74
+ );
75
+ CrossV2.displayName = "CrossV2";
76
+
77
+ // src/icons/Lock.tsx
78
+ import React3 from "react";
79
+ import { jsx as jsx3 } from "react/jsx-runtime";
80
+ var Lock = React3.memo((_a) => {
81
+ var _b = _a, { size = 16, color = "#000" } = _b, rest = __objRest(_b, ["size", "color"]);
82
+ return /* @__PURE__ */ jsx3(
83
+ "svg",
84
+ __spreadProps(__spreadValues({
85
+ xmlns: "http://www.w3.org/2000/svg",
86
+ width: size,
87
+ height: size,
88
+ fill: "none",
89
+ viewBox: "0 0 16 16"
90
+ }, rest), {
91
+ children: /* @__PURE__ */ jsx3(
92
+ "path",
93
+ {
94
+ fill: color,
95
+ d: "M9 9a1 1 0 11-2 0 1 1 0 012 0zM5 4h-.5A2.5 2.5 0 002 6.5v5A2.5 2.5 0 004.5 14h7a2.5 2.5 0 002.5-2.5v-5A2.5 2.5 0 0011.5 4H11v-.5a3 3 0 00-6 0V4zm1-.5a2 2 0 114 0V4H6v-.5zM11.5 5A1.5 1.5 0 0113 6.5v5a1.5 1.5 0 01-1.5 1.5h-7A1.5 1.5 0 013 11.5v-5A1.5 1.5 0 014.5 5h7z"
96
+ }
97
+ )
98
+ })
99
+ );
100
+ });
101
+
102
+ // src/atom/Select/Select.tsx
103
+ import { jsx as jsx4, jsxs } from "react/jsx-runtime";
104
+ var Select = ({
105
+ label,
106
+ mandatory = false,
107
+ error = false,
108
+ options = [],
109
+ valueSelected = "",
110
+ // Keep for backward compatibility
111
+ value: _valueProp,
112
+ // Rename to avoid potential conflicts with native value attribute
113
+ onChange,
114
+ onSearch,
115
+ isLoading = false,
116
+ disabled = false,
117
+ disabledTooltip = "",
118
+ className = "",
119
+ dropdownClassName = "",
120
+ optionClassName = "",
121
+ style = {},
122
+ showDisplayValue = false,
123
+ // New prop to show displayValue instead of label
124
+ allowClear = true,
125
+ enableSearch = true,
126
+ doubleCharSearch = false,
127
+ id,
128
+ name,
129
+ tabIndex,
130
+ // Add tabIndex prop
131
+ // Additional styling props
132
+ size = "default",
133
+ // 'small', 'default', 'large'
134
+ variant = "default",
135
+ // 'default', 'filled', 'outlined'
136
+ wrapperClassName = "",
137
+ inputClassName = "",
138
+ // Custom class for input element specifically
139
+ labelClassName = "",
140
+ // Custom class for label element specifically
141
+ height = "tw-h-12",
142
+ // Custom height
143
+ experience = "business"
144
+ }) => {
145
+ const normalizeValue = useCallback(
146
+ (val) => {
147
+ if (val === null || val === void 0) return "";
148
+ return String(val);
149
+ },
150
+ []
151
+ );
152
+ const validatedOptions = useMemo(() => {
153
+ if (!Array.isArray(options)) return [];
154
+ return options.filter(
155
+ (opt) => opt && typeof opt === "object" && opt.value !== void 0 && opt.value !== null && opt.label !== void 0
156
+ );
157
+ }, [options]);
158
+ const [isOpen, setIsOpen] = useState(false);
159
+ const [isFocused, setIsFocused] = useState(false);
160
+ const [searchTerm, setSearchTerm] = useState("");
161
+ const [isHovering, setIsHovering] = useState(false);
162
+ const [highlightedIndex, setHighlightedIndex] = useState(-1);
163
+ const [selectedValue, setSelectedValue] = useState(() => {
164
+ const initialValue = valueSelected;
165
+ if (initialValue === null || initialValue === void 0) return "";
166
+ return String(initialValue);
167
+ });
168
+ const inputRef = useRef(null);
169
+ const inputValueRef = useRef("");
170
+ const dropdownRef = useRef(null);
171
+ const optionRefs = useRef([]);
172
+ const optionListRef = useRef(null);
173
+ const blurTimeoutRef = useRef(null);
174
+ const hoverTimeoutRef = useRef(null);
175
+ const isActive = isFocused || Boolean(selectedValue) || Boolean(valueSelected) || Boolean(searchTerm);
176
+ const sizeClasses = useMemo(() => {
177
+ switch (size) {
178
+ case "small":
179
+ return {
180
+ input: "tw-h-8 tw-px-3 tw-typography-body2",
181
+ padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
182
+ labelActive: "tw-top-0 tw-typography-caption4",
183
+ labelInactive: "tw-top-2 tw-typography-caption3"
184
+ };
185
+ case "medium":
186
+ return {
187
+ input: "tw-h-10 tw-px-4 tw-typography-body2",
188
+ padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
189
+ labelActive: "tw-top-1 tw-typography-caption3",
190
+ labelInactive: "tw-top-2.5 tw-typography-body2"
191
+ };
192
+ case "large":
193
+ return {
194
+ input: "tw-h-16 tw-px-5 tw-typography-bodyLarge",
195
+ padding: label ? "tw-pt-8 tw-pb-4" : "tw-py-5",
196
+ labelActive: "tw-top-1 tw-typography-caption2",
197
+ labelInactive: "tw-top-5 tw-typography-body1"
198
+ };
199
+ default:
200
+ return {
201
+ input: height + " tw-px-4 tw-typography-bodyLarge",
202
+ padding: label ? "tw-pt-6 tw-pb-3" : "tw-py-3",
203
+ labelActive: "tw-top-1 tw-typography-caption3",
204
+ labelInactive: "tw-top-3.5 tw-typography-body2"
205
+ };
206
+ }
207
+ }, [size, label, height]);
208
+ const variantClasses = useMemo(() => {
209
+ switch (variant) {
210
+ case "filled":
211
+ return "tw-bg-gray-50 tw-border-transparent";
212
+ case "outlined":
213
+ return "tw-bg-transparent tw-border-2";
214
+ default:
215
+ return " tw-border";
216
+ }
217
+ }, [variant]);
218
+ const handleBlur = useCallback(() => {
219
+ blurTimeoutRef.current = setTimeout(() => {
220
+ setIsOpen(false);
221
+ setSearchTerm("");
222
+ setHighlightedIndex(-1);
223
+ blurTimeoutRef.current = null;
224
+ setIsFocused(false);
225
+ }, 150);
226
+ }, []);
227
+ const handleSearchChange = useCallback(
228
+ (e) => {
229
+ var _a;
230
+ const searchValue = doubleCharSearch ? e.target.value.slice(0, 2) || "" : e.target.value;
231
+ if (doubleCharSearch) {
232
+ setSearchTerm(searchValue);
233
+ } else {
234
+ setSearchTerm(searchValue);
235
+ }
236
+ setIsOpen(true);
237
+ setHighlightedIndex(-1);
238
+ if (onSearch && typeof onSearch === "function") {
239
+ onSearch(searchValue);
240
+ }
241
+ (_a = optionListRef == null ? void 0 : optionListRef.current) == null ? void 0 : _a.scrollTo({
242
+ top: 0,
243
+ behavior: "smooth"
244
+ });
245
+ },
246
+ [doubleCharSearch, onSearch]
247
+ );
248
+ const handleOptionSelect = useCallback(
249
+ (option) => {
250
+ var _a;
251
+ if (blurTimeoutRef.current) {
252
+ clearTimeout(blurTimeoutRef.current);
253
+ blurTimeoutRef.current = null;
254
+ }
255
+ inputValueRef.current = option.label;
256
+ const normalizedValue = normalizeValue(option.value);
257
+ setSelectedValue(normalizedValue);
258
+ setSearchTerm("");
259
+ setIsOpen(false);
260
+ if (enableSearch) {
261
+ setIsFocused(false);
262
+ }
263
+ setIsHovering(false);
264
+ if (onChange) onChange(option.value);
265
+ if (enableSearch) (_a = inputRef.current) == null ? void 0 : _a.blur();
266
+ },
267
+ [normalizeValue, onChange, enableSearch]
268
+ );
269
+ const handleClear = useCallback(
270
+ (e) => {
271
+ var _a;
272
+ inputValueRef.current = "";
273
+ e.stopPropagation();
274
+ e.preventDefault();
275
+ setSelectedValue("");
276
+ setSearchTerm("");
277
+ if (enableSearch) {
278
+ setIsOpen(true);
279
+ setIsFocused(true);
280
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
281
+ } else {
282
+ setIsOpen(false);
283
+ setIsFocused(false);
284
+ }
285
+ if (onChange) onChange(null);
286
+ },
287
+ [onChange, enableSearch]
288
+ );
289
+ useEffect(() => {
290
+ if (!validatedOptions.length) {
291
+ setSelectedValue("");
292
+ setSearchTerm("");
293
+ inputValueRef.current = "";
294
+ }
295
+ }, [validatedOptions.length]);
296
+ useEffect(() => {
297
+ const externalValue = _valueProp !== void 0 ? _valueProp : valueSelected;
298
+ const newValue = normalizeValue(externalValue);
299
+ setSelectedValue((prevValue) => {
300
+ const prevNormalized = normalizeValue(prevValue);
301
+ return prevNormalized !== newValue ? newValue : prevValue;
302
+ });
303
+ }, [valueSelected, _valueProp, normalizeValue]);
304
+ useEffect(() => {
305
+ const handleClickOutside = (event) => {
306
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
307
+ if (blurTimeoutRef.current) {
308
+ clearTimeout(blurTimeoutRef.current);
309
+ blurTimeoutRef.current = null;
310
+ }
311
+ setIsOpen(false);
312
+ setIsFocused(false);
313
+ setSearchTerm("");
314
+ setHighlightedIndex(-1);
315
+ }
316
+ };
317
+ document.addEventListener("mousedown", handleClickOutside);
318
+ return () => {
319
+ document.removeEventListener("mousedown", handleClickOutside);
320
+ if (blurTimeoutRef.current) {
321
+ clearTimeout(blurTimeoutRef.current);
322
+ }
323
+ if (hoverTimeoutRef.current) {
324
+ clearTimeout(hoverTimeoutRef.current);
325
+ }
326
+ };
327
+ }, []);
328
+ const getDisplayValue = useCallback(() => {
329
+ if (selectedValue && (validatedOptions == null ? void 0 : validatedOptions.length) > 0) {
330
+ const selected = validatedOptions.find(
331
+ (opt) => normalizeValue(opt.value) === normalizeValue(selectedValue)
332
+ );
333
+ if (selected) {
334
+ return showDisplayValue && selected.displayValue ? selected.displayValue : selected.label;
335
+ }
336
+ }
337
+ if (selectedValue && (!validatedOptions || validatedOptions.length === 0)) {
338
+ return selectedValue;
339
+ }
340
+ return "";
341
+ }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
342
+ const filteredOptions = useMemo(() => {
343
+ var _a;
344
+ if (!enableSearch) {
345
+ return validatedOptions;
346
+ }
347
+ (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(0, 0);
348
+ const updatedFilteredOptions = validatedOptions.filter((option) => {
349
+ var _a2;
350
+ return (_a2 = option == null ? void 0 : option.label) == null ? void 0 : _a2.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
351
+ });
352
+ return updatedFilteredOptions;
353
+ }, [validatedOptions, searchTerm, enableSearch]);
354
+ const getSelectedOptionIndex = useCallback(() => {
355
+ if (!selectedValue || !filteredOptions.length) {
356
+ return 0;
357
+ }
358
+ const index = filteredOptions.findIndex(
359
+ (option) => normalizeValue(option.value) === normalizeValue(selectedValue)
360
+ );
361
+ return index >= 0 ? index : 0;
362
+ }, [selectedValue, filteredOptions, normalizeValue]);
363
+ const handleInputInteraction = useCallback(
364
+ (_e) => {
365
+ var _a;
366
+ if (blurTimeoutRef.current) {
367
+ clearTimeout(blurTimeoutRef.current);
368
+ blurTimeoutRef.current = null;
369
+ }
370
+ if (isOpen) {
371
+ setIsOpen(false);
372
+ setIsFocused(false);
373
+ setSearchTerm("");
374
+ setHighlightedIndex(-1);
375
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
376
+ return;
377
+ }
378
+ setIsFocused(true);
379
+ setIsOpen(true);
380
+ setHighlightedIndex(getSelectedOptionIndex());
381
+ if (inputRef.current) {
382
+ inputRef.current.focus();
383
+ }
384
+ },
385
+ [isOpen, getSelectedOptionIndex]
386
+ );
387
+ const handleKeyDown = useCallback(
388
+ (e) => {
389
+ var _a;
390
+ if (!isOpen) return;
391
+ switch (e.key) {
392
+ case "ArrowDown":
393
+ e.preventDefault();
394
+ setHighlightedIndex((prev) => {
395
+ const nextIndex = prev < filteredOptions.length - 1 ? prev + 1 : prev;
396
+ return nextIndex;
397
+ });
398
+ break;
399
+ case "ArrowUp":
400
+ e.preventDefault();
401
+ setHighlightedIndex((prev) => {
402
+ const nextIndex = prev > 0 ? prev - 1 : prev;
403
+ return nextIndex;
404
+ });
405
+ break;
406
+ case "Enter":
407
+ e.preventDefault();
408
+ if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
409
+ handleOptionSelect(filteredOptions[highlightedIndex]);
410
+ }
411
+ break;
412
+ case "Escape":
413
+ e.preventDefault();
414
+ setIsOpen(false);
415
+ setIsFocused(false);
416
+ setSearchTerm("");
417
+ setHighlightedIndex(-1);
418
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
419
+ break;
420
+ default:
421
+ break;
422
+ }
423
+ },
424
+ [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]
425
+ );
426
+ useEffect(() => {
427
+ if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
428
+ optionRefs.current[highlightedIndex].scrollIntoView({
429
+ block: "nearest",
430
+ behavior: "smooth"
431
+ });
432
+ }
433
+ }, [highlightedIndex]);
434
+ useEffect(() => {
435
+ optionRefs.current = [];
436
+ }, [filteredOptions]);
437
+ const handleMouseEnter = useCallback(() => {
438
+ if (hoverTimeoutRef.current) {
439
+ clearTimeout(hoverTimeoutRef.current);
440
+ }
441
+ if (!isHovering) {
442
+ setIsHovering(true);
443
+ }
444
+ }, [isHovering]);
445
+ const handleMouseLeave = useCallback(() => {
446
+ hoverTimeoutRef.current = setTimeout(() => {
447
+ setIsHovering(false);
448
+ }, 50);
449
+ }, []);
450
+ const handleChevronClick = useCallback(
451
+ (e) => {
452
+ var _a;
453
+ e.preventDefault();
454
+ if (blurTimeoutRef.current) {
455
+ clearTimeout(blurTimeoutRef.current);
456
+ blurTimeoutRef.current = null;
457
+ }
458
+ if (isOpen) {
459
+ setIsOpen(false);
460
+ setIsFocused(false);
461
+ setSearchTerm("");
462
+ setHighlightedIndex(-1);
463
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
464
+ } else {
465
+ if (inputRef.current) {
466
+ inputRef.current.focus();
467
+ }
468
+ handleInputInteraction();
469
+ }
470
+ },
471
+ [isOpen, handleInputInteraction]
472
+ );
473
+ return /* @__PURE__ */ jsxs(
474
+ "div",
475
+ {
476
+ style,
477
+ className: clsx("tw-relative tw-w-full", wrapperClassName, {
478
+ "tw-cursor-not-allowed": disabled
479
+ }),
480
+ ref: dropdownRef,
481
+ onMouseEnter: handleMouseEnter,
482
+ onMouseLeave: handleMouseLeave,
483
+ children: [
484
+ /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
485
+ /* @__PURE__ */ jsx4(
486
+ "input",
487
+ {
488
+ ref: inputRef,
489
+ type: "text",
490
+ id,
491
+ name,
492
+ tabIndex,
493
+ autoComplete: "off",
494
+ autoCorrect: "off",
495
+ autoCapitalize: "off",
496
+ spellCheck: "false",
497
+ value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
498
+ onChange: enableSearch ? handleSearchChange : void 0,
499
+ onClick: handleInputInteraction,
500
+ onKeyDown: handleKeyDown,
501
+ className: clsx(
502
+ "tw-w-full tw-rounded-xl tw-outline-none tw-transition-all tw-duration-200 tw-cursor-pointer tw-border-solid tw-text-color-text-default",
503
+ sizeClasses.input,
504
+ sizeClasses.padding,
505
+ variantClasses,
506
+ {
507
+ "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
508
+ "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
509
+ "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
510
+ },
511
+ // Conditional padding based on label presence
512
+ !label && "tw-flex tw-items-center",
513
+ {
514
+ "!tw-border-color-primary": isFocused && experience === "business"
515
+ },
516
+ {
517
+ "!tw-border-[#804D7B]": isFocused && experience === "personal"
518
+ },
519
+ error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
520
+ // Add focus state styling
521
+ "focus:tw-shadow-sm focus:tw-ring-offset-1",
522
+ className,
523
+ inputClassName
524
+ // Put inputClassName last so it can override default classes
525
+ ),
526
+ readOnly: !isFocused || !enableSearch
527
+ }
528
+ ),
529
+ label && /* @__PURE__ */ jsxs(
530
+ "label",
531
+ {
532
+ htmlFor: id,
533
+ className: clsx(
534
+ "tw-absolute tw-left-[18px] tw-pointer-events-none tw-transition-all tw-duration-200 tw-ease-out tw-text-gray-500",
535
+ isActive ? sizeClasses.labelActive : sizeClasses.labelInactive,
536
+ error && "tw-text-color-text-critical",
537
+ labelClassName
538
+ ),
539
+ children: [
540
+ label,
541
+ mandatory && /* @__PURE__ */ jsx4("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
542
+ ]
543
+ }
544
+ ),
545
+ /* @__PURE__ */ jsxs(
546
+ "div",
547
+ {
548
+ className: clsx(
549
+ "tw-absolute tw-right-3 tw-top-1/2 tw--translate-y-1/2 tw-flex tw-items-center",
550
+ {
551
+ "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear)
552
+ }
553
+ ),
554
+ children: [
555
+ disabled && /* @__PURE__ */ jsx4("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ jsx4(Tooltip_default, { title: disabledTooltip, children: /* @__PURE__ */ jsx4(Lock, { size: 16 }) }) }),
556
+ isLoading ? /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ jsx4(
557
+ "div",
558
+ {
559
+ className: clsx(
560
+ "tw-transition-all tw-duration-200 tw-cursor-pointer tw-flex tw-items-center",
561
+ // Only rotate chevron when open and not showing clear icon
562
+ isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
563
+ ),
564
+ onMouseDown: (e) => {
565
+ if (isHovering && selectedValue && allowClear) {
566
+ handleClear(e);
567
+ } else {
568
+ handleChevronClick(e);
569
+ }
570
+ },
571
+ children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ jsx4(CrossV2, { color: "#111827", className: "tw-mr-1" }) : /* @__PURE__ */ jsx4(
572
+ Chevron,
573
+ {
574
+ className: clsx("tw-text-gray-400"),
575
+ color: "#6B7280"
576
+ }
577
+ )
578
+ }
579
+ )
580
+ ]
581
+ }
582
+ )
583
+ ] }),
584
+ isOpen && /* @__PURE__ */ jsx4(
585
+ "div",
586
+ {
587
+ className: clsx(
588
+ "tw-absolute tw-z-[100] tw-w-full tw-mt-0 tw-bg-white tw-border tw-border-[#ebe3dd] tw-border-solid tw-rounded-xl tw-shadow-lg tw-overflow-y-auto tw-py-1",
589
+ { "tw-max-h-60": !doubleCharSearch },
590
+ { "tw-max-h-44": doubleCharSearch },
591
+ dropdownClassName
592
+ ),
593
+ ref: optionListRef,
594
+ children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx4(
595
+ "div",
596
+ {
597
+ ref: (el) => optionRefs.current[index] = el,
598
+ onClick: () => handleOptionSelect(option),
599
+ onMouseEnter: () => setHighlightedIndex(index),
600
+ className: clsx(
601
+ "tw-transition-all tw-duration-150 tw-typography-body2",
602
+ // Selected option styling
603
+ optionClassName
604
+ ),
605
+ children: /* @__PURE__ */ jsx4(
606
+ "div",
607
+ {
608
+ className: clsx(
609
+ "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
610
+ normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
611
+ // Highlighted option styling (keyboard navigation)
612
+ index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
613
+ // Default option styling
614
+ "tw-text-gray-900 hover:tw-bg-[#1118270a]"
615
+ )
616
+ )
617
+ ),
618
+ children: option.label
619
+ }
620
+ )
621
+ },
622
+ doubleCharSearch ? option.label : option.value
623
+ )) : /* @__PURE__ */ jsx4("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
624
+ }
625
+ )
626
+ ]
627
+ }
628
+ );
629
+ };
630
+ var arePropsEqual = (prevProps, nextProps) => {
631
+ var _a, _b;
632
+ const criticalProps = [
633
+ "value",
634
+ "valueSelected",
635
+ "options",
636
+ "error",
637
+ "disabled",
638
+ "label",
639
+ "mandatory"
640
+ ];
641
+ for (const prop of criticalProps) {
642
+ if (prevProps[prop] !== nextProps[prop]) {
643
+ return false;
644
+ }
645
+ }
646
+ if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
647
+ return false;
648
+ }
649
+ if (prevProps.options && nextProps.options) {
650
+ for (let i = 0; i < prevProps.options.length; i++) {
651
+ const prevOpt = prevProps.options[i];
652
+ const nextOpt = nextProps.options[i];
653
+ if ((prevOpt == null ? void 0 : prevOpt.value) !== (nextOpt == null ? void 0 : nextOpt.value) || (prevOpt == null ? void 0 : prevOpt.label) !== (nextOpt == null ? void 0 : nextOpt.label)) {
654
+ return false;
655
+ }
656
+ }
657
+ }
658
+ return true;
659
+ };
660
+ Select.displayName = "Select";
661
+ var Select_default = memo3(Select, arePropsEqual);
662
+
663
+ export {
664
+ Select,
665
+ Select_default
666
+ };