@sarunyu/system-one 4.3.0 → 4.4.1

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.
package/dist/index.js CHANGED
@@ -228,6 +228,19 @@ const Button = forwardRef(function Button2({
228
228
  );
229
229
  });
230
230
  Button.displayName = "Button";
231
+ function BannerMedia({ src, alt }) {
232
+ if (!src) {
233
+ return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "absolute inset-0 bg-muted" });
234
+ }
235
+ return /* @__PURE__ */ jsx(
236
+ "img",
237
+ {
238
+ alt,
239
+ className: "pointer-events-none absolute inset-0 size-full object-cover",
240
+ src
241
+ }
242
+ );
243
+ }
231
244
  function DurationBadge({
232
245
  duration,
233
246
  size
@@ -321,7 +334,7 @@ const tagConfig = {
321
334
  }
322
335
  };
323
336
  const Card = forwardRef(function Card2({
324
- variant = "event",
337
+ variant = "default",
325
338
  size = "desktop",
326
339
  children,
327
340
  title,
@@ -435,14 +448,7 @@ const Card = forwardRef(function Card2({
435
448
  }
436
449
  )
437
450
  ] }),
438
- /* @__PURE__ */ jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsx(
439
- "img",
440
- {
441
- alt: "social thumbnail",
442
- className: "pointer-events-none absolute inset-0 size-full object-cover",
443
- src: bannerSrc
444
- }
445
- ) })
451
+ /* @__PURE__ */ jsx("div", { className: "relative h-[84px] w-[149px] shrink-0 overflow-clip rounded-[6px]", children: /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "social thumbnail" }) })
446
452
  ] }),
447
453
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
448
454
  isDesktop ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[12px]", children: [
@@ -525,14 +531,7 @@ const Card = forwardRef(function Card2({
525
531
  imgHeight
526
532
  ),
527
533
  children: [
528
- /* @__PURE__ */ jsx(
529
- "img",
530
- {
531
- alt: "live thumbnail",
532
- className: "pointer-events-none absolute inset-0 size-full object-cover",
533
- src: bannerSrc
534
- }
535
- ),
534
+ /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "live thumbnail" }),
536
535
  /* @__PURE__ */ jsxs(
537
536
  "div",
538
537
  {
@@ -569,14 +568,7 @@ const Card = forwardRef(function Card2({
569
568
  ),
570
569
  children: [
571
570
  /* @__PURE__ */ jsxs("div", { className: "relative h-[184px] w-full shrink-0 overflow-clip", children: [
572
- /* @__PURE__ */ jsx(
573
- "img",
574
- {
575
- alt: "news banner",
576
- className: "pointer-events-none absolute inset-0 size-full object-cover",
577
- src: bannerSrc
578
- }
579
- ),
571
+ /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
580
572
  locked && /* @__PURE__ */ jsx(LockBadge, {})
581
573
  ] }),
582
574
  /* @__PURE__ */ jsx(
@@ -606,14 +598,7 @@ const Card = forwardRef(function Card2({
606
598
  ),
607
599
  children: [
608
600
  /* @__PURE__ */ jsxs("div", { className: "relative h-[114px] w-[171px] shrink-0 overflow-clip", children: [
609
- /* @__PURE__ */ jsx(
610
- "img",
611
- {
612
- alt: "news banner",
613
- className: "pointer-events-none absolute inset-0 size-full object-cover",
614
- src: bannerSrc
615
- }
616
- ),
601
+ /* @__PURE__ */ jsx(BannerMedia, { src: bannerSrc, alt: "news banner" }),
617
602
  locked && /* @__PURE__ */ jsx(LockBadge, {})
618
603
  ] }),
619
604
  /* @__PURE__ */ jsx(
@@ -651,11 +636,10 @@ const Card = forwardRef(function Card2({
651
636
  className: cn("relative w-full shrink-0 overflow-clip", bannerClass),
652
637
  children: [
653
638
  /* @__PURE__ */ jsx(
654
- "img",
639
+ BannerMedia,
655
640
  {
656
- alt: variant === "news" ? "news banner" : "event banner",
657
- className: "pointer-events-none absolute inset-0 size-full object-cover",
658
- src: bannerSrc
641
+ src: bannerSrc,
642
+ alt: variant === "news" ? "news banner" : "event banner"
659
643
  }
660
644
  ),
661
645
  locked && /* @__PURE__ */ jsx(LockBadge, { size })