@opensite/ui 3.7.7 → 3.7.9

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/badge.d.cts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/badge.d.ts CHANGED
@@ -4,7 +4,7 @@ import * as React from 'react';
4
4
  import { VariantProps } from 'class-variance-authority';
5
5
 
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "outline" | "default" | "secondary" | "destructive" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & class_variance_authority_types.ClassProp) | undefined) => string;
9
9
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
@@ -534,21 +534,21 @@ function BlogHorizontalCards({
534
534
  {
535
535
  src: post.image,
536
536
  alt: postTitle,
537
- className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
537
+ className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
538
538
  optixFlowConfig,
539
539
  loading: "eager"
540
540
  }
541
541
  )
542
542
  }
543
543
  ) }),
544
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
545
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
544
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
545
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
546
546
  postLabel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: postLabel }),
547
- post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author }),
548
- postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
547
+ post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: post.author }),
548
+ postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: postDate })
549
549
  ] }),
550
550
  post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
551
- postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70", children: postSummary }),
551
+ postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
552
552
  readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "outline", children: [
553
553
  readMoreText,
554
554
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -577,31 +577,46 @@ function BlogHorizontalCards({
577
577
  pattern,
578
578
  patternOpacity,
579
579
  containerClassName,
580
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
581
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
582
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
583
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
584
- "h2",
585
- {
586
- className: cn(
587
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
588
- headingClassName
589
- ),
590
- children: heading
591
- }
592
- ) : heading),
593
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
594
- "p",
595
- {
596
- className: cn(
597
- "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
598
- descriptionClassName
599
- ),
600
- children: description
601
- }
602
- ) : description)
603
- ] }),
604
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
580
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
581
+ /* @__PURE__ */ jsxRuntime.jsxs(
582
+ "div",
583
+ {
584
+ className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
585
+ children: [
586
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
587
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
588
+ "h2",
589
+ {
590
+ className: cn(
591
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
592
+ headingClassName
593
+ ),
594
+ children: heading
595
+ }
596
+ ) : heading),
597
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
598
+ "p",
599
+ {
600
+ className: cn(
601
+ "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
602
+ descriptionClassName
603
+ ),
604
+ children: description
605
+ }
606
+ ) : description)
607
+ ]
608
+ }
609
+ ),
610
+ /* @__PURE__ */ jsxRuntime.jsx(
611
+ "div",
612
+ {
613
+ className: cn(
614
+ "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
615
+ postsClassName
616
+ ),
617
+ children: postsContent
618
+ }
619
+ ),
605
620
  (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
606
621
  ] })
607
622
  }
@@ -513,21 +513,21 @@ function BlogHorizontalCards({
513
513
  {
514
514
  src: post.image,
515
515
  alt: postTitle,
516
- className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
516
+ className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
517
517
  optixFlowConfig,
518
518
  loading: "eager"
519
519
  }
520
520
  )
521
521
  }
522
522
  ) }),
523
- /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
524
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
523
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
524
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
525
525
  postLabel && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: postLabel }),
526
- post.author && /* @__PURE__ */ jsx("span", { children: post.author }),
527
- postDate && /* @__PURE__ */ jsx("span", { children: postDate })
526
+ post.author && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: post.author }),
527
+ postDate && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: postDate })
528
528
  ] }),
529
529
  post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
530
- postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70", children: postSummary }),
530
+ postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
531
531
  readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "outline", children: [
532
532
  readMoreText,
533
533
  /* @__PURE__ */ jsx(
@@ -556,31 +556,46 @@ function BlogHorizontalCards({
556
556
  pattern,
557
557
  patternOpacity,
558
558
  containerClassName,
559
- children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
560
- /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
561
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
562
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
563
- "h2",
564
- {
565
- className: cn(
566
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
567
- headingClassName
568
- ),
569
- children: heading
570
- }
571
- ) : heading),
572
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
573
- "p",
574
- {
575
- className: cn(
576
- "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
577
- descriptionClassName
578
- ),
579
- children: description
580
- }
581
- ) : description)
582
- ] }),
583
- /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
559
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
560
+ /* @__PURE__ */ jsxs(
561
+ "div",
562
+ {
563
+ className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
564
+ children: [
565
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
566
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
567
+ "h2",
568
+ {
569
+ className: cn(
570
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
571
+ headingClassName
572
+ ),
573
+ children: heading
574
+ }
575
+ ) : heading),
576
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
577
+ "p",
578
+ {
579
+ className: cn(
580
+ "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
581
+ descriptionClassName
582
+ ),
583
+ children: description
584
+ }
585
+ ) : description)
586
+ ]
587
+ }
588
+ ),
589
+ /* @__PURE__ */ jsx(
590
+ "div",
591
+ {
592
+ className: cn(
593
+ "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
594
+ postsClassName
595
+ ),
596
+ children: postsContent
597
+ }
598
+ ),
584
599
  (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
585
600
  ] })
586
601
  }
package/dist/registry.cjs CHANGED
@@ -36903,21 +36903,21 @@ function BlogHorizontalCards({
36903
36903
  {
36904
36904
  src: post.image,
36905
36905
  alt: postTitle,
36906
- className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
36906
+ className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
36907
36907
  optixFlowConfig,
36908
36908
  loading: "eager"
36909
36909
  }
36910
36910
  )
36911
36911
  }
36912
36912
  ) }),
36913
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
36914
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
36913
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-4", children: [
36914
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
36915
36915
  postLabel && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "secondary", children: postLabel }),
36916
- post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { children: post.author }),
36917
- postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { children: postDate })
36916
+ post.author && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold", children: post.author }),
36917
+ postDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-70", children: postDate })
36918
36918
  ] }),
36919
36919
  post.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsxRuntime.jsx(pressable.Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
36920
- postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70", children: postSummary }),
36920
+ postSummary && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
36921
36921
  readMoreText && /* @__PURE__ */ jsxRuntime.jsxs(pressable.Pressable, { href: postHref, variant: "outline", children: [
36922
36922
  readMoreText,
36923
36923
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -36946,31 +36946,46 @@ function BlogHorizontalCards({
36946
36946
  pattern,
36947
36947
  patternOpacity,
36948
36948
  containerClassName,
36949
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
36950
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
36951
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
36952
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
36953
- "h2",
36954
- {
36955
- className: cn(
36956
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
36957
- headingClassName
36958
- ),
36959
- children: heading
36960
- }
36961
- ) : heading),
36962
- description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
36963
- "p",
36964
- {
36965
- className: cn(
36966
- "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
36967
- descriptionClassName
36968
- ),
36969
- children: description
36970
- }
36971
- ) : description)
36972
- ] }),
36973
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
36949
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
36950
+ /* @__PURE__ */ jsxRuntime.jsxs(
36951
+ "div",
36952
+ {
36953
+ className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
36954
+ children: [
36955
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
36956
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
36957
+ "h2",
36958
+ {
36959
+ className: cn(
36960
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
36961
+ headingClassName
36962
+ ),
36963
+ children: heading
36964
+ }
36965
+ ) : heading),
36966
+ description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
36967
+ "p",
36968
+ {
36969
+ className: cn(
36970
+ "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
36971
+ descriptionClassName
36972
+ ),
36973
+ children: description
36974
+ }
36975
+ ) : description)
36976
+ ]
36977
+ }
36978
+ ),
36979
+ /* @__PURE__ */ jsxRuntime.jsx(
36980
+ "div",
36981
+ {
36982
+ className: cn(
36983
+ "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
36984
+ postsClassName
36985
+ ),
36986
+ children: postsContent
36987
+ }
36988
+ ),
36974
36989
  (ctaSlot || ctaAction) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
36975
36990
  ] })
36976
36991
  }
package/dist/registry.js CHANGED
@@ -36863,21 +36863,21 @@ function BlogHorizontalCards({
36863
36863
  {
36864
36864
  src: post.image,
36865
36865
  alt: postTitle,
36866
- className: "aspect-video w-full rounded-lg object-cover object-center sm:w-[260px]",
36866
+ className: "aspect-video md:aspect-square w-full rounded-lg object-cover object-center sm:w-[260px]",
36867
36867
  optixFlowConfig,
36868
36868
  loading: "eager"
36869
36869
  }
36870
36870
  )
36871
36871
  }
36872
36872
  ) }),
36873
- /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
36874
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 text-sm opacity-70", children: [
36873
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-4", children: [
36874
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-start items-center gap-3 md:gap-4 text-sm flex-wrap", children: [
36875
36875
  postLabel && /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: postLabel }),
36876
- post.author && /* @__PURE__ */ jsx("span", { children: post.author }),
36877
- postDate && /* @__PURE__ */ jsx("span", { children: postDate })
36876
+ post.author && /* @__PURE__ */ jsx("span", { className: "font-semibold", children: post.author }),
36877
+ postDate && /* @__PURE__ */ jsx("span", { className: "opacity-70", children: postDate })
36878
36878
  ] }),
36879
36879
  post.title && /* @__PURE__ */ jsx("h3", { className: "text-xl leading-tight font-bold lg:text-2xl", children: /* @__PURE__ */ jsx(Pressable, { href: postHref, className: "hover:underline", children: post.title }) }),
36880
- postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70", children: postSummary }),
36880
+ postSummary && /* @__PURE__ */ jsx("p", { className: "text-base opacity-70 line-clamp-3", children: postSummary }),
36881
36881
  readMoreText && /* @__PURE__ */ jsxs(Pressable, { href: postHref, variant: "outline", children: [
36882
36882
  readMoreText,
36883
36883
  /* @__PURE__ */ jsx(
@@ -36906,31 +36906,46 @@ function BlogHorizontalCards({
36906
36906
  pattern,
36907
36907
  patternOpacity,
36908
36908
  containerClassName,
36909
- children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
36910
- /* @__PURE__ */ jsxs("div", { className: cn("mx-auto max-w-3xl text-center", headerClassName), children: [
36911
- badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
36912
- heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
36913
- "h2",
36914
- {
36915
- className: cn(
36916
- "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
36917
- headingClassName
36918
- ),
36919
- children: heading
36920
- }
36921
- ) : heading),
36922
- description && (typeof description === "string" ? /* @__PURE__ */ jsx(
36923
- "p",
36924
- {
36925
- className: cn(
36926
- "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
36927
- descriptionClassName
36928
- ),
36929
- children: description
36930
- }
36931
- ) : description)
36932
- ] }),
36933
- /* @__PURE__ */ jsx("div", { className: cn("mx-auto max-w-5xl space-y-12", postsClassName), children: postsContent }),
36909
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 md:gap-12", children: [
36910
+ /* @__PURE__ */ jsxs(
36911
+ "div",
36912
+ {
36913
+ className: cn("max-w-full md:max-w-3xl text-left", headerClassName),
36914
+ children: [
36915
+ badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { className: cn("mb-6", badgeClassName), children: badge }) : badge),
36916
+ heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
36917
+ "h2",
36918
+ {
36919
+ className: cn(
36920
+ "mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-5xl lg:mb-6",
36921
+ headingClassName
36922
+ ),
36923
+ children: heading
36924
+ }
36925
+ ) : heading),
36926
+ description && (typeof description === "string" ? /* @__PURE__ */ jsx(
36927
+ "p",
36928
+ {
36929
+ className: cn(
36930
+ "mb-12 opacity-70 md:text-base lg:text-lg text-balance",
36931
+ descriptionClassName
36932
+ ),
36933
+ children: description
36934
+ }
36935
+ ) : description)
36936
+ ]
36937
+ }
36938
+ ),
36939
+ /* @__PURE__ */ jsx(
36940
+ "div",
36941
+ {
36942
+ className: cn(
36943
+ "max-w-full md:max-w-3xl space-y-16 md:space-y-24",
36944
+ postsClassName
36945
+ ),
36946
+ children: postsContent
36947
+ }
36948
+ ),
36934
36949
  (ctaSlot || ctaAction) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 text-center", ctaClassName), children: ctaContent })
36935
36950
  ] })
36936
36951
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opensite/ui",
3
- "version": "3.7.7",
3
+ "version": "3.7.9",
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",