@zentauri-ui/zentauri-components 0.0.8 → 0.0.9
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/README.md +27 -2
- package/dist/ui/accordion.cjs +311 -0
- package/dist/ui/accordion.cjs.map +1 -0
- package/dist/ui/accordion.d.cts +70 -0
- package/dist/ui/accordion.d.ts +70 -0
- package/dist/ui/accordion.js +286 -0
- package/dist/ui/accordion.js.map +1 -0
- package/dist/ui/alert.cjs +257 -0
- package/dist/ui/alert.cjs.map +1 -0
- package/dist/ui/alert.d.cts +66 -0
- package/dist/ui/alert.d.ts +66 -0
- package/dist/ui/alert.js +224 -0
- package/dist/ui/alert.js.map +1 -0
- package/dist/ui/badge.cjs +192 -0
- package/dist/ui/badge.cjs.map +1 -0
- package/dist/ui/badge.d.cts +37 -0
- package/dist/ui/badge.d.ts +37 -0
- package/dist/ui/badge.js +165 -0
- package/dist/ui/badge.js.map +1 -0
- package/dist/ui/buttons.cjs +202 -0
- package/dist/ui/buttons.cjs.map +1 -0
- package/dist/ui/buttons.d.cts +27 -0
- package/dist/ui/buttons.d.ts +27 -0
- package/dist/ui/buttons.js +176 -0
- package/dist/ui/buttons.js.map +1 -0
- package/dist/ui/card.cjs +293 -0
- package/dist/ui/card.cjs.map +1 -0
- package/dist/ui/card.d.cts +77 -0
- package/dist/ui/card.d.ts +77 -0
- package/dist/ui/card.js +258 -0
- package/dist/ui/card.js.map +1 -0
- package/dist/ui/divider.cjs +229 -0
- package/dist/ui/divider.cjs.map +1 -0
- package/dist/ui/divider.d.cts +39 -0
- package/dist/ui/divider.d.ts +39 -0
- package/dist/ui/divider.js +200 -0
- package/dist/ui/divider.js.map +1 -0
- package/dist/ui/drawer.cjs +408 -0
- package/dist/ui/drawer.cjs.map +1 -0
- package/dist/ui/drawer.d.cts +81 -0
- package/dist/ui/drawer.d.ts +81 -0
- package/dist/ui/drawer.js +383 -0
- package/dist/ui/drawer.js.map +1 -0
- package/dist/ui/dropdown.cjs +302 -0
- package/dist/ui/dropdown.cjs.map +1 -0
- package/dist/ui/dropdown.d.cts +50 -0
- package/dist/ui/dropdown.d.ts +50 -0
- package/dist/ui/dropdown.js +278 -0
- package/dist/ui/dropdown.js.map +1 -0
- package/dist/ui/empty-state.cjs +186 -0
- package/dist/ui/empty-state.cjs.map +1 -0
- package/dist/ui/empty-state.d.cts +55 -0
- package/dist/ui/empty-state.d.ts +55 -0
- package/dist/ui/empty-state.js +154 -0
- package/dist/ui/empty-state.js.map +1 -0
- package/dist/ui/index.d.cts +27 -1164
- package/dist/ui/index.d.ts +27 -1164
- package/dist/ui/inputs.cjs +458 -0
- package/dist/ui/inputs.cjs.map +1 -0
- package/dist/ui/inputs.d.cts +35 -0
- package/dist/ui/inputs.d.ts +35 -0
- package/dist/ui/inputs.js +432 -0
- package/dist/ui/inputs.js.map +1 -0
- package/dist/ui/modal.cjs +406 -0
- package/dist/ui/modal.cjs.map +1 -0
- package/dist/ui/modal.d.cts +84 -0
- package/dist/ui/modal.d.ts +84 -0
- package/dist/ui/modal.js +384 -0
- package/dist/ui/modal.js.map +1 -0
- package/dist/ui/pagination.cjs +523 -0
- package/dist/ui/pagination.cjs.map +1 -0
- package/dist/ui/pagination.d.cts +114 -0
- package/dist/ui/pagination.d.ts +114 -0
- package/dist/ui/pagination.js +494 -0
- package/dist/ui/pagination.js.map +1 -0
- package/dist/ui/progress.cjs +268 -0
- package/dist/ui/progress.cjs.map +1 -0
- package/dist/ui/progress.d.cts +61 -0
- package/dist/ui/progress.d.ts +61 -0
- package/dist/ui/progress.js +237 -0
- package/dist/ui/progress.js.map +1 -0
- package/dist/ui/select.cjs +360 -0
- package/dist/ui/select.cjs.map +1 -0
- package/dist/ui/select.d.cts +73 -0
- package/dist/ui/select.d.ts +73 -0
- package/dist/ui/select.js +327 -0
- package/dist/ui/select.js.map +1 -0
- package/dist/ui/skeleton.cjs +576 -0
- package/dist/ui/skeleton.cjs.map +1 -0
- package/dist/ui/skeleton.d.cts +90 -0
- package/dist/ui/skeleton.d.ts +90 -0
- package/dist/ui/skeleton.js +544 -0
- package/dist/ui/skeleton.js.map +1 -0
- package/dist/ui/spinner.cjs +219 -0
- package/dist/ui/spinner.cjs.map +1 -0
- package/dist/ui/spinner.d.cts +27 -0
- package/dist/ui/spinner.d.ts +27 -0
- package/dist/ui/spinner.js +193 -0
- package/dist/ui/spinner.js.map +1 -0
- package/dist/ui/table.cjs +328 -0
- package/dist/ui/table.cjs.map +1 -0
- package/dist/ui/table.d.cts +81 -0
- package/dist/ui/table.d.ts +81 -0
- package/dist/ui/table.js +293 -0
- package/dist/ui/table.js.map +1 -0
- package/dist/ui/tabs.cjs +300 -0
- package/dist/ui/tabs.cjs.map +1 -0
- package/dist/ui/tabs.d.cts +58 -0
- package/dist/ui/tabs.d.ts +58 -0
- package/dist/ui/tabs.js +274 -0
- package/dist/ui/tabs.js.map +1 -0
- package/dist/ui/toast.cjs +285 -0
- package/dist/ui/toast.cjs.map +1 -0
- package/dist/ui/toast.d.cts +86 -0
- package/dist/ui/toast.d.ts +86 -0
- package/dist/ui/toast.js +258 -0
- package/dist/ui/toast.js.map +1 -0
- package/dist/ui/toggle.cjs +185 -0
- package/dist/ui/toggle.cjs.map +1 -0
- package/dist/ui/toggle.d.cts +37 -0
- package/dist/ui/toggle.d.ts +37 -0
- package/dist/ui/toggle.js +158 -0
- package/dist/ui/toggle.js.map +1 -0
- package/dist/ui/tooltip.cjs +242 -0
- package/dist/ui/tooltip.cjs.map +1 -0
- package/dist/ui/tooltip.d.cts +46 -0
- package/dist/ui/tooltip.d.ts +46 -0
- package/dist/ui/tooltip.js +214 -0
- package/dist/ui/tooltip.js.map +1 -0
- package/dist/variants-1Bx3BEeS.d.cts +8 -0
- package/dist/variants-1Bx3BEeS.d.ts +8 -0
- package/package.json +7 -3
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
// src/ui/toggle/toggle.tsx
|
|
5
|
+
import { motion } from "framer-motion";
|
|
6
|
+
import { useCallback, useState } from "react";
|
|
7
|
+
|
|
8
|
+
// src/lib/utils.ts
|
|
9
|
+
import { clsx } from "clsx";
|
|
10
|
+
import { twMerge } from "tailwind-merge";
|
|
11
|
+
function cn(...inputs) {
|
|
12
|
+
return twMerge(clsx(inputs));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// src/ui/toggle/animations.ts
|
|
16
|
+
var toggleThumbAnimationPresets = {
|
|
17
|
+
none: {},
|
|
18
|
+
spring: {
|
|
19
|
+
layout: true,
|
|
20
|
+
transition: { type: "spring", stiffness: 520, damping: 32 }
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// src/ui/toggle/variants.ts
|
|
25
|
+
import { cva } from "class-variance-authority";
|
|
26
|
+
var toggleTrackVariants = cva(
|
|
27
|
+
"relative inline-flex shrink-0 cursor-pointer rounded-full border border-white/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 data-[state=checked]:border-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
|
|
28
|
+
{
|
|
29
|
+
variants: {
|
|
30
|
+
size: {
|
|
31
|
+
sm: "h-5 w-9",
|
|
32
|
+
md: "h-6 w-11",
|
|
33
|
+
lg: "h-7 w-[3.25rem]"
|
|
34
|
+
},
|
|
35
|
+
appearance: {
|
|
36
|
+
default: "data-[state=checked]:bg-cyan-600/80",
|
|
37
|
+
success: "data-[state=checked]:border-emerald-500/40 data-[state=checked]:bg-emerald-600/80",
|
|
38
|
+
destructive: "data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-600/80",
|
|
39
|
+
neutral: "data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-600/90",
|
|
40
|
+
indigo: "data-[state=checked]:border-indigo-500/40 data-[state=checked]:bg-indigo-600/80",
|
|
41
|
+
purple: "data-[state=checked]:border-purple-500/40 data-[state=checked]:bg-purple-600/80",
|
|
42
|
+
pink: "data-[state=checked]:border-pink-500/40 data-[state=checked]:bg-pink-600/80",
|
|
43
|
+
orange: "data-[state=checked]:border-orange-500/40 data-[state=checked]:bg-orange-600/80",
|
|
44
|
+
yellow: "data-[state=checked]:border-yellow-500/40 data-[state=checked]:bg-yellow-600/80",
|
|
45
|
+
green: "data-[state=checked]:border-green-500/40 data-[state=checked]:bg-green-600/80",
|
|
46
|
+
teal: "data-[state=checked]:border-teal-500/40 data-[state=checked]:bg-teal-600/80",
|
|
47
|
+
cyan: "data-[state=checked]:border-cyan-500/40 data-[state=checked]:bg-cyan-600/80",
|
|
48
|
+
lime: "data-[state=checked]:border-lime-500/40 data-[state=checked]:bg-lime-600/80",
|
|
49
|
+
emerald: "data-[state=checked]:border-emerald-500/40 data-[state=checked]:bg-emerald-600/80",
|
|
50
|
+
rose: "data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-600/80",
|
|
51
|
+
slate: "data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-600/90",
|
|
52
|
+
zinc: "data-[state=checked]:border-zinc-400/40 data-[state=checked]:bg-zinc-600/90",
|
|
53
|
+
gray: "data-[state=checked]:border-gray-400/40 data-[state=checked]:bg-gray-600/90",
|
|
54
|
+
stone: "data-[state=checked]:border-stone-400/40 data-[state=checked]:bg-stone-600/90",
|
|
55
|
+
"gradient-blue": "data-[state=checked]:bg-linear-to-r from-blue-600 to-purple-600",
|
|
56
|
+
"gradient-green": "data-[state=checked]:bg-linear-to-r from-green-600 to-lime-600",
|
|
57
|
+
"gradient-red": "data-[state=checked]:bg-linear-to-r from-red-600 to-pink-600",
|
|
58
|
+
"gradient-yellow": "data-[state=checked]:bg-linear-to-r from-yellow-600 to-orange-600",
|
|
59
|
+
"gradient-purple": "data-[state=checked]:bg-linear-to-r from-purple-600 to-pink-600",
|
|
60
|
+
"gradient-teal": "data-[state=checked]:bg-linear-to-r from-teal-600 to-cyan-600",
|
|
61
|
+
"gradient-indigo": "data-[state=checked]:bg-linear-to-r from-indigo-600 to-purple-600",
|
|
62
|
+
"gradient-pink": "data-[state=checked]:bg-linear-to-r from-pink-600 to-rose-600",
|
|
63
|
+
"gradient-orange": "data-[state=checked]:bg-linear-to-r from-orange-600 to-red-600"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
defaultVariants: {
|
|
67
|
+
size: "md",
|
|
68
|
+
appearance: "default"
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
var toggleThumbVariants = cva(
|
|
73
|
+
"pointer-events-none block rounded-full bg-white shadow-[0_1px_2px_rgba(15,23,42,0.35)] ring-0",
|
|
74
|
+
{
|
|
75
|
+
variants: {
|
|
76
|
+
size: {
|
|
77
|
+
sm: "size-4",
|
|
78
|
+
md: "size-5",
|
|
79
|
+
lg: "size-6"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
defaultVariants: {
|
|
83
|
+
size: "md"
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
// src/ui/toggle/toggle.tsx
|
|
89
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
90
|
+
function Toggle(props) {
|
|
91
|
+
const {
|
|
92
|
+
className,
|
|
93
|
+
size,
|
|
94
|
+
appearance,
|
|
95
|
+
animation = "spring",
|
|
96
|
+
checked,
|
|
97
|
+
defaultChecked = false,
|
|
98
|
+
onCheckedChange,
|
|
99
|
+
disabled,
|
|
100
|
+
ref,
|
|
101
|
+
"aria-label": ariaLabel = "Toggle",
|
|
102
|
+
children,
|
|
103
|
+
...rest
|
|
104
|
+
} = props;
|
|
105
|
+
const isControlled = checked !== void 0;
|
|
106
|
+
const [uncontrolled, setUncontrolled] = useState(defaultChecked);
|
|
107
|
+
const resolved = isControlled ? Boolean(checked) : uncontrolled;
|
|
108
|
+
const thumbMotion = toggleThumbAnimationPresets[animation];
|
|
109
|
+
const setChecked = useCallback(
|
|
110
|
+
(next) => {
|
|
111
|
+
if (!isControlled) {
|
|
112
|
+
setUncontrolled(next);
|
|
113
|
+
}
|
|
114
|
+
onCheckedChange?.(next);
|
|
115
|
+
},
|
|
116
|
+
[isControlled, onCheckedChange]
|
|
117
|
+
);
|
|
118
|
+
const thumbShiftPx = size === "sm" ? 14 : size === "lg" ? 26 : 20;
|
|
119
|
+
return /* @__PURE__ */ jsxs(
|
|
120
|
+
"button",
|
|
121
|
+
{
|
|
122
|
+
ref,
|
|
123
|
+
type: "button",
|
|
124
|
+
role: "switch",
|
|
125
|
+
"data-slot": "toggle",
|
|
126
|
+
"aria-checked": resolved,
|
|
127
|
+
"aria-label": ariaLabel,
|
|
128
|
+
"data-state": resolved ? "checked" : "unchecked",
|
|
129
|
+
disabled,
|
|
130
|
+
className: cn(toggleTrackVariants({ size, appearance }), className),
|
|
131
|
+
onClick: () => {
|
|
132
|
+
if (!disabled) {
|
|
133
|
+
setChecked(!resolved);
|
|
134
|
+
}
|
|
135
|
+
},
|
|
136
|
+
...rest,
|
|
137
|
+
children: [
|
|
138
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children }),
|
|
139
|
+
/* @__PURE__ */ jsx(
|
|
140
|
+
motion.span,
|
|
141
|
+
{
|
|
142
|
+
className: cn(toggleThumbVariants({ size }), "absolute left-1 top-1/2 -translate-y-1/2"),
|
|
143
|
+
animate: { x: resolved ? thumbShiftPx : 0 },
|
|
144
|
+
transition: thumbMotion.transition
|
|
145
|
+
}
|
|
146
|
+
)
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
Toggle.displayName = "Toggle";
|
|
152
|
+
export {
|
|
153
|
+
Toggle,
|
|
154
|
+
toggleThumbAnimationPresets,
|
|
155
|
+
toggleThumbVariants,
|
|
156
|
+
toggleTrackVariants
|
|
157
|
+
};
|
|
158
|
+
//# sourceMappingURL=toggle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/toggle/toggle.tsx","../../src/lib/utils.ts","../../src/ui/toggle/animations.ts","../../src/ui/toggle/variants.ts"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"framer-motion\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport { toggleThumbAnimationPresets } from \"./animations\";\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nexport function Toggle(props: ToggleProps) {\n const {\n className,\n size,\n appearance,\n animation = \"spring\",\n checked,\n defaultChecked = false,\n onCheckedChange,\n disabled,\n ref,\n \"aria-label\": ariaLabel = \"Toggle\",\n children,\n ...rest\n } = props;\n const isControlled = checked !== undefined;\n const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n const resolved = isControlled ? Boolean(checked) : uncontrolled;\n const thumbMotion = toggleThumbAnimationPresets[animation];\n\n const setChecked = useCallback(\n (next: boolean) => {\n if (!isControlled) {\n setUncontrolled(next);\n }\n onCheckedChange?.(next);\n },\n [isControlled, onCheckedChange],\n );\n\n const thumbShiftPx = size === \"sm\" ? 14 : size === \"lg\" ? 26 : 20;\n\n return (\n <button\n ref={ref}\n type=\"button\"\n role=\"switch\"\n data-slot=\"toggle\"\n aria-checked={resolved}\n aria-label={ariaLabel}\n data-state={resolved ? \"checked\" : \"unchecked\"}\n disabled={disabled}\n className={cn(toggleTrackVariants({ size, appearance }), className)}\n onClick={() => {\n if (!disabled) {\n setChecked(!resolved);\n }\n }}\n {...rest}\n >\n <span className=\"sr-only\">{children}</span>\n <motion.span\n className={cn(toggleThumbVariants({ size }), \"absolute left-1 top-1/2 -translate-y-1/2\")}\n animate={{ x: resolved ? thumbShiftPx : 0 }}\n transition={thumbMotion.transition}\n />\n </button>\n );\n}\n\nToggle.displayName = \"Toggle\";\n\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","import type { HTMLMotionProps } from \"framer-motion\";\n\nexport type ToggleAnimation = \"none\" | \"spring\";\n\ntype ToggleThumbPreset = Pick<HTMLMotionProps<\"span\">, \"transition\" | \"layout\">;\n\nexport type ToggleAnimationPresets = Record<ToggleAnimation, ToggleThumbPreset>;\n\nexport const toggleThumbAnimationPresets: ToggleAnimationPresets = {\n none: {},\n spring: {\n layout: true,\n transition: { type: \"spring\", stiffness: 520, damping: 32 },\n },\n};\n","import { cva } from \"class-variance-authority\";\n\nexport const toggleTrackVariants = cva(\n \"relative inline-flex shrink-0 cursor-pointer rounded-full border border-white/10 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 data-[state=checked]:border-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50\",\n {\n variants: {\n size: {\n sm: \"h-5 w-9\",\n md: \"h-6 w-11\",\n lg: \"h-7 w-[3.25rem]\",\n },\n appearance: {\n default: \"data-[state=checked]:bg-cyan-600/80\",\n success: \"data-[state=checked]:border-emerald-500/40 data-[state=checked]:bg-emerald-600/80\",\n destructive: \"data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-600/80\",\n neutral: \"data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-600/90\",\n indigo: \"data-[state=checked]:border-indigo-500/40 data-[state=checked]:bg-indigo-600/80\",\n purple: \"data-[state=checked]:border-purple-500/40 data-[state=checked]:bg-purple-600/80\",\n pink: \"data-[state=checked]:border-pink-500/40 data-[state=checked]:bg-pink-600/80\",\n orange: \"data-[state=checked]:border-orange-500/40 data-[state=checked]:bg-orange-600/80\",\n yellow: \"data-[state=checked]:border-yellow-500/40 data-[state=checked]:bg-yellow-600/80\",\n green: \"data-[state=checked]:border-green-500/40 data-[state=checked]:bg-green-600/80\",\n teal: \"data-[state=checked]:border-teal-500/40 data-[state=checked]:bg-teal-600/80\",\n cyan: \"data-[state=checked]:border-cyan-500/40 data-[state=checked]:bg-cyan-600/80\",\n lime: \"data-[state=checked]:border-lime-500/40 data-[state=checked]:bg-lime-600/80\",\n emerald: \"data-[state=checked]:border-emerald-500/40 data-[state=checked]:bg-emerald-600/80\",\n rose: \"data-[state=checked]:border-rose-500/40 data-[state=checked]:bg-rose-600/80\",\n slate: \"data-[state=checked]:border-slate-400/40 data-[state=checked]:bg-slate-600/90\",\n zinc: \"data-[state=checked]:border-zinc-400/40 data-[state=checked]:bg-zinc-600/90\",\n gray: \"data-[state=checked]:border-gray-400/40 data-[state=checked]:bg-gray-600/90\",\n stone: \"data-[state=checked]:border-stone-400/40 data-[state=checked]:bg-stone-600/90\",\n \"gradient-blue\": \"data-[state=checked]:bg-linear-to-r from-blue-600 to-purple-600\",\n \"gradient-green\": \"data-[state=checked]:bg-linear-to-r from-green-600 to-lime-600\",\n \"gradient-red\": \"data-[state=checked]:bg-linear-to-r from-red-600 to-pink-600\",\n \"gradient-yellow\": \"data-[state=checked]:bg-linear-to-r from-yellow-600 to-orange-600\",\n \"gradient-purple\": \"data-[state=checked]:bg-linear-to-r from-purple-600 to-pink-600\",\n \"gradient-teal\": \"data-[state=checked]:bg-linear-to-r from-teal-600 to-cyan-600\",\n \"gradient-indigo\": \"data-[state=checked]:bg-linear-to-r from-indigo-600 to-purple-600\",\n \"gradient-pink\": \"data-[state=checked]:bg-linear-to-r from-pink-600 to-rose-600\",\n \"gradient-orange\": \"data-[state=checked]:bg-linear-to-r from-orange-600 to-red-600\",\n },\n },\n defaultVariants: {\n size: \"md\",\n appearance: \"default\",\n },\n },\n);\n\nexport const toggleThumbVariants = cva(\n \"pointer-events-none block rounded-full bg-white shadow-[0_1px_2px_rgba(15,23,42,0.35)] ring-0\",\n {\n variants: {\n size: {\n sm: \"size-4\",\n md: \"size-5\",\n lg: \"size-6\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/ui/tooltip/index.ts
|
|
21
|
+
var tooltip_exports = {};
|
|
22
|
+
__export(tooltip_exports, {
|
|
23
|
+
Tooltip: () => Tooltip,
|
|
24
|
+
TooltipContent: () => TooltipContent,
|
|
25
|
+
TooltipTrigger: () => TooltipTrigger,
|
|
26
|
+
tooltipVariants: () => tooltipVariants,
|
|
27
|
+
useTooltip: () => useTooltip
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(tooltip_exports);
|
|
30
|
+
|
|
31
|
+
// src/ui/tooltip/tooltip.tsx
|
|
32
|
+
var import_react = require("react");
|
|
33
|
+
var import_react2 = require("react");
|
|
34
|
+
|
|
35
|
+
// src/lib/utils.ts
|
|
36
|
+
var import_clsx = require("clsx");
|
|
37
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
38
|
+
function cn(...inputs) {
|
|
39
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// src/ui/tooltip/variants.ts
|
|
43
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
44
|
+
var tooltipVariants = (0, import_class_variance_authority.cva)(
|
|
45
|
+
"absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none",
|
|
46
|
+
{
|
|
47
|
+
variants: {
|
|
48
|
+
variant: {
|
|
49
|
+
default: "bg-black text-white",
|
|
50
|
+
outline: "border bg-white text-black",
|
|
51
|
+
ghost: "bg-gray-800 text-white/90",
|
|
52
|
+
glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
|
|
53
|
+
emerald: "bg-emerald-600 text-white",
|
|
54
|
+
indigo: "bg-indigo-600 text-white",
|
|
55
|
+
purple: "bg-purple-600 text-white",
|
|
56
|
+
pink: "bg-pink-600 text-white",
|
|
57
|
+
rose: "bg-rose-600 text-white",
|
|
58
|
+
sky: "bg-sky-600 text-white",
|
|
59
|
+
teal: "bg-teal-600 text-white",
|
|
60
|
+
yellow: "bg-yellow-600 text-white",
|
|
61
|
+
orange: "bg-orange-600 text-white",
|
|
62
|
+
green: "bg-green-600 text-white",
|
|
63
|
+
"gradient-blue": "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
|
|
64
|
+
"gradient-green": "bg-gradient-to-r from-green-600 to-lime-600 text-white",
|
|
65
|
+
"gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white",
|
|
66
|
+
"gradient-yellow": "bg-gradient-to-r from-yellow-600 to-orange-600 text-white",
|
|
67
|
+
"gradient-purple": "bg-gradient-to-r from-purple-600 to-pink-600 text-white",
|
|
68
|
+
"gradient-teal": "bg-gradient-to-r from-teal-600 to-cyan-600 text-white",
|
|
69
|
+
"gradient-indigo": "bg-gradient-to-r from-indigo-600 to-purple-600 text-white",
|
|
70
|
+
"gradient-pink": "bg-gradient-to-r from-pink-600 to-rose-600 text-white",
|
|
71
|
+
"gradient-orange": "bg-gradient-to-r from-orange-600 to-red-600 text-white"
|
|
72
|
+
},
|
|
73
|
+
size: {
|
|
74
|
+
sm: "text-xs px-2 py-1",
|
|
75
|
+
md: "text-sm px-3 py-1.5",
|
|
76
|
+
lg: "text-base px-4 py-2"
|
|
77
|
+
},
|
|
78
|
+
width: {
|
|
79
|
+
fit: "min-w-75 md:min-w-fit",
|
|
80
|
+
xs: "min-w-75 md:min-w-xs",
|
|
81
|
+
sm: "min-w-75 md:min-w-sm",
|
|
82
|
+
md: "min-w-75 md:min-w-md",
|
|
83
|
+
lg: "min-w-75 md:min-w-lg",
|
|
84
|
+
xl: "min-w-75 md:min-w-xl",
|
|
85
|
+
"2xl": "min-w-75 md:min-w-2xl"
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
defaultVariants: {
|
|
89
|
+
variant: "default",
|
|
90
|
+
size: "md",
|
|
91
|
+
width: "xs"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
// src/ui/tooltip/tooltip.tsx
|
|
97
|
+
var import_framer_motion = require("framer-motion");
|
|
98
|
+
|
|
99
|
+
// src/ui/tooltip/animation.ts
|
|
100
|
+
var tooltipAnimationPresets = {
|
|
101
|
+
none: {},
|
|
102
|
+
fade: {
|
|
103
|
+
initial: { opacity: 0 },
|
|
104
|
+
animate: { opacity: 1 },
|
|
105
|
+
transition: { duration: 0.15, ease: "easeOut" }
|
|
106
|
+
},
|
|
107
|
+
scale: {
|
|
108
|
+
initial: { opacity: 0, scale: 0.96 },
|
|
109
|
+
animate: { opacity: 1, scale: 1 },
|
|
110
|
+
transition: { duration: 0.15, ease: "easeIn" }
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
// src/ui/tooltip/tooltip.tsx
|
|
115
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
116
|
+
var TooltipContext = (0, import_react2.createContext)(null);
|
|
117
|
+
var useTooltip = () => {
|
|
118
|
+
const context = (0, import_react2.useContext)(TooltipContext);
|
|
119
|
+
if (!context) {
|
|
120
|
+
throw new Error("Tooltip components must be used within Tooltip");
|
|
121
|
+
}
|
|
122
|
+
return context;
|
|
123
|
+
};
|
|
124
|
+
var Tooltip = ({
|
|
125
|
+
children,
|
|
126
|
+
defaultOpen = false,
|
|
127
|
+
open: controlledOpen,
|
|
128
|
+
onOpenChange,
|
|
129
|
+
position = "top",
|
|
130
|
+
delay = 100
|
|
131
|
+
}) => {
|
|
132
|
+
const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react.useState)(defaultOpen);
|
|
133
|
+
const isControlled = controlledOpen !== void 0;
|
|
134
|
+
const open = isControlled ? controlledOpen : uncontrolledOpen;
|
|
135
|
+
const setOpen = (0, import_react.useCallback)(
|
|
136
|
+
(value) => {
|
|
137
|
+
if (!isControlled) setUncontrolledOpen(value);
|
|
138
|
+
onOpenChange?.(value);
|
|
139
|
+
},
|
|
140
|
+
[isControlled, onOpenChange]
|
|
141
|
+
);
|
|
142
|
+
const showTimeoutRef = (0, import_react.useRef)(null);
|
|
143
|
+
const cancelDelayedOpen = (0, import_react.useCallback)(() => {
|
|
144
|
+
if (showTimeoutRef.current !== null) {
|
|
145
|
+
clearTimeout(showTimeoutRef.current);
|
|
146
|
+
showTimeoutRef.current = null;
|
|
147
|
+
}
|
|
148
|
+
}, []);
|
|
149
|
+
const scheduleDelayedOpen = (0, import_react.useCallback)(() => {
|
|
150
|
+
cancelDelayedOpen();
|
|
151
|
+
showTimeoutRef.current = setTimeout(() => {
|
|
152
|
+
showTimeoutRef.current = null;
|
|
153
|
+
setOpen(true);
|
|
154
|
+
}, delay);
|
|
155
|
+
}, [cancelDelayedOpen, delay, setOpen]);
|
|
156
|
+
(0, import_react.useEffect)(() => () => cancelDelayedOpen(), [cancelDelayedOpen]);
|
|
157
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
158
|
+
TooltipContext.Provider,
|
|
159
|
+
{
|
|
160
|
+
value: {
|
|
161
|
+
open,
|
|
162
|
+
setOpen,
|
|
163
|
+
position,
|
|
164
|
+
delay,
|
|
165
|
+
scheduleDelayedOpen,
|
|
166
|
+
cancelDelayedOpen
|
|
167
|
+
},
|
|
168
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative inline-block", children })
|
|
169
|
+
}
|
|
170
|
+
);
|
|
171
|
+
};
|
|
172
|
+
var TooltipTrigger = ({
|
|
173
|
+
children,
|
|
174
|
+
className
|
|
175
|
+
}) => {
|
|
176
|
+
const { setOpen, scheduleDelayedOpen, cancelDelayedOpen } = useTooltip();
|
|
177
|
+
const triggerProps = {
|
|
178
|
+
onMouseEnter: () => scheduleDelayedOpen(),
|
|
179
|
+
onMouseLeave: () => {
|
|
180
|
+
cancelDelayedOpen();
|
|
181
|
+
setOpen(false);
|
|
182
|
+
},
|
|
183
|
+
onFocus: () => {
|
|
184
|
+
cancelDelayedOpen();
|
|
185
|
+
setOpen(true);
|
|
186
|
+
},
|
|
187
|
+
onBlur: () => {
|
|
188
|
+
cancelDelayedOpen();
|
|
189
|
+
setOpen(false);
|
|
190
|
+
},
|
|
191
|
+
onKeyDown: (e) => {
|
|
192
|
+
if (e.key === "Escape") {
|
|
193
|
+
cancelDelayedOpen();
|
|
194
|
+
setOpen(false);
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
className,
|
|
198
|
+
tabIndex: 0
|
|
199
|
+
};
|
|
200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...triggerProps, children });
|
|
201
|
+
};
|
|
202
|
+
var TooltipContent = ({
|
|
203
|
+
children,
|
|
204
|
+
className,
|
|
205
|
+
variant,
|
|
206
|
+
size,
|
|
207
|
+
width,
|
|
208
|
+
animation = "none"
|
|
209
|
+
}) => {
|
|
210
|
+
const { open, position } = useTooltip();
|
|
211
|
+
if (!open) return null;
|
|
212
|
+
const positionStyles = {
|
|
213
|
+
top: "bottom-full mb-2",
|
|
214
|
+
bottom: "top-full mt-2",
|
|
215
|
+
left: "right-full top-1/2 -translate-y-1/2 mr-2",
|
|
216
|
+
right: "left-full top-1/2 -translate-y-1/2 ml-2"
|
|
217
|
+
};
|
|
218
|
+
const motionProps = tooltipAnimationPresets[animation];
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
220
|
+
import_framer_motion.motion.div,
|
|
221
|
+
{
|
|
222
|
+
"data-open": open,
|
|
223
|
+
role: "tooltip",
|
|
224
|
+
...motionProps,
|
|
225
|
+
className: cn(
|
|
226
|
+
tooltipVariants({ variant, size, width }),
|
|
227
|
+
positionStyles[position],
|
|
228
|
+
className
|
|
229
|
+
),
|
|
230
|
+
children
|
|
231
|
+
}
|
|
232
|
+
);
|
|
233
|
+
};
|
|
234
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
235
|
+
0 && (module.exports = {
|
|
236
|
+
Tooltip,
|
|
237
|
+
TooltipContent,
|
|
238
|
+
TooltipTrigger,
|
|
239
|
+
tooltipVariants,
|
|
240
|
+
useTooltip
|
|
241
|
+
});
|
|
242
|
+
//# sourceMappingURL=tooltip.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/ui/tooltip/index.ts","../../src/ui/tooltip/tooltip.tsx","../../src/lib/utils.ts","../../src/ui/tooltip/variants.ts","../../src/ui/tooltip/animation.ts"],"sourcesContent":["export { Tooltip, TooltipTrigger, TooltipContent, useTooltip } from \"./tooltip\";\nexport type {\n TooltipProps,\n TooltipTriggerProps,\n TooltipContentProps,\n TooltipContextType,\n TooltipPosition,\n} from \"./types\";\nexport { tooltipVariants } from \"./variants\";\n","\"use client\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n TooltipProps,\n TooltipContextType,\n TooltipTriggerProps,\n TooltipContentProps,\n} from \"./types\";\n\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { tooltipVariants } from \"./variants\";\nimport { motion } from \"framer-motion\";\nimport { tooltipAnimationPresets } from \"./animation\";\n\nexport const TooltipContext = createContext<TooltipContextType | null>(null);\n\nexport const useTooltip = () => {\n const context = useContext(TooltipContext);\n if (!context) {\n throw new Error(\"Tooltip components must be used within Tooltip\");\n }\n return context;\n};\nexport const Tooltip = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n position = \"top\",\n delay = 100,\n}: TooltipProps) => {\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n const setOpen = useCallback(\n (value: boolean) => {\n if (!isControlled) setUncontrolledOpen(value);\n onOpenChange?.(value);\n },\n [isControlled, onOpenChange],\n );\n\n const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n const cancelDelayedOpen = useCallback(() => {\n if (showTimeoutRef.current !== null) {\n clearTimeout(showTimeoutRef.current);\n showTimeoutRef.current = null;\n }\n }, []);\n\n const scheduleDelayedOpen = useCallback(() => {\n cancelDelayedOpen();\n showTimeoutRef.current = setTimeout(() => {\n showTimeoutRef.current = null;\n setOpen(true);\n }, delay);\n }, [cancelDelayedOpen, delay, setOpen]);\n\n useEffect(() => () => cancelDelayedOpen(), [cancelDelayedOpen]);\n\n return (\n <TooltipContext.Provider\n value={{\n open,\n setOpen,\n position,\n delay,\n scheduleDelayedOpen,\n cancelDelayedOpen,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </TooltipContext.Provider>\n );\n};\n\nexport const TooltipTrigger = ({\n children,\n className,\n}: TooltipTriggerProps) => {\n const { setOpen, scheduleDelayedOpen, cancelDelayedOpen } = useTooltip();\n\n const triggerProps = {\n onMouseEnter: () => scheduleDelayedOpen(),\n onMouseLeave: () => {\n cancelDelayedOpen();\n setOpen(false);\n },\n onFocus: () => {\n cancelDelayedOpen();\n setOpen(true);\n },\n onBlur: () => {\n cancelDelayedOpen();\n setOpen(false);\n },\n onKeyDown: (e: React.KeyboardEvent) => {\n if (e.key === \"Escape\") {\n cancelDelayedOpen();\n setOpen(false);\n }\n },\n className,\n tabIndex: 0,\n };\n\n return <span {...triggerProps}>{children}</span>;\n};\n\nexport const TooltipContent = ({\n children,\n className,\n variant,\n size,\n width,\n animation = \"none\",\n}: TooltipContentProps) => {\n const { open, position } = useTooltip();\n\n if (!open) return null;\n\n const positionStyles = {\n top: \"bottom-full mb-2\",\n bottom: \"top-full mt-2\",\n left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n };\n\n const motionProps = tooltipAnimationPresets[animation];\n\n return (\n <motion.div\n data-open={open}\n role=\"tooltip\"\n {...motionProps}\n className={cn(\n tooltipVariants({ variant, size, width }),\n positionStyles[position],\n className,\n )}\n >\n {children}\n </motion.div>\n );\n};\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}","import { cva } from \"class-variance-authority\"\n\nexport const tooltipVariants = cva(\n \"absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none\",\n {\n variants: {\n variant: {\n default: \"bg-black text-white\",\n outline: \"border bg-white text-black\",\n ghost: \"bg-gray-800 text-white/90\",\n glass: \"border border-white/15 bg-white/10 text-white backdrop-blur-md\",\n emerald: \"bg-emerald-600 text-white\",\n indigo: \"bg-indigo-600 text-white\",\n purple: \"bg-purple-600 text-white\",\n pink: \"bg-pink-600 text-white\",\n rose: \"bg-rose-600 text-white\",\n sky: \"bg-sky-600 text-white\",\n teal: \"bg-teal-600 text-white\",\n yellow: \"bg-yellow-600 text-white\",\n orange: \"bg-orange-600 text-white\",\n green: \"bg-green-600 text-white\",\n \"gradient-blue\": \"bg-gradient-to-r from-blue-600 to-purple-600 text-white\",\n \"gradient-green\": \"bg-gradient-to-r from-green-600 to-lime-600 text-white\",\n \"gradient-red\": \"bg-gradient-to-r from-red-600 to-pink-600 text-white\",\n \"gradient-yellow\": \"bg-gradient-to-r from-yellow-600 to-orange-600 text-white\",\n \"gradient-purple\": \"bg-gradient-to-r from-purple-600 to-pink-600 text-white\",\n \"gradient-teal\": \"bg-gradient-to-r from-teal-600 to-cyan-600 text-white\",\n \"gradient-indigo\": \"bg-gradient-to-r from-indigo-600 to-purple-600 text-white\",\n \"gradient-pink\": \"bg-gradient-to-r from-pink-600 to-rose-600 text-white\",\n \"gradient-orange\": \"bg-gradient-to-r from-orange-600 to-red-600 text-white\",\n },\n size: {\n sm: \"text-xs px-2 py-1\",\n md: \"text-sm px-3 py-1.5\",\n lg: \"text-base px-4 py-2\",\n },\n width:{\n fit: \"min-w-75 md:min-w-fit\",\n xs: \"min-w-75 md:min-w-xs\",\n sm: \"min-w-75 md:min-w-sm\",\n md: \"min-w-75 md:min-w-md\",\n lg: \"min-w-75 md:min-w-lg\",\n xl: \"min-w-75 md:min-w-xl\",\n \"2xl\": \"min-w-75 md:min-w-2xl\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n width: \"xs\",\n },\n }\n)","import type { HTMLMotionProps } from \"framer-motion\";\nimport { TooltipAnimation } from \"./types\";\n\ntype TooltipPresetMotionProps = Pick<\n HTMLMotionProps<\"div\">,\n \"initial\" | \"animate\" | \"style\" | \"transition\"\n>;\n\nexport type TooltipAnimationPresets = Record<TooltipAnimation, TooltipPresetMotionProps>;\n\n/** Runs when TooltipContent mounts after open (e.g. trigger hover + delay), not viewport scroll. */\nexport const tooltipAnimationPresets: TooltipAnimationPresets = {\n none: {},\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n transition: { duration: 0.15, ease: \"easeOut\" },\n },\n scale: {\n initial: { opacity: 0, scale: 0.96 },\n animate: { opacity: 1, scale: 1 },\n transition: { duration: 0.15, ease: \"easeIn\" },\n },\n};\n"],"mappings":"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","names":["import_react"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
type TooltipPosition = "top" | "bottom" | "left" | "right";
|
|
6
|
+
type TooltipContextType = {
|
|
7
|
+
open: boolean;
|
|
8
|
+
setOpen: (value: boolean) => void;
|
|
9
|
+
position: TooltipPosition;
|
|
10
|
+
delay: number;
|
|
11
|
+
scheduleDelayedOpen: () => void;
|
|
12
|
+
cancelDelayedOpen: () => void;
|
|
13
|
+
};
|
|
14
|
+
type TooltipProps = {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
open?: boolean;
|
|
18
|
+
onOpenChange?: (open: boolean) => void;
|
|
19
|
+
position?: TooltipPosition;
|
|
20
|
+
delay?: number;
|
|
21
|
+
};
|
|
22
|
+
type TooltipTriggerProps = {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
className?: string;
|
|
25
|
+
};
|
|
26
|
+
type TooltipContentProps = {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
className?: string;
|
|
29
|
+
variant?: "default" | "outline" | "ghost" | "glass" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "green" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange";
|
|
30
|
+
size?: "sm" | "md" | "lg";
|
|
31
|
+
width?: "fit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
32
|
+
animation?: "fade" | "scale" | "none";
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
declare const useTooltip: () => TooltipContextType;
|
|
36
|
+
declare const Tooltip: ({ children, defaultOpen, open: controlledOpen, onOpenChange, position, delay, }: TooltipProps) => react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare const TooltipTrigger: ({ children, className, }: TooltipTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
38
|
+
declare const TooltipContent: ({ children, className, variant, size, width, animation, }: TooltipContentProps) => react_jsx_runtime.JSX.Element | null;
|
|
39
|
+
|
|
40
|
+
declare const tooltipVariants: (props?: ({
|
|
41
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "green" | null | undefined;
|
|
42
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
43
|
+
width?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "fit" | null | undefined;
|
|
44
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
45
|
+
|
|
46
|
+
export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipContextType, type TooltipPosition, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, tooltipVariants, useTooltip };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
type TooltipPosition = "top" | "bottom" | "left" | "right";
|
|
6
|
+
type TooltipContextType = {
|
|
7
|
+
open: boolean;
|
|
8
|
+
setOpen: (value: boolean) => void;
|
|
9
|
+
position: TooltipPosition;
|
|
10
|
+
delay: number;
|
|
11
|
+
scheduleDelayedOpen: () => void;
|
|
12
|
+
cancelDelayedOpen: () => void;
|
|
13
|
+
};
|
|
14
|
+
type TooltipProps = {
|
|
15
|
+
children: ReactNode;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
open?: boolean;
|
|
18
|
+
onOpenChange?: (open: boolean) => void;
|
|
19
|
+
position?: TooltipPosition;
|
|
20
|
+
delay?: number;
|
|
21
|
+
};
|
|
22
|
+
type TooltipTriggerProps = {
|
|
23
|
+
children: ReactNode;
|
|
24
|
+
className?: string;
|
|
25
|
+
};
|
|
26
|
+
type TooltipContentProps = {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
className?: string;
|
|
29
|
+
variant?: "default" | "outline" | "ghost" | "glass" | "emerald" | "indigo" | "purple" | "pink" | "rose" | "sky" | "teal" | "yellow" | "orange" | "green" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange";
|
|
30
|
+
size?: "sm" | "md" | "lg";
|
|
31
|
+
width?: "fit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
|
32
|
+
animation?: "fade" | "scale" | "none";
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
declare const useTooltip: () => TooltipContextType;
|
|
36
|
+
declare const Tooltip: ({ children, defaultOpen, open: controlledOpen, onOpenChange, position, delay, }: TooltipProps) => react_jsx_runtime.JSX.Element;
|
|
37
|
+
declare const TooltipTrigger: ({ children, className, }: TooltipTriggerProps) => react_jsx_runtime.JSX.Element;
|
|
38
|
+
declare const TooltipContent: ({ children, className, variant, size, width, animation, }: TooltipContentProps) => react_jsx_runtime.JSX.Element | null;
|
|
39
|
+
|
|
40
|
+
declare const tooltipVariants: (props?: ({
|
|
41
|
+
variant?: "default" | "outline" | "ghost" | "sky" | "rose" | "purple" | "pink" | "orange" | "yellow" | "teal" | "indigo" | "emerald" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "glass" | "green" | null | undefined;
|
|
42
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
43
|
+
width?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "fit" | null | undefined;
|
|
44
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
45
|
+
|
|
46
|
+
export { Tooltip, TooltipContent, type TooltipContentProps, type TooltipContextType, type TooltipPosition, type TooltipProps, TooltipTrigger, type TooltipTriggerProps, tooltipVariants, useTooltip };
|