@zentauri-ui/zentauri-components 1.3.1 → 1.4.0

package/src/ui/tooltip/types.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+
+export type TooltipContextType = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  position: TooltipPosition;
+  delay: number;
+  scheduleDelayedOpen: () => void;
+  cancelDelayedOpen: () => void;
+};
+
+export type TooltipProps = {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: TooltipPosition;
+  delay?: number;
+};
+
+export type TooltipTriggerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type TooltipContentProps = {
+  children: ReactNode;
+  className?: string;
+  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";
+  size?: "sm" | "md" | "lg";
+  width?: "fit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+};

package/src/ui/tooltip/variants.ts

@@ -0,0 +1,61 @@
+import { cva } from "class-variance-authority";
+
+export const tooltipVariants = cva(
+  "absolute z-50 rounded-md shadow-md transition-all duration-200 pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-black text-white",
+        outline: "border bg-white text-black",
+        ghost: "bg-gray-800 text-white/90",
+        glass: "border border-white/15 bg-white/10 text-white backdrop-blur-md",
+        emerald: "bg-emerald-600 text-white",
+        indigo: "bg-indigo-600 text-white",
+        purple: "bg-purple-600 text-white",
+        pink: "bg-pink-600 text-white",
+        rose: "bg-rose-600 text-white",
+        sky: "bg-sky-600 text-white",
+        teal: "bg-teal-600 text-white",
+        yellow: "bg-yellow-600 text-white",
+        orange: "bg-orange-600 text-white",
+        green: "bg-green-600 text-white",
+        "gradient-blue":
+          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
+        "gradient-green":
+          "bg-gradient-to-r from-green-600 to-lime-600 text-white",
+        "gradient-red": "bg-gradient-to-r from-red-600 to-pink-600 text-white",
+        "gradient-yellow":
+          "bg-gradient-to-r from-yellow-600 to-orange-600 text-white",
+        "gradient-purple":
+          "bg-gradient-to-r from-purple-600 to-pink-600 text-white",
+        "gradient-teal":
+          "bg-gradient-to-r from-teal-600 to-cyan-600 text-white",
+        "gradient-indigo":
+          "bg-gradient-to-r from-indigo-600 to-purple-600 text-white",
+        "gradient-pink":
+          "bg-gradient-to-r from-pink-600 to-rose-600 text-white",
+        "gradient-orange":
+          "bg-gradient-to-r from-orange-600 to-red-600 text-white",
+      },
+      size: {
+        sm: "text-xs px-2 py-1",
+        md: "text-sm px-3 py-1.5",
+        lg: "text-base px-4 py-2",
+      },
+      width: {
+        fit: "min-w-75 md:min-w-fit",
+        xs: "min-w-75 md:min-w-xs",
+        sm: "min-w-75 md:min-w-sm",
+        md: "min-w-75 md:min-w-md",
+        lg: "min-w-75 md:min-w-lg",
+        xl: "min-w-75 md:min-w-xl",
+        "2xl": "min-w-75 md:min-w-2xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      width: "xs",
+    },
+  },
+);