blocks-dusted 0.1.11 → 0.1.12

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

@@ -1,139 +1,140 @@
-'use client'
-import React, { useRef, useState } from 'react'
-import * as LucideIcons from 'lucide-react'
-import { cn } from '@/utilities/ui'
-export type DDCardTemplate01Props = Record<string, any>
-
-// ─── SpotlightCard ────────────────────────────────────────────────────────────
-interface SpotlightCardProps {
-  children: React.ReactNode
-  className?: string
-  spotlightColor?: string
-  enableTilt?: boolean
-  style?: React.CSSProperties
-}
-
-function SpotlightCard({
-  children,
-  className,
-  spotlightColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  style
-}: SpotlightCardProps) {
-  const cardRef = useRef<HTMLDivElement>(null)
-  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
-  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
-
-  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!cardRef.current) return
-    const rect = cardRef.current.getBoundingClientRect()
-    const x = e.clientX - rect.left
-    const y = e.clientY - rect.top
-    setPos({ x, y })
-    if (enableTilt) {
-      const rx = (y / rect.height - 0.5) * -10
-      const ry = (x / rect.width - 0.5) * 10
-      setTilt({ rx, ry })
-    }
-  }
-
-  const handleMouseLeave = () => {
-    setPos(null)
-    setTilt({ rx: 0, ry: 0 })
-  }
-
-  return (
-    <div
-      ref={cardRef}
-      className={cn('relative overflow-hidden', className)}
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      style={
-        enableTilt
-          ? {
-              ...style,
-              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
-              transition: 'transform 0.1s ease'
-            }
-          : style
-      }
-    >
-      {pos && (
-        <div
-          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
-          style={{
-            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`
-          }}
-        />
-      )}
-      <div className="relative z-10">{children}</div>
-    </div>
-  )
-}
-
-// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
-function DynamicIcon({
-  name,
-  ...props
-}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
-  if (!name) return null
-  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
-  if (!Icon) return null
-  return <Icon {...props} />
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
-export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
-  eyebrow,
-  headline,
-  description,
-  iconName = 'ShieldCheck',
-  glowColor = 'rgba(214,211,209,0.08)',
-  enableTilt = true,
-  minHeight = '220px',
-  className,
-  sectionId,
-  customCSS
-}) => {
-  return (
-    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-      <SpotlightCard
-        spotlightColor={glowColor ?? undefined}
-        enableTilt={enableTilt ?? true}
-        className={cn(
-          'border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto',
-          className
-        )}
-        style={{ minHeight: minHeight ?? '220px' }}
-      >
-        <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
-          <DynamicIcon
-            className="text-stone-600 dark:text-stone-300"
-            name={iconName ?? 'ShieldCheck'}
-            size={20}
-          />
-        </div>
-        <div>
-          {eyebrow && (
-            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
-              {eyebrow}
-            </p>
-          )}
-          {headline && (
-            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
-              {headline}
-            </h3>
-          )}
-          {description && (
-            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
-              {description}
-            </p>
-          )}
-        </div>
-      </SpotlightCard>
-    </div>
-  )
-}
-
-export default DDCardTemplate01
+'use client'
+import React, { useRef, useState } from 'react'
+import * as LucideIcons from 'lucide-react'
+import { cn } from '@/utilities/ui'
+export type DDCardTemplate01Props = Record<string, any>
+
+// ─── SpotlightCard ────────────────────────────────────────────────────────────
+interface SpotlightCardProps {
+  children: React.ReactNode
+  className?: string
+  spotlightColor?: string
+  enableTilt?: boolean
+  style?: React.CSSProperties
+}
+
+function SpotlightCard({
+  children,
+  className,
+  spotlightColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  style,
+}: SpotlightCardProps) {
+  const cardRef = useRef<HTMLDivElement>(null)
+  const [pos, setPos] = useState<{ x: number; y: number } | null>(null)
+  const [tilt, setTilt] = useState({ rx: 0, ry: 0 })
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (!cardRef.current) return
+    const rect = cardRef.current.getBoundingClientRect()
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    setPos({ x, y })
+    if (enableTilt) {
+      const rx = (y / rect.height - 0.5) * -10
+      const ry = (x / rect.width - 0.5) * 10
+      setTilt({ rx, ry })
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setPos(null)
+    setTilt({ rx: 0, ry: 0 })
+  }
+
+  return (
+    <div
+      ref={cardRef}
+      className={cn('relative overflow-hidden', className)}
+      onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
+      style={
+        enableTilt
+          ? {
+              ...style,
+              transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
+              transition: 'transform 0.1s ease',
+            }
+          : style
+      }
+    >
+      {pos && (
+        <div
+          className="pointer-events-none absolute inset-0 z-0 transition-opacity duration-300"
+          style={{
+            background: `radial-gradient(400px circle at ${pos.x}px ${pos.y}px, ${spotlightColor}, transparent 60%)`,
+          }}
+        />
+      )}
+      <div className="relative z-10">{children}</div>
+    </div>
+  )
+}
+
+// ─── Dynamic Icon ─────────────────────────────────────────────────────────────
+function DynamicIcon({
+  name,
+  ...props
+}: { name?: string | null } & Omit<LucideIcons.LucideProps, 'name'>) {
+  if (!name) return null
+  const Icon = (LucideIcons as unknown as Record<string, React.FC<LucideIcons.LucideProps>>)[name]
+  if (!Icon) return null
+  return <Icon {...props} />
+}
+
+// ─── Component ────────────────────────────────────────────────────────────────
+export const DDCardTemplate01: React.FC<DDCardTemplate01Props> = ({
+  eyebrow,
+  headline,
+  description,
+  iconName = 'ShieldCheck',
+  glowColor = 'rgba(214,211,209,0.08)',
+  enableTilt = true,
+  minHeight = '220px',
+  className,
+  sectionId,
+  customCSS,
+}) => {
+  return (
+    <div id={sectionId ?? undefined} className="spotlight-card overflow-clip py-8">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+      <SpotlightCard
+        spotlightColor={glowColor ?? undefined}
+        enableTilt={enableTilt ?? true}
+        className={cn(
+          'border border-stone-50 dark:border-stone-950 bg-stone-100 dark:bg-stone-900 hover:shadow-2xl transition-all hover:transition-all duration-900 hover:duration-900 flex flex-col justify-between p-6 max-w-[100rem] mx-auto',
+          className,
+        )}
+        style={{ minHeight: minHeight ?? '220px' }}
+      >
+        #BlockName-DDCardTemplate01
+        <div className="w-11 h-11 flex items-center justify-center rounded-xl border border-stone-300 text-stone-300 mb-6">
+          <DynamicIcon
+            className="text-stone-600 dark:text-stone-300"
+            name={iconName ?? 'ShieldCheck'}
+            size={20}
+          />
+        </div>
+        <div>
+          {eyebrow && (
+            <p className="text-xs font-semibold text-stone-600 dark:text-stone-400 tracking-widest uppercase mb-2">
+              {eyebrow}
+            </p>
+          )}
+          {headline && (
+            <h3 className="text-2xl font-semibold text-stone-900 dark:text-stone-50 mb-3">
+              {headline}
+            </h3>
+          )}
+          {description && (
+            <p className="text-sm text-stone-600 dark:text-stone-400 leading-relaxed max-w-md">
+              {description}
+            </p>
+          )}
+        </div>
+      </SpotlightCard>
+    </div>
+  )
+}
+
+export default DDCardTemplate01

package/templates/blocks/DD-Carousel-A/Component.tsx

@@ -89,7 +89,7 @@ export const DDCarouselA: React.FC<DDCarouselAProps> = ({
     <section id={sectionId ?? undefined} className="py-20 overflow-hidden">
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
       <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-        {/* Header */}
+        {/* Header */}#BlockName-DDCarouselA
         <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4 px-0 md:px-4">
           <div>
             {eyebrow && (

package/templates/blocks/DD-Carousel-B/Component.tsx

@@ -319,7 +319,7 @@ export const DDCarouselB: React.FC<DDCarouselBProps> = ({
     <section id={sectionId ?? undefined} className="py-20 overflow-hidden">
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
       <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-        {/* Header */}
+        {/* Header */}#BlockName-DDCarouselB
         <div className="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4 px-0 md:px-4">
           <div>
             {eyebrow && (

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

@@ -47,21 +47,21 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
   customClassName,
   animate = false,
   maxWidth,
-  padding = 'none'
+  padding = 'none',
 }) => {
   // Gap mappings
   const gapClasses = {
     none: 'gap-0',
     small: 'gap-2',
     medium: 'gap-3',
-    large: 'gap-4'
+    large: 'gap-4',
   }
 
   // Layout mappings
   const layoutClasses = {
     row: 'flex-row flex-nowrap overflow-x-auto',
     column: 'flex-col',
-    'row-wrap': 'flex-row flex-wrap'
+    'row-wrap': 'flex-row flex-wrap',
   }
 
   // Alignment mappings
@@ -69,7 +69,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     start: 'justify-start',
     center: 'justify-center',
     end: 'justify-end',
-    'space-between': 'justify-between'
+    'space-between': 'justify-between',
   }
 
   // Padding mappings
@@ -77,7 +77,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     none: '',
     small: 'p-2',
     medium: 'p-4',
-    large: 'p-6'
+    large: 'p-6',
   }
 
   // Helper to determine if a color is a Tailwind class or CSS color
@@ -137,9 +137,9 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.1
-      }
-    }
+        staggerChildren: 0.1,
+      },
+    },
   }
 
   const chipVariants: Variants = {
@@ -149,9 +149,9 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
       y: 0,
       transition: {
         duration: 0.4,
-        ease: 'easeOut'
-      }
-    }
+        ease: 'easeOut',
+      },
+    },
   }
 
   const ChipElement = ({ chip, index }: { chip: Chip; index: number }): React.ReactElement => {
@@ -165,7 +165,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
         <span className="relative z-10 mx-auto flex max-w-md items-center bg-gradient-to-r from-transparent via-white/80 via-50% to-transparent bg-clip-text bg-no-repeat text-neutral-400/70 [background-position:0_0] [background-size:var(--shiny-width)_100%] [--shiny-width:100px] select-none">
           <span className="flex items-center text-white">
             {/* {chip.icon && (
-              <span className="chip-icon mr-2 inline-flex h-3.5 w-3.5 items-center justify-center text-[10px] leading-none">
+              <span className="chip-icon mr-2 inline-flex h-3.5 w-3.5 items-center justify-center text-xs leading-none">
                 {chip.icon}
               </span>
             )} */}
@@ -180,7 +180,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
       '[&[href]]:cursor-pointer [&[href]]:no-underline',
       hoverEffect &&
         'hover:-translate-y-0.5 hover:shadow-[0_0_26px_rgba(186,85,211,0.35)] active:translate-y-0',
-      getChipClasses(chip)
+      getChipClasses(chip),
     )
 
     const chipElement = chip.link ? (
@@ -216,7 +216,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     gapClasses[gap],
     alignmentClasses[alignment],
     paddingClasses[padding],
-    customClassName
+    customClassName,
   )
 
   if (animate) {

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

@@ -159,7 +159,7 @@ export function DDComparisonTable({
       className="studio-comparison-table border-t border-stone-800 bg-transparent px-6 py-20"
     >
       <div className="mx-auto max-w-6xl">
-        
+        #BlockName-DDComparisonTable
         <button
           type="button"
           onClick={() => setOpen((current) => !current)}

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

@@ -121,7 +121,7 @@ export const DDContact: React.FC<DDContactProps> = ({
 
       <div id={sectionId ?? 'contact'} className="py-24">
         <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          
+          #BlockName-DDContact
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
             <div>
               {eyebrow && (
@@ -168,19 +168,19 @@ export const DDContact: React.FC<DDContactProps> = ({
 
               {availabilityActive && (
                 <div
-                  className="flex items-center gap-3 p-4 bg-indigo-900 border border-indigo-500 shadow-xl backdrop-blur-sm rounded-2xl pressable relative z-10 h-full w-full text-[32px] font-medium tracking-[.001em] transition-all duration-300"
+                  className="flex items-center gap-3 p-4 bg-indigo-50 dark:bg-indigo-950/80 border border-indigo-200 dark:border-indigo-500 shadow-sm dark:shadow-xl backdrop-blur-sm rounded-2xl pressable relative z-10 h-full w-full text-[32px] font-medium tracking-[.001em] transition-all duration-300"
                   style={{ cornerShape: 'squircle' } as React.CSSProperties}
                 >
                   <div className="w-3.5 h-3.5 rounded-full bg-lime-700 border-2 border-lime-500 animate-pulse shrink-0 shadow-2xl" />
                   <div>
                     {availabilityLabel && (
-                      <div className="text-md font-semibold text-lime-500 dark:text-stone-50">
+                      <div className="text-md font-semibold text-indigo-900 dark:text-stone-50">
                         {availabilityLabel}
                       </div>
                     )}
 
                     {availabilitySubtext && (
-                      <div className="text-xs font-normal! text-stone-300 pt-1">
+                      <div className="text-xs font-normal! text-stone-600 dark:text-stone-300 pt-1">
                         {availabilitySubtext}
                       </div>
                     )}
@@ -200,14 +200,14 @@ export const DDContact: React.FC<DDContactProps> = ({
                     Message sent!
                   </h3>
 
-                  <p className="text-sm text-stone-400 max-w-xs">
+                  <p className="text-sm text-stone-600 dark:text-stone-400 max-w-xs">
                     Thanks for reaching out. We'll review your project details and get back to you
                     within one business day.
                   </p>
 
                   <button
                     onClick={() => setStatus('idle')}
-                    className="mt-6 px-5 py-2.5 rounded-lgbg-stone-700 text-stone-200 text-sm font-medium hover:bg-stone-600 transition-colors cursor-pointer"
+                    className="mt-6 px-5 py-2.5 rounded-lg bg-stone-900 text-stone-50 dark:bg-stone-700 dark:text-stone-200 text-sm font-medium hover:bg-stone-800 dark:hover:bg-stone-600 transition-colors cursor-pointer"
                   >
                     Send another message
                   </button>
@@ -402,7 +402,7 @@ export const DDContact: React.FC<DDContactProps> = ({
                   <button
                     type="submit"
                     disabled={status === 'submitting' || charCount > 500}
-                    className="glass-button-white group relative isolate flex w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl! border border-white/30 dark:border-white bg- px-6 py-3 text-sm font-semibold text-stone-100 dark:text-stone-900 bg-stone-950/90 dark:bg-stone-100/80 outline-offset-0 dark:hover:bg-stone-100 hover:shadow-2xl hover:-translate-y-0.5 hover:outline-4 hover:outline-indigo-500 hover:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300"
+                    className="glass-button-white group relative isolate flex w-full cursor-pointer items-center justify-center gap-2 overflow-hidden rounded-4xl! border border-stone-300 dark:border-white bg-stone-950/90 dark:bg-stone-100/80 px-6 py-3 text-sm font-semibold text-stone-50 dark:text-stone-900 outline-offset-0 hover:bg-stone-900 dark:hover:bg-stone-100 hover:shadow-2xl hover:-translate-y-0.5 hover:outline-4 hover:outline-indigo-500 hover:-outline-offset-1 disabled:cursor-not-allowed disabled:opacity-50 transition-all duration-300"
                     style={{ cornerShape: 'squircle' } as React.CSSProperties}
                   >
                     <span className="relative z-2 flex items-center gap-2">
@@ -432,3 +432,4 @@ export const DDContact: React.FC<DDContactProps> = ({
     </>
   )
 }
+

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

@@ -42,7 +42,7 @@ export const Counter: React.FC<CounterItem> = ({
   prefix,
   suffix,
   prefixClass,
-  suffixClass
+  suffixClass,
 }) => {
   const ref = React.useRef<HTMLSpanElement>(null)
   const inView = useInView(ref, { once: false })
@@ -66,7 +66,7 @@ export const Counter: React.FC<CounterItem> = ({
         if (element && typeof value === 'number') {
           element.textContent = value.toFixed(0)
         }
-      }
+      },
     })
 
     return () => {
@@ -75,9 +75,9 @@ export const Counter: React.FC<CounterItem> = ({
   }, [ref, inView, from, to, duration])
 
   return (
-    <div className="counter-wrapper flex items-center">
+    <div className="counter-wrapper flex items-center justify-center">
       {prefix && (
-        <span className={prefixClass || 'text-xl font-bold sm:text-2xl md:text-3xl'}>{prefix}</span>
+        <span className={prefixClass || 'text-xl font-bold sm:text-2xl md:text-4xl'}>{prefix}</span>
       )}
       <span ref={ref} className={className || 'text-xl font-bold sm:text-2xl md:text-4xl'} />
       {suffix && (
@@ -99,7 +99,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
   justifyContent = 'center',
   alignItems = 'center',
   gap = '6',
-  gridColumns = '2'
+  gridColumns = '2',
 }) => {
   // Generate layout classes based on configuration
   const getLayoutClasses = () => {
@@ -117,7 +117,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
         row: 'flex-row',
         column: 'flex-col',
         'row-reverse': 'flex-row-reverse',
-        'column-reverse': 'flex-col-reverse'
+        'column-reverse': 'flex-col-reverse',
       }
       classes.push(flexDirMap[flexDirection])
 
@@ -131,7 +131,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
         end: 'justify-end',
         between: 'justify-between',
         around: 'justify-around',
-        evenly: 'justify-evenly'
+        evenly: 'justify-evenly',
       }
       classes.push(justifyMap[justifyContent])
 
@@ -141,7 +141,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
         start: 'items-start',
         center: 'items-center',
         end: 'items-end',
-        baseline: 'items-baseline'
+        baseline: 'items-baseline',
       }
       classes.push(alignMap[alignItems])
     } else if (layoutType === 'grid') {
@@ -172,7 +172,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
           <RichText
             data={counter.beforeCounter}
             enableGutter={false}
-            className="counter-label -mt-2"
+            className="counter_label-before"
           />
 
           <Counter {...counter} />
@@ -181,7 +181,7 @@ export const DDCounter: React.FC<CounterBlockProps> = ({
             data={counter.label}
             enableProse={false}
             enableGutter={false}
-            className="counter-label -mt-2"
+            className="counter_label-after scale-80 origin-top"
           />
         </div>
       ))}

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

@@ -156,7 +156,7 @@ export const DDFeatCat: React.FC<DDFeatCatProps> = ({
 
       <div id={sectionId} className="py-24">
         <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}
+          {/* Header */}#BlockName-DDFeatCat
           <motion.div
             variants={containerVariants}
             initial="hidden"

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

@@ -553,7 +553,7 @@ export const DDFeatStrip: React.FC<DDFeatStripProps> = ({
       {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
 
       <div id={sectionId ?? undefined} className="py-24">
-        
+        #BlockName-DDFeatStrip
         <div
           className={`w-full bg-stone-100 dark:bg-stone-950 border-t border-b border-white/6 ${containerClass || ''}`}
         >