@snapcall/design-system 1.23.3 → 1.24.2

package/dist/components/MediaCard/index.mjs

@@ -14,11 +14,11 @@ import {
 // src/components/MediaCard/MediaCard.tsx
 import { cloneElement } from "react";
 
-// src/icons/image1.tsx
+// src/icons/file6.tsx
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var Image1Icon = forwardRef(
-  function Image1Icon2(_a, ref) {
+import { jsx, jsxs } from "react/jsx-runtime";
+var File6Icon = forwardRef(
+  function File6Icon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
     return /* @__PURE__ */ jsxs(
       "svg",
@@ -32,8 +32,50 @@ var Image1Icon = forwardRef(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
+          duotone && /* @__PURE__ */ jsx(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M19.1213 7.12139L14.8787 2.87875C14.6222 2.62223 14.324 2.41696 14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305C19.5831 7.67611 19.3778 7.37792 19.1213 7.12139Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M16 13H8M16 17H8M10 9H8M14 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9265 19.673 20.362C20 19.7202 20 18.8802 20 17.2V8L14 2Z",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+// src/icons/image1.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Image1Icon = forwardRef2(
+  function Image1Icon2(_a, ref) {
+    var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
+    return /* @__PURE__ */ jsxs2(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          duotone && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx2(
               "path",
               {
                 d: "M6.36574 19.6343L14.8687 11.1314C15.2647 10.7354 15.4627 10.5373 15.691 10.4632C15.8919 10.3979 16.1082 10.3979 16.3091 10.4632C16.5374 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2C21 17.8802 21 18.7202 20.6731 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7203 21 17.8802 21 16.2 21H6.93142C6.3256 21 6.0227 21 5.88243 20.8802C5.76073 20.7763 5.69614 20.6203 5.7087 20.4608C5.72317 20.2769 5.93736 20.0627 6.36574 19.6343Z",
@@ -41,7 +83,7 @@ var Image1Icon = forwardRef(
                 fillOpacity: "0.12"
               }
             ),
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2(
               "path",
               {
                 d: "M8.50005 10.5C9.60462 10.5 10.5 9.60457 10.5 8.5C10.5 7.39543 9.60462 6.5 8.50005 6.5C7.39548 6.5 6.50005 7.39543 6.50005 8.5C6.50005 9.60457 7.39548 10.5 8.50005 10.5Z",
@@ -50,7 +92,7 @@ var Image1Icon = forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx2(
             "path",
             {
               d: "M16.2 21H6.93137C6.32555 21 6.02265 21 5.88238 20.8802C5.76068 20.7763 5.69609 20.6203 5.70865 20.4608C5.72312 20.2769 5.93731 20.0627 6.36569 19.6343L14.8686 11.1314C15.2646 10.7354 15.4627 10.5373 15.691 10.4632C15.8918 10.3979 16.1082 10.3979 16.309 10.4632C16.5373 10.5373 16.7354 10.7354 17.1314 11.1314L21 15V16.2M16.2 21C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2M16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V7.8C3 6.11984 3 5.27976 3.32698 4.63803C3.6146 4.07354 4.07354 3.6146 4.63803 3.32698C5.27976 3 6.11984 3 7.8 3H16.2C17.8802 3 18.7202 3 19.362 3.32698C19.9265 3.6146 20.3854 4.07354 20.673 4.63803C21 5.27976 21 6.11984 21 7.8V16.2M10.5 8.5C10.5 9.60457 9.60457 10.5 8.5 10.5C7.39543 10.5 6.5 9.60457 6.5 8.5C6.5 7.39543 7.39543 6.5 8.5 6.5C9.60457 6.5 10.5 7.39543 10.5 8.5Z",
@@ -67,11 +109,11 @@ var Image1Icon = forwardRef(
 );
 
 // src/icons/play.tsx
-import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var PlayIcon = forwardRef3(function PlayIcon2(_a, ref) {
   var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "svg",
     __spreadProps(__spreadValues({
       ref,
@@ -83,7 +125,7 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
       className
     }, other), {
       children: [
-        duotone && /* @__PURE__ */ jsx2(
+        duotone && /* @__PURE__ */ jsx3(
           "path",
           {
             opacity: "0.12",
@@ -91,7 +133,7 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "path",
           {
             d: "M5 4.98951C5 4.01835 5 3.53277 5.20249 3.2651C5.37889 3.03191 5.64852 2.88761 5.9404 2.87018C6.27544 2.85017 6.67946 3.11953 7.48752 3.65823L18.0031 10.6686C18.6708 11.1137 19.0046 11.3363 19.1209 11.6168C19.2227 11.8621 19.2227 12.1377 19.1209 12.383C19.0046 12.6635 18.6708 12.886 18.0031 13.3312L7.48752 20.3415C6.67946 20.8802 6.27544 21.1496 5.9404 21.1296C5.64852 21.1122 5.37889 20.9679 5.20249 20.7347C5 20.467 5 19.9814 5 19.0103V4.98951Z",
@@ -107,12 +149,12 @@ var PlayIcon = forwardRef2(function PlayIcon2(_a, ref) {
 });
 
 // src/icons/recording2.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Recording2Icon = forwardRef3(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Recording2Icon = forwardRef4(
   function Recording2Icon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx4(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -123,7 +165,7 @@ var Recording2Icon = forwardRef3(
         xmlns: "http://www.w3.org/2000/svg",
         className
       }, other), {
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M3 10L3 14M7.5 11V13M12 6V18M16.5 3V21M21 10V14",
@@ -139,12 +181,12 @@ var Recording2Icon = forwardRef3(
 );
 
 // src/icons/videoRecorder.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var VideoRecorderIcon = forwardRef4(
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var VideoRecorderIcon = forwardRef5(
   function VideoRecorderIcon2(_a, ref) {
     var _b = _a, { size = 24, className = "text-gray-1000", duotone = false } = _b, other = __objRest(_b, ["size", "className", "duotone"]);
-    return /* @__PURE__ */ jsxs3(
+    return /* @__PURE__ */ jsxs4(
       "svg",
       __spreadProps(__spreadValues({
         ref,
@@ -156,7 +198,7 @@ var VideoRecorderIcon = forwardRef4(
         className
       }, other), {
         children: [
-          duotone && /* @__PURE__ */ jsx4(
+          duotone && /* @__PURE__ */ jsx5(
             "path",
             {
               opacity: "0.12",
@@ -168,7 +210,7 @@ var VideoRecorderIcon = forwardRef4(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "path",
             {
               d: "M22 8.93137C22 8.32555 22 8.02265 21.8802 7.88238C21.7763 7.76068 21.6203 7.69609 21.4608 7.70865C21.2769 7.72312 21.0627 7.93731 20.6343 8.36569L17 12L20.6343 15.6343C21.0627 16.0627 21.2769 16.2769 21.4608 16.2914C21.6203 16.3039 21.7763 16.2393 21.8802 16.1176C22 15.9774 22 15.6744 22 15.0686V8.93137Z",
@@ -178,7 +220,7 @@ var VideoRecorderIcon = forwardRef4(
               strokeLinejoin: "round"
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "path",
             {
               d: "M2 9.8C2 8.11984 2 7.27976 2.32698 6.63803C2.6146 6.07354 3.07354 5.6146 3.63803 5.32698C4.27976 5 5.11984 5 6.8 5H12.2C13.8802 5 14.7202 5 15.362 5.32698C15.9265 5.6146 16.3854 6.07354 16.673 6.63803C17 7.27976 17 8.11984 17 9.8V14.2C17 15.8802 17 16.7202 16.673 17.362C16.3854 17.9265 15.9265 18.3854 15.362 18.673C14.7202 19 13.8802 19 12.2 19H6.8C5.11984 19 4.27976 19 3.63803 18.673C3.07354 18.3854 2.6146 17.9265 2.32698 17.362C2 16.7202 2 15.8802 2 14.2V9.8Z",
@@ -206,11 +248,12 @@ var secondsToDuration = (seconds) => {
 };
 
 // src/components/MediaCard/MediaCard.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var typesIcons = {
-  audio: /* @__PURE__ */ jsx5(Recording2Icon, {}),
-  video: /* @__PURE__ */ jsx5(VideoRecorderIcon, { duotone: true }),
-  image: /* @__PURE__ */ jsx5(Image1Icon, { duotone: true })
+  audio: /* @__PURE__ */ jsx6(Recording2Icon, {}),
+  video: /* @__PURE__ */ jsx6(VideoRecorderIcon, { duotone: true }),
+  image: /* @__PURE__ */ jsx6(Image1Icon, { duotone: true }),
+  other: /* @__PURE__ */ jsx6(File6Icon, { duotone: true })
 };
 var MediaCard = (_a) => {
   var _b = _a, {
@@ -219,6 +262,7 @@ var MediaCard = (_a) => {
     duration,
     type,
     image,
+    icon,
     action,
     actionBehavior = "default",
     isLoading,
@@ -231,6 +275,7 @@ var MediaCard = (_a) => {
     "duration",
     "type",
     "image",
+    "icon",
     "action",
     "actionBehavior",
     "isLoading",
@@ -238,24 +283,24 @@ var MediaCard = (_a) => {
     "author",
     "className"
   ]);
-  const thumbnail = /* @__PURE__ */ jsx5(
+  const thumbnail = /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn("min-h-0 bg-gray-50 relative", {
         "aspect-square rounded-md shrink-0": size === "medium" || size === "small",
         "flex-1": size === "large"
       }),
-      children: /* @__PURE__ */ jsxs4("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
-        /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsxs5("div", { className: "flex justify-center items-center w-full h-full rounded-[inherit] overflow-hidden relative", children: [
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: cn(
               "absolute w-full h-full",
               size === "large" ? "p-2" : "p-1"
             ),
-            children: /* @__PURE__ */ jsxs4("div", { className: "relative w-full h-full flex justify-center items-center", children: [
-              duration !== void 0 && size === "large" && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx5("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
-              size !== "small" && author && /* @__PURE__ */ jsx5("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsxs5("div", { className: "relative w-full h-full flex justify-center items-center", children: [
+              duration !== void 0 && size === "large" && /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 left-0", children: /* @__PURE__ */ jsx6("p", { className: "px-1 py-0.5 bg-black/50 dark:bg-white/50 rounded-sm text-xs text-white dark:text-black font-medium truncate", children: secondsToDuration(duration) }) }),
+              size !== "small" && author && /* @__PURE__ */ jsx6("div", { className: "absolute bottom-0 right-0", children: /* @__PURE__ */ jsx6(
                 Avatar,
                 {
                   size: size === "large" ? "sm" : "xs",
@@ -263,7 +308,7 @@ var MediaCard = (_a) => {
                   image: author.image
                 }
               ) }),
-              type === "video" && image && /* @__PURE__ */ jsx5(
+              type === "video" && image && /* @__PURE__ */ jsx6(
                 PlayIcon,
                 {
                   size: size === "large" ? 24 : size === "medium" ? 18 : 12,
@@ -273,14 +318,14 @@ var MediaCard = (_a) => {
             ] })
           }
         ),
-        typeof image === "string" ? /* @__PURE__ */ jsx5("img", { className: "w-full h-full object-cover", src: image }) : image ? image : cloneElement(typesIcons[type], {
+        typeof image === "string" ? /* @__PURE__ */ jsx6("img", { className: "w-full h-full object-cover", src: image }) : image ? image : cloneElement(icon || typesIcons[type], {
           className: "text-gray-900 self-center",
           size: size === "large" ? 24 : size === "medium" ? 18 : 16
         })
       ] })
     }
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     __spreadProps(__spreadValues({}, otherProps), {
       className: cn(
@@ -296,7 +341,7 @@ var MediaCard = (_a) => {
       ),
       children: [
         size === "large" && thumbnail,
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "div",
           {
             className: cn("flex gap-4", {
@@ -305,12 +350,12 @@ var MediaCard = (_a) => {
             }),
             children: [
               size !== "large" && thumbnail,
-              /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
-                /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
-                  /* @__PURE__ */ jsx5("p", { className: "text-black text-sm font-medium truncate", children: title }),
-                  /* @__PURE__ */ jsx5("p", { className: "text-xs text-gray-900 truncate", children: description })
+              /* @__PURE__ */ jsxs5("div", { className: "flex gap-2 items-center w-full min-w-0", children: [
+                /* @__PURE__ */ jsxs5("div", { className: "flex-1 flex flex-col gap-0.5 min-w-0", children: [
+                  /* @__PURE__ */ jsx6("p", { className: "text-black text-sm font-medium truncate", children: title }),
+                  /* @__PURE__ */ jsx6("p", { className: "text-xs text-gray-900 truncate", children: description })
                 ] }),
-                isLoading ? /* @__PURE__ */ jsx5(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ jsx5(
+                isLoading ? /* @__PURE__ */ jsx6(SpinnerIcon, { size: 24, className: "text-blue-700 animate-spin" }) : /* @__PURE__ */ jsx6(
                   "div",
                   {
                     className: cn({

package/dist/components/Tooltip/index.d.mts

@@ -6,5 +6,12 @@ declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentProp
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
+declare const TooltipContentCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    description?: string;
+    header?: React.ReactNode;
+    action?: string | React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipContentCard, TooltipProvider, TooltipTrigger };

package/dist/components/Tooltip/index.d.ts

@@ -6,5 +6,12 @@ declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentProp
 declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
+declare const TooltipContentCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    title: string;
+    description?: string;
+    header?: React.ReactNode;
+    action?: string | React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipArrow, TooltipContent, TooltipContentCard, TooltipProvider, TooltipTrigger };

package/dist/components/Tooltip/index.js

@@ -1,7 +1,9 @@
 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -57,14 +60,16 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var Tooltip_exports = {};
 __export(Tooltip_exports, {
   Tooltip: () => Tooltip,
+  TooltipArrow: () => TooltipArrow,
   TooltipContent: () => TooltipContent,
+  TooltipContentCard: () => TooltipContentCard,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger
 });
 module.exports = __toCommonJS(Tooltip_exports);
 
 // src/components/Tooltip/Tooltip.tsx
-var React = __toESM(require("react"));
+var React2 = __toESM(require("react"));
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
 
 // src/utils/cn.ts
@@ -74,37 +79,210 @@ function cn(...inputs) {
   return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
 }
 
-// src/components/Tooltip/Tooltip.tsx
+// src/components/Button/Button.tsx
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_cva = require("cva");
+
+// src/icons/spinner.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var SpinnerIcon = (0, import_react.forwardRef)(
+  function SpinnerIcon2(_a, ref) {
+    var _b = _a, { size = 24, className = "animate-spin text-gray-1000" } = _b, other = __objRest(_b, ["size", "className"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      __spreadProps(__spreadValues({
+        ref,
+        width: size,
+        height: size,
+        viewBox: "0 0 25 24",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className
+      }, other), {
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              opacity: "0.12",
+              d: "M24.5 12C24.5 18.6274 19.1274 24 12.5 24C5.87258 24 0.5 18.6274 0.5 12C0.5 5.37258 5.87258 0 12.5 0C19.1274 0 24.5 5.37258 24.5 12ZM3.668 12C3.668 16.8778 7.62222 20.832 12.5 20.832C17.3778 20.832 21.332 16.8778 21.332 12C21.332 7.12222 17.3778 3.168 12.5 3.168C7.62222 3.168 3.668 7.12222 3.668 12Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              d: "M22.916 12C23.7908 12 24.5108 12.7122 24.3956 13.5794C24.1641 15.323 23.5512 17.0011 22.5928 18.4912C21.3476 20.4272 19.5719 21.9643 17.4774 22.919C15.3829 23.8738 13.058 24.206 10.7799 23.8761C8.50179 23.5461 6.36667 22.5679 4.62912 21.0581C2.89158 19.5483 1.62494 17.5706 0.98025 15.3609C0.335563 13.1511 0.340035 10.8026 0.993131 8.5953C1.64623 6.38803 2.92039 4.41517 4.66367 2.91199C6.00545 1.75501 7.58156 0.913857 9.27571 0.441275C10.1184 0.206218 10.9241 0.819698 11.0462 1.68595C11.1683 2.55221 10.5575 3.33995 9.72694 3.61463C8.63201 3.97673 7.61359 4.55146 6.73246 5.31122C5.44941 6.41757 4.51162 7.86959 4.03094 9.49414C3.55027 11.1187 3.54697 12.8472 4.02146 14.4736C4.49595 16.1 5.4282 17.5555 6.70703 18.6668C7.98587 19.778 9.55732 20.4979 11.234 20.7408C12.9107 20.9836 14.6218 20.7391 16.1634 20.0364C17.7049 19.3337 19.0119 18.2024 19.9283 16.7775C20.5576 15.799 20.9846 14.7103 21.1903 13.5755C21.3464 12.7148 22.0412 12 22.916 12Z",
+              fill: "currentColor"
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_cva.cva)({
+  base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium ring-offset-background transition-colors relative focus-visible:outline-hidden focus-visible:ring-2 disabled:select-none disabled:pointer-events-none disabled:opacity-40",
+  variants: {
+    variant: {
+      primary: "bg-blue-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-blue-800 active:bg-blue-900 focus-visible:ring-blue-1000",
+      secondary: "bg-gray-50 text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-500 focus-visible:ring-black",
+      tertiary: "bg-gray-50 text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
+      outline: "bg-white text-black [&>svg]:text-black ring-1 ring-offset-0 ring-gray-200 hover:bg-gray-50 active:bg-gray-200 focus-visible:ring-black",
+      outlineBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 ring-1 ring-inset ring-offset-0 ring-blue-700 hover:bg-blue-50 active:bg-blue-200 focus-visible:ring-blue-700 ",
+      destructive: "bg-red-700 text-white [&>svg]:text-white dark:text-black dark:[&>svg]:text-black hover:bg-red-800 active:bg-red-900 focus-visible:ring-red-1000",
+      ghostBlue: "bg-transparent text-blue-700 [&>svg]:text-blue-700 hover:bg-blue-100 active:bg-blue-200 focus-visible:ring-blue-700",
+      ghostRed: "bg-transparent text-red-700 [&>svg]:text-red-700 hover:bg-red-100 active:bg-red-200 focus-visible:ring-red-700",
+      ghostGray: "bg-transparent text-black [&>svg]:text-black hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-black",
+      roundedFill: "rounded-2xl text-black [&>svg]:text-black bg-gray-200 active:bg-gray-300 border-2 border-gray-400 hover:border-gray-600",
+      roundedGlass: "rounded-2xl text-black [&>svg]:text-black bg-gray-100/50 hover:bg-gray-100/75 active:bg-gray-100 backdrop-blur-[20px]"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  }
+});
+var buttonSizes = (0, import_cva.cva)({
+  variants: {
+    size: {
+      xs: "text-xs px-2.5 py-1.5",
+      sm: "text-sm px-3 py-2",
+      md: "text-md px-3.5 py-2.5",
+      lg: "text-lg px-4 py-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var iconButtonSizes = (0, import_cva.cva)({
+  variants: {
+    size: {
+      xs: "p-2",
+      sm: "p-2.5",
+      md: "p-[11px]",
+      lg: "p-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var iconSizes = {
+  xs: 12,
+  sm: 16,
+  md: 18,
+  lg: 24
+};
+var Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant,
+      size,
+      icon = false,
+      isLoading = false,
+      asChild = false,
+      children,
+      type = "button"
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "size",
+      "icon",
+      "isLoading",
+      "asChild",
+      "children",
+      "type"
+    ]);
+    var _a2;
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    const sizesStyle = icon ? iconButtonSizes : buttonSizes;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      Comp,
+      __spreadProps(__spreadValues({
+        className: cn(
+          buttonVariants({ variant, className }),
+          sizesStyle({ size })
+        ),
+        ref,
+        disabled: (_a2 = props.disabled) != null ? _a2 : isLoading,
+        type
+      }, props), {
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            SpinnerIcon,
+            {
+              size: iconSizes[size || "md"],
+              className: "absolute text-inherit animate-spin"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex gap-[inherit] invisible", children })
+        ] }) : children
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/Tooltip/Tooltip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var TooltipProvider = (_a) => {
   var _b = _a, {
     delayDuration = 0
   } = _b, props = __objRest(_b, [
     "delayDuration"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Provider, __spreadValues({ delayDuration }, props));
 };
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React.forwardRef((_a, ref) => {
+var TooltipContent = React2.forwardRef((_a, ref) => {
   var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest(_b, ["className", "sideOffset"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     TooltipPrimitive.Content,
     __spreadValues({
       ref,
       sideOffset,
       className: cn(
-        "z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm text-white font-medium 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",
+        "z-50 rounded-md bg-black px-3 py-1.5 text-sm text-white font-medium 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)
   );
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipArrow = TooltipPrimitive.Arrow;
+var TooltipContentCard = React2.forwardRef((_a, ref) => {
+  var _b = _a, { title, description, header, action, className } = _b, props = __objRest(_b, ["title", "description", "header", "action", "className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex flex-col gap-3 py-1.5", className)
+    }, props), {
+      children: [
+        header,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "text-sm font-medium text-white", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-gray-900", children: description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { variant: "secondary", size: "xs", asChild: typeof action !== "string", children: action })
+      ]
+    })
+  );
+});
+TooltipContentCard.displayName = "TooltipContentCard";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tooltip,
+  TooltipArrow,
   TooltipContent,
+  TooltipContentCard,
   TooltipProvider,
   TooltipTrigger
 });

package/dist/components/Tooltip/index.mjs

@@ -1,5 +1,10 @@
+import {
+  Button
+} from "../../chunk-R6W6SKNR.mjs";
+import "../../chunk-N65I4EXR.mjs";
 import {
   __objRest,
+  __spreadProps,
   __spreadValues,
   cn
 } from "../../chunk-BOWIL6WZ.mjs";
@@ -7,7 +12,7 @@ import {
 // src/components/Tooltip/Tooltip.tsx
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 var TooltipProvider = (_a) => {
   var _b = _a, {
     delayDuration = 0
@@ -26,16 +31,39 @@ var TooltipContent = React.forwardRef((_a, ref) => {
       ref,
       sideOffset,
       className: cn(
-        "z-50 overflow-hidden rounded-md bg-black px-3 py-1.5 text-sm text-white font-medium 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",
+        "z-50 rounded-md bg-black px-3 py-1.5 text-sm text-white font-medium 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)
   );
 });
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var TooltipArrow = TooltipPrimitive.Arrow;
+var TooltipContentCard = React.forwardRef((_a, ref) => {
+  var _b = _a, { title, description, header, action, className } = _b, props = __objRest(_b, ["title", "description", "header", "action", "className"]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("flex flex-col gap-3 py-1.5", className)
+    }, props), {
+      children: [
+        header,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-medium text-white", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-900", children: description })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "xs", asChild: typeof action !== "string", children: action })
+      ]
+    })
+  );
+});
+TooltipContentCard.displayName = "TooltipContentCard";
 export {
   Tooltip,
+  TooltipArrow,
   TooltipContent,
+  TooltipContentCard,
   TooltipProvider,
   TooltipTrigger
 };