@parto-system-design/ui 1.0.2 → 1.0.4

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
@@ -4275,7 +4275,6 @@ function InputOTPSeparator({ ...props }) {
 // src/components/ui/instagram-post.tsx
 import * as React17 from "react";
 import { cva as cva8 } from "class-variance-authority";
-import ReactPlayer from "react-player";
 
 // src/components/ui/tooltip.tsx
 import * as React16 from "react";
@@ -4367,40 +4366,34 @@ function InstagramPostMedia({
     const item = media[0];
     if (variant === "horizontal") {
       return /* @__PURE__ */ jsxs21("div", { className: "w-[20%] shrink-0 relative overflow-hidden group cursor-pointer h-full -my-[1px] -ms-[1px]", children: [
-        /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
-        /* @__PURE__ */ jsx39("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ jsx39(
-          ReactPlayer,
+        /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+        /* @__PURE__ */ jsx39(
+          "img",
           {
-            url: item.url,
-            width: "100%",
-            height: "100%",
-            controls: true,
-            playing: false,
-            light: true
+            src: item.url,
+            alt: "Post media",
+            className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
           }
-        ) })
+        )
       ] });
     }
     const ratio = getAspectRatio(item.aspectRatio || "16:9");
     return /* @__PURE__ */ jsxs21("div", { className: "w-full relative overflow-hidden group cursor-pointer", style: { aspectRatio: ratio }, children: [
-      /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
-      /* @__PURE__ */ jsx39("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ jsx39(
-        ReactPlayer,
+      /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
+      /* @__PURE__ */ jsx39(
+        "img",
         {
-          url: item.url,
-          width: "100%",
-          height: "100%",
-          controls: true,
-          playing: false,
-          light: true
+          src: item.url,
+          alt: "Post media",
+          className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
         }
-      ) })
+      )
     ] });
   }
   if (mediaType === "carousel" || media.length > 1) {
     if (variant === "horizontal") {
       return /* @__PURE__ */ jsx39("div", { className: "w-[20%] shrink-0 relative overflow-hidden group cursor-pointer h-full -my-[1px] -ms-[1px]", children: /* @__PURE__ */ jsxs21(Carousel, { className: "w-full h-full", children: [
-        /* @__PURE__ */ jsx39(CarouselContent, { className: "h-full", children: media.map((item, index) => /* @__PURE__ */ jsx39(CarouselItem, { className: "h-full", children: item.type === "image" ? /* @__PURE__ */ jsxs21(Fragment4, { children: [
+        /* @__PURE__ */ jsx39(CarouselContent, { className: "h-full", children: media.map((item, index) => /* @__PURE__ */ jsxs21(CarouselItem, { className: "h-full", children: [
           /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
           /* @__PURE__ */ jsx39(
             "img",
@@ -4410,30 +4403,17 @@ function InstagramPostMedia({
               className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
             }
           )
-        ] }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
-          /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
-          /* @__PURE__ */ jsx39("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ jsx39(
-            ReactPlayer,
-            {
-              url: item.url,
-              width: "100%",
-              height: "100%",
-              controls: true,
-              playing: false,
-              light: true
-            }
-          ) })
-        ] }) }, index)) }),
+        ] }, index)) }),
         /* @__PURE__ */ jsx39(CarouselPrevious, { className: "ms-2" }),
         /* @__PURE__ */ jsx39(CarouselNext, { className: "me-2" })
       ] }) });
     }
     return /* @__PURE__ */ jsxs21(Carousel, { className: "w-full", children: [
-      /* @__PURE__ */ jsx39(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ jsx39(CarouselItem, { children: item.type === "image" ? /* @__PURE__ */ jsxs21(
+      /* @__PURE__ */ jsx39(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ jsx39(CarouselItem, { children: /* @__PURE__ */ jsxs21(
         "div",
         {
           className: "w-full relative overflow-hidden group cursor-pointer",
-          style: { aspectRatio: getAspectRatio(item.aspectRatio || "1:1") },
+          style: { aspectRatio: getAspectRatio(item.aspectRatio || (item.type === "video" ? "16:9" : "1:1")) },
           children: [
             /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
             /* @__PURE__ */ jsx39(
@@ -4446,26 +4426,6 @@ function InstagramPostMedia({
             )
           ]
         }
-      ) : /* @__PURE__ */ jsxs21(
-        "div",
-        {
-          className: "w-full relative overflow-hidden group cursor-pointer",
-          style: { aspectRatio: getAspectRatio(item.aspectRatio || "16:9") },
-          children: [
-            /* @__PURE__ */ jsx39("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
-            /* @__PURE__ */ jsx39("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ jsx39(
-              ReactPlayer,
-              {
-                url: item.url,
-                width: "100%",
-                height: "100%",
-                controls: true,
-                playing: false,
-                light: true
-              }
-            ) })
-          ]
-        }
       ) }, index)) }),
       /* @__PURE__ */ jsx39(CarouselPrevious, { className: "ms-2" }),
       /* @__PURE__ */ jsx39(CarouselNext, { className: "me-2" })
@@ -4505,13 +4465,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 +4799,7 @@ var InstagramPost = React17.forwardRef(
     onOpenInstagram,
     instagramUrl,
     placeholderText,
+    dir,
     ...props
   }, ref) => {
     const isVertical = variant === "vertical";
@@ -4846,8 +4807,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 +4824,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 +4832,7 @@ var InstagramPost = React17.forwardRef(
                 variant: variant || "vertical",
                 placeholderText
               }
-            ),
+            ) }),
             /* @__PURE__ */ jsx39(
               InstagramPostStats,
               {
@@ -4885,13 +4846,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 +4878,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 +6559,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-white dark:fill-white drop-shadow-md transition-transform duration-300",
+                  children: /* @__PURE__ */ jsx50("path", { d: "M10 14L0 0H20L10 14Z" })
+                }
+              )
             }
           )
         ] })