@parto-system-design/ui 1.0.1 → 1.0.3

package/dist/index.css

@@ -81,6 +81,9 @@
 .z-\[1\] {
   z-index: 1;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .order-1 {
   order: 1;
 }
@@ -900,6 +903,9 @@
 .fill-current {
   fill: currentcolor;
 }
+.fill-primary {
+  fill: hsl(var(--brand-default));
+}
 .object-cover {
   object-fit: cover;
 }

package/dist/index.d.cts

@@ -820,6 +820,7 @@ interface InstagramProfileInfo {
     avatarUrl?: string;
 }
 interface InstagramPostProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof instagramPostVariants> {
+    dir?: "rtl" | "ltr";
     media?: MediaItem[];
     mediaType?: MediaType;
     postType?: 0 | 1 | 2;

package/dist/index.d.ts

@@ -820,6 +820,7 @@ interface InstagramProfileInfo {
     avatarUrl?: string;
 }
 interface InstagramPostProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof instagramPostVariants> {
+    dir?: "rtl" | "ltr";
     media?: MediaItem[];
     mediaType?: MediaType;
     postType?: 0 | 1 | 2;

package/dist/index.js

@@ -576,7 +576,7 @@ var buttonVariants = cva2(
   cursor-pointer
   inline-flex
   items-center
-  space-x-2
+  gap-2
   text-center
   font-regular
   ease-out
@@ -4505,13 +4505,13 @@ function InstagramPostCaption({
   return /* @__PURE__ */ jsxs21("div", { className: cn(
     "px-4 py-2",
     variant === "horizontal" && "overflow-visible"
-  ), dir: "rtl", children: [
+  ), children: [
     /* @__PURE__ */ jsx39(
       "p",
       {
         ref: textRef,
         className: cn(
-          "text-sm leading-relaxed text-right",
+          "text-sm leading-relaxed text-start",
           !isExpanded && variant === "vertical" && "line-clamp-3"
           // No line clamp for horizontal variant - show full text
         ),
@@ -4839,6 +4839,7 @@ var InstagramPost = React17.forwardRef(
     onOpenInstagram,
     instagramUrl,
     placeholderText,
+    dir,
     ...props
   }, ref) => {
     const isVertical = variant === "vertical";
@@ -4846,8 +4847,8 @@ var InstagramPost = React17.forwardRef(
       "div",
       {
         ref,
-        className: cn(instagramPostVariants({ variant }), className, "group"),
-        dir: isVertical ? "ltr" : "rtl",
+        className: cn(instagramPostVariants({ variant }), className, "group", isVertical && "flex flex-col h-full"),
+        dir,
         ...props,
         children: [
           showActions && /* @__PURE__ */ jsx39(
@@ -4863,7 +4864,7 @@ var InstagramPost = React17.forwardRef(
           ),
           isVertical ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
             showProfile && /* @__PURE__ */ jsx39(InstagramPostProfile, { profile, variant: variant || "vertical", avatarUrl }),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx39("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx39(
               InstagramPostMedia,
               {
                 media,
@@ -4871,7 +4872,7 @@ var InstagramPost = React17.forwardRef(
                 variant: variant || "vertical",
                 placeholderText
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx39(
               InstagramPostStats,
               {
@@ -4885,13 +4886,13 @@ var InstagramPost = React17.forwardRef(
               }
             ),
             showCaption && /* @__PURE__ */ jsx39(InstagramPostCaption, { caption, variant: variant || "vertical" }),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx39("div", { className: "mt-auto w-full", children: /* @__PURE__ */ jsx39(
               InstagramPostTime,
               {
                 publishTime,
                 timeFormat
               }
-            )
+            ) })
           ] }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
             /* @__PURE__ */ jsx39(
               InstagramPostMedia,
@@ -4917,13 +4918,13 @@ var InstagramPost = React17.forwardRef(
                 }
               ),
               showCaption && /* @__PURE__ */ jsx39(InstagramPostCaption, { caption, variant: variant || "horizontal" }),
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx39("div", { className: "mt-auto w-full", children: /* @__PURE__ */ jsx39(
                 InstagramPostTime,
                 {
                   publishTime,
                   timeFormat
                 }
-              )
+              ) })
             ] })
           ] })
         ]
@@ -6598,12 +6599,18 @@ var EngagementRate = React22.forwardRef(
           /* @__PURE__ */ jsx50(
             "div",
             {
-              className: "absolute -top-2 transform -translate-x-1/2 transition-all duration-500 z-10",
+              className: "absolute -top-1 transform -translate-x-1/2 transition-all duration-500 z-10",
               style: { left: `${adjustedTrianglePosition}%` },
-              children: /* @__PURE__ */ jsxs30("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx50("div", { className: "w-0 h-0 border-l-[20px] rotate-180 border-r-[20px] border-b-[24px] border-l-transparent border-r-transparent border-b-background transition-transform duration-300" }),
-                /* @__PURE__ */ jsx50("div", { className: "w-0 h-0 border-l-[12px] rotate-180 border-r-[12px] border-b-[16px] border-l-transparent border-r-transparent border-b-foreground transition-transform duration-300 absolute top-[4px] left-1/2 transform -translate-x-1/2" })
-              ] })
+              children: /* @__PURE__ */ jsx50(
+                "svg",
+                {
+                  width: "20",
+                  height: "14",
+                  viewBox: "0 0 20 14",
+                  className: "fill-primary text-primary transition-transform duration-300",
+                  children: /* @__PURE__ */ jsx50("path", { d: "M10 14L0 0H20L10 14Z" })
+                }
+              )
             }
           )
         ] })
@@ -9035,6 +9042,7 @@ function PartoHeatMap({
 
 // src/components/charts/PartoWordCloud.tsx
 import * as React32 from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { Wordcloud } from "@visx/wordcloud";
 import { scaleLog } from "@visx/scale";
 import { Text } from "@visx/text";
@@ -9091,28 +9099,25 @@ function PartoWordCloud({
     return fontScale(datum.value);
   };
   const handleMouseMove = (event, text, value) => {
-    if (containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const x = event.clientX - containerRect.left;
-      const y = event.clientY - containerRect.top;
-      setHovered({
-        text,
-        value,
-        x,
-        y,
-        color: primaryColor
-      });
-    }
+    const x = event.clientX;
+    const y = event.clientY;
+    setHovered({
+      text,
+      value,
+      x,
+      y,
+      color: primaryColor
+    });
   };
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       ref: containerRef,
       className,
       style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" },
       dir: "rtl",
-      children: /* @__PURE__ */ jsxs39("div", { style: { position: "relative", width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: [
-        /* @__PURE__ */ jsx71(
+      children: [
+        /* @__PURE__ */ jsx71("div", { style: { position: "relative", width, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx71(
           Wordcloud,
           {
             words: formattedWords,
@@ -9150,29 +9155,33 @@ function PartoWordCloud({
               ) }, w.text);
             })
           }
-        ),
-        hovered && /* @__PURE__ */ jsx71(
-          "div",
-          {
-            className: "pointer-events-none absolute z-50",
-            style: {
-              left: `${hovered.x}px`,
-              top: `${hovered.y - 50}px`,
-              transform: "translateX(-50%)"
-            },
-            children: /* @__PURE__ */ jsxs39("div", { className: "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", children: [
-              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx71("div", { className: "h-2.5 w-2.5 rounded-[2px]", style: { backgroundColor: hovered.color } }),
-                /* @__PURE__ */ jsx71("span", { className: "font-medium", children: hovered.text })
-              ] }),
-              /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
-                /* @__PURE__ */ jsx71("span", { className: "text-muted-foreground", children: "\u062A\u0639\u062F\u0627\u062F" }),
-                /* @__PURE__ */ jsx71("span", { className: "font-mono font-medium tabular-nums", children: hovered.value.toLocaleString("fa-IR") })
+        ) }),
+        hovered && typeof document !== "undefined" && createPortal3(
+          /* @__PURE__ */ jsx71(
+            "div",
+            {
+              className: "pointer-events-none fixed z-[9999]",
+              dir: "ltr",
+              style: {
+                left: `${hovered.x}px`,
+                top: `${hovered.y - 10}px`,
+                transform: "translate(-50%, -100%)"
+              },
+              children: /* @__PURE__ */ jsxs39("div", { className: "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", dir: "rtl", children: [
+                /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx71("div", { className: "h-2.5 w-2.5 rounded-[2px]", style: { backgroundColor: hovered.color } }),
+                  /* @__PURE__ */ jsx71("span", { className: "font-medium", children: hovered.text })
+                ] }),
+                /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx71("span", { className: "text-muted-foreground", children: "\u062A\u0639\u062F\u0627\u062F" }),
+                  /* @__PURE__ */ jsx71("span", { className: "font-mono font-medium tabular-nums", children: hovered.value.toLocaleString("fa-IR") })
+                ] })
               ] })
-            ] })
-          }
+            }
+          ),
+          document.body
         )
-      ] })
+      ]
     }
   );
 }