@opensite/ui 0.8.4 → 0.8.5

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 (51) hide show
  1. package/dist/article-breadcrumb-social.cjs +57 -73
  2. package/dist/article-breadcrumb-social.d.cts +2 -24
  3. package/dist/article-breadcrumb-social.d.ts +2 -24
  4. package/dist/article-breadcrumb-social.js +57 -73
  5. package/dist/article-compact-toc.cjs +1 -1
  6. package/dist/article-compact-toc.js +1 -1
  7. package/dist/article-sidebar-sticky.cjs +73 -26
  8. package/dist/article-sidebar-sticky.js +73 -26
  9. package/dist/blog-horizontal-timeline.cjs +7 -4
  10. package/dist/blog-horizontal-timeline.js +7 -4
  11. package/dist/faq-split-hero.cjs +704 -0
  12. package/dist/faq-split-hero.d.cts +118 -0
  13. package/dist/faq-split-hero.d.ts +118 -0
  14. package/dist/faq-split-hero.js +682 -0
  15. package/dist/feature-badge-grid-six.cjs +1 -1
  16. package/dist/feature-badge-grid-six.js +1 -1
  17. package/dist/feature-card-grid-linked.cjs +92 -22
  18. package/dist/feature-card-grid-linked.js +92 -22
  19. package/dist/feature-carousel-progress.cjs +1 -1
  20. package/dist/feature-carousel-progress.js +1 -1
  21. package/dist/feature-checklist-image.cjs +88 -15
  22. package/dist/feature-checklist-image.js +88 -15
  23. package/dist/feature-checklist-three-column.cjs +1 -1
  24. package/dist/feature-checklist-three-column.js +1 -1
  25. package/dist/feature-icon-grid-accent.cjs +50 -8
  26. package/dist/feature-icon-grid-accent.js +50 -8
  27. package/dist/feature-icon-grid-bordered.cjs +84 -14
  28. package/dist/feature-icon-grid-bordered.js +84 -14
  29. package/dist/feature-icon-tabs-content.cjs +217 -84
  30. package/dist/feature-icon-tabs-content.js +217 -84
  31. package/dist/feature-image-overlay-badge.cjs +106 -33
  32. package/dist/feature-image-overlay-badge.js +106 -33
  33. package/dist/feature-numbered-cards.cjs +154 -35
  34. package/dist/feature-numbered-cards.js +154 -35
  35. package/dist/feature-showcase.cjs +67 -71
  36. package/dist/feature-showcase.d.cts +1 -5
  37. package/dist/feature-showcase.d.ts +1 -5
  38. package/dist/feature-showcase.js +68 -72
  39. package/dist/feature-split-image-reverse.cjs +90 -15
  40. package/dist/feature-split-image-reverse.js +90 -15
  41. package/dist/feature-split-image.cjs +87 -15
  42. package/dist/feature-split-image.js +87 -15
  43. package/dist/feature-stats-highlight.cjs +2 -2
  44. package/dist/feature-stats-highlight.js +2 -2
  45. package/dist/feature-tabbed-content-image.cjs +207 -72
  46. package/dist/feature-tabbed-content-image.js +207 -72
  47. package/dist/feature-three-column-values.cjs +107 -14
  48. package/dist/feature-three-column-values.js +107 -14
  49. package/dist/registry.cjs +1460 -461
  50. package/dist/registry.js +1460 -461
  51. package/package.json +1 -1
package/dist/feature-three-column-values.cjs CHANGED
@@ -522,24 +522,78 @@ function FeatureThreeColumnValues({
522
522
  gridClassName,
523
523
  cardClassName,
524
524
  background,
525
- spacing,
525
+ spacing = "py-6 md:py-32",
526
526
  pattern,
527
527
  patternOpacity,
528
528
  patternClassName
529
529
  }) {
530
- const renderValueIcon = React__namespace.useCallback((value) => {
531
- if (value.icon) return value.icon;
532
- if (value.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
533
- return null;
534
- }, []);
530
+ const renderValueIcon = React__namespace.useCallback(
531
+ (value) => {
532
+ if (value.icon) return value.icon;
533
+ if (value.iconName)
534
+ return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: value.iconName, size: 24 });
535
+ return null;
536
+ },
537
+ []
538
+ );
535
539
  const valuesContent = React.useMemo(() => {
536
540
  if (valuesSlot) return valuesSlot;
537
541
  if (!values || values.length === 0) return null;
538
- return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
539
- (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
540
- value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
541
- value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
542
- ] }, index));
542
+ return values.map((value, index) => /* @__PURE__ */ jsxRuntime.jsxs(
543
+ "div",
544
+ {
545
+ className: cn(
546
+ "rounded-lg bg-accent p-5",
547
+ cardClassName,
548
+ value.className
549
+ ),
550
+ children: [
551
+ (value.icon || value.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
552
+ "span",
553
+ {
554
+ className: cn(
555
+ "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
556
+ value.iconClassName
557
+ ),
558
+ children: renderValueIcon(value)
559
+ }
560
+ ),
561
+ value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
562
+ "h3",
563
+ {
564
+ className: cn("mb-2 text-xl font-medium", value.titleClassName),
565
+ children: value.title
566
+ }
567
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
568
+ "div",
569
+ {
570
+ className: cn("mb-2 text-xl font-medium", value.titleClassName),
571
+ children: value.title
572
+ }
573
+ )),
574
+ value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
575
+ "p",
576
+ {
577
+ className: cn(
578
+ "leading-7 text-muted-foreground",
579
+ value.descriptionClassName
580
+ ),
581
+ children: value.description
582
+ }
583
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
584
+ "div",
585
+ {
586
+ className: cn(
587
+ "leading-7 text-muted-foreground",
588
+ value.descriptionClassName
589
+ ),
590
+ children: value.description
591
+ }
592
+ ))
593
+ ]
594
+ },
595
+ index
596
+ ));
543
597
  }, [valuesSlot, values, cardClassName, renderValueIcon]);
544
598
  return /* @__PURE__ */ jsxRuntime.jsxs(
545
599
  Section,
@@ -552,9 +606,48 @@ function FeatureThreeColumnValues({
552
606
  className,
553
607
  containerClassName,
554
608
  children: [
555
- label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
556
- title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
557
- (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
609
+ label && (typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
610
+ "p",
611
+ {
612
+ className: cn(
613
+ "mb-4 text-sm text-muted-foreground lg:text-base",
614
+ labelClassName
615
+ ),
616
+ children: label
617
+ }
618
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
619
+ "div",
620
+ {
621
+ className: cn(
622
+ "mb-4 text-sm text-muted-foreground lg:text-base",
623
+ labelClassName
624
+ ),
625
+ children: label
626
+ }
627
+ )),
628
+ title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
629
+ "h2",
630
+ {
631
+ className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
632
+ children: title
633
+ }
634
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
635
+ "div",
636
+ {
637
+ className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
638
+ children: title
639
+ }
640
+ )),
641
+ (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
642
+ "div",
643
+ {
644
+ className: cn(
645
+ "mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3",
646
+ gridClassName
647
+ ),
648
+ children: valuesContent
649
+ }
650
+ )
558
651
  ]
559
652
  }
560
653
  );
package/dist/feature-three-column-values.js CHANGED
@@ -501,24 +501,78 @@ function FeatureThreeColumnValues({
501
501
  gridClassName,
502
502
  cardClassName,
503
503
  background,
504
- spacing,
504
+ spacing = "py-6 md:py-32",
505
505
  pattern,
506
506
  patternOpacity,
507
507
  patternClassName
508
508
  }) {
509
- const renderValueIcon = React.useCallback((value) => {
510
- if (value.icon) return value.icon;
511
- if (value.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: value.iconName, size: 24 });
512
- return null;
513
- }, []);
509
+ const renderValueIcon = React.useCallback(
510
+ (value) => {
511
+ if (value.icon) return value.icon;
512
+ if (value.iconName)
513
+ return /* @__PURE__ */ jsx(DynamicIcon, { name: value.iconName, size: 24 });
514
+ return null;
515
+ },
516
+ []
517
+ );
514
518
  const valuesContent = useMemo(() => {
515
519
  if (valuesSlot) return valuesSlot;
516
520
  if (!values || values.length === 0) return null;
517
- return values.map((value, index) => /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-accent p-5", cardClassName, value.className), children: [
518
- (value.icon || value.iconName) && /* @__PURE__ */ jsx("span", { className: cn("mb-8 flex size-12 items-center justify-center rounded-full bg-background", value.iconClassName), children: renderValueIcon(value) }),
519
- value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx("h3", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-2 text-xl font-medium", value.titleClassName), children: value.title })),
520
- value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }) : /* @__PURE__ */ jsx("div", { className: cn("leading-7 text-muted-foreground", value.descriptionClassName), children: value.description }))
521
- ] }, index));
521
+ return values.map((value, index) => /* @__PURE__ */ jsxs(
522
+ "div",
523
+ {
524
+ className: cn(
525
+ "rounded-lg bg-accent p-5",
526
+ cardClassName,
527
+ value.className
528
+ ),
529
+ children: [
530
+ (value.icon || value.iconName) && /* @__PURE__ */ jsx(
531
+ "span",
532
+ {
533
+ className: cn(
534
+ "mb-8 flex size-12 items-center justify-center rounded-full bg-background",
535
+ value.iconClassName
536
+ ),
537
+ children: renderValueIcon(value)
538
+ }
539
+ ),
540
+ value.title && (typeof value.title === "string" ? /* @__PURE__ */ jsx(
541
+ "h3",
542
+ {
543
+ className: cn("mb-2 text-xl font-medium", value.titleClassName),
544
+ children: value.title
545
+ }
546
+ ) : /* @__PURE__ */ jsx(
547
+ "div",
548
+ {
549
+ className: cn("mb-2 text-xl font-medium", value.titleClassName),
550
+ children: value.title
551
+ }
552
+ )),
553
+ value.description && (typeof value.description === "string" ? /* @__PURE__ */ jsx(
554
+ "p",
555
+ {
556
+ className: cn(
557
+ "leading-7 text-muted-foreground",
558
+ value.descriptionClassName
559
+ ),
560
+ children: value.description
561
+ }
562
+ ) : /* @__PURE__ */ jsx(
563
+ "div",
564
+ {
565
+ className: cn(
566
+ "leading-7 text-muted-foreground",
567
+ value.descriptionClassName
568
+ ),
569
+ children: value.description
570
+ }
571
+ ))
572
+ ]
573
+ },
574
+ index
575
+ ));
522
576
  }, [valuesSlot, values, cardClassName, renderValueIcon]);
523
577
  return /* @__PURE__ */ jsxs(
524
578
  Section,
@@ -531,9 +585,48 @@ function FeatureThreeColumnValues({
531
585
  className,
532
586
  containerClassName,
533
587
  children: [
534
- label && (typeof label === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-sm text-muted-foreground lg:text-base", labelClassName), children: label })),
535
- title && (typeof title === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("text-3xl font-medium lg:text-4xl", titleClassName), children: title })),
536
- (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3", gridClassName), children: valuesContent })
588
+ label && (typeof label === "string" ? /* @__PURE__ */ jsx(
589
+ "p",
590
+ {
591
+ className: cn(
592
+ "mb-4 text-sm text-muted-foreground lg:text-base",
593
+ labelClassName
594
+ ),
595
+ children: label
596
+ }
597
+ ) : /* @__PURE__ */ jsx(
598
+ "div",
599
+ {
600
+ className: cn(
601
+ "mb-4 text-sm text-muted-foreground lg:text-base",
602
+ labelClassName
603
+ ),
604
+ children: label
605
+ }
606
+ )),
607
+ title && (typeof title === "string" ? /* @__PURE__ */ jsx(
608
+ "h2",
609
+ {
610
+ className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
611
+ children: title
612
+ }
613
+ ) : /* @__PURE__ */ jsx(
614
+ "div",
615
+ {
616
+ className: cn("text-3xl font-medium lg:text-4xl", titleClassName),
617
+ children: title
618
+ }
619
+ )),
620
+ (valuesSlot || values && values.length > 0) && /* @__PURE__ */ jsx(
621
+ "div",
622
+ {
623
+ className: cn(
624
+ "mt-14 grid gap-6 lg:mt-20 lg:grid-cols-3",
625
+ gridClassName
626
+ ),
627
+ children: valuesContent
628
+ }
629
+ )
537
630
  ]
538
631
  }
539
632
  );