@itilite/lumina-ui 1.1.10 → 1.1.12

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 (46) hide show
  1. package/dist/atom/RangePicker/RangePicker.js +106 -103
  2. package/dist/atom/RangePicker/RangePicker.mjs +3 -3
  3. package/dist/atom/Select/Select.d.mts +1 -4
  4. package/dist/atom/Select/Select.d.ts +1 -4
  5. package/dist/atom/Select/Select.js +106 -103
  6. package/dist/atom/Select/Select.mjs +1 -1
  7. package/dist/chunk-35KDS27M.mjs +618 -0
  8. package/dist/chunk-3AWYHB3A.mjs +618 -0
  9. package/dist/chunk-3WWAOBS6.mjs +633 -0
  10. package/dist/chunk-57YKBWEI.mjs +673 -0
  11. package/dist/chunk-5BBLW4MR.mjs +670 -0
  12. package/dist/chunk-6XGVIU52.mjs +679 -0
  13. package/dist/chunk-BKPTZNXK.mjs +618 -0
  14. package/dist/chunk-CNN74G3M.mjs +666 -0
  15. package/dist/chunk-CPOZJCLV.mjs +681 -0
  16. package/dist/chunk-DRNY4L7J.mjs +618 -0
  17. package/dist/chunk-E4FCLHYA.mjs +678 -0
  18. package/dist/chunk-G7I4NT42.mjs +720 -0
  19. package/dist/chunk-GU5F7Z7I.mjs +681 -0
  20. package/dist/chunk-HPDJYQXM.mjs +663 -0
  21. package/dist/chunk-HTYOI6JT.mjs +618 -0
  22. package/dist/chunk-IIJUGDEJ.mjs +618 -0
  23. package/dist/chunk-J327EMX2.mjs +663 -0
  24. package/dist/chunk-J3ZBXBJ2.mjs +689 -0
  25. package/dist/chunk-JEAZCSST.mjs +676 -0
  26. package/dist/chunk-KDR6M52K.mjs +723 -0
  27. package/dist/chunk-LEPDKBT2.mjs +709 -0
  28. package/dist/chunk-LH55S6HJ.mjs +618 -0
  29. package/dist/chunk-MO7JTKPH.mjs +618 -0
  30. package/dist/chunk-MWC57EU6.mjs +666 -0
  31. package/dist/chunk-OMXQ6VML.mjs +618 -0
  32. package/dist/chunk-PSESRID3.mjs +681 -0
  33. package/dist/chunk-RAWVG2MM.mjs +618 -0
  34. package/dist/chunk-T2Y6AXM5.mjs +618 -0
  35. package/dist/chunk-THT4ALWQ.mjs +618 -0
  36. package/dist/chunk-TWV2Z27S.mjs +618 -0
  37. package/dist/chunk-UPUD2FQL.mjs +618 -0
  38. package/dist/chunk-UUTSL2NM.mjs +618 -0
  39. package/dist/chunk-W7J4GMPI.mjs +618 -0
  40. package/dist/chunk-WCYB5OTY.mjs +618 -0
  41. package/dist/chunk-YCAOWGDP.mjs +618 -0
  42. package/dist/chunk-ZUUAXTPM.mjs +618 -0
  43. package/dist/index.js +106 -103
  44. package/dist/index.mjs +17 -17
  45. package/dist/styles.css +199 -203
  46. package/package.json +1 -1
@@ -0,0 +1,673 @@
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 20 20"
60
+ }, rest), {
61
+ children: /* @__PURE__ */ jsx2(
62
+ "path",
63
+ {
64
+ fill: color,
65
+ d: "M4.411 4.41a.833.833 0 0 1 1.179 0L10 8.822l4.411-4.41a.833.833 0 1 1 1.179 1.178L11.179 10l4.41 4.41a.833.833 0 0 1-1.178 1.18l-4.41-4.411-4.411 4.41a.833.833 0 1 1-1.179-1.178L8.821 10l-4.41-4.41a.833.833 0 0 1 0-1.18"
66
+ }
67
+ )
68
+ })
69
+ );
70
+ }
71
+ );
72
+ CrossV2.displayName = "CrossV2";
73
+
74
+ // src/icons/Lock.tsx
75
+ import React3 from "react";
76
+ import { jsx as jsx3 } from "react/jsx-runtime";
77
+ var Lock = React3.memo((_a) => {
78
+ var _b = _a, { size = 16, color = "#000" } = _b, rest = __objRest(_b, ["size", "color"]);
79
+ return /* @__PURE__ */ jsx3(
80
+ "svg",
81
+ __spreadProps(__spreadValues({
82
+ xmlns: "http://www.w3.org/2000/svg",
83
+ width: size,
84
+ height: size,
85
+ fill: "none",
86
+ viewBox: "0 0 16 16"
87
+ }, rest), {
88
+ children: /* @__PURE__ */ jsx3(
89
+ "path",
90
+ {
91
+ fill: color,
92
+ 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"
93
+ }
94
+ )
95
+ })
96
+ );
97
+ });
98
+
99
+ // src/atom/Select/Select.tsx
100
+ import { jsx as jsx4, jsxs } from "react/jsx-runtime";
101
+ var Select = ({
102
+ label,
103
+ mandatory = false,
104
+ error = false,
105
+ options = [],
106
+ valueSelected = "",
107
+ // Keep for backward compatibility
108
+ value: _valueProp,
109
+ // Rename to avoid potential conflicts with native value attribute
110
+ onChange,
111
+ onSearch,
112
+ isLoading = false,
113
+ disabled = false,
114
+ disabledTooltip = "",
115
+ className = "",
116
+ dropdownClassName = "",
117
+ optionClassName = "",
118
+ style = {},
119
+ showDisplayValue = false,
120
+ // New prop to show displayValue instead of label
121
+ allowClear = true,
122
+ enableSearch = true,
123
+ doubleCharSearch = false,
124
+ id,
125
+ name,
126
+ tabIndex,
127
+ // Add tabIndex prop
128
+ // Additional styling props
129
+ size = "default",
130
+ // 'small', 'default', 'large'
131
+ variant = "default",
132
+ // 'default', 'filled', 'outlined'
133
+ wrapperClassName = "",
134
+ inputClassName = "",
135
+ // Custom class for input element specifically
136
+ labelClassName = "",
137
+ // Custom class for label element specifically
138
+ height = "tw-h-12",
139
+ // Custom height
140
+ experience = "business"
141
+ }) => {
142
+ const normalizeValue = useCallback(
143
+ (val) => {
144
+ if (val === null || val === void 0) return "";
145
+ return String(val);
146
+ },
147
+ []
148
+ );
149
+ const validatedOptions = useMemo(() => {
150
+ if (!Array.isArray(options)) return [];
151
+ return options.filter(
152
+ (opt) => opt && typeof opt === "object" && opt.value !== void 0 && opt.value !== null && opt.label !== void 0
153
+ );
154
+ }, [options]);
155
+ const [isOpen, setIsOpen] = useState(false);
156
+ const [isFocused, setIsFocused] = useState(false);
157
+ const [searchTerm, setSearchTerm] = useState("");
158
+ const [isHovering, setIsHovering] = useState(false);
159
+ const [highlightedIndex, setHighlightedIndex] = useState(-1);
160
+ const [selectedValue, setSelectedValue] = useState(() => {
161
+ const initialValue = valueSelected;
162
+ if (initialValue === null || initialValue === void 0) return "";
163
+ return String(initialValue);
164
+ });
165
+ const inputRef = useRef(null);
166
+ const inputValueRef = useRef("");
167
+ const dropdownRef = useRef(null);
168
+ const optionRefs = useRef([]);
169
+ const optionListRef = useRef(null);
170
+ const blurTimeoutRef = useRef(null);
171
+ const hoverTimeoutRef = useRef(null);
172
+ const isActive = isFocused || Boolean(selectedValue) || Boolean(valueSelected) || Boolean(searchTerm);
173
+ const sizeClasses = useMemo(() => {
174
+ switch (size) {
175
+ case "small":
176
+ return {
177
+ input: "tw-h-6 tw-typography-caption1Bold !tw-rounded-lg",
178
+ padding: "tw-px-2 tw-py-1",
179
+ labelActive: "tw-top-0.5 tw-typography-caption2",
180
+ labelInactive: "tw-top-1.5 tw-typography-caption3"
181
+ };
182
+ case "medium":
183
+ return {
184
+ input: "tw-h-10 tw-px-4 tw-typography-body2",
185
+ padding: label ? "tw-pt-4 tw-pb-1" : "tw-py-2",
186
+ labelActive: "tw-top-1 tw-typography-caption3",
187
+ labelInactive: "tw-top-2.5 tw-typography-body2"
188
+ };
189
+ case "large":
190
+ return {
191
+ input: "tw-h-16 tw-px-5 tw-typography-bodyLarge",
192
+ padding: label ? "tw-pt-8 tw-pb-4" : "tw-py-5",
193
+ labelActive: "tw-top-1 tw-typography-caption2",
194
+ labelInactive: "tw-top-5 tw-typography-body1"
195
+ };
196
+ default:
197
+ return {
198
+ input: height + " tw-px-4 tw-typography-bodyLarge",
199
+ padding: label ? "tw-pt-6 tw-pb-3" : "tw-py-3",
200
+ labelActive: "tw-top-1 tw-typography-caption3",
201
+ labelInactive: "tw-top-3.5 tw-typography-body2"
202
+ };
203
+ }
204
+ }, [size, label, height]);
205
+ const variantClasses = useMemo(() => {
206
+ switch (variant) {
207
+ case "filled":
208
+ return "tw-bg-gray-50 tw-border-transparent";
209
+ case "outlined":
210
+ return "tw-bg-transparent tw-border-2";
211
+ default:
212
+ return " tw-border";
213
+ }
214
+ }, [variant]);
215
+ const handleBlur = useCallback(() => {
216
+ blurTimeoutRef.current = setTimeout(() => {
217
+ setIsOpen(false);
218
+ setSearchTerm("");
219
+ setHighlightedIndex(-1);
220
+ blurTimeoutRef.current = null;
221
+ setIsFocused(false);
222
+ }, 150);
223
+ }, []);
224
+ const handleSearchChange = useCallback(
225
+ (e) => {
226
+ const searchValue = doubleCharSearch ? e.target.value.slice(0, 2) || "" : e.target.value;
227
+ if (doubleCharSearch) {
228
+ setSearchTerm(searchValue);
229
+ } else {
230
+ setSearchTerm(searchValue);
231
+ }
232
+ setIsOpen(true);
233
+ setHighlightedIndex(-1);
234
+ if (onSearch && typeof onSearch === "function") {
235
+ onSearch(searchValue);
236
+ }
237
+ },
238
+ [doubleCharSearch, onSearch]
239
+ );
240
+ const handleOptionSelect = useCallback(
241
+ (option) => {
242
+ var _a;
243
+ if (blurTimeoutRef.current) {
244
+ clearTimeout(blurTimeoutRef.current);
245
+ blurTimeoutRef.current = null;
246
+ }
247
+ inputValueRef.current = option.label;
248
+ const normalizedValue = normalizeValue(option.value);
249
+ setSelectedValue(normalizedValue);
250
+ setSearchTerm("");
251
+ setIsOpen(false);
252
+ if (enableSearch) {
253
+ setIsFocused(false);
254
+ }
255
+ setIsHovering(false);
256
+ if (onChange) onChange(option.value);
257
+ if (enableSearch) (_a = inputRef.current) == null ? void 0 : _a.blur();
258
+ },
259
+ [normalizeValue, onChange, enableSearch]
260
+ );
261
+ const handleClear = useCallback(
262
+ (e) => {
263
+ var _a;
264
+ inputValueRef.current = "";
265
+ e.stopPropagation();
266
+ e.preventDefault();
267
+ setSelectedValue("");
268
+ setSearchTerm("");
269
+ if (enableSearch) {
270
+ setIsOpen(true);
271
+ setIsFocused(true);
272
+ (_a = inputRef.current) == null ? void 0 : _a.focus();
273
+ } else {
274
+ setIsOpen(false);
275
+ setIsFocused(false);
276
+ }
277
+ if (onChange) onChange(null);
278
+ },
279
+ [onChange, enableSearch]
280
+ );
281
+ useEffect(() => {
282
+ if (!validatedOptions.length) {
283
+ setSelectedValue("");
284
+ setSearchTerm("");
285
+ inputValueRef.current = "";
286
+ }
287
+ }, [validatedOptions.length]);
288
+ useEffect(() => {
289
+ const externalValue = _valueProp !== void 0 ? _valueProp : valueSelected;
290
+ const newValue = normalizeValue(externalValue);
291
+ setSelectedValue((prevValue) => {
292
+ const prevNormalized = normalizeValue(prevValue);
293
+ return prevNormalized !== newValue ? newValue : prevValue;
294
+ });
295
+ }, [valueSelected, _valueProp, normalizeValue]);
296
+ useEffect(() => {
297
+ const handleClickOutside = (event) => {
298
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
299
+ if (blurTimeoutRef.current) {
300
+ clearTimeout(blurTimeoutRef.current);
301
+ blurTimeoutRef.current = null;
302
+ }
303
+ setIsOpen(false);
304
+ setIsFocused(false);
305
+ setSearchTerm("");
306
+ setHighlightedIndex(-1);
307
+ }
308
+ };
309
+ document.addEventListener("mousedown", handleClickOutside);
310
+ return () => {
311
+ document.removeEventListener("mousedown", handleClickOutside);
312
+ if (blurTimeoutRef.current) {
313
+ clearTimeout(blurTimeoutRef.current);
314
+ }
315
+ if (hoverTimeoutRef.current) {
316
+ clearTimeout(hoverTimeoutRef.current);
317
+ }
318
+ };
319
+ }, []);
320
+ const getDisplayValue = useCallback(() => {
321
+ if (selectedValue && (validatedOptions == null ? void 0 : validatedOptions.length) > 0) {
322
+ const selected = validatedOptions.find(
323
+ (opt) => normalizeValue(opt.value) === normalizeValue(selectedValue)
324
+ );
325
+ if (selected) {
326
+ return showDisplayValue && selected.displayValue ? selected.displayValue : selected.label;
327
+ }
328
+ }
329
+ if (selectedValue && (!validatedOptions || validatedOptions.length === 0)) {
330
+ return selectedValue;
331
+ }
332
+ return "";
333
+ }, [selectedValue, validatedOptions, showDisplayValue, normalizeValue]);
334
+ const filteredOptions = useMemo(() => {
335
+ var _a;
336
+ if (!enableSearch) {
337
+ return validatedOptions;
338
+ }
339
+ (_a = dropdownRef.current) == null ? void 0 : _a.scrollTo(0, 0);
340
+ const updatedFilteredOptions = validatedOptions.filter((option) => {
341
+ var _a2;
342
+ return (_a2 = option == null ? void 0 : option.label) == null ? void 0 : _a2.toLowerCase().includes(searchTerm == null ? void 0 : searchTerm.toLowerCase());
343
+ });
344
+ return updatedFilteredOptions;
345
+ }, [validatedOptions, searchTerm, enableSearch]);
346
+ const getSelectedOptionIndex = useCallback(() => {
347
+ if (!selectedValue || !filteredOptions.length) {
348
+ return 0;
349
+ }
350
+ const index = filteredOptions.findIndex(
351
+ (option) => normalizeValue(option.value) === normalizeValue(selectedValue)
352
+ );
353
+ return index >= 0 ? index : 0;
354
+ }, [selectedValue, filteredOptions, normalizeValue]);
355
+ const handleInputInteraction = useCallback(
356
+ (_e) => {
357
+ var _a;
358
+ if (blurTimeoutRef.current) {
359
+ clearTimeout(blurTimeoutRef.current);
360
+ blurTimeoutRef.current = null;
361
+ }
362
+ if (isOpen) {
363
+ setIsOpen(false);
364
+ setIsFocused(false);
365
+ setSearchTerm("");
366
+ setHighlightedIndex(-1);
367
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
368
+ return;
369
+ }
370
+ setIsFocused(true);
371
+ setIsOpen(true);
372
+ setHighlightedIndex(getSelectedOptionIndex());
373
+ if (inputRef.current) {
374
+ inputRef.current.focus();
375
+ }
376
+ },
377
+ [isOpen, getSelectedOptionIndex]
378
+ );
379
+ const handleKeyDown = useCallback(
380
+ (e) => {
381
+ var _a;
382
+ if (!isOpen) return;
383
+ switch (e.key) {
384
+ case "ArrowDown":
385
+ e.preventDefault();
386
+ setHighlightedIndex((prev) => {
387
+ const nextIndex = prev < filteredOptions.length - 1 ? prev + 1 : prev;
388
+ return nextIndex;
389
+ });
390
+ break;
391
+ case "ArrowUp":
392
+ e.preventDefault();
393
+ setHighlightedIndex((prev) => {
394
+ const nextIndex = prev > 0 ? prev - 1 : prev;
395
+ return nextIndex;
396
+ });
397
+ break;
398
+ case "Enter":
399
+ e.preventDefault();
400
+ if (highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
401
+ handleOptionSelect(filteredOptions[highlightedIndex]);
402
+ }
403
+ break;
404
+ case "Escape":
405
+ e.preventDefault();
406
+ setIsOpen(false);
407
+ setIsFocused(false);
408
+ setSearchTerm("");
409
+ setHighlightedIndex(-1);
410
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
411
+ break;
412
+ default:
413
+ break;
414
+ }
415
+ },
416
+ [isOpen, highlightedIndex, filteredOptions, handleOptionSelect]
417
+ );
418
+ useEffect(() => {
419
+ if (highlightedIndex >= 0 && optionRefs.current[highlightedIndex]) {
420
+ optionRefs.current[highlightedIndex].scrollIntoView({
421
+ block: "nearest",
422
+ behavior: "smooth"
423
+ });
424
+ }
425
+ }, [highlightedIndex]);
426
+ useEffect(() => {
427
+ optionRefs.current = [];
428
+ }, [filteredOptions]);
429
+ const handleMouseEnter = useCallback(() => {
430
+ if (hoverTimeoutRef.current) {
431
+ clearTimeout(hoverTimeoutRef.current);
432
+ }
433
+ if (!isHovering) {
434
+ setIsHovering(true);
435
+ }
436
+ }, [isHovering]);
437
+ const handleMouseLeave = useCallback(() => {
438
+ hoverTimeoutRef.current = setTimeout(() => {
439
+ setIsHovering(false);
440
+ }, 50);
441
+ }, []);
442
+ const handleChevronClick = useCallback(
443
+ (e) => {
444
+ var _a;
445
+ e.preventDefault();
446
+ if (blurTimeoutRef.current) {
447
+ clearTimeout(blurTimeoutRef.current);
448
+ blurTimeoutRef.current = null;
449
+ }
450
+ if (isOpen) {
451
+ setIsOpen(false);
452
+ setIsFocused(false);
453
+ setSearchTerm("");
454
+ setHighlightedIndex(-1);
455
+ (_a = inputRef.current) == null ? void 0 : _a.blur();
456
+ } else {
457
+ if (inputRef.current) {
458
+ inputRef.current.focus();
459
+ }
460
+ handleInputInteraction();
461
+ }
462
+ },
463
+ [isOpen, handleInputInteraction]
464
+ );
465
+ const InputWrapper = ({ children }) => {
466
+ if (disabled && disabledTooltip)
467
+ return /* @__PURE__ */ jsx4(Tooltip_default, { title: disabledTooltip, children });
468
+ return children;
469
+ };
470
+ return /* @__PURE__ */ jsx4(InputWrapper, { children: /* @__PURE__ */ jsxs(
471
+ "div",
472
+ {
473
+ style,
474
+ className: clsx("tw-relative tw-w-full", wrapperClassName, {
475
+ "tw-cursor-not-allowed": disabled
476
+ }),
477
+ ref: dropdownRef,
478
+ onMouseEnter: handleMouseEnter,
479
+ onMouseLeave: handleMouseLeave,
480
+ children: [
481
+ /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
482
+ /* @__PURE__ */ jsx4(
483
+ "input",
484
+ {
485
+ ref: inputRef,
486
+ type: "text",
487
+ id,
488
+ name,
489
+ tabIndex,
490
+ autoComplete: "off",
491
+ autoCorrect: "off",
492
+ autoCapitalize: "off",
493
+ spellCheck: "false",
494
+ value: isFocused && enableSearch ? searchTerm : getDisplayValue(),
495
+ onChange: enableSearch ? handleSearchChange : void 0,
496
+ onClick: handleInputInteraction,
497
+ onKeyDown: handleKeyDown,
498
+ className: clsx(
499
+ "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",
500
+ sizeClasses.input,
501
+ sizeClasses.padding,
502
+ variantClasses,
503
+ {
504
+ "tw-bg-white": valueSelected || getDisplayValue() || isFocused,
505
+ "tw-bg-color-gray-5": !valueSelected || !getDisplayValue(),
506
+ "!tw-bg-[#F8F7F6] tw-cursor-not-allowed tw-pointer-events-none": disabled
507
+ },
508
+ // Conditional padding based on label presence
509
+ !label && "tw-flex tw-items-center",
510
+ {
511
+ "!tw-border-color-primary": isFocused && experience === "business"
512
+ },
513
+ {
514
+ "!tw-border-[#804D7B]": isFocused && experience === "personal"
515
+ },
516
+ error ? "!tw-border-color-text-critical " : "tw-border-[#EBE3DD] hover:tw-border-[#C5B7AC]",
517
+ // Add focus state styling
518
+ "focus:tw-shadow-sm focus:tw-ring-offset-1",
519
+ className,
520
+ inputClassName
521
+ // Put inputClassName last so it can override default classes
522
+ ),
523
+ readOnly: !isFocused || !enableSearch
524
+ }
525
+ ),
526
+ label && size !== "small" && /* @__PURE__ */ jsxs(
527
+ "label",
528
+ {
529
+ htmlFor: id,
530
+ className: clsx(
531
+ "tw-absolute tw-left-[18px] tw-pointer-events-none tw-transition-all tw-duration-200 tw-ease-out tw-text-gray-500",
532
+ isActive ? sizeClasses.labelActive : sizeClasses.labelInactive,
533
+ error && "tw-text-color-text-critical",
534
+ labelClassName
535
+ ),
536
+ children: [
537
+ label,
538
+ mandatory && /* @__PURE__ */ jsx4("span", { className: "tw-text-color-text-critical tw-ml-1", children: "*" })
539
+ ]
540
+ }
541
+ ),
542
+ /* @__PURE__ */ jsxs(
543
+ "div",
544
+ {
545
+ className: clsx(
546
+ "tw-absolute tw-right-3 tw--translate-y-1/2 tw-flex tw-items-center",
547
+ {
548
+ "!tw-right-[5px]": doubleCharSearch && !(isHovering && selectedValue && allowClear),
549
+ "tw-top-3 !tw-right-2": size === "small",
550
+ "tw-top-1/2": size !== "small"
551
+ }
552
+ ),
553
+ children: [
554
+ disabled && /* @__PURE__ */ jsx4("div", { className: "tw-absolute tw-right-0 -tw-top-2", children: /* @__PURE__ */ jsx4(Lock, { size: 16 }) }),
555
+ isLoading ? /* @__PURE__ */ jsx4("div", { children: /* @__PURE__ */ jsx4(LoadingSpinner_default, { size: "xs" }) }) : /* @__PURE__ */ jsx4(
556
+ "div",
557
+ {
558
+ className: clsx(
559
+ "tw-transition-all tw-duration-200 tw-cursor-pointer tw-flex tw-items-center",
560
+ // Only rotate chevron when open and not showing clear icon
561
+ isOpen && !(isHovering && selectedValue && allowClear) && "-tw-rotate-180"
562
+ ),
563
+ onMouseDown: (e) => {
564
+ if (isHovering && selectedValue && allowClear) {
565
+ handleClear(e);
566
+ } else {
567
+ handleChevronClick(e);
568
+ }
569
+ },
570
+ children: disabled ? null : isHovering && selectedValue && allowClear ? /* @__PURE__ */ jsx4(
571
+ CrossV2,
572
+ {
573
+ color: "#111827",
574
+ className: clsx({ "tw-mr-1": size !== "small" }),
575
+ size: size === "small" ? 12 : 16
576
+ }
577
+ ) : /* @__PURE__ */ jsx4(
578
+ Chevron,
579
+ {
580
+ className: clsx("tw-text-gray-400"),
581
+ color: "#6B7280"
582
+ }
583
+ )
584
+ }
585
+ )
586
+ ]
587
+ }
588
+ )
589
+ ] }),
590
+ isOpen && /* @__PURE__ */ jsx4(
591
+ "div",
592
+ {
593
+ className: clsx(
594
+ "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",
595
+ { "tw-max-h-60": !doubleCharSearch },
596
+ { "tw-max-h-44": doubleCharSearch },
597
+ dropdownClassName
598
+ ),
599
+ ref: optionListRef,
600
+ children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => /* @__PURE__ */ jsx4(
601
+ "div",
602
+ {
603
+ ref: (el) => optionRefs.current[index] = el,
604
+ onClick: () => handleOptionSelect(option),
605
+ onMouseEnter: () => setHighlightedIndex(index),
606
+ className: clsx(
607
+ "tw-transition-all tw-duration-150",
608
+ { "tw-typography-body2": size !== "small" },
609
+ { "tw-typography-caption1": size === "small" },
610
+ optionClassName
611
+ ),
612
+ children: /* @__PURE__ */ jsx4(
613
+ "div",
614
+ {
615
+ className: clsx(
616
+ "tw-px-4 tw-cursor-pointer tw-py-2 tw-mx-0.5 tw-rounded-xl",
617
+ normalizeValue(selectedValue) === normalizeValue(option.value) ? experience === "personal" ? "tw-bg-[#f1e8fa]" : "tw-bg-[#fff1e1]" : (
618
+ // Highlighted option styling (keyboard navigation)
619
+ index === highlightedIndex ? "tw-bg-[#f3f4f6] tw-text-gray-900" : (
620
+ // Default option styling
621
+ "tw-text-gray-900 hover:tw-bg-[#1118270a]"
622
+ )
623
+ )
624
+ ),
625
+ children: option.label
626
+ }
627
+ )
628
+ },
629
+ doubleCharSearch ? option.label : option.value
630
+ )) : /* @__PURE__ */ jsx4("div", { className: "tw-px-4 tw-py-3 tw-text-gray-500 tw-text-sm", children: "No options found" })
631
+ }
632
+ )
633
+ ]
634
+ }
635
+ ) });
636
+ };
637
+ var arePropsEqual = (prevProps, nextProps) => {
638
+ var _a, _b;
639
+ const criticalProps = [
640
+ "value",
641
+ "valueSelected",
642
+ "options",
643
+ "error",
644
+ "disabled",
645
+ "label",
646
+ "mandatory"
647
+ ];
648
+ for (const prop of criticalProps) {
649
+ if (prevProps[prop] !== nextProps[prop]) {
650
+ return false;
651
+ }
652
+ }
653
+ if (((_a = prevProps.options) == null ? void 0 : _a.length) !== ((_b = nextProps.options) == null ? void 0 : _b.length)) {
654
+ return false;
655
+ }
656
+ if (prevProps.options && nextProps.options) {
657
+ for (let i = 0; i < prevProps.options.length; i++) {
658
+ const prevOpt = prevProps.options[i];
659
+ const nextOpt = nextProps.options[i];
660
+ 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)) {
661
+ return false;
662
+ }
663
+ }
664
+ }
665
+ return true;
666
+ };
667
+ Select.displayName = "Select";
668
+ var Select_default = memo3(Select, arePropsEqual);
669
+
670
+ export {
671
+ Select,
672
+ Select_default
673
+ };