blocks-dusted 0.1.9 → 0.1.11

package/templates/blocks/DD-FluidBtn/config.ts

@@ -0,0 +1,102 @@
+// src/blocks/ButtonECDustedFluid/config.ts
+import type { Block } from 'payload'
+import { link } from '@/fields/link'
+
+export const DDFluidBtn: Block = {
+  slug: 'DD-FluidBtn',
+  interfaceName: 'DDFluidBtn',
+  labels: {
+    singular: 'Button Dusted Fluid',
+    plural: 'Button Dusted Fluid'
+  },
+  fields: [
+    {
+      name: 'variant',
+      type: 'select',
+      defaultValue: 'v1',
+      required: true,
+      options: [
+        { label: 'v1', value: 'v1' },
+        { label: 'v2', value: 'v2' },
+        { label: 'v3', value: 'v3' },
+        { label: 'v4', value: 'v4' },
+        { label: 'v5', value: 'v5' }
+      ],
+      admin: { width: '50%' }
+    },
+    {
+      name: 'label',
+      type: 'text',
+      required: true,
+      defaultValue: 'BUTTON',
+      admin: { width: '50%' }
+    },
+    {
+      name: 'displayMode',
+      type: 'select',
+      label: 'Display Mode',
+      defaultValue: 'labelOnly',
+      options: [
+        { label: 'Label Only', value: 'labelOnly' },
+        { label: 'Icon with Label', value: 'iconWithLabel' },
+        { label: 'Icon Only', value: 'iconOnly' }
+      ],
+      required: true,
+      admin: { width: '50%' }
+    },
+    {
+      name: 'iconPosition',
+      type: 'select',
+      label: 'Icon Position',
+      defaultValue: 'before',
+      options: [
+        { label: 'Before Label', value: 'before' },
+        { label: 'After Label', value: 'after' }
+      ],
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData?.displayMode === 'iconWithLabel'
+      }
+    },
+    link({
+      overrides: {
+        name: 'link',
+        label: 'Link',
+        admin: {
+          condition: (data) => data.displayMode !== 'labelOnly'
+        }
+      },
+      disableLabel: true,
+      appearances: false
+    }),
+    {
+      name: 'enableCustomClasses',
+      type: 'checkbox',
+      label: 'Enable Custom Classes',
+      defaultValue: false,
+      admin: { width: '100%' }
+    },
+    {
+      name: 'wrapperClassName',
+      type: 'text',
+      label: 'Button Wrapper Class',
+      defaultValue: 'w-fit',
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData.enableCustomClasses === true
+      }
+    },
+    {
+      name: 'className',
+      type: 'text',
+      label: 'Inner Button Class',
+      required: false,
+      admin: {
+        width: '50%',
+        condition: (data, siblingData) => siblingData.enableCustomClasses === true
+      }
+    }
+  ]
+}

package/templates/blocks/DD-FluidBtn/manifest.json

@@ -0,0 +1,86 @@
+{
+  "type": "block",
+  "name": "DD-FluidBtn",
+  "label": "Fluid Button Set",
+  "sourceName": "ButtonECDustedFluid",
+  "portableName": "DD-FluidBtn",
+  "slug": "DD-FluidBtn",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ButtonECDustedFluid",
+    "originalSlug": "buttonECDustedFluid",
+    "originalConfigExport": "ButtonECDustedFluid",
+    "originalComponentExport": "ButtonECDustedFluid",
+    "originalInterfaceName": "DDFluidBtn"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-FluidBtn/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-FluidBtn/config.ts"
+    },
+    {
+      "from": "ButtonsEyeCatching.tsx",
+      "to": "src/blocks/DD-FluidBtn/ButtonsEyeCatching.tsx"
+    }
+  ],
+  "dependencies": [
+    "framer-motion"
+  ],
+  "sharedFiles": [
+    {
+      "from": "templates/shared/src/components/ui/button-dusted-fluid",
+      "to": "src/components/ui/button-dusted-fluid",
+      "required": true,
+      "safeToCopy": true
+    }
+  ],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDFluidBtn in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FluidBtn in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDFluidBtn in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-FluidBtn in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDFluidBtn } from '@/blocks/DD-FluidBtn/config' and add DDFluidBtn to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-FluidBtn in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Bundles the required ButtonsEyeCatching child component with the public parent block.",
+    "Only DDFluidBtn is registered as a block.",
+    "Manifest includes shared local support files required by original DesignsDusted source imports."
+  ],
+  "exportName": "DDFluidBtn",
+  "interfaceName": "DDFluidBtn"
+}

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

@@ -0,0 +1,149 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { motion } from 'framer-motion'
+import RichText from '@/components/RichText'
+
+export interface ButtonGooeyInfoProps {
+  buttonLabel?: string
+  buttonIcon?: string
+  richTextData?: any
+  panelWidth?: string
+  panelBgColor?: string
+  buttonBgColor?: string
+  buttonTextColor?: string
+  panelTextColor?: string
+  xOffset?: number
+  className?: string
+  panelClassName?: string
+}
+
+export const DDGooeyInfo: React.FC<ButtonGooeyInfoProps> = ({
+  buttonLabel = 'i',
+  buttonIcon,
+  richTextData,
+  panelWidth = '16rem',
+  panelBgColor = 'black',
+  buttonBgColor = 'black',
+  buttonTextColor = 'white',
+  panelTextColor = 'white',
+  xOffset = 48,
+  className = '',
+  panelClassName = ''
+}) => {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const panelRef = useRef<HTMLDivElement | null>(null)
+
+  // Close on outside tap/click (helps on touch devices)
+  useEffect(() => {
+    function handlePointerDown(e: PointerEvent) {
+      if (!buttonRef.current || !panelRef.current) return
+      if (
+        !buttonRef.current.contains(e.target as Node) &&
+        !panelRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+
+    window.addEventListener('pointerdown', handlePointerDown)
+    return () => window.removeEventListener('pointerdown', handlePointerDown)
+  }, [])
+
+  const handleToggle = () => {
+    setOpen((prev) => !prev)
+  }
+
+  return (
+    <div className={`gooey-info-container relative w-auto h-auto block ${className}`}>
+      {/* Gooey Filter */}
+      <svg className="absolute w-0 h-0">
+        <filter id="gooey">
+          {/* // Subtle gooey effect - best color merge */}
+          <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    0 0 0 18 -5"
+            result="gooey"
+          />
+          {/* // Strong gooey effect */}
+          {/* <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0
+                    0 1 0 0 0
+                    0 0 1 0 0
+                    0 0 0 24 -8"
+            result="gooey"
+          /> */}
+          {/* // Extreme gooey effect */}
+          {/* <feGaussianBlur in="SourceGraphic" stdDeviation="16" result="blur" />
+          <feColorMatrix
+            in="blur"
+            mode="matrix"
+            values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
+          0 0 0 30 -10"
+            result="gooey"
+          /> */}
+          <feBlend in="SourceGraphic" in2="gooey" />
+        </filter>
+      </svg>
+      <div
+        className="relative flex items-center justify-center my-16"
+        style={{ filter: 'url(#gooey)' }}
+      >
+        {/* Floating Button */}
+        <motion.button
+          ref={buttonRef}
+          onHoverStart={() => setOpen(true)}
+          onHoverEnd={() => setOpen(false)}
+          onClick={handleToggle} // supports mouse + touch tap
+          className="w-14 h-14 rounded-full flex items-center justify-center cursor-pointer shadow-lg touch-manipulation select-none"
+          style={{
+            backgroundColor: buttonBgColor,
+            color: buttonTextColor
+          }}
+        >
+          <span className="text-xl font-bold">{buttonIcon || buttonLabel}</span>
+        </motion.button>
+
+        {/* Panel */}
+        <motion.div
+          ref={panelRef}
+          initial={{
+            opacity: 0,
+            scale: 0.85,
+            x: xOffset - 8
+          }}
+          animate={{
+            opacity: open ? 1 : 0,
+            scale: open ? 1 : 0.85,
+            x: open ? xOffset : xOffset - 8
+          }}
+          transition={{ type: 'spring', stiffness: 250, damping: 22 }}
+          onHoverStart={() => setOpen(true)}
+          onHoverEnd={() => setOpen(false)}
+          className={`absolute left-0 top-1/2 -translate-y-1/2 origin-left rounded-3xl px-6 py-5 flex flex-col gap-3 ${panelClassName}`}
+          style={{
+            width: panelWidth,
+            backgroundColor: panelBgColor,
+            color: panelTextColor,
+            pointerEvents: open ? 'auto' : 'none'
+          }}
+        >
+          {richTextData && (
+            <RichText data={richTextData} className="gooey-info-richtext" enableGutter={false} />
+          )}
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default DDGooeyInfo

package/templates/blocks/DD-GooeyInfo/config.ts

@@ -0,0 +1,135 @@
+import type { Block } from 'payload'
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDIcon } from '@/blocks/DD-Icon/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+import { DDIconButton } from '@/blocks/DD-IconButton/config'
+import { defaultLexical } from '@/fields/defaultLexical'
+
+export const DDGooeyInfo: Block = {
+  slug: 'DD-GooeyInfo',
+  interfaceName: 'DDGooeyInfo',
+  labels: {
+    singular: 'Button Gooey Info',
+    plural: 'Button Gooey Info Blocks'
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'buttonLabel',
+          type: 'text',
+          label: 'Button Label/Icon',
+          defaultValue: 'i',
+          admin: {
+            width: '50%',
+            description: 'Text or single character to display on button (e.g., "i", "?", "N")'
+          }
+        },
+        {
+          name: 'xOffset',
+          type: 'number',
+          label: 'Panel X Offset',
+          defaultValue: 110,
+          admin: {
+            width: '50%',
+            description: 'Horizontal distance from button to panel in pixels'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelWidth',
+          type: 'text',
+          label: 'Panel Width',
+          defaultValue: '16rem',
+          admin: {
+            width: '33.33%',
+            description: 'Width of info panel (e.g., 16rem, 300px)'
+          }
+        },
+        {
+          name: 'buttonBgColor',
+          type: 'text',
+          label: 'Button Background',
+          defaultValue: 'black',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color (e.g., black, #000, var(--primary))'
+          }
+        },
+        {
+          name: 'buttonTextColor',
+          type: 'text',
+          label: 'Button Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '33.33%',
+            description: 'CSS color for button text'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'panelBgColor',
+          type: 'text',
+          label: 'Panel Background',
+          defaultValue: 'black',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel background'
+          }
+        },
+        {
+          name: 'panelTextColor',
+          type: 'text',
+          label: 'Panel Text Color',
+          defaultValue: 'white',
+          admin: {
+            width: '50%',
+            description: 'CSS color for panel text'
+          }
+        }
+      ]
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'className',
+          type: 'text',
+          label: 'Container CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the outer container'
+          }
+        },
+        {
+          name: 'panelClassName',
+          type: 'text',
+          label: 'Panel CSS Classes',
+          admin: {
+            width: '50%',
+            description: 'Additional CSS classes for the info panel'
+          }
+        }
+      ]
+    },
+    {
+      name: 'richTextData',
+      type: 'richText',
+      editor: defaultLexical,
+      label: 'Panel Content'
+    }
+  ]
+}
+
+export default DDGooeyInfo

package/templates/blocks/DD-GooeyInfo/manifest.json

@@ -0,0 +1,72 @@
+{
+  "type": "block",
+  "name": "DD-GooeyInfo",
+  "label": "Gooey Info Button",
+  "sourceName": "ButtonGooeyInfo",
+  "portableName": "DD-GooeyInfo",
+  "slug": "DD-GooeyInfo",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/DesignsDustedv3",
+    "originalPath": "src/blocks/ButtonGooeyInfo",
+    "originalSlug": "buttonGooeyInfo",
+    "originalConfigExport": "ButtonGooeyInfo",
+    "originalComponentExport": "ButtonGooeyInfo",
+    "originalInterfaceName": "DDGooeyInfo"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/DD-GooeyInfo/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/DD-GooeyInfo/config.ts"
+    }
+  ],
+  "dependencies": [],
+  "sharedFiles": [],
+  "requiredProjectFiles": [],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register DDGooeyInfo in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-GooeyInfo in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "manualSteps": [
+    "Register DDGooeyInfo in Pages/Posts blocks arrays if automatic registration was skipped.",
+    "Register DD-GooeyInfo in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can add import { DDGooeyInfo } from '@/blocks/DD-GooeyInfo/config' and add DDGooeyInfo to clear Pages/Posts block arrays."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register DD-GooeyInfo in RenderBlocks."
+    }
+  },
+  "notes": [
+    "Converted from DesignsDustedv3 ButtonGooeyInfo.",
+    "Project-specific imports were replaced with portable local behaviour where required."
+  ],
+  "exportName": "DDGooeyInfo",
+  "interfaceName": "DDGooeyInfo"
+}

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

@@ -68,9 +68,19 @@ function DynamicIcon({
 
 export const DDHero: React.FC<DDHeroProps> = ({
   badge,
+  eyebrow,
   headlineMain,
   headlineAccent,
   description,
+  headlineText,
+  accentText,
+  subText,
+  phase1,
+  phase2,
+  phase3,
+  phase1Desc,
+  phase2Desc,
+  phase3Desc,
   // primaryCta,
   // secondaryCta,
   stats,
@@ -90,8 +100,20 @@ export const DDHero: React.FC<DDHeroProps> = ({
   const bgUrl = bgMedia?.url ?? backgroundImageFallbackUrl ?? undefined
   const safeBgUrl = isLocalAssetSrc(bgUrl) ? bgUrl : null
   const isVideo = Boolean(safeBgUrl && (bgMedia?.mimeType?.startsWith('video/') ?? false))
+  const resolvedBadge = badge?.text ?? eyebrow
+  const resolvedHeadlineMain = headlineMain ?? headlineText ?? 'Launch-ready digital products'
+  const resolvedHeadlineAccent = headlineAccent ?? accentText ?? 'with sharper positioning'
+  const resolvedDescription =
+    description ??
+    subText ??
+    'A hero section for selling a focused offer with clear messaging, visual depth, and direct action.'
+  const phaseStats = [
+    phase1 && { value: phase1, label: phase1Desc },
+    phase2 && { value: phase2, label: phase2Desc },
+    phase3 && { value: phase3, label: phase3Desc }
+  ].filter(Boolean) as StatItem[]
   const buttonItems = buttons as ButtonItem[]
-  const statItems = (stats ?? []) as StatItem[]
+  const statItems = ((stats?.length ? stats : phaseStats) ?? []) as StatItem[]
 
   const [bgLoaded, setBgLoaded] = useState(false)
 
@@ -104,7 +126,7 @@ export const DDHero: React.FC<DDHeroProps> = ({
 
       <div
         id={sectionId ?? undefined}
-        className="relative min-h-screen flex items-center overflow-hidden"
+        className="relative flex min-h-[72vh] w-full items-center overflow-hidden rounded-2xl"
       >
         {/* Background Image */}
         <div className="absolute inset-0">
@@ -142,21 +164,20 @@ export const DDHero: React.FC<DDHeroProps> = ({
         </div>
 
         {/* Content */}
-        <div className="relative z-10 w-full max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6 pt-28 pb-24">
-          #BlockName-DDHero
-          <div className="max-w-2xl">
+        <div className="relative z-10 mx-auto flex w-full max-w-6xl items-center px-6 py-20 md:px-10 lg:px-14">
+          <div className="max-w-3xl">
             {/* Badge */}
             {/* {badge?.show && badge.text && (
               <div className="inline-flex items-center gap-2 bg-stone-50/10 border border-white/20 rounded-full px-4 py-1.5 mb-8">
                 <span className="w-1.5 h-1.5 rounded-full bg-lime-400 animate-pulse" />
                 <span className="text-stone-50/80 text-xs font-medium tracking-wide">
-                  {badge.text}
+                  {resolvedBadge}
                 </span>
               </div>
             )} */}
 
             {/* Badge - to convert to dynamic */}
-            {badge?.show && badge.text && (
+            {(badge?.show ?? Boolean(resolvedBadge)) && resolvedBadge && (
               <motion.div
                 variants={{
                   hidden: { opacity: 0, y: -20, filter: 'blur(6px)' },
@@ -167,16 +188,16 @@ export const DDHero: React.FC<DDHeroProps> = ({
                 <span className="inline-flex items-center gap-2 rounded-full border border-lime-500 bg-black/70 px-4 py-1.5 text-xs text-lime-100">
                   {/* TODO: Reconnect Badge/AnimatedShinyText if this project provides them. */}
                   <ChipIcon className="mr-2 h-3.5 w-3.5" />
-                  {badge.text}
+                  {resolvedBadge}
                 </span>
               </motion.div>
             )}
 
             {/* Headline */}
             {/* <h1 className="text-5xl md:text-6xl lg:text-7xl font-semibold text-stone-900 dark:text-stone-50 leading-[1.05] tracking-tight mb-6">
-              {headlineMain}
+              {resolvedHeadlineMain}
               <br />
-              <span className="text-stone-400">{headlineAccent}</span>
+              <span className="text-stone-400">{resolvedHeadlineAccent}</span>
             </h1> */}
 
             {/* Headline */}
@@ -190,9 +211,9 @@ export const DDHero: React.FC<DDHeroProps> = ({
               transition={{ duration: 0.6, ease: 'easeOut' }}
               style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
             >
-              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-600 dark:text-violet-600 hyphens-auto">
+              <span className="block text-left text-5xl font-semibold tracking-tight text-lime-300 drop-shadow-lg sm:text-6xl md:text-7xl">
                 {/* TODO: Reconnect SplittingText animation if this project provides it. */}
-                {headlineMain}
+                {resolvedHeadlineMain}
               </span>
             </motion.div>
             <motion.div
@@ -205,16 +226,18 @@ export const DDHero: React.FC<DDHeroProps> = ({
               transition={{ duration: 0.6, ease: 'easeOut' }}
               style={{ filter: 'drop-shadow(3px 3px 1px #151515)' }}
             >
-              <span className="block text-6xl sm:text-6xl font-semibold text-left tracking-tight md:text-7xl text-purple-900 dark:text-violet-900 hyphens-auto">
+              <span className="block text-left text-5xl font-semibold tracking-tight text-stone-50 drop-shadow-lg sm:text-6xl md:text-7xl">
                 {/* TODO: Reconnect SplittingText animation if this project provides it. */}
-                {headlineAccent}
+                {resolvedHeadlineAccent}
               </span>
             </motion.div>
 
             {/* Description */}
             <TextFade direction="down" className="mt-10" delay={0.5}>
-              {description && (
-                <p className="text-stone-50/65 leading-relaxed mt-4 mb-0 max-w-xl">{description}</p>
+              {resolvedDescription && (
+                <p className="mt-4 mb-0 max-w-2xl text-lg leading-relaxed text-stone-50/75">
+                  {resolvedDescription}
+                </p>
               )}
             </TextFade>
 
@@ -256,7 +279,7 @@ export const DDHero: React.FC<DDHeroProps> = ({
                     href={(button as any).href ?? '#'}
                     className={
                       button.class ??
-                      'inline-flex items-center gap-1.5 bg-indigo-700 text-stone-50 text-xs font-semibold px-3 py-1.5 rounded-lg group-hover:bg-indigo-600 group-hover:scale-[1.05] group-hover:shadow-xl transition-all duration-150 whitespace-nowrap'
+                      'inline-flex items-center justify-center gap-2 rounded-full bg-lime-400 px-5 py-2.5 text-sm font-semibold text-stone-950 shadow-[0_0_28px_rgba(132,204,22,0.35)] transition-all duration-150 hover:bg-lime-300 hover:scale-[1.03] whitespace-nowrap'
                     }
                     style={{ cornerShape: 'squircle' } as React.CSSProperties}
                   >