@opensite/ui 3.4.4 → 3.4.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 (9) hide show
  1. package/dist/feature-checklist-image.cjs +86 -23
  2. package/dist/feature-checklist-image.d.cts +21 -1
  3. package/dist/feature-checklist-image.d.ts +21 -1
  4. package/dist/feature-checklist-image.js +86 -23
  5. package/dist/registry.cjs +86 -23
  6. package/dist/registry.js +86 -23
  7. package/dist/social-link-icon.d.cts +1 -1
  8. package/dist/social-link-icon.d.ts +1 -1
  9. package/package.json +1 -1
package/dist/feature-checklist-image.cjs CHANGED
@@ -422,6 +422,12 @@ var Section = React__namespace.default.forwardRef(
422
422
  }
423
423
  );
424
424
  Section.displayName = "Section";
425
+ function isRenderableNode(value) {
426
+ return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
427
+ }
428
+ function firstRenderableNode(...values) {
429
+ return values.find(isRenderableNode);
430
+ }
425
431
  function FeatureChecklistImage({
426
432
  sectionId = "feature-checklist-image",
427
433
  title,
@@ -434,9 +440,10 @@ function FeatureChecklistImage({
434
440
  actions,
435
441
  actionsSlot,
436
442
  checklistItems,
443
+ benefits,
437
444
  checklistSlot,
438
445
  className,
439
- containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
446
+ containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
440
447
  contentWrapperClassName,
441
448
  imageClassName,
442
449
  contentClassName,
@@ -493,33 +500,69 @@ function FeatureChecklistImage({
493
500
  if (imageSlot) return imageSlot;
494
501
  if (!imageSrc) return null;
495
502
  return /* @__PURE__ */ jsxRuntime.jsx(
496
- img.Img,
503
+ "div",
497
504
  {
498
- src: imageSrc,
499
- alt: imageAlt || "Feature illustration",
500
505
  className: cn(
501
- "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
506
+ "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
502
507
  imageClassName
503
508
  ),
504
- loading: "lazy",
505
- optixFlowConfig
509
+ children: /* @__PURE__ */ jsxRuntime.jsx(
510
+ img.Img,
511
+ {
512
+ src: imageSrc,
513
+ alt: imageAlt || "Feature illustration",
514
+ className: cn(
515
+ "block h-full w-full object-cover object-center",
516
+ imageClassName
517
+ ),
518
+ loading: "lazy",
519
+ optixFlowConfig
520
+ }
521
+ )
506
522
  }
507
523
  );
508
524
  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
509
525
  const checklistContent = React.useMemo(() => {
510
526
  if (checklistSlot) return checklistSlot;
511
- if (!checklistItems || checklistItems.length === 0) return null;
512
- return checklistItems.map((item, index) => {
527
+ const items = checklistItems ?? benefits;
528
+ if (!items || items.length === 0) return null;
529
+ const renderedItems = [];
530
+ items.forEach((item, index) => {
513
531
  const isString = typeof item === "string";
514
- const content = isString ? item : item.content;
515
- const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
532
+ const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
533
+ const title2 = isString ? void 0 : item.title;
534
+ const description2 = isString ? void 0 : item.description;
535
+ if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
536
+ return;
537
+ }
538
+ const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
539
+ DynamicIcon,
540
+ {
541
+ name: "lucide/circle-check-big",
542
+ size: 20,
543
+ className: "h-5 w-5"
544
+ }
545
+ ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(
546
+ DynamicIcon,
547
+ {
548
+ name: "lucide/circle-check-big",
549
+ size: 20,
550
+ className: "h-5 w-5"
551
+ }
552
+ ));
516
553
  const itemClassName = isString ? void 0 : item.className;
517
- return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
518
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: iconElement }),
519
- content
520
- ] }, index);
554
+ renderedItems.push(
555
+ /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
556
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
557
+ isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
558
+ isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
559
+ isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
560
+ ] })
561
+ ] }, index)
562
+ );
521
563
  });
522
- }, [checklistSlot, checklistItems]);
564
+ return renderedItems.length > 0 ? renderedItems : null;
565
+ }, [checklistSlot, checklistItems, benefits]);
523
566
  return /* @__PURE__ */ jsxRuntime.jsx(
524
567
  Section,
525
568
  {
@@ -535,7 +578,8 @@ function FeatureChecklistImage({
535
578
  "div",
536
579
  {
537
580
  className: cn(
538
- "flex flex-col gap-6 md:gap-12 md:flex-row",
581
+ "grid gap-8 md:gap-12 lg:items-center",
582
+ imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
539
583
  contentWrapperClassName
540
584
  ),
541
585
  children: [
@@ -544,7 +588,8 @@ function FeatureChecklistImage({
544
588
  "div",
545
589
  {
546
590
  className: cn(
547
- "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
591
+ "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
592
+ imageContent && "lg:pl-8",
548
593
  contentClassName
549
594
  ),
550
595
  children: [
@@ -552,7 +597,7 @@ function FeatureChecklistImage({
552
597
  "h2",
553
598
  {
554
599
  className: cn(
555
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
600
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
556
601
  titleClassName
557
602
  ),
558
603
  children: title
@@ -561,18 +606,36 @@ function FeatureChecklistImage({
561
606
  "div",
562
607
  {
563
608
  className: cn(
564
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
609
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
565
610
  titleClassName
566
611
  ),
567
612
  children: title
568
613
  }
569
614
  )),
570
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
615
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
616
+ "p",
617
+ {
618
+ className: cn(
619
+ "relative text-base leading-relaxed md:text-lg",
620
+ descriptionClassName
621
+ ),
622
+ children: description
623
+ }
624
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
625
+ "div",
626
+ {
627
+ className: cn(
628
+ "relative text-base leading-relaxed md:text-lg",
629
+ descriptionClassName
630
+ ),
631
+ children: description
632
+ }
633
+ )),
571
634
  actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
572
635
  "div",
573
636
  {
574
637
  className: cn(
575
- "flex flex-wrap items-center gap-4",
638
+ "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
576
639
  actionsClassName
577
640
  ),
578
641
  children: actionsContent
@@ -582,7 +645,7 @@ function FeatureChecklistImage({
582
645
  "ul",
583
646
  {
584
647
  className: cn(
585
- "flex-wrap items-center space-y-2 md:flex",
648
+ "flex flex-col space-y-3 md:space-y-4",
586
649
  checklistClassName
587
650
  ),
588
651
  children: checklistContent
package/dist/feature-checklist-image.d.cts CHANGED
@@ -11,6 +11,22 @@ interface FeatureChecklistItem {
11
11
  * Checklist item content
12
12
  */
13
13
  content?: React.ReactNode;
14
+ /**
15
+ * Text content alias used by some generated payloads
16
+ */
17
+ text?: React.ReactNode;
18
+ /**
19
+ * Label content alias used by some generated payloads
20
+ */
21
+ label?: React.ReactNode;
22
+ /**
23
+ * Checklist item title
24
+ */
25
+ title?: React.ReactNode;
26
+ /**
27
+ * Checklist item description
28
+ */
29
+ description?: React.ReactNode;
14
30
  /**
15
31
  * Icon element (overrides default check icon)
16
32
  */
@@ -57,6 +73,10 @@ interface FeatureChecklistImageProps {
57
73
  * Array of checklist items (can be strings or FeatureChecklistItem objects)
58
74
  */
59
75
  checklistItems?: (string | FeatureChecklistItem)[];
76
+ /**
77
+ * Alias for checklistItems used by registry examples and builder payloads
78
+ */
79
+ benefits?: (string | FeatureChecklistItem)[];
60
80
  /**
61
81
  * Custom slot for rendering checklist (overrides checklistItems array)
62
82
  */
@@ -143,6 +163,6 @@ interface FeatureChecklistImageProps {
143
163
  * />
144
164
  * ```
145
165
  */
146
- declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
166
+ declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, benefits, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
147
167
 
148
168
  export { FeatureChecklistImage, type FeatureChecklistImageProps };
package/dist/feature-checklist-image.d.ts CHANGED
@@ -11,6 +11,22 @@ interface FeatureChecklistItem {
11
11
  * Checklist item content
12
12
  */
13
13
  content?: React.ReactNode;
14
+ /**
15
+ * Text content alias used by some generated payloads
16
+ */
17
+ text?: React.ReactNode;
18
+ /**
19
+ * Label content alias used by some generated payloads
20
+ */
21
+ label?: React.ReactNode;
22
+ /**
23
+ * Checklist item title
24
+ */
25
+ title?: React.ReactNode;
26
+ /**
27
+ * Checklist item description
28
+ */
29
+ description?: React.ReactNode;
14
30
  /**
15
31
  * Icon element (overrides default check icon)
16
32
  */
@@ -57,6 +73,10 @@ interface FeatureChecklistImageProps {
57
73
  * Array of checklist items (can be strings or FeatureChecklistItem objects)
58
74
  */
59
75
  checklistItems?: (string | FeatureChecklistItem)[];
76
+ /**
77
+ * Alias for checklistItems used by registry examples and builder payloads
78
+ */
79
+ benefits?: (string | FeatureChecklistItem)[];
60
80
  /**
61
81
  * Custom slot for rendering checklist (overrides checklistItems array)
62
82
  */
@@ -143,6 +163,6 @@ interface FeatureChecklistImageProps {
143
163
  * />
144
164
  * ```
145
165
  */
146
- declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
166
+ declare function FeatureChecklistImage({ sectionId, title, description, titleClassName, descriptionClassName, imageSrc, imageAlt, imageSlot, actions, actionsSlot, checklistItems, benefits, checklistSlot, className, containerClassName, contentWrapperClassName, imageClassName, contentClassName, actionsClassName, checklistClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureChecklistImageProps): React.JSX.Element;
147
167
 
148
168
  export { FeatureChecklistImage, type FeatureChecklistImageProps };
package/dist/feature-checklist-image.js CHANGED
@@ -401,6 +401,12 @@ var Section = React__default.forwardRef(
401
401
  }
402
402
  );
403
403
  Section.displayName = "Section";
404
+ function isRenderableNode(value) {
405
+ return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
406
+ }
407
+ function firstRenderableNode(...values) {
408
+ return values.find(isRenderableNode);
409
+ }
404
410
  function FeatureChecklistImage({
405
411
  sectionId = "feature-checklist-image",
406
412
  title,
@@ -413,9 +419,10 @@ function FeatureChecklistImage({
413
419
  actions,
414
420
  actionsSlot,
415
421
  checklistItems,
422
+ benefits,
416
423
  checklistSlot,
417
424
  className,
418
- containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
425
+ containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
419
426
  contentWrapperClassName,
420
427
  imageClassName,
421
428
  contentClassName,
@@ -472,33 +479,69 @@ function FeatureChecklistImage({
472
479
  if (imageSlot) return imageSlot;
473
480
  if (!imageSrc) return null;
474
481
  return /* @__PURE__ */ jsx(
475
- Img,
482
+ "div",
476
483
  {
477
- src: imageSrc,
478
- alt: imageAlt || "Feature illustration",
479
484
  className: cn(
480
- "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
485
+ "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
481
486
  imageClassName
482
487
  ),
483
- loading: "lazy",
484
- optixFlowConfig
488
+ children: /* @__PURE__ */ jsx(
489
+ Img,
490
+ {
491
+ src: imageSrc,
492
+ alt: imageAlt || "Feature illustration",
493
+ className: cn(
494
+ "block h-full w-full object-cover object-center",
495
+ imageClassName
496
+ ),
497
+ loading: "lazy",
498
+ optixFlowConfig
499
+ }
500
+ )
485
501
  }
486
502
  );
487
503
  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
488
504
  const checklistContent = useMemo(() => {
489
505
  if (checklistSlot) return checklistSlot;
490
- if (!checklistItems || checklistItems.length === 0) return null;
491
- return checklistItems.map((item, index) => {
506
+ const items = checklistItems ?? benefits;
507
+ if (!items || items.length === 0) return null;
508
+ const renderedItems = [];
509
+ items.forEach((item, index) => {
492
510
  const isString = typeof item === "string";
493
- const content = isString ? item : item.content;
494
- const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
511
+ const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
512
+ const title2 = isString ? void 0 : item.title;
513
+ const description2 = isString ? void 0 : item.description;
514
+ if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
515
+ return;
516
+ }
517
+ const iconElement = isString ? /* @__PURE__ */ jsx(
518
+ DynamicIcon,
519
+ {
520
+ name: "lucide/circle-check-big",
521
+ size: 20,
522
+ className: "h-5 w-5"
523
+ }
524
+ ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsx(
525
+ DynamicIcon,
526
+ {
527
+ name: "lucide/circle-check-big",
528
+ size: 20,
529
+ className: "h-5 w-5"
530
+ }
531
+ ));
495
532
  const itemClassName = isString ? void 0 : item.className;
496
- return /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
497
- /* @__PURE__ */ jsx("div", { className: "mt-1", children: iconElement }),
498
- content
499
- ] }, index);
533
+ renderedItems.push(
534
+ /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
535
+ /* @__PURE__ */ jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
536
+ isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
537
+ isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
538
+ isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
539
+ ] })
540
+ ] }, index)
541
+ );
500
542
  });
501
- }, [checklistSlot, checklistItems]);
543
+ return renderedItems.length > 0 ? renderedItems : null;
544
+ }, [checklistSlot, checklistItems, benefits]);
502
545
  return /* @__PURE__ */ jsx(
503
546
  Section,
504
547
  {
@@ -514,7 +557,8 @@ function FeatureChecklistImage({
514
557
  "div",
515
558
  {
516
559
  className: cn(
517
- "flex flex-col gap-6 md:gap-12 md:flex-row",
560
+ "grid gap-8 md:gap-12 lg:items-center",
561
+ imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
518
562
  contentWrapperClassName
519
563
  ),
520
564
  children: [
@@ -523,7 +567,8 @@ function FeatureChecklistImage({
523
567
  "div",
524
568
  {
525
569
  className: cn(
526
- "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
570
+ "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
571
+ imageContent && "lg:pl-8",
527
572
  contentClassName
528
573
  ),
529
574
  children: [
@@ -531,7 +576,7 @@ function FeatureChecklistImage({
531
576
  "h2",
532
577
  {
533
578
  className: cn(
534
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
579
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
535
580
  titleClassName
536
581
  ),
537
582
  children: title
@@ -540,18 +585,36 @@ function FeatureChecklistImage({
540
585
  "div",
541
586
  {
542
587
  className: cn(
543
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
588
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
544
589
  titleClassName
545
590
  ),
546
591
  children: title
547
592
  }
548
593
  )),
549
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("relative", descriptionClassName), children: description })),
594
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
595
+ "p",
596
+ {
597
+ className: cn(
598
+ "relative text-base leading-relaxed md:text-lg",
599
+ descriptionClassName
600
+ ),
601
+ children: description
602
+ }
603
+ ) : /* @__PURE__ */ jsx(
604
+ "div",
605
+ {
606
+ className: cn(
607
+ "relative text-base leading-relaxed md:text-lg",
608
+ descriptionClassName
609
+ ),
610
+ children: description
611
+ }
612
+ )),
550
613
  actionsContent && /* @__PURE__ */ jsx(
551
614
  "div",
552
615
  {
553
616
  className: cn(
554
- "flex flex-wrap items-center gap-4",
617
+ "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
555
618
  actionsClassName
556
619
  ),
557
620
  children: actionsContent
@@ -561,7 +624,7 @@ function FeatureChecklistImage({
561
624
  "ul",
562
625
  {
563
626
  className: cn(
564
- "flex-wrap items-center space-y-2 md:flex",
627
+ "flex flex-col space-y-3 md:space-y-4",
565
628
  checklistClassName
566
629
  ),
567
630
  children: checklistContent
package/dist/registry.cjs CHANGED
@@ -22833,6 +22833,12 @@ function FeatureIconGridBordered({
22833
22833
  }
22834
22834
  );
22835
22835
  }
22836
+ function isRenderableNode(value) {
22837
+ return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
22838
+ }
22839
+ function firstRenderableNode(...values) {
22840
+ return values.find(isRenderableNode);
22841
+ }
22836
22842
  function FeatureChecklistImage({
22837
22843
  sectionId = "feature-checklist-image",
22838
22844
  title,
@@ -22845,9 +22851,10 @@ function FeatureChecklistImage({
22845
22851
  actions,
22846
22852
  actionsSlot,
22847
22853
  checklistItems,
22854
+ benefits,
22848
22855
  checklistSlot,
22849
22856
  className,
22850
- containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
22857
+ containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
22851
22858
  contentWrapperClassName,
22852
22859
  imageClassName,
22853
22860
  contentClassName,
@@ -22904,33 +22911,69 @@ function FeatureChecklistImage({
22904
22911
  if (imageSlot) return imageSlot;
22905
22912
  if (!imageSrc) return null;
22906
22913
  return /* @__PURE__ */ jsxRuntime.jsx(
22907
- img.Img,
22914
+ "div",
22908
22915
  {
22909
- src: imageSrc,
22910
- alt: imageAlt || "Feature illustration",
22911
22916
  className: cn(
22912
- "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
22917
+ "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
22913
22918
  imageClassName
22914
22919
  ),
22915
- loading: "lazy",
22916
- optixFlowConfig
22920
+ children: /* @__PURE__ */ jsxRuntime.jsx(
22921
+ img.Img,
22922
+ {
22923
+ src: imageSrc,
22924
+ alt: imageAlt || "Feature illustration",
22925
+ className: cn(
22926
+ "block h-full w-full object-cover object-center",
22927
+ imageClassName
22928
+ ),
22929
+ loading: "lazy",
22930
+ optixFlowConfig
22931
+ }
22932
+ )
22917
22933
  }
22918
22934
  );
22919
22935
  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
22920
22936
  const checklistContent = React30.useMemo(() => {
22921
22937
  if (checklistSlot) return checklistSlot;
22922
- if (!checklistItems || checklistItems.length === 0) return null;
22923
- return checklistItems.map((item, index) => {
22938
+ const items = checklistItems ?? benefits;
22939
+ if (!items || items.length === 0) return null;
22940
+ const renderedItems = [];
22941
+ items.forEach((item, index) => {
22924
22942
  const isString = typeof item === "string";
22925
- const content = isString ? item : item.content;
22926
- const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
22943
+ const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
22944
+ const title2 = isString ? void 0 : item.title;
22945
+ const description2 = isString ? void 0 : item.description;
22946
+ if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
22947
+ return;
22948
+ }
22949
+ const iconElement = isString ? /* @__PURE__ */ jsxRuntime.jsx(
22950
+ DynamicIcon,
22951
+ {
22952
+ name: "lucide/circle-check-big",
22953
+ size: 20,
22954
+ className: "h-5 w-5"
22955
+ }
22956
+ ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(
22957
+ DynamicIcon,
22958
+ {
22959
+ name: "lucide/circle-check-big",
22960
+ size: 20,
22961
+ className: "h-5 w-5"
22962
+ }
22963
+ ));
22927
22964
  const itemClassName = isString ? void 0 : item.className;
22928
- return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
22929
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: iconElement }),
22930
- content
22931
- ] }, index);
22965
+ renderedItems.push(
22966
+ /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
22967
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
22968
+ isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
22969
+ isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
22970
+ isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
22971
+ ] })
22972
+ ] }, index)
22973
+ );
22932
22974
  });
22933
- }, [checklistSlot, checklistItems]);
22975
+ return renderedItems.length > 0 ? renderedItems : null;
22976
+ }, [checklistSlot, checklistItems, benefits]);
22934
22977
  return /* @__PURE__ */ jsxRuntime.jsx(
22935
22978
  Section,
22936
22979
  {
@@ -22946,7 +22989,8 @@ function FeatureChecklistImage({
22946
22989
  "div",
22947
22990
  {
22948
22991
  className: cn(
22949
- "flex flex-col gap-6 md:gap-12 md:flex-row",
22992
+ "grid gap-8 md:gap-12 lg:items-center",
22993
+ imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
22950
22994
  contentWrapperClassName
22951
22995
  ),
22952
22996
  children: [
@@ -22955,7 +22999,8 @@ function FeatureChecklistImage({
22955
22999
  "div",
22956
23000
  {
22957
23001
  className: cn(
22958
- "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
23002
+ "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
23003
+ imageContent && "lg:pl-8",
22959
23004
  contentClassName
22960
23005
  ),
22961
23006
  children: [
@@ -22963,7 +23008,7 @@ function FeatureChecklistImage({
22963
23008
  "h2",
22964
23009
  {
22965
23010
  className: cn(
22966
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
23011
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
22967
23012
  titleClassName
22968
23013
  ),
22969
23014
  children: title
@@ -22972,18 +23017,36 @@ function FeatureChecklistImage({
22972
23017
  "div",
22973
23018
  {
22974
23019
  className: cn(
22975
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
23020
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
22976
23021
  titleClassName
22977
23022
  ),
22978
23023
  children: title
22979
23024
  }
22980
23025
  )),
22981
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", descriptionClassName), children: description })),
23026
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
23027
+ "p",
23028
+ {
23029
+ className: cn(
23030
+ "relative text-base leading-relaxed md:text-lg",
23031
+ descriptionClassName
23032
+ ),
23033
+ children: description
23034
+ }
23035
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
23036
+ "div",
23037
+ {
23038
+ className: cn(
23039
+ "relative text-base leading-relaxed md:text-lg",
23040
+ descriptionClassName
23041
+ ),
23042
+ children: description
23043
+ }
23044
+ )),
22982
23045
  actionsContent && /* @__PURE__ */ jsxRuntime.jsx(
22983
23046
  "div",
22984
23047
  {
22985
23048
  className: cn(
22986
- "flex flex-wrap items-center gap-4",
23049
+ "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
22987
23050
  actionsClassName
22988
23051
  ),
22989
23052
  children: actionsContent
@@ -22993,7 +23056,7 @@ function FeatureChecklistImage({
22993
23056
  "ul",
22994
23057
  {
22995
23058
  className: cn(
22996
- "flex-wrap items-center space-y-2 md:flex",
23059
+ "flex flex-col space-y-3 md:space-y-4",
22997
23060
  checklistClassName
22998
23061
  ),
22999
23062
  children: checklistContent
package/dist/registry.js CHANGED
@@ -22793,6 +22793,12 @@ function FeatureIconGridBordered({
22793
22793
  }
22794
22794
  );
22795
22795
  }
22796
+ function isRenderableNode(value) {
22797
+ return value !== null && value !== void 0 && typeof value !== "boolean" && !(typeof value === "string" && value.trim().length === 0);
22798
+ }
22799
+ function firstRenderableNode(...values) {
22800
+ return values.find(isRenderableNode);
22801
+ }
22796
22802
  function FeatureChecklistImage({
22797
22803
  sectionId = "feature-checklist-image",
22798
22804
  title,
@@ -22805,9 +22811,10 @@ function FeatureChecklistImage({
22805
22811
  actions,
22806
22812
  actionsSlot,
22807
22813
  checklistItems,
22814
+ benefits,
22808
22815
  checklistSlot,
22809
22816
  className,
22810
- containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
22817
+ containerClassName = "max-w-screen-2xl px-6 sm:px-6 md:px-6 lg:px-8",
22811
22818
  contentWrapperClassName,
22812
22819
  imageClassName,
22813
22820
  contentClassName,
@@ -22864,33 +22871,69 @@ function FeatureChecklistImage({
22864
22871
  if (imageSlot) return imageSlot;
22865
22872
  if (!imageSrc) return null;
22866
22873
  return /* @__PURE__ */ jsx(
22867
- Img,
22874
+ "div",
22868
22875
  {
22869
- src: imageSrc,
22870
- alt: imageAlt || "Feature illustration",
22871
22876
  className: cn(
22872
- "max-h-96 w-full rounded-lg object-cover md:max-h-[500px] md:w-1/2 shadow-xl",
22877
+ "relative aspect-[3/2] w-full overflow-hidden rounded-lg shadow-xl",
22873
22878
  imageClassName
22874
22879
  ),
22875
- loading: "lazy",
22876
- optixFlowConfig
22880
+ children: /* @__PURE__ */ jsx(
22881
+ Img,
22882
+ {
22883
+ src: imageSrc,
22884
+ alt: imageAlt || "Feature illustration",
22885
+ className: cn(
22886
+ "block h-full w-full object-cover object-center",
22887
+ imageClassName
22888
+ ),
22889
+ loading: "lazy",
22890
+ optixFlowConfig
22891
+ }
22892
+ )
22877
22893
  }
22878
22894
  );
22879
22895
  }, [imageSlot, imageSrc, imageAlt, imageClassName, optixFlowConfig]);
22880
22896
  const checklistContent = useMemo(() => {
22881
22897
  if (checklistSlot) return checklistSlot;
22882
- if (!checklistItems || checklistItems.length === 0) return null;
22883
- return checklistItems.map((item, index) => {
22898
+ const items = checklistItems ?? benefits;
22899
+ if (!items || items.length === 0) return null;
22900
+ const renderedItems = [];
22901
+ items.forEach((item, index) => {
22884
22902
  const isString = typeof item === "string";
22885
- const content = isString ? item : item.content;
22886
- const iconElement = isString ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/circle-check-big", size: 16 }));
22903
+ const content = isString ? item : firstRenderableNode(item.content, item.text, item.label);
22904
+ const title2 = isString ? void 0 : item.title;
22905
+ const description2 = isString ? void 0 : item.description;
22906
+ if (!isRenderableNode(content) && !isRenderableNode(title2) && !isRenderableNode(description2)) {
22907
+ return;
22908
+ }
22909
+ const iconElement = isString ? /* @__PURE__ */ jsx(
22910
+ DynamicIcon,
22911
+ {
22912
+ name: "lucide/circle-check-big",
22913
+ size: 20,
22914
+ className: "h-5 w-5"
22915
+ }
22916
+ ) : item.icon ?? (item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20, className: "h-5 w-5" }) : /* @__PURE__ */ jsx(
22917
+ DynamicIcon,
22918
+ {
22919
+ name: "lucide/circle-check-big",
22920
+ size: 20,
22921
+ className: "h-5 w-5"
22922
+ }
22923
+ ));
22887
22924
  const itemClassName = isString ? void 0 : item.className;
22888
- return /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
22889
- /* @__PURE__ */ jsx("div", { className: "mt-1", children: iconElement }),
22890
- content
22891
- ] }, index);
22925
+ renderedItems.push(
22926
+ /* @__PURE__ */ jsxs("li", { className: cn("flex items-start gap-3", itemClassName), children: [
22927
+ /* @__PURE__ */ jsx("div", { className: "mt-1 flex h-5 w-5 shrink-0 items-center justify-center", children: iconElement }),
22928
+ isRenderableNode(content) ? typeof content === "string" ? /* @__PURE__ */ jsx("span", { className: "text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsx("div", { className: "min-w-0 text-base font-medium leading-relaxed md:text-lg", children: content }) : /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
22929
+ isRenderableNode(title2) && (typeof title2 === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 }) : /* @__PURE__ */ jsx("div", { className: "text-base font-semibold leading-snug md:text-lg", children: title2 })),
22930
+ isRenderableNode(description2) && (typeof description2 === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }) : /* @__PURE__ */ jsx("div", { className: "mt-1 text-sm leading-relaxed text-current/75 md:text-base", children: description2 }))
22931
+ ] })
22932
+ ] }, index)
22933
+ );
22892
22934
  });
22893
- }, [checklistSlot, checklistItems]);
22935
+ return renderedItems.length > 0 ? renderedItems : null;
22936
+ }, [checklistSlot, checklistItems, benefits]);
22894
22937
  return /* @__PURE__ */ jsx(
22895
22938
  Section,
22896
22939
  {
@@ -22906,7 +22949,8 @@ function FeatureChecklistImage({
22906
22949
  "div",
22907
22950
  {
22908
22951
  className: cn(
22909
- "flex flex-col gap-6 md:gap-12 md:flex-row",
22952
+ "grid gap-8 md:gap-12 lg:items-center",
22953
+ imageContent ? "lg:grid-cols-2" : "lg:grid-cols-1",
22910
22954
  contentWrapperClassName
22911
22955
  ),
22912
22956
  children: [
@@ -22915,7 +22959,8 @@ function FeatureChecklistImage({
22915
22959
  "div",
22916
22960
  {
22917
22961
  className: cn(
22918
- "px-0 md:px-6 lg:px-10 py-4 md:py-0 flex flex-col gap-6 md:gap-10",
22962
+ "flex min-w-0 flex-col gap-6 py-2 md:gap-8 md:py-0 lg:gap-10",
22963
+ imageContent && "lg:pl-8",
22919
22964
  contentClassName
22920
22965
  ),
22921
22966
  children: [
@@ -22923,7 +22968,7 @@ function FeatureChecklistImage({
22923
22968
  "h2",
22924
22969
  {
22925
22970
  className: cn(
22926
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
22971
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
22927
22972
  titleClassName
22928
22973
  ),
22929
22974
  children: title
@@ -22932,18 +22977,36 @@ function FeatureChecklistImage({
22932
22977
  "div",
22933
22978
  {
22934
22979
  className: cn(
22935
- "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
22980
+ "text-2xl font-semibold text-balance sm:text-3xl lg:text-4xl",
22936
22981
  titleClassName
22937
22982
  ),
22938
22983
  children: title
22939
22984
  }
22940
22985
  )),
22941
- description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("relative", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("relative", descriptionClassName), children: description })),
22986
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
22987
+ "p",
22988
+ {
22989
+ className: cn(
22990
+ "relative text-base leading-relaxed md:text-lg",
22991
+ descriptionClassName
22992
+ ),
22993
+ children: description
22994
+ }
22995
+ ) : /* @__PURE__ */ jsx(
22996
+ "div",
22997
+ {
22998
+ className: cn(
22999
+ "relative text-base leading-relaxed md:text-lg",
23000
+ descriptionClassName
23001
+ ),
23002
+ children: description
23003
+ }
23004
+ )),
22942
23005
  actionsContent && /* @__PURE__ */ jsx(
22943
23006
  "div",
22944
23007
  {
22945
23008
  className: cn(
22946
- "flex flex-wrap items-center gap-4",
23009
+ "flex flex-col items-start gap-4 sm:flex-row sm:flex-wrap sm:items-center",
22947
23010
  actionsClassName
22948
23011
  ),
22949
23012
  children: actionsContent
@@ -22953,7 +23016,7 @@ function FeatureChecklistImage({
22953
23016
  "ul",
22954
23017
  {
22955
23018
  className: cn(
22956
- "flex-wrap items-center space-y-2 md:flex",
23019
+ "flex flex-col space-y-3 md:space-y-4",
22957
23020
  checklistClassName
22958
23021
  ),
22959
23022
  children: checklistContent
package/dist/social-link-icon.d.cts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/dist/social-link-icon.d.ts CHANGED
@@ -77,6 +77,6 @@ interface SocialLinkIconProps extends Omit<PressableProps, "children">, SocialLi
77
77
  * />
78
78
  * ```
79
79
  */
80
- declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement>>;
80
+ declare const SocialLinkIcon: React.ForwardRefExoticComponent<SocialLinkIconProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>>;
81
81
 
82
82
  export { SocialLinkIcon, type SocialLinkIconDynamicIconProps, type SocialLinkIconProps };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "3.4.4",
3
+ "version": "3.4.5",
4
4
  "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
5
5
  "keywords": [
6
6
  "react",