@flowtomic/ui 0.1.2 → 0.1.4
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.
- package/dist/blocks/developer-panel/page.d.ts.map +1 -1
- package/dist/blocks/developer-panel/page.js +2 -2
- package/dist/components/atoms/actions/badge/badge.d.ts +2 -2
- package/dist/components/atoms/actions/button/button.d.ts +2 -2
- package/dist/components/atoms/animation/encrypted-text/encrypted-text.d.ts +57 -0
- package/dist/components/atoms/animation/encrypted-text/encrypted-text.d.ts.map +1 -0
- package/dist/components/atoms/animation/encrypted-text/encrypted-text.js +104 -0
- package/dist/components/atoms/animation/encrypted-text/index.d.ts +3 -0
- package/dist/components/atoms/animation/encrypted-text/index.d.ts.map +1 -0
- package/dist/components/atoms/animation/encrypted-text/index.js +1 -0
- package/dist/components/atoms/animation/index.d.ts +2 -0
- package/dist/components/atoms/animation/index.d.ts.map +1 -1
- package/dist/components/atoms/animation/index.js +1 -0
- package/dist/components/atoms/feedback/alert/alert.d.ts +1 -1
- package/dist/components/atoms/feedback/alert-dialog/alert-dialog.d.ts +2 -2
- package/dist/components/atoms/feedback/tooltip/index.d.ts +1 -1
- package/dist/components/atoms/feedback/tooltip/index.d.ts.map +1 -1
- package/dist/components/atoms/feedback/tooltip/index.js +1 -1
- package/dist/components/atoms/feedback/tooltip/tooltip.d.ts +42 -5
- package/dist/components/atoms/feedback/tooltip/tooltip.d.ts.map +1 -1
- package/dist/components/atoms/feedback/tooltip/tooltip.js +188 -5
- package/dist/components/atoms/forms/autocomplete/autocomplete-context.d.ts +29 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-context.d.ts.map +1 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-context.js +10 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-item.d.ts +16 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-item.d.ts.map +1 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-item.js +48 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-section.d.ts +14 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-section.d.ts.map +1 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete-section.js +13 -0
- package/dist/components/atoms/forms/autocomplete/autocomplete.d.ts +13 -9
- package/dist/components/atoms/forms/autocomplete/autocomplete.d.ts.map +1 -1
- package/dist/components/atoms/forms/autocomplete/autocomplete.js +295 -87
- package/dist/components/atoms/forms/autocomplete/index.d.ts +6 -0
- package/dist/components/atoms/forms/autocomplete/index.d.ts.map +1 -1
- package/dist/components/atoms/forms/autocomplete/index.js +3 -0
- package/dist/components/atoms/forms/index.d.ts +0 -2
- package/dist/components/atoms/forms/index.d.ts.map +1 -1
- package/dist/components/atoms/forms/index.js +0 -1
- package/dist/components/atoms/forms/input/input.d.ts +2 -2
- package/dist/components/atoms/forms/toggle/toggle.d.ts +2 -2
- package/dist/components/atoms/layout/sidebar/sidebar.d.ts +2 -2
- package/dist/components/atoms/navigation/command/command.d.ts +7 -7
- package/dist/components/atoms/navigation/tabs/tabs.js +2 -2
- package/dist/components/molecules/auth/auth-navigation-link/auth-navigation-link.d.ts +1 -11
- package/dist/components/molecules/auth/auth-navigation-link/auth-navigation-link.d.ts.map +1 -1
- package/dist/components/molecules/auth/auth-navigation-link/auth-navigation-link.js +2 -3
- package/dist/components/molecules/forms/autocomplete/autocomplete-context.d.ts +16 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-context.d.ts.map +1 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-context.js +14 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-item.d.ts +23 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-item.d.ts.map +1 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-item.js +29 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-section.d.ts +19 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-section.d.ts.map +1 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete-section.js +13 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete.d.ts +33 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete.d.ts.map +1 -0
- package/dist/components/molecules/forms/autocomplete/autocomplete.js +101 -0
- package/dist/components/molecules/forms/autocomplete/index.d.ts +9 -0
- package/dist/components/molecules/forms/autocomplete/index.d.ts.map +1 -0
- package/dist/components/molecules/forms/autocomplete/index.js +4 -0
- package/dist/components/molecules/forms/item/item.d.ts +3 -3
- package/dist/components/molecules/index.d.ts +2 -2
- package/dist/components/molecules/index.d.ts.map +1 -1
- package/dist/components/molecules/index.js +1 -1
- package/dist/components/molecules/navigation/menu-dock/menu-dock.d.ts +5 -0
- package/dist/components/molecules/navigation/menu-dock/menu-dock.d.ts.map +1 -1
- package/dist/components/molecules/navigation/menu-dock/menu-dock.js +103 -10
- package/dist/components/molecules/typography/index.d.ts +0 -2
- package/dist/components/molecules/typography/index.d.ts.map +1 -1
- package/dist/components/molecules/typography/index.js +1 -1
- package/dist/components/organisms/model-selector/model-selector.d.ts +1 -1
- package/dist/index.js +460 -498
- package/package.json +28 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/blocks/developer-panel/page.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/blocks/developer-panel/page.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAkB5E,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAE/B;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAEzC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAE3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B;;OAEG;IACH,iBAAiB,CAAC,EAAE;QAClB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,qBAAqB,CAAC,CAAC;QACnE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;QACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;KAClC,CAAC;CACH;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAI,EACJ,MAAM,EACN,UAAU,EACV,eAAe,EACf,OAAe,EACf,KAAY,EACZ,UAAe,EACf,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,iBAAiB,GAClB,EAAE,mBAAmB,2CAySrB"}
|
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
*/
|
|
7
7
|
"use client";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
9
|
-
import { ScriptEditor } from "@/components/organisms";
|
|
10
|
-
import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/atoms";
|
|
11
9
|
import { Code, Info } from "lucide-react";
|
|
12
10
|
import { useState } from "react";
|
|
11
|
+
import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Tabs, TabsContent, TabsList, TabsTrigger, } from "@/components/atoms";
|
|
12
|
+
import { ScriptEditor } from "@/components/organisms";
|
|
13
13
|
export default function DeveloperPanel({ user, health, systemInfo, environmentInfo, loading = false, error = null, apiBaseUrl = "", onOpenSwagger, onOpenApiDocs, onOpenHealthCheck, scriptEditorProps, }) {
|
|
14
14
|
const [copiedText, setCopiedText] = useState(null);
|
|
15
15
|
const copyToClipboard = (text, label) => {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type VariantProps } from "class-variance-authority";
|
|
2
2
|
import React from "react";
|
|
3
3
|
declare const badgeVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
5
|
-
size?: "sm" | "
|
|
4
|
+
variant?: "outline" | "default" | "success" | "secondary" | "destructive" | "warning" | "info" | null | undefined;
|
|
5
|
+
size?: "sm" | "lg" | "md" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
8
8
|
children: React.ReactNode;
|
|
@@ -2,8 +2,8 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
2
2
|
import { type Transition } from "motion/react";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
declare const buttonVariants: (props?: ({
|
|
5
|
-
variant?: "
|
|
6
|
-
size?: "
|
|
5
|
+
variant?: "link" | "outline" | "default" | "success" | "secondary" | "destructive" | "info" | "ghost" | "natural" | null | undefined;
|
|
6
|
+
size?: "sm" | "default" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
8
8
|
export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "transition">, VariantProps<typeof buttonVariants> {
|
|
9
9
|
asChild?: boolean;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* EncryptedText Component - Flowtomic UI
|
|
3
|
+
*
|
|
4
|
+
* Componente de texto que revela o texto gradualmente com efeito de texto criptografado/gibberish.
|
|
5
|
+
* Baseado em Aceternity UI - https://ui.aceternity.com/components/encrypted-text
|
|
6
|
+
* Usa motion/react para detecção de viewport e animações suaves
|
|
7
|
+
*/
|
|
8
|
+
import type React from "react";
|
|
9
|
+
export interface EncryptedTextProps {
|
|
10
|
+
/**
|
|
11
|
+
* O texto a ser criptografado e revelado
|
|
12
|
+
*/
|
|
13
|
+
text: string;
|
|
14
|
+
/**
|
|
15
|
+
* Classe CSS adicional
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Tempo em milissegundos entre revelar cada caractere real subsequente.
|
|
20
|
+
* Menor é mais rápido. Padrão: 50ms por caractere.
|
|
21
|
+
* @default 50
|
|
22
|
+
*/
|
|
23
|
+
revealDelayMs?: number;
|
|
24
|
+
/**
|
|
25
|
+
* Conjunto de caracteres customizado para usar no efeito gibberish.
|
|
26
|
+
* @default "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?"
|
|
27
|
+
*/
|
|
28
|
+
charset?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Tempo em milissegundos entre flips de gibberish para caracteres não revelados.
|
|
31
|
+
* Menor é mais jittery. Padrão: 50ms.
|
|
32
|
+
* @default 50
|
|
33
|
+
*/
|
|
34
|
+
flipDelayMs?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Classe CSS para estilizar caracteres criptografados/scrambled
|
|
37
|
+
*/
|
|
38
|
+
encryptedClassName?: string;
|
|
39
|
+
/**
|
|
40
|
+
* Classe CSS para estilizar caracteres revelados
|
|
41
|
+
*/
|
|
42
|
+
revealedClassName?: string;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* EncryptedText - Componente de texto com efeito de revelação gradual
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```tsx
|
|
49
|
+
* <EncryptedText
|
|
50
|
+
* text="Texto secreto"
|
|
51
|
+
* revealDelayMs={30}
|
|
52
|
+
* flipDelayMs={50}
|
|
53
|
+
* />
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare const EncryptedText: React.FC<EncryptedTextProps>;
|
|
57
|
+
//# sourceMappingURL=encrypted-text.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"encrypted-text.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/encrypted-text/encrypted-text.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAoBD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgGtD,CAAC"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* EncryptedText Component - Flowtomic UI
|
|
3
|
+
*
|
|
4
|
+
* Componente de texto que revela o texto gradualmente com efeito de texto criptografado/gibberish.
|
|
5
|
+
* Baseado em Aceternity UI - https://ui.aceternity.com/components/encrypted-text
|
|
6
|
+
* Usa motion/react para detecção de viewport e animações suaves
|
|
7
|
+
*/
|
|
8
|
+
"use client";
|
|
9
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
+
import { motion, useInView } from "motion/react";
|
|
11
|
+
import { useEffect, useRef, useState } from "react";
|
|
12
|
+
import { cn } from "@/lib/utils";
|
|
13
|
+
const DEFAULT_CHARSET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+-={}[];:,.<>/?";
|
|
14
|
+
function generateRandomCharacter(charset) {
|
|
15
|
+
const index = Math.floor(Math.random() * charset.length);
|
|
16
|
+
return charset.charAt(index);
|
|
17
|
+
}
|
|
18
|
+
function generateGibberishPreservingSpaces(original, charset) {
|
|
19
|
+
if (!original)
|
|
20
|
+
return "";
|
|
21
|
+
let result = "";
|
|
22
|
+
for (let i = 0; i < original.length; i += 1) {
|
|
23
|
+
const ch = original[i];
|
|
24
|
+
result += ch === " " ? " " : generateRandomCharacter(charset);
|
|
25
|
+
}
|
|
26
|
+
return result;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* EncryptedText - Componente de texto com efeito de revelação gradual
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```tsx
|
|
33
|
+
* <EncryptedText
|
|
34
|
+
* text="Texto secreto"
|
|
35
|
+
* revealDelayMs={30}
|
|
36
|
+
* flipDelayMs={50}
|
|
37
|
+
* />
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export const EncryptedText = ({ text, className, revealDelayMs = 50, charset = DEFAULT_CHARSET, flipDelayMs = 50, encryptedClassName, revealedClassName, }) => {
|
|
41
|
+
const ref = useRef(null);
|
|
42
|
+
const isInView = useInView(ref, { once: true });
|
|
43
|
+
const [revealCount, setRevealCount] = useState(0);
|
|
44
|
+
const animationFrameRef = useRef(null);
|
|
45
|
+
const startTimeRef = useRef(0);
|
|
46
|
+
const lastFlipTimeRef = useRef(0);
|
|
47
|
+
const scrambleCharsRef = useRef(text ? generateGibberishPreservingSpaces(text, charset).split("") : []);
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
if (!isInView)
|
|
50
|
+
return;
|
|
51
|
+
// Reset state for a fresh animation whenever dependencies change
|
|
52
|
+
const initial = text ? generateGibberishPreservingSpaces(text, charset) : "";
|
|
53
|
+
scrambleCharsRef.current = initial.split("");
|
|
54
|
+
startTimeRef.current = performance.now();
|
|
55
|
+
lastFlipTimeRef.current = startTimeRef.current;
|
|
56
|
+
setRevealCount(0);
|
|
57
|
+
let isCancelled = false;
|
|
58
|
+
const update = (now) => {
|
|
59
|
+
if (isCancelled)
|
|
60
|
+
return;
|
|
61
|
+
const elapsedMs = now - startTimeRef.current;
|
|
62
|
+
const totalLength = text.length;
|
|
63
|
+
const currentRevealCount = Math.min(totalLength, Math.floor(elapsedMs / Math.max(1, revealDelayMs)));
|
|
64
|
+
setRevealCount(currentRevealCount);
|
|
65
|
+
if (currentRevealCount >= totalLength) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
// Re-randomize unrevealed scramble characters on an interval
|
|
69
|
+
const timeSinceLastFlip = now - lastFlipTimeRef.current;
|
|
70
|
+
if (timeSinceLastFlip >= Math.max(0, flipDelayMs)) {
|
|
71
|
+
for (let index = 0; index < totalLength; index += 1) {
|
|
72
|
+
if (index >= currentRevealCount) {
|
|
73
|
+
if (text[index] !== " ") {
|
|
74
|
+
scrambleCharsRef.current[index] = generateRandomCharacter(charset);
|
|
75
|
+
}
|
|
76
|
+
else {
|
|
77
|
+
scrambleCharsRef.current[index] = " ";
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
lastFlipTimeRef.current = now;
|
|
82
|
+
}
|
|
83
|
+
animationFrameRef.current = requestAnimationFrame(update);
|
|
84
|
+
};
|
|
85
|
+
animationFrameRef.current = requestAnimationFrame(update);
|
|
86
|
+
return () => {
|
|
87
|
+
isCancelled = true;
|
|
88
|
+
if (animationFrameRef.current !== null) {
|
|
89
|
+
cancelAnimationFrame(animationFrameRef.current);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}, [isInView, text, revealDelayMs, charset, flipDelayMs]);
|
|
93
|
+
if (!text)
|
|
94
|
+
return null;
|
|
95
|
+
return (_jsx(motion.span, { ref: ref, className: cn(className), "aria-label": text, role: "text", children: text.split("").map((char, index) => {
|
|
96
|
+
const isRevealed = index < revealCount;
|
|
97
|
+
const displayChar = isRevealed
|
|
98
|
+
? char
|
|
99
|
+
: char === " "
|
|
100
|
+
? " "
|
|
101
|
+
: (scrambleCharsRef.current[index] ?? generateRandomCharacter(charset));
|
|
102
|
+
return (_jsx("span", { className: cn(isRevealed ? revealedClassName : encryptedClassName), children: displayChar }, index));
|
|
103
|
+
}) }));
|
|
104
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/animation/encrypted-text/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { EncryptedText } from "./encrypted-text";
|
|
@@ -6,6 +6,8 @@ export type { Animated3DProps } from "./animated-3d";
|
|
|
6
6
|
export { Animated3D } from "./animated-3d";
|
|
7
7
|
export type { BackdropBlurProps } from "./backdrop-blur";
|
|
8
8
|
export { BackdropBlur } from "./backdrop-blur";
|
|
9
|
+
export type { EncryptedTextProps } from "./encrypted-text";
|
|
10
|
+
export { EncryptedText } from "./encrypted-text";
|
|
9
11
|
export type { LoaderProps } from "./loader";
|
|
10
12
|
export { Loader } from "./loader";
|
|
11
13
|
export type { ProgressProps } from "./progress";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/animation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/animation/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
|
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
export { Animated3D } from "./animated-3d";
|
|
6
6
|
export { BackdropBlur } from "./backdrop-blur";
|
|
7
|
+
export { EncryptedText } from "./encrypted-text";
|
|
7
8
|
export { Loader } from "./loader";
|
|
8
9
|
export { Progress } from "./progress";
|
|
9
10
|
export { Shimmer } from "./shimmer";
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
import { type VariantProps } from "class-variance-authority";
|
|
15
15
|
import * as React from "react";
|
|
16
16
|
declare const alertVariants: (props?: ({
|
|
17
|
-
variant?: "default" | "
|
|
17
|
+
variant?: "default" | "success" | "destructive" | "warning" | "info" | null | undefined;
|
|
18
18
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
19
19
|
export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
20
20
|
}
|
|
@@ -19,7 +19,7 @@ export type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof Aler
|
|
|
19
19
|
* Variantes de animação para AlertDialogContent
|
|
20
20
|
*/
|
|
21
21
|
declare const alertDialogContentVariants: (props?: ({
|
|
22
|
-
animation?: "
|
|
22
|
+
animation?: "center" | "bottom" | "left" | "right" | "top" | "depth" | "3d" | null | undefined;
|
|
23
23
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
24
24
|
export type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & VariantProps<typeof alertDialogContentVariants> & {
|
|
25
25
|
/**
|
|
@@ -61,7 +61,7 @@ declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDial
|
|
|
61
61
|
* Suporta animações 3D quando animation="3d"
|
|
62
62
|
*/
|
|
63
63
|
declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
64
|
-
animation?: "
|
|
64
|
+
animation?: "center" | "bottom" | "left" | "right" | "top" | "depth" | "3d" | null | undefined;
|
|
65
65
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
66
66
|
/**
|
|
67
67
|
* Habilita backdrop blur (apenas para animation="3d")
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export type { TooltipContentProps, TooltipProps, TooltipTriggerProps, } from "./tooltip";
|
|
2
|
-
export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, } from "./tooltip";
|
|
2
|
+
export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, TooltipWithMouseFollow, } from "./tooltip";
|
|
3
3
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/feedback/tooltip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/feedback/tooltip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,GACpB,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,eAAe,EACf,cAAc,EACd,sBAAsB,GACvB,MAAM,WAAW,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, } from "./tooltip";
|
|
1
|
+
export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, TooltipWithMouseFollow, } from "./tooltip";
|
|
@@ -1,13 +1,26 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Tooltip Component - Flowtomic UI
|
|
3
3
|
*
|
|
4
|
-
* Componente Tooltip baseado em Radix UI
|
|
4
|
+
* Componente Tooltip baseado em Radix UI (padrão) ou React Aria (followMouse)
|
|
5
|
+
* com seguimento do mouse e posicionamento inteligente
|
|
6
|
+
* Baseado no Aceternity UI Tooltip Card para animações
|
|
5
7
|
*/
|
|
6
8
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
7
9
|
import * as React from "react";
|
|
8
10
|
export type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
|
|
9
11
|
export type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;
|
|
10
|
-
export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content
|
|
12
|
+
export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
|
|
13
|
+
/**
|
|
14
|
+
* Se o tooltip deve seguir o mouse
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
followMouse?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Largura mínima do tooltip quando seguir o mouse
|
|
20
|
+
* @default 240 (15rem)
|
|
21
|
+
*/
|
|
22
|
+
minWidth?: number;
|
|
23
|
+
};
|
|
11
24
|
/**
|
|
12
25
|
* TooltipProvider - Provider do tooltip
|
|
13
26
|
*/
|
|
@@ -19,14 +32,38 @@ declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
|
19
32
|
/**
|
|
20
33
|
* TooltipTrigger - Trigger do tooltip
|
|
21
34
|
*/
|
|
22
|
-
declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement
|
|
35
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
36
|
+
"data-follow-mouse"?: boolean;
|
|
37
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
23
38
|
/**
|
|
24
39
|
* TooltipPortal - Portal do tooltip
|
|
25
40
|
*/
|
|
26
41
|
declare const TooltipPortal: React.FC<TooltipPrimitive.TooltipPortalProps>;
|
|
27
42
|
/**
|
|
28
|
-
* TooltipContent - Conteúdo do tooltip
|
|
43
|
+
* TooltipContent - Conteúdo do tooltip com suporte a seguimento do mouse
|
|
29
44
|
*/
|
|
30
|
-
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> &
|
|
45
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
46
|
+
/**
|
|
47
|
+
* Se o tooltip deve seguir o mouse
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
50
|
+
followMouse?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Largura mínima do tooltip quando seguir o mouse
|
|
53
|
+
* @default 240 (15rem)
|
|
54
|
+
*/
|
|
55
|
+
minWidth?: number;
|
|
56
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
57
|
+
/**
|
|
58
|
+
* TooltipWithMouseFollow - Wrapper completo para tooltip com seguimento do mouse
|
|
59
|
+
* Implementação baseada no Aceternity UI, sem Radix
|
|
60
|
+
*/
|
|
61
|
+
export declare function TooltipWithMouseFollow({ content, children, containerClassName, className, minWidth, }: {
|
|
62
|
+
content: string | React.ReactNode;
|
|
63
|
+
children: React.ReactNode;
|
|
64
|
+
containerClassName?: string;
|
|
65
|
+
className?: string;
|
|
66
|
+
minWidth?: number;
|
|
67
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
31
68
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortal };
|
|
32
69
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/feedback/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/feedback/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAAC;AACxF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC;AAClG,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAC9D,OAAO,gBAAgB,CAAC,OAAO,CAChC,GAAG;IACF;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,eAAe,iDAA4B,CAAC;AAGlD;;GAEG;AACH,QAAA,MAAM,OAAO,yCAAwB,CAAC;AAGtC;;GAEG;AACH,QAAA,MAAM,cAAc;0BAGM,OAAO;2CAW/B,CAAC;AAGH;;GAEG;AACH,QAAA,MAAM,aAAa,+CAA0B,CAAC;AAG9C;;GAEG;AACH,QAAA,MAAM,cAAc;IArDlB;;;OAGG;kBACW,OAAO;IACrB;;;OAGG;eACQ,MAAM;wCA6EjB,CAAC;AAmBH;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,QAAc,GACf,EAAE;IACD,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,2CA0NA;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
1
|
/**
|
|
3
2
|
* Tooltip Component - Flowtomic UI
|
|
4
3
|
*
|
|
5
|
-
* Componente Tooltip baseado em Radix UI
|
|
4
|
+
* Componente Tooltip baseado em Radix UI (padrão) ou React Aria (followMouse)
|
|
5
|
+
* com seguimento do mouse e posicionamento inteligente
|
|
6
|
+
* Baseado no Aceternity UI Tooltip Card para animações
|
|
6
7
|
*/
|
|
8
|
+
"use client";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
10
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
11
|
+
import { useTooltip } from "@react-aria/tooltip";
|
|
12
|
+
import { useTooltipTriggerState } from "@react-stately/tooltip";
|
|
13
|
+
import { AnimatePresence, motion } from "motion/react";
|
|
8
14
|
import * as React from "react";
|
|
9
15
|
import { cn } from "@/lib/utils";
|
|
10
16
|
/**
|
|
@@ -20,7 +26,9 @@ Tooltip.displayName = "Tooltip";
|
|
|
20
26
|
/**
|
|
21
27
|
* TooltipTrigger - Trigger do tooltip
|
|
22
28
|
*/
|
|
23
|
-
const TooltipTrigger =
|
|
29
|
+
const TooltipTrigger = React.forwardRef(({ "data-follow-mouse": followMouse, ...props }, ref) => {
|
|
30
|
+
return (_jsx(TooltipPrimitive.Trigger, { ref: ref, "data-radix-tooltip-trigger": "", "data-follow-mouse": followMouse, ...props }));
|
|
31
|
+
});
|
|
24
32
|
TooltipTrigger.displayName = "TooltipTrigger";
|
|
25
33
|
/**
|
|
26
34
|
* TooltipPortal - Portal do tooltip
|
|
@@ -28,8 +36,183 @@ TooltipTrigger.displayName = "TooltipTrigger";
|
|
|
28
36
|
const TooltipPortal = TooltipPrimitive.Portal;
|
|
29
37
|
TooltipPortal.displayName = "TooltipPortal";
|
|
30
38
|
/**
|
|
31
|
-
* TooltipContent - Conteúdo do tooltip
|
|
39
|
+
* TooltipContent - Conteúdo do tooltip com suporte a seguimento do mouse
|
|
32
40
|
*/
|
|
33
|
-
const TooltipContent = React.forwardRef(({ className, sideOffset = 4,
|
|
41
|
+
const TooltipContent = React.forwardRef(({ className, sideOffset = 4, followMouse = false, minWidth = 240, children, ...props }, ref) => {
|
|
42
|
+
// Se não seguir o mouse, usar comportamento padrão do Radix
|
|
43
|
+
if (!followMouse) {
|
|
44
|
+
return (_jsx(TooltipPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props, children: children }));
|
|
45
|
+
}
|
|
46
|
+
// Comportamento com seguimento do mouse - implementação customizada baseada no Aceternity
|
|
47
|
+
return (_jsx(TooltipContentWithMouseFollow, { ref: ref, sideOffset: sideOffset, className: className, minWidth: minWidth, ...props, children: children }));
|
|
48
|
+
});
|
|
34
49
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
|
|
50
|
+
/**
|
|
51
|
+
* TooltipContentWithMouseFollow - Versão com seguimento do mouse
|
|
52
|
+
* Este componente não renderiza nada - o tooltip é renderizado via portal
|
|
53
|
+
* O estado é gerenciado pelo TooltipWithMouseFollowWrapper
|
|
54
|
+
*/
|
|
55
|
+
const TooltipContentWithMouseFollow = React.forwardRef(({ className, minWidth, children, ...props }, ref) => {
|
|
56
|
+
// Este componente não renderiza - o tooltip é gerenciado pelo wrapper
|
|
57
|
+
return null;
|
|
58
|
+
});
|
|
59
|
+
TooltipContentWithMouseFollow.displayName = "TooltipContentWithMouseFollow";
|
|
60
|
+
/**
|
|
61
|
+
* TooltipWithMouseFollow - Wrapper completo para tooltip com seguimento do mouse
|
|
62
|
+
* Implementação baseada no Aceternity UI, sem Radix
|
|
63
|
+
*/
|
|
64
|
+
export function TooltipWithMouseFollow({ content, children, containerClassName, className, minWidth = 240, }) {
|
|
65
|
+
const [isVisible, setIsVisible] = React.useState(false);
|
|
66
|
+
const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
|
|
67
|
+
const [height, setHeight] = React.useState(0);
|
|
68
|
+
const [position, setPosition] = React.useState({ x: 0, y: 0 });
|
|
69
|
+
const contentRef = React.useRef(null);
|
|
70
|
+
const containerRef = React.useRef(null);
|
|
71
|
+
// Usar React Aria para acessibilidade
|
|
72
|
+
const state = useTooltipTriggerState({ delay: 0 });
|
|
73
|
+
const { tooltipProps } = useTooltip({}, state);
|
|
74
|
+
// Sincronizar estado do React Aria com estado local
|
|
75
|
+
React.useEffect(() => {
|
|
76
|
+
setIsVisible(state.isOpen);
|
|
77
|
+
}, [state.isOpen]);
|
|
78
|
+
React.useEffect(() => {
|
|
79
|
+
if (isVisible && contentRef.current) {
|
|
80
|
+
// Usar múltiplos requestAnimationFrame para garantir que o DOM foi totalmente renderizado
|
|
81
|
+
const rafId1 = requestAnimationFrame(() => {
|
|
82
|
+
const rafId2 = requestAnimationFrame(() => {
|
|
83
|
+
if (contentRef.current) {
|
|
84
|
+
// scrollHeight do conteúdo interno
|
|
85
|
+
const contentScrollHeight = contentRef.current.scrollHeight;
|
|
86
|
+
// py-1.5 = 0.375rem = 6px top + 6px bottom = 12px total
|
|
87
|
+
// Adicionar buffer extra para garantir que não corte
|
|
88
|
+
setHeight(contentScrollHeight + 16);
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
return () => cancelAnimationFrame(rafId2);
|
|
92
|
+
});
|
|
93
|
+
return () => cancelAnimationFrame(rafId1);
|
|
94
|
+
}
|
|
95
|
+
}, [isVisible, content]);
|
|
96
|
+
const calculatePosition = React.useCallback((mouseX, mouseY) => {
|
|
97
|
+
if (!contentRef.current || !containerRef.current) {
|
|
98
|
+
return { x: mouseX + 12, y: mouseY + 12 };
|
|
99
|
+
}
|
|
100
|
+
const tooltip = contentRef.current;
|
|
101
|
+
const container = containerRef.current;
|
|
102
|
+
const containerRect = container.getBoundingClientRect();
|
|
103
|
+
const viewportWidth = window.innerWidth;
|
|
104
|
+
const viewportHeight = window.innerHeight;
|
|
105
|
+
// Dimensões do tooltip
|
|
106
|
+
const tooltipWidth = minWidth;
|
|
107
|
+
const tooltipHeight = tooltip.scrollHeight;
|
|
108
|
+
// Calcular posição absoluta relativa ao viewport
|
|
109
|
+
const absoluteX = containerRect.left + mouseX;
|
|
110
|
+
const absoluteY = containerRect.top + mouseY;
|
|
111
|
+
// Posição inicial relativa ao container (como no original)
|
|
112
|
+
let finalX = mouseX + 12;
|
|
113
|
+
let finalY = mouseY + 12;
|
|
114
|
+
// Verificar se ultrapassa a borda direita
|
|
115
|
+
if (absoluteX + 12 + tooltipWidth > viewportWidth) {
|
|
116
|
+
finalX = mouseX - tooltipWidth - 12;
|
|
117
|
+
}
|
|
118
|
+
// Verificar se ultrapassa a borda esquerda
|
|
119
|
+
if (absoluteX + finalX < 0) {
|
|
120
|
+
finalX = -containerRect.left + 12;
|
|
121
|
+
}
|
|
122
|
+
// Verificar se ultrapassa a borda inferior
|
|
123
|
+
if (absoluteY + 12 + tooltipHeight > viewportHeight) {
|
|
124
|
+
finalY = mouseY - tooltipHeight - 12;
|
|
125
|
+
}
|
|
126
|
+
// Verificar se ultrapassa a borda superior
|
|
127
|
+
if (absoluteY + finalY < 0) {
|
|
128
|
+
finalY = -containerRect.top + 12;
|
|
129
|
+
}
|
|
130
|
+
return { x: finalX, y: finalY };
|
|
131
|
+
}, [minWidth]);
|
|
132
|
+
const updateMousePosition = React.useCallback((mouseX, mouseY) => {
|
|
133
|
+
setMouse({ x: mouseX, y: mouseY });
|
|
134
|
+
const newPosition = calculatePosition(mouseX, mouseY);
|
|
135
|
+
setPosition(newPosition);
|
|
136
|
+
}, [calculatePosition]);
|
|
137
|
+
const handleMouseEnter = (e) => {
|
|
138
|
+
state.open();
|
|
139
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
140
|
+
// Usar coordenadas relativas ao container para cálculo
|
|
141
|
+
const mouseX = e.clientX - rect.left;
|
|
142
|
+
const mouseY = e.clientY - rect.top;
|
|
143
|
+
updateMousePosition(mouseX, mouseY);
|
|
144
|
+
};
|
|
145
|
+
const handleMouseLeave = () => {
|
|
146
|
+
state.close();
|
|
147
|
+
setMouse({ x: 0, y: 0 });
|
|
148
|
+
setPosition({ x: 0, y: 0 });
|
|
149
|
+
};
|
|
150
|
+
const handleMouseMove = (e) => {
|
|
151
|
+
if (!isVisible)
|
|
152
|
+
return;
|
|
153
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
154
|
+
const mouseX = e.clientX - rect.left;
|
|
155
|
+
const mouseY = e.clientY - rect.top;
|
|
156
|
+
updateMousePosition(mouseX, mouseY);
|
|
157
|
+
};
|
|
158
|
+
const handleTouchStart = (e) => {
|
|
159
|
+
const touch = e.touches[0];
|
|
160
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
161
|
+
const mouseX = touch.clientX - rect.left;
|
|
162
|
+
const mouseY = touch.clientY - rect.top;
|
|
163
|
+
updateMousePosition(mouseX, mouseY);
|
|
164
|
+
state.open();
|
|
165
|
+
};
|
|
166
|
+
const handleTouchEnd = () => {
|
|
167
|
+
setTimeout(() => {
|
|
168
|
+
state.close();
|
|
169
|
+
setMouse({ x: 0, y: 0 });
|
|
170
|
+
setPosition({ x: 0, y: 0 });
|
|
171
|
+
}, 2000);
|
|
172
|
+
};
|
|
173
|
+
const handleClick = (e) => {
|
|
174
|
+
if (window.matchMedia("(hover: none)").matches) {
|
|
175
|
+
e.preventDefault();
|
|
176
|
+
if (isVisible) {
|
|
177
|
+
state.close();
|
|
178
|
+
setMouse({ x: 0, y: 0 });
|
|
179
|
+
setPosition({ x: 0, y: 0 });
|
|
180
|
+
}
|
|
181
|
+
else {
|
|
182
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
183
|
+
const mouseX = e.clientX - rect.left;
|
|
184
|
+
const mouseY = e.clientY - rect.top;
|
|
185
|
+
updateMousePosition(mouseX, mouseY);
|
|
186
|
+
state.open();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
};
|
|
190
|
+
// Recalcular posição quando altura mudar ou tooltip ficar visível
|
|
191
|
+
React.useEffect(() => {
|
|
192
|
+
if (isVisible && mouse.x !== 0 && mouse.y !== 0) {
|
|
193
|
+
// Usar requestAnimationFrame para garantir que o DOM foi atualizado
|
|
194
|
+
requestAnimationFrame(() => {
|
|
195
|
+
const newPosition = calculatePosition(mouse.x, mouse.y);
|
|
196
|
+
setPosition(newPosition);
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
}, [isVisible, height, mouse.x, mouse.y, calculatePosition]);
|
|
200
|
+
return (_jsxs("div", { ref: containerRef, className: cn("relative inline-block", containerClassName), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onClick: handleClick, children: [children, _jsx(AnimatePresence, { children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
|
|
201
|
+
type: "spring",
|
|
202
|
+
stiffness: 200,
|
|
203
|
+
damping: 20,
|
|
204
|
+
}, role: "tooltip", id: tooltipProps.id, className: cn("pointer-events-none absolute z-50 rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md", className), style: {
|
|
205
|
+
top: position.y,
|
|
206
|
+
left: position.x,
|
|
207
|
+
minWidth: `${minWidth}px`,
|
|
208
|
+
zIndex: 9999,
|
|
209
|
+
overflow: "visible",
|
|
210
|
+
wordWrap: "break-word",
|
|
211
|
+
whiteSpace: "normal",
|
|
212
|
+
}, children: _jsx("div", { ref: contentRef, className: "overflow-visible", style: {
|
|
213
|
+
whiteSpace: "normal",
|
|
214
|
+
wordWrap: "break-word",
|
|
215
|
+
overflowWrap: "break-word",
|
|
216
|
+
}, children: content }) }, String(isVisible))) })] }));
|
|
217
|
+
}
|
|
35
218
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipPortal };
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import type { ComboBoxState } from "@react-stately/combobox";
|
|
2
|
+
import type { ListState } from "@react-stately/list";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
export interface AutocompleteOption {
|
|
5
|
+
value: string;
|
|
6
|
+
label: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface AutocompleteContextValue {
|
|
10
|
+
state: ComboBoxState<unknown>;
|
|
11
|
+
listState: ListState<unknown>;
|
|
12
|
+
inputRef: React.RefObject<HTMLInputElement | null>;
|
|
13
|
+
listBoxRef: React.RefObject<HTMLUListElement | null>;
|
|
14
|
+
popoverRef: React.RefObject<HTMLDivElement | null>;
|
|
15
|
+
inputProps: React.InputHTMLAttributes<HTMLInputElement>;
|
|
16
|
+
listBoxProps: React.HTMLAttributes<HTMLUListElement>;
|
|
17
|
+
popoverProps: React.HTMLAttributes<HTMLDivElement>;
|
|
18
|
+
handleClear: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
19
|
+
size: "sm" | "default" | "lg";
|
|
20
|
+
disabled: boolean;
|
|
21
|
+
maxListboxHeight: string;
|
|
22
|
+
isLoading: boolean;
|
|
23
|
+
emptyMessage: string;
|
|
24
|
+
options?: AutocompleteOption[];
|
|
25
|
+
}
|
|
26
|
+
declare const AutocompleteContext: React.Context<AutocompleteContextValue | null>;
|
|
27
|
+
export declare const useAutocompleteContext: () => AutocompleteContextValue;
|
|
28
|
+
export { AutocompleteContext };
|
|
29
|
+
//# sourceMappingURL=autocomplete-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"autocomplete-context.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/forms/autocomplete/autocomplete-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9B,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACnD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IACrD,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,UAAU,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACxD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;IACrD,YAAY,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACnD,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC9D,IAAI,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAChC;AAED,QAAA,MAAM,mBAAmB,gDAA6D,CAAC;AAEvF,eAAO,MAAM,sBAAsB,gCAMlC,CAAC;AAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const AutocompleteContext = React.createContext(null);
|
|
3
|
+
export const useAutocompleteContext = () => {
|
|
4
|
+
const context = React.useContext(AutocompleteContext);
|
|
5
|
+
if (!context) {
|
|
6
|
+
throw new Error("Autocomplete components must be used within Autocomplete");
|
|
7
|
+
}
|
|
8
|
+
return context;
|
|
9
|
+
};
|
|
10
|
+
export { AutocompleteContext };
|