analytica-frontend-lib 1.0.94 → 1.0.95

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.
@@ -0,0 +1,633 @@
1
+ // src/components/Search/Search.tsx
2
+ import { CaretLeft, X } from "phosphor-react";
3
+ import {
4
+ forwardRef as forwardRef2,
5
+ useState as useState2,
6
+ useId,
7
+ useMemo,
8
+ useEffect as useEffect2,
9
+ useRef as useRef2
10
+ } from "react";
11
+
12
+ // src/components/DropdownMenu/DropdownMenu.tsx
13
+ import { SignOut, User } from "phosphor-react";
14
+ import {
15
+ forwardRef,
16
+ useEffect,
17
+ useRef,
18
+ isValidElement,
19
+ Children,
20
+ cloneElement,
21
+ useState
22
+ } from "react";
23
+ import { create, useStore } from "zustand";
24
+
25
+ // src/utils/utils.ts
26
+ import { clsx } from "clsx";
27
+ import { twMerge } from "tailwind-merge";
28
+ function cn(...inputs) {
29
+ return twMerge(clsx(inputs));
30
+ }
31
+
32
+ // src/components/Button/Button.tsx
33
+ import { jsx, jsxs } from "react/jsx-runtime";
34
+ var VARIANT_ACTION_CLASSES = {
35
+ solid: {
36
+ primary: "bg-primary-950 text-text border border-primary-950 hover:bg-primary-800 hover:border-primary-800 focus-visible:outline-none focus-visible:bg-primary-950 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-primary-700 active:border-primary-700 disabled:bg-primary-500 disabled:border-primary-500 disabled:opacity-40 disabled:cursor-not-allowed",
37
+ positive: "bg-success-500 text-text border border-success-500 hover:bg-success-600 hover:border-success-600 focus-visible:outline-none focus-visible:bg-success-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-success-700 active:border-success-700 disabled:bg-success-500 disabled:border-success-500 disabled:opacity-40 disabled:cursor-not-allowed",
38
+ negative: "bg-error-500 text-text border border-error-500 hover:bg-error-600 hover:border-error-600 focus-visible:outline-none focus-visible:bg-error-500 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:bg-error-700 active:border-error-700 disabled:bg-error-500 disabled:border-error-500 disabled:opacity-40 disabled:cursor-not-allowed"
39
+ },
40
+ outline: {
41
+ primary: "bg-transparent text-primary-950 border border-primary-950 hover:bg-background-50 hover:text-primary-400 hover:border-primary-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 active:border-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
42
+ positive: "bg-transparent text-success-500 border border-success-300 hover:bg-background-50 hover:text-success-400 hover:border-success-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 active:border-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
43
+ negative: "bg-transparent text-error-500 border border-error-300 hover:bg-background-50 hover:text-error-400 hover:border-error-400 focus-visible:border-0 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 active:border-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
44
+ },
45
+ link: {
46
+ primary: "bg-transparent text-primary-950 hover:text-primary-400 focus-visible:outline-none focus-visible:text-primary-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-primary-700 disabled:opacity-40 disabled:cursor-not-allowed",
47
+ positive: "bg-transparent text-success-500 hover:text-success-400 focus-visible:outline-none focus-visible:text-success-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-success-700 disabled:opacity-40 disabled:cursor-not-allowed",
48
+ negative: "bg-transparent text-error-500 hover:text-error-400 focus-visible:outline-none focus-visible:text-error-600 focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-indicator-info active:text-error-700 disabled:opacity-40 disabled:cursor-not-allowed"
49
+ }
50
+ };
51
+ var SIZE_CLASSES = {
52
+ "extra-small": "text-xs px-3.5 py-2",
53
+ small: "text-sm px-4 py-2.5",
54
+ medium: "text-md px-5 py-2.5",
55
+ large: "text-lg px-6 py-3",
56
+ "extra-large": "text-lg px-7 py-3.5"
57
+ };
58
+ var Button = ({
59
+ children,
60
+ iconLeft,
61
+ iconRight,
62
+ size = "medium",
63
+ variant = "solid",
64
+ action = "primary",
65
+ className = "",
66
+ disabled,
67
+ type = "button",
68
+ ...props
69
+ }) => {
70
+ const sizeClasses = SIZE_CLASSES[size];
71
+ const variantClasses = VARIANT_ACTION_CLASSES[variant][action];
72
+ const baseClasses = "inline-flex items-center justify-center rounded-full cursor-pointer font-medium";
73
+ return /* @__PURE__ */ jsxs(
74
+ "button",
75
+ {
76
+ className: cn(baseClasses, variantClasses, sizeClasses, className),
77
+ disabled,
78
+ type,
79
+ ...props,
80
+ children: [
81
+ iconLeft && /* @__PURE__ */ jsx("span", { className: "mr-2 flex items-center", children: iconLeft }),
82
+ children,
83
+ iconRight && /* @__PURE__ */ jsx("span", { className: "ml-2 flex items-center", children: iconRight })
84
+ ]
85
+ }
86
+ );
87
+ };
88
+ var Button_default = Button;
89
+
90
+ // src/components/DropdownMenu/DropdownMenu.tsx
91
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
92
+ function createDropdownStore() {
93
+ return create((set) => ({
94
+ open: false,
95
+ setOpen: (open) => set({ open })
96
+ }));
97
+ }
98
+ var useDropdownStore = (externalStore) => {
99
+ if (!externalStore) {
100
+ throw new Error(
101
+ "Component must be used within a DropdownMenu (store is missing)"
102
+ );
103
+ }
104
+ return externalStore;
105
+ };
106
+ var injectStore = (children, store) => {
107
+ return Children.map(children, (child) => {
108
+ if (isValidElement(child)) {
109
+ const typedChild = child;
110
+ const newProps = {
111
+ store
112
+ };
113
+ if (typedChild.props.children) {
114
+ newProps.children = injectStore(typedChild.props.children, store);
115
+ }
116
+ return cloneElement(typedChild, newProps);
117
+ }
118
+ return child;
119
+ });
120
+ };
121
+ var DropdownMenu = ({
122
+ children,
123
+ open: propOpen,
124
+ onOpenChange
125
+ }) => {
126
+ const storeRef = useRef(null);
127
+ storeRef.current ??= createDropdownStore();
128
+ const store = storeRef.current;
129
+ const { open, setOpen: storeSetOpen } = useStore(store, (s) => s);
130
+ const setOpen = (newOpen) => {
131
+ storeSetOpen(newOpen);
132
+ };
133
+ const menuRef = useRef(null);
134
+ const handleArrowDownOrArrowUp = (event) => {
135
+ const menuContent = menuRef.current?.querySelector('[role="menu"]');
136
+ if (menuContent) {
137
+ event.preventDefault();
138
+ const items = Array.from(
139
+ menuContent.querySelectorAll(
140
+ '[role="menuitem"]:not([aria-disabled="true"])'
141
+ )
142
+ ).filter((el) => el instanceof HTMLElement);
143
+ if (items.length === 0) return;
144
+ const focusedItem = document.activeElement;
145
+ const currentIndex = items.findIndex((item) => item === focusedItem);
146
+ let nextIndex;
147
+ if (event.key === "ArrowDown") {
148
+ nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
149
+ } else {
150
+ nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
151
+ }
152
+ items[nextIndex]?.focus();
153
+ }
154
+ };
155
+ const handleDownkey = (event) => {
156
+ if (event.key === "Escape") {
157
+ setOpen(false);
158
+ } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
159
+ handleArrowDownOrArrowUp(event);
160
+ }
161
+ };
162
+ const handleClickOutside = (event) => {
163
+ if (menuRef.current && !menuRef.current.contains(event.target)) {
164
+ setOpen(false);
165
+ }
166
+ };
167
+ useEffect(() => {
168
+ if (open) {
169
+ document.addEventListener("mousedown", handleClickOutside);
170
+ document.addEventListener("keydown", handleDownkey);
171
+ }
172
+ return () => {
173
+ document.removeEventListener("mousedown", handleClickOutside);
174
+ document.removeEventListener("keydown", handleDownkey);
175
+ };
176
+ }, [open]);
177
+ useEffect(() => {
178
+ setOpen(open);
179
+ onOpenChange?.(open);
180
+ }, [open, onOpenChange]);
181
+ useEffect(() => {
182
+ if (propOpen) {
183
+ setOpen(propOpen);
184
+ }
185
+ }, [propOpen]);
186
+ return /* @__PURE__ */ jsx2("div", { className: "relative", ref: menuRef, children: injectStore(children, store) });
187
+ };
188
+ var DropdownMenuTrigger = ({
189
+ className,
190
+ children,
191
+ onClick,
192
+ store: externalStore,
193
+ ...props
194
+ }) => {
195
+ const store = useDropdownStore(externalStore);
196
+ const open = useStore(store, (s) => s.open);
197
+ const toggleOpen = () => store.setState({ open: !open });
198
+ return /* @__PURE__ */ jsx2(
199
+ "button",
200
+ {
201
+ onClick: (e) => {
202
+ e.stopPropagation();
203
+ toggleOpen();
204
+ if (onClick) onClick(e);
205
+ },
206
+ "aria-expanded": open,
207
+ className: cn(className),
208
+ ...props,
209
+ children
210
+ }
211
+ );
212
+ };
213
+ DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
214
+ var ITEM_SIZE_CLASSES = {
215
+ small: "text-sm",
216
+ medium: "text-md"
217
+ };
218
+ var SIDE_CLASSES = {
219
+ top: "bottom-full",
220
+ right: "top-full",
221
+ bottom: "top-full",
222
+ left: "top-full"
223
+ };
224
+ var ALIGN_CLASSES = {
225
+ start: "left-0",
226
+ center: "left-1/2 -translate-x-1/2",
227
+ end: "right-0"
228
+ };
229
+ var MENUCONTENT_VARIANT_CLASSES = {
230
+ menu: "p-1",
231
+ profile: "p-6"
232
+ };
233
+ var MenuLabel = forwardRef(({ className, inset, store: _store, ...props }, ref) => {
234
+ return /* @__PURE__ */ jsx2(
235
+ "div",
236
+ {
237
+ ref,
238
+ className: cn("text-sm w-full", inset ? "pl-8" : "", className),
239
+ ...props
240
+ }
241
+ );
242
+ });
243
+ MenuLabel.displayName = "MenuLabel";
244
+ var DropdownMenuContent = forwardRef(
245
+ ({
246
+ className,
247
+ align = "start",
248
+ side = "bottom",
249
+ variant = "menu",
250
+ sideOffset = 4,
251
+ children,
252
+ store: externalStore,
253
+ ...props
254
+ }, ref) => {
255
+ const store = useDropdownStore(externalStore);
256
+ const open = useStore(store, (s) => s.open);
257
+ const [isVisible, setIsVisible] = useState(open);
258
+ useEffect(() => {
259
+ if (open) {
260
+ setIsVisible(true);
261
+ } else {
262
+ const timer = setTimeout(() => setIsVisible(false), 200);
263
+ return () => clearTimeout(timer);
264
+ }
265
+ }, [open]);
266
+ if (!isVisible) return null;
267
+ const getPositionClasses = () => {
268
+ const vertical = SIDE_CLASSES[side];
269
+ const horizontal = ALIGN_CLASSES[align];
270
+ return `absolute ${vertical} ${horizontal}`;
271
+ };
272
+ const variantClasses = MENUCONTENT_VARIANT_CLASSES[variant];
273
+ return /* @__PURE__ */ jsx2(
274
+ "div",
275
+ {
276
+ ref,
277
+ role: "menu",
278
+ className: `
279
+ bg-background z-50 min-w-[210px] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md border-border-100
280
+ ${open ? "animate-in fade-in-0 zoom-in-95" : "animate-out fade-out-0 zoom-out-95"}
281
+ ${getPositionClasses()}
282
+ ${variantClasses}
283
+ ${className}
284
+ `,
285
+ style: {
286
+ marginTop: side === "bottom" ? sideOffset : void 0,
287
+ marginBottom: side === "top" ? sideOffset : void 0,
288
+ marginLeft: side === "right" ? sideOffset : void 0,
289
+ marginRight: side === "left" ? sideOffset : void 0
290
+ },
291
+ ...props,
292
+ children
293
+ }
294
+ );
295
+ }
296
+ );
297
+ DropdownMenuContent.displayName = "DropdownMenuContent";
298
+ var DropdownMenuItem = forwardRef(
299
+ ({
300
+ className,
301
+ size = "small",
302
+ children,
303
+ iconRight,
304
+ iconLeft,
305
+ disabled = false,
306
+ onClick,
307
+ variant = "menu",
308
+ store: externalStore,
309
+ ...props
310
+ }, ref) => {
311
+ const store = useDropdownStore(externalStore);
312
+ const setOpen = useStore(store, (s) => s.setOpen);
313
+ const sizeClasses = ITEM_SIZE_CLASSES[size];
314
+ const handleClick = (e) => {
315
+ if (disabled) {
316
+ e.preventDefault();
317
+ e.stopPropagation();
318
+ return;
319
+ }
320
+ onClick?.(e);
321
+ setOpen(false);
322
+ };
323
+ const getVariantClasses = () => {
324
+ if (variant === "profile") {
325
+ return "relative flex flex-row justify-between select-none items-center gap-2 rounded-sm p-4 text-sm outline-none transition-colors [&>svg]:size-6 [&>svg]:shrink-0";
326
+ }
327
+ return "relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0";
328
+ };
329
+ const getVariantProps = () => {
330
+ return variant === "profile" ? { "data-variant": "profile" } : {};
331
+ };
332
+ return /* @__PURE__ */ jsxs2(
333
+ "div",
334
+ {
335
+ ref,
336
+ role: "menuitem",
337
+ ...getVariantProps(),
338
+ "aria-disabled": disabled,
339
+ className: `
340
+ focus-visible:bg-background-50
341
+ ${getVariantClasses()}
342
+ ${sizeClasses}
343
+ ${className}
344
+ ${disabled ? "cursor-not-allowed text-text-400" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
345
+ `,
346
+ onClick: handleClick,
347
+ onKeyDown: (e) => {
348
+ if (e.key === "Enter" || e.key === " ") handleClick(e);
349
+ },
350
+ tabIndex: disabled ? -1 : 0,
351
+ ...props,
352
+ children: [
353
+ iconLeft,
354
+ /* @__PURE__ */ jsx2("span", { className: "w-full text-md", children }),
355
+ iconRight
356
+ ]
357
+ }
358
+ );
359
+ }
360
+ );
361
+ DropdownMenuItem.displayName = "DropdownMenuItem";
362
+ var DropdownMenuSeparator = forwardRef(({ className, store: _store, ...props }, ref) => /* @__PURE__ */ jsx2(
363
+ "div",
364
+ {
365
+ ref,
366
+ className: cn("my-1 h-px bg-border-200", className),
367
+ ...props
368
+ }
369
+ ));
370
+ DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
371
+ var ProfileMenuTrigger = forwardRef(({ className, onClick, store: externalStore, ...props }, ref) => {
372
+ const store = useDropdownStore(externalStore);
373
+ const open = useStore(store, (s) => s.open);
374
+ const toggleOpen = () => store.setState({ open: !open });
375
+ return /* @__PURE__ */ jsx2(
376
+ "button",
377
+ {
378
+ ref,
379
+ className: cn(
380
+ "rounded-lg size-10 bg-primary-50 flex items-center justify-center cursor-pointer",
381
+ className
382
+ ),
383
+ onClick: (e) => {
384
+ e.stopPropagation();
385
+ toggleOpen();
386
+ onClick?.(e);
387
+ },
388
+ "aria-expanded": open,
389
+ ...props,
390
+ children: /* @__PURE__ */ jsx2("span", { className: "size-6 rounded-full bg-primary-100 flex items-center justify-center", children: /* @__PURE__ */ jsx2(User, { className: "text-primary-950", size: 18 }) })
391
+ }
392
+ );
393
+ });
394
+ ProfileMenuTrigger.displayName = "ProfileMenuTrigger";
395
+ var ProfileMenuHeader = forwardRef(({ className, name, email, store: _store, ...props }, ref) => {
396
+ return /* @__PURE__ */ jsxs2(
397
+ "div",
398
+ {
399
+ ref,
400
+ "data-component": "ProfileMenuHeader",
401
+ className: cn("flex flex-row gap-4 items-center", className),
402
+ ...props,
403
+ children: [
404
+ /* @__PURE__ */ jsx2("span", { className: "size-16 bg-primary-100 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx2(User, { size: 34, className: "text-primary-950" }) }),
405
+ /* @__PURE__ */ jsxs2("div", { className: "flex flex-col ", children: [
406
+ /* @__PURE__ */ jsx2("p", { className: "text-xl font-bold text-text-950", children: name }),
407
+ /* @__PURE__ */ jsx2("p", { className: "text-md text-text-600", children: email })
408
+ ] })
409
+ ]
410
+ }
411
+ );
412
+ });
413
+ ProfileMenuHeader.displayName = "ProfileMenuHeader";
414
+ var ProfileMenuSection = forwardRef(({ className, children, store: _store, ...props }, ref) => {
415
+ return /* @__PURE__ */ jsx2("div", { ref, className: cn("flex flex-col p-2", className), ...props, children });
416
+ });
417
+ ProfileMenuSection.displayName = "ProfileMenuSection";
418
+ var ProfileMenuFooter = ({
419
+ className,
420
+ disabled = false,
421
+ onClick,
422
+ store: externalStore,
423
+ ...props
424
+ }) => {
425
+ const store = useDropdownStore(externalStore);
426
+ const setOpen = useStore(store, (s) => s.setOpen);
427
+ return /* @__PURE__ */ jsxs2(
428
+ Button_default,
429
+ {
430
+ variant: "outline",
431
+ className: cn("w-full", className),
432
+ disabled,
433
+ onClick: (e) => {
434
+ setOpen(false);
435
+ onClick?.(e);
436
+ },
437
+ ...props,
438
+ children: [
439
+ /* @__PURE__ */ jsx2("span", { className: "mr-2 flex items-center", children: /* @__PURE__ */ jsx2(SignOut, {}) }),
440
+ /* @__PURE__ */ jsx2("span", { children: "Sair" })
441
+ ]
442
+ }
443
+ );
444
+ };
445
+ ProfileMenuFooter.displayName = "ProfileMenuFooter";
446
+ var DropdownMenu_default = DropdownMenu;
447
+
448
+ // src/components/Search/Search.tsx
449
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
450
+ var filterOptions = (options, query) => {
451
+ if (!query || query.length < 1) return [];
452
+ return options.filter(
453
+ (option) => option.toLowerCase().includes(query.toLowerCase())
454
+ );
455
+ };
456
+ var updateInputValue = (value, ref, onChange) => {
457
+ if (!onChange) return;
458
+ if (ref && "current" in ref && ref.current) {
459
+ ref.current.value = value;
460
+ const event = new Event("input", { bubbles: true });
461
+ Object.defineProperty(event, "target", {
462
+ writable: false,
463
+ value: ref.current
464
+ });
465
+ onChange(event);
466
+ } else {
467
+ const event = {
468
+ target: { value },
469
+ currentTarget: { value }
470
+ };
471
+ onChange(event);
472
+ }
473
+ };
474
+ var Search = forwardRef2(
475
+ ({
476
+ options = [],
477
+ onSelect,
478
+ onSearch,
479
+ showDropdown: controlledShowDropdown,
480
+ onDropdownChange,
481
+ dropdownMaxHeight = 240,
482
+ noResultsText = "Nenhum resultado encontrado",
483
+ className = "",
484
+ containerClassName = "",
485
+ disabled,
486
+ readOnly,
487
+ id,
488
+ onClear,
489
+ value,
490
+ onChange,
491
+ placeholder = "Buscar...",
492
+ ...props
493
+ }, ref) => {
494
+ const [dropdownOpen, setDropdownOpen] = useState2(false);
495
+ const dropdownStore = useRef2(createDropdownStore()).current;
496
+ const dropdownRef = useRef2(null);
497
+ const filteredOptions = useMemo(() => {
498
+ if (!options.length) {
499
+ return [];
500
+ }
501
+ const filtered = filterOptions(options, value || "");
502
+ return filtered;
503
+ }, [options, value]);
504
+ const showDropdown = controlledShowDropdown ?? (dropdownOpen && value && String(value).length > 0);
505
+ useEffect2(() => {
506
+ const shouldShow = Boolean(value && String(value).length > 0);
507
+ setDropdownOpen(shouldShow);
508
+ dropdownStore.setState({ open: shouldShow });
509
+ onDropdownChange?.(shouldShow);
510
+ }, [value, onDropdownChange, dropdownStore]);
511
+ const handleSelectOption = (option) => {
512
+ onSelect?.(option);
513
+ setDropdownOpen(false);
514
+ dropdownStore.setState({ open: false });
515
+ updateInputValue(option, ref, onChange);
516
+ };
517
+ useEffect2(() => {
518
+ const handleClickOutside = (event) => {
519
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
520
+ setDropdownOpen(false);
521
+ dropdownStore.setState({ open: false });
522
+ }
523
+ };
524
+ if (showDropdown) {
525
+ document.addEventListener("mousedown", handleClickOutside);
526
+ }
527
+ return () => {
528
+ document.removeEventListener("mousedown", handleClickOutside);
529
+ };
530
+ }, [showDropdown, dropdownStore]);
531
+ const generatedId = useId();
532
+ const inputId = id ?? `search-${generatedId}`;
533
+ const handleClear = () => {
534
+ if (onClear) {
535
+ onClear();
536
+ } else {
537
+ updateInputValue("", ref, onChange);
538
+ }
539
+ };
540
+ const handleClearClick = (e) => {
541
+ e.preventDefault();
542
+ e.stopPropagation();
543
+ handleClear();
544
+ };
545
+ const handleLeftIconClick = () => {
546
+ if (ref && "current" in ref && ref.current) {
547
+ ref.current.blur();
548
+ }
549
+ };
550
+ const handleInputChange = (e) => {
551
+ onChange?.(e);
552
+ onSearch?.(e.target.value);
553
+ };
554
+ const getInputStateClasses = (disabled2, readOnly2) => {
555
+ if (disabled2) return "cursor-not-allowed opacity-40";
556
+ if (readOnly2) return "cursor-default focus:outline-none !text-text-900";
557
+ return "hover:border-border-400";
558
+ };
559
+ const showClearButton = value && !disabled && !readOnly;
560
+ return /* @__PURE__ */ jsxs3(
561
+ "div",
562
+ {
563
+ ref: dropdownRef,
564
+ className: `w-full max-w-lg md:w-[488px] ${containerClassName}`,
565
+ children: [
566
+ /* @__PURE__ */ jsxs3("div", { className: "relative flex items-center", children: [
567
+ /* @__PURE__ */ jsx3("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx3(
568
+ "button",
569
+ {
570
+ type: "button",
571
+ className: "w-6 h-6 text-text-800 flex items-center justify-center bg-transparent border-0 p-0 cursor-pointer hover:text-text-600 transition-colors",
572
+ onClick: handleLeftIconClick,
573
+ "aria-label": "Voltar",
574
+ children: /* @__PURE__ */ jsx3(CaretLeft, {})
575
+ }
576
+ ) }),
577
+ /* @__PURE__ */ jsx3(
578
+ "input",
579
+ {
580
+ ref,
581
+ id: inputId,
582
+ type: "text",
583
+ className: `w-full py-0 px-4 pl-10 ${showClearButton ? "pr-10" : "pr-4"} font-normal text-text-900 focus:outline-primary-950 border rounded-full bg-primary border-border-300 focus:border-2 focus:border-primary-950 h-10 placeholder:text-text-600 ${getInputStateClasses(disabled, readOnly)} ${className}`,
584
+ value,
585
+ onChange: handleInputChange,
586
+ disabled,
587
+ readOnly,
588
+ placeholder,
589
+ "aria-expanded": showDropdown ? "true" : void 0,
590
+ "aria-haspopup": options.length > 0 ? "listbox" : void 0,
591
+ role: options.length > 0 ? "combobox" : void 0,
592
+ ...props
593
+ }
594
+ ),
595
+ showClearButton && /* @__PURE__ */ jsx3("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2", children: /* @__PURE__ */ jsx3(
596
+ "button",
597
+ {
598
+ type: "button",
599
+ className: "p-0 border-0 bg-transparent cursor-pointer",
600
+ onMouseDown: handleClearClick,
601
+ "aria-label": "Limpar busca",
602
+ children: /* @__PURE__ */ jsx3("span", { className: "w-6 h-6 text-text-800 flex items-center justify-center hover:text-text-600 transition-colors", children: /* @__PURE__ */ jsx3(X, {}) })
603
+ }
604
+ ) })
605
+ ] }),
606
+ showDropdown && /* @__PURE__ */ jsx3(DropdownMenu_default, { open: showDropdown, onOpenChange: setDropdownOpen, children: /* @__PURE__ */ jsx3(
607
+ DropdownMenuContent,
608
+ {
609
+ className: "w-full mt-1",
610
+ style: { maxHeight: dropdownMaxHeight },
611
+ align: "start",
612
+ children: filteredOptions.length > 0 ? filteredOptions.map((option) => /* @__PURE__ */ jsx3(
613
+ DropdownMenuItem,
614
+ {
615
+ onClick: () => handleSelectOption(option),
616
+ className: "text-text-700 text-base leading-6 cursor-pointer",
617
+ children: option
618
+ },
619
+ option
620
+ )) : /* @__PURE__ */ jsx3("div", { className: "px-3 py-3 text-text-700 text-base", children: noResultsText })
621
+ }
622
+ ) })
623
+ ]
624
+ }
625
+ );
626
+ }
627
+ );
628
+ Search.displayName = "Search";
629
+ var Search_default = Search;
630
+ export {
631
+ Search_default as default
632
+ };
633
+ //# sourceMappingURL=index.mjs.map