@opensite/ui 1.2.0 → 1.2.2

package/dist/testimonial-carousel-cards.cjs

@@ -4,10 +4,9 @@
 var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var reactSlot = require('@radix-ui/react-slot');
-var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var classVarianceAuthority = require('class-variance-authority');
 var useEmblaCarousel = require('embla-carousel-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -63,38 +62,6 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
-var badgeVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "span";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1191,16 +1158,7 @@ function TestimonialCarouselCards({
                 children: heading
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-md", descriptionClassName), children: description })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
@@ -1259,18 +1217,18 @@ function TestimonialCarouselCards({
       CarouselItem,
       {
         className: cn(
-          "min-w-[800px] flex-1",
+          "min-w-full flex-1 lg:min-w-[800px]",
           itemClassName,
           testimonial.className
         ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[460px] w-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 lg:flex-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[200px] w-full lg:h-[460px] lg:w-[400px]", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: testimonial.image,
               alt: typeof testimonial.username === "string" ? testimonial.username : testimonial.imageAlt || "Testimonial image",
               className: cn(
-                "aspect-square h-full w-full rounded-2xl object-cover",
+                "h-full w-full rounded-2xl object-cover",
                 imageClassName
               ),
               loading: "lazy",
@@ -1281,23 +1239,11 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8",
-                testimonial.bgColor,
+                "relative flex w-full flex-col items-start justify-end rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
                 quotePanelClassName
               ),
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Badge,
-                  {
-                    className: cn(
-                      "mb-auto bg-background px-4 py-2",
-                      badgeClassName
-                    ),
-                    children: testimonial.username
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "-rotate-[4deg] text-7xl leading-none", children: '"' }),
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-semibold", children: testimonial.quote }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
               ]
             }
@@ -1324,7 +1270,8 @@ function TestimonialCarouselCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-6 px-4 lg:flex-row lg:px-10", children: [
+      containerClassName: "px-4 md:px-2 lg:px-2",
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start justify-between gap-6 md:gap-4 lg:flex-row", children: [
         sidebarContent,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(

package/dist/testimonial-carousel-cards.js

@@ -3,10 +3,9 @@ import * as React4 from 'react';
 import React4__default, { useState, useEffect, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import { cva } from 'class-variance-authority';
 import useEmblaCarousel from 'embla-carousel-react';
 
 // components/blocks/gallery/testimonial-carousel-cards.tsx
@@ -39,38 +38,6 @@ function getNestedCardBg(parentBg, variant = "muted", options) {
     }
   }
 }
-var badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "badge",
-      className: cn(badgeVariants({ variant }), className),
-      ...props
-    }
-  );
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -1167,16 +1134,7 @@ function TestimonialCarouselCards({
                 children: heading
               }
             ),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn(
-                  "text-lg text-muted-foreground",
-                  descriptionClassName
-                ),
-                children: description
-              }
-            )
+            /* @__PURE__ */ jsx("p", { className: cn("text-md", descriptionClassName), children: description })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -1235,18 +1193,18 @@ function TestimonialCarouselCards({
       CarouselItem,
       {
         className: cn(
-          "min-w-[800px] flex-1",
+          "min-w-full flex-1 lg:min-w-[800px]",
           itemClassName,
           testimonial.className
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-[460px] w-[400px]", children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 lg:flex-row", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-[200px] w-full lg:h-[460px] lg:w-[400px]", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: testimonial.image,
               alt: typeof testimonial.username === "string" ? testimonial.username : testimonial.imageAlt || "Testimonial image",
               className: cn(
-                "aspect-square h-full w-full rounded-2xl object-cover",
+                "h-full w-full rounded-2xl object-cover",
                 imageClassName
               ),
               loading: "lazy",
@@ -1257,23 +1215,11 @@ function TestimonialCarouselCards({
             "div",
             {
               className: cn(
-                "relative flex h-[460px] w-[400px] flex-col items-start justify-end rounded-2xl p-8",
-                testimonial.bgColor,
+                "relative flex w-full flex-col items-start justify-end rounded-2xl bg-background p-6 text-foreground lg:h-[460px] lg:w-[400px] lg:p-8",
                 quotePanelClassName
               ),
               children: [
-                /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    className: cn(
-                      "mb-auto bg-background px-4 py-2",
-                      badgeClassName
-                    ),
-                    children: testimonial.username
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "-rotate-[4deg] text-7xl leading-none", children: '"' }),
-                /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold", children: testimonial.quote }),
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: testimonial.quote }),
                 /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg font-medium", children: testimonial.author })
               ]
             }
@@ -1300,7 +1246,8 @@ function TestimonialCarouselCards({
       patternOpacity,
       patternClassName,
       className,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 px-4 lg:flex-row lg:px-10", children: [
+      containerClassName: "px-4 md:px-2 lg:px-2",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start justify-between gap-6 md:gap-4 lg:flex-row", children: [
         sidebarContent,
         /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden pb-12 lg:flex-1", children: [
           /* @__PURE__ */ jsx(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",