@parto-system-design/ui 1.0.2 → 1.0.4

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.
Files changed (7) hide show
  1. package/dist/index.cjs +41 -74
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +41 -74
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -886,7 +886,7 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
886
886
  cursor-pointer
887
887
  inline-flex
888
888
  items-center
889
- space-x-2
889
+ gap-2
890
890
  text-center
891
891
  font-regular
892
892
  ease-out
@@ -4580,7 +4580,6 @@ function InputOTPSeparator({ ...props }) {
4580
4580
  // src/components/ui/instagram-post.tsx
4581
4581
  var React17 = __toESM(require("react"), 1);
4582
4582
  var import_class_variance_authority8 = require("class-variance-authority");
4583
- var import_react_player = __toESM(require("react-player"), 1);
4584
4583
 
4585
4584
  // src/components/ui/tooltip.tsx
4586
4585
  var React16 = __toESM(require("react"), 1);
@@ -4672,40 +4671,34 @@ function InstagramPostMedia({
4672
4671
  const item = media[0];
4673
4672
  if (variant === "horizontal") {
4674
4673
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-[20%] shrink-0 relative overflow-hidden group cursor-pointer h-full -my-[1px] -ms-[1px]", children: [
4675
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
4676
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4677
- import_react_player.default,
4674
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
4675
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4676
+ "img",
4678
4677
  {
4679
- url: item.url,
4680
- width: "100%",
4681
- height: "100%",
4682
- controls: true,
4683
- playing: false,
4684
- light: true
4678
+ src: item.url,
4679
+ alt: "Post media",
4680
+ className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
4685
4681
  }
4686
- ) })
4682
+ )
4687
4683
  ] });
4688
4684
  }
4689
4685
  const ratio = getAspectRatio(item.aspectRatio || "16:9");
4690
4686
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full relative overflow-hidden group cursor-pointer", style: { aspectRatio: ratio }, children: [
4691
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
4692
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4693
- import_react_player.default,
4687
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
4688
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4689
+ "img",
4694
4690
  {
4695
- url: item.url,
4696
- width: "100%",
4697
- height: "100%",
4698
- controls: true,
4699
- playing: false,
4700
- light: true
4691
+ src: item.url,
4692
+ alt: "Post media",
4693
+ className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
4701
4694
  }
4702
- ) })
4695
+ )
4703
4696
  ] });
4704
4697
  }
4705
4698
  if (mediaType === "carousel" || media.length > 1) {
4706
4699
  if (variant === "horizontal") {
4707
4700
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-[20%] shrink-0 relative overflow-hidden group cursor-pointer h-full -my-[1px] -ms-[1px]", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Carousel, { className: "w-full h-full", children: [
4708
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselContent, { className: "h-full", children: media.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselItem, { className: "h-full", children: item.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
4701
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselContent, { className: "h-full", children: media.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(CarouselItem, { className: "h-full", children: [
4709
4702
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
4710
4703
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4711
4704
  "img",
@@ -4715,30 +4708,17 @@ function InstagramPostMedia({
4715
4708
  className: "w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
4716
4709
  }
4717
4710
  )
4718
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
4719
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
4720
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4721
- import_react_player.default,
4722
- {
4723
- url: item.url,
4724
- width: "100%",
4725
- height: "100%",
4726
- controls: true,
4727
- playing: false,
4728
- light: true
4729
- }
4730
- ) })
4731
- ] }) }, index)) }),
4711
+ ] }, index)) }),
4732
4712
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselPrevious, { className: "ms-2" }),
4733
4713
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselNext, { className: "me-2" })
4734
4714
  ] }) });
4735
4715
  }
4736
4716
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(Carousel, { className: "w-full", children: [
4737
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselItem, { children: item.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
4717
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselContent, { children: media.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselItem, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
4738
4718
  "div",
4739
4719
  {
4740
4720
  className: "w-full relative overflow-hidden group cursor-pointer",
4741
- style: { aspectRatio: getAspectRatio(item.aspectRatio || "1:1") },
4721
+ style: { aspectRatio: getAspectRatio(item.aspectRatio || (item.type === "video" ? "16:9" : "1:1")) },
4742
4722
  children: [
4743
4723
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10" }),
4744
4724
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -4751,26 +4731,6 @@ function InstagramPostMedia({
4751
4731
  )
4752
4732
  ]
4753
4733
  }
4754
- ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
4755
- "div",
4756
- {
4757
- className: "w-full relative overflow-hidden group cursor-pointer",
4758
- style: { aspectRatio: getAspectRatio(item.aspectRatio || "16:9") },
4759
- children: [
4760
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300 z-10 pointer-events-none" }),
4761
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "w-full h-full group-hover:scale-110 transition-transform duration-300", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4762
- import_react_player.default,
4763
- {
4764
- url: item.url,
4765
- width: "100%",
4766
- height: "100%",
4767
- controls: true,
4768
- playing: false,
4769
- light: true
4770
- }
4771
- ) })
4772
- ]
4773
- }
4774
4734
  ) }, index)) }),
4775
4735
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselPrevious, { className: "ms-2" }),
4776
4736
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CarouselNext, { className: "me-2" })
@@ -4810,13 +4770,13 @@ function InstagramPostCaption({
4810
4770
  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn(
4811
4771
  "px-4 py-2",
4812
4772
  variant === "horizontal" && "overflow-visible"
4813
- ), dir: "rtl", children: [
4773
+ ), children: [
4814
4774
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
4815
4775
  "p",
4816
4776
  {
4817
4777
  ref: textRef,
4818
4778
  className: cn(
4819
- "text-sm leading-relaxed text-right",
4779
+ "text-sm leading-relaxed text-start",
4820
4780
  !isExpanded && variant === "vertical" && "line-clamp-3"
4821
4781
  // No line clamp for horizontal variant - show full text
4822
4782
  ),
@@ -5144,6 +5104,7 @@ var InstagramPost = React17.forwardRef(
5144
5104
  onOpenInstagram,
5145
5105
  instagramUrl,
5146
5106
  placeholderText,
5107
+ dir,
5147
5108
  ...props
5148
5109
  }, ref) => {
5149
5110
  const isVertical = variant === "vertical";
@@ -5151,8 +5112,8 @@ var InstagramPost = React17.forwardRef(
5151
5112
  "div",
5152
5113
  {
5153
5114
  ref,
5154
- className: cn(instagramPostVariants({ variant }), className, "group"),
5155
- dir: isVertical ? "ltr" : "rtl",
5115
+ className: cn(instagramPostVariants({ variant }), className, "group", isVertical && "flex flex-col h-full"),
5116
+ dir,
5156
5117
  ...props,
5157
5118
  children: [
5158
5119
  showActions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -5168,7 +5129,7 @@ var InstagramPost = React17.forwardRef(
5168
5129
  ),
5169
5130
  isVertical ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
5170
5131
  showProfile && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(InstagramPostProfile, { profile, variant: variant || "vertical", avatarUrl }),
5171
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5132
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5172
5133
  InstagramPostMedia,
5173
5134
  {
5174
5135
  media,
@@ -5176,7 +5137,7 @@ var InstagramPost = React17.forwardRef(
5176
5137
  variant: variant || "vertical",
5177
5138
  placeholderText
5178
5139
  }
5179
- ),
5140
+ ) }),
5180
5141
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5181
5142
  InstagramPostStats,
5182
5143
  {
@@ -5190,13 +5151,13 @@ var InstagramPost = React17.forwardRef(
5190
5151
  }
5191
5152
  ),
5192
5153
  showCaption && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(InstagramPostCaption, { caption, variant: variant || "vertical" }),
5193
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5154
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5194
5155
  InstagramPostTime,
5195
5156
  {
5196
5157
  publishTime,
5197
5158
  timeFormat
5198
5159
  }
5199
- )
5160
+ ) })
5200
5161
  ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
5201
5162
  /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5202
5163
  InstagramPostMedia,
@@ -5222,13 +5183,13 @@ var InstagramPost = React17.forwardRef(
5222
5183
  }
5223
5184
  ),
5224
5185
  showCaption && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(InstagramPostCaption, { caption, variant: variant || "horizontal" }),
5225
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5186
+ /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "mt-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
5226
5187
  InstagramPostTime,
5227
5188
  {
5228
5189
  publishTime,
5229
5190
  timeFormat
5230
5191
  }
5231
- )
5192
+ ) })
5232
5193
  ] })
5233
5194
  ] })
5234
5195
  ]
@@ -6899,12 +6860,18 @@ var EngagementRate = React22.forwardRef(
6899
6860
  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
6900
6861
  "div",
6901
6862
  {
6902
- className: "absolute -top-2 transform -translate-x-1/2 transition-all duration-500 z-10",
6863
+ className: "absolute -top-1 transform -translate-x-1/2 transition-all duration-500 z-10",
6903
6864
  style: { left: `${adjustedTrianglePosition}%` },
6904
- children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "relative", children: [
6905
- /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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" }),
6906
- /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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" })
6907
- ] })
6865
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
6866
+ "svg",
6867
+ {
6868
+ width: "20",
6869
+ height: "14",
6870
+ viewBox: "0 0 20 14",
6871
+ className: "fill-white dark:fill-white drop-shadow-md transition-transform duration-300",
6872
+ children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M10 14L0 0H20L10 14Z" })
6873
+ }
6874
+ )
6908
6875
  }
6909
6876
  )
6910
6877
  ] })