blocks-dusted 0.1.11 → 0.1.12

package/templates/blocks/DD-IframeMedia/Component.tsx

@@ -7,20 +7,23 @@ export type MediaType = {
   alt?: string
 }
 
-export type IframeMediaBlockProps = {
-  data: {
-    fullwidthSectionClass?: string
-    sectionId?: string
-    video?: MediaType
-    image?: MediaType // used as poster
-    imageClassName?: string
-    additionalStyles?: React.CSSProperties
-  }
+type IframeMediaFields = {
+  fullwidthSectionClass?: string
+  sectionId?: string
+  video?: MediaType
+  image?: MediaType // used as poster
+  imageClassName?: string
+  additionalStyles?: React.CSSProperties
+}
+
+export type IframeMediaBlockProps = IframeMediaFields & {
+  data?: IframeMediaFields
 }
 
 // ✅ Named export
-export const DDIframeMedia: React.FC<IframeMediaBlockProps> = ({ data }) => {
+export const DDIframeMedia: React.FC<IframeMediaBlockProps> = (props) => {
   const [isLoading, setIsLoading] = React.useState(true)
+  const data = props.data ?? props
   const { video, image, sectionId, fullwidthSectionClass, additionalStyles } = data
   const sectionIdValue = sectionId || 'fullwidth-container'
 
@@ -127,3 +130,4 @@ export const DDIframeMedia: React.FC<IframeMediaBlockProps> = ({ data }) => {
     </section>
   )
 }
+

package/templates/blocks/DD-MasonaryMedia/Component.tsx

@@ -190,11 +190,11 @@ function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number
       <Link href={href} className="block h-full focus-visible:outline-none">
         <article
           data-theme="dark"
-          className="masonary-article-card outline-2 outline-stone-500/50 outline-solid group relative h-full w-full overflow-clip !rounded-[3rem] border border-border bg-[#55526b85]! backdrop-blur-xl! shadow-2xl transition-all duration-300 hover:cursor-pointer hover:border-lime-500 hover:shadow-2xl [corner-shape:squircle]"
+          className="masonary-article-card outline-2 outline-stone-500/50 outline-solid group relative h-full w-full overflow-clip rounded-[3rem]!  border border-border bg-[#55526b85]! backdrop-blur-xl! shadow-2xl transition-all duration-300 hover:cursor-pointer hover:border-lime-500 hover:shadow-2xl"
           style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
         >
           <div
-            className="card-media relative w-full overflow-hidden !rounded-[3rem] border border-border bg-linear-to-br from-violet-950 to-indigo-950 shadow-2xl! [corner-shape:squircle]"
+            className="card-media relative w-full overflow-hidden rounded-[3rem]! border border-border bg-linear-to-br from-violet-950 to-indigo-950 shadow-2xl!"
             style={{ cornerShape: 'squircle', aspectRatio } as React.CSSProperties}
           >
             {imageUrl ? (
@@ -204,7 +204,7 @@ function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number
                 loading="lazy"
                 decoding="async"
                 className={cn(
-                  'absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] transition-all duration-500 group-hover:scale-105',
+                  'absolute inset-0 h-full w-full object-cover object-top rounded-[3rem]! transition-all duration-500 group-hover:scale-105',
                   hoverUrl && 'group-hover:opacity-0',
                 )}
                 style={{ cornerShape: 'squircle' } as React.CSSProperties}
@@ -223,7 +223,7 @@ function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number
                 loop
                 playsInline
                 preload="metadata"
-                className="absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
+                className="absolute inset-0 h-full w-full object-cover object-top rounded-[3rem]! opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
                 style={{ cornerShape: 'squircle' } as React.CSSProperties}
               />
             )}
@@ -234,7 +234,7 @@ function StudioMasonaryCard({ item, index }: { item: ShowcaseItem; index: number
                 alt=""
                 loading="lazy"
                 decoding="async"
-                className="absolute inset-0 h-full w-full object-cover object-top !rounded-[3rem] opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
+                className="absolute inset-0 h-full w-full object-cover object-top !rounded-4xl opacity-0 transition-all duration-500 group-hover:scale-105 group-hover:opacity-100"
                 style={{ cornerShape: 'squircle' } as React.CSSProperties}
               />
             )}
@@ -286,7 +286,7 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
   columnsDesktop = 12,
   columnsTablet = 2,
   gapClass = 'gap-5',
-  containerClassName = 'w-full max-w-none px-4 md:px-8',
+  containerClassName = 'max-w-7xl mx-auto px-4 md:px-6',
   sectionClassName = 'py-24',
   sectionId = 'studio-masonary-media',
   customCSS,
@@ -465,7 +465,7 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
 
       <section id={safeSectionId} className={cn('studio-masonary-media', sectionClassName)}>
         <div className={cn(containerClassName)}>
-          
+          #BlockName-DDMasonaryMedia
           <motion.div
             variants={containerVariants}
             initial="hidden"
@@ -497,7 +497,7 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
             {subtext && (
               <motion.p
                 variants={itemVariants}
-                className="max-w-2xl text-base leading-relaxed text-stone-400 dark:text-stone-300 lg:max-w-xl lg:text-right"
+                className="max-w-sm text-base leading-relaxed text-stone-400 dark:text-stone-300 lg:text-right"
               >
                 {subtext}
               </motion.p>
@@ -543,5 +543,3 @@ export const DDMasonaryMedia: React.FC<DDMasonaryMediaProps> = ({
 }
 
 export default DDMasonaryMedia
-
-