blocks-dusted 0.1.9 → 0.1.11

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

@@ -1,149 +1,149 @@
-'use client'
-import React from 'react'
-import * as LucideIcons from 'lucide-react'
-import { motion, type Variants } from 'framer-motion'
-export type DDProcessProps = Record<string, any>
-type StepItem = {
-  id?: string | null
-  iconName?: string | null
-  title?: string | null
-  description?: string | null
-  duration?: string | null
-}
-
-function DynamicIcon({
-  name,
-  size = 24,
-  ...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 size={size} {...props} />
-}
-
-// Enumerate all possible classes so Tailwind doesn't purge them
-const gridColsMap: Record<number, string> = {
-  1: 'lg:grid-cols-1',
-  2: 'lg:grid-cols-2',
-  3: 'lg:grid-cols-3',
-  4: 'lg:grid-cols-4',
-  5: 'lg:grid-cols-5',
-  6: 'lg:grid-cols-6',
-}
-
-const containerVariants: Variants = {
-  hidden: {},
-  show: {
-    transition: {
-      staggerChildren: 0.1,
-      delayChildren: 0.05,
-    },
-  },
-}
-
-const stepVariants: Variants = {
-  hidden: { opacity: 0, y: 28 },
-  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
-}
-
-export const DDProcess: React.FC<DDProcessProps> = ({
-  eyebrow,
-  headlineMain,
-  headlineAccent,
-  description,
-  steps,
-  sectionId,
-  customCSS,
-}) => {
-  const stepItems = (steps ?? []) as StepItem[]
-  const colCount = Math.min(stepItems.length || 4, 6)
-  const lgCols = gridColsMap[colCount] ?? 'lg:grid-cols-4'
-
-  return (
-    <>
-      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
-
-      <div id={sectionId ?? 'process'} className="py-24">
-        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
-          {/* Header */}#BlockName-DDProcess
-          <div className="text-center max-w-2xl mx-auto mb-16">
-            {eyebrow && (
-              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
-                {eyebrow}
-              </p>
-            )}
-            <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
-              {headlineMain}
-              <br />
-              <span className="text-stone-400">{headlineAccent}</span>
-            </h2>
-            {description && (
-              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
-                {description}
-              </p>
-            )}
-          </div>
-          {/* Steps */}
-          {stepItems.length > 0 && (
-            <div className="relative steps-container mb-4">
-              {/* Single connector line spanning icon centres */}
-              <div
-                className="hidden lg:block absolute top-10 h-px bg-indigo-700  z-0"
-                style={{
-                  left: `calc(100% / ${colCount} / 2)`,
-                  right: `calc(100% / ${colCount} / 2)`,
-                }}
-              />
-
-              <motion.div
-                className={`grid grid-cols-2 sm:grid-cols-2 ${lgCols} gap-8 sm:gap-6 relative z-10`}
-                variants={containerVariants}
-                initial="hidden"
-                whileInView="show"
-                viewport={{ once: false, amount: 0.2 }}
-              >
-                {stepItems.map((step, i) => (
-                  <motion.div
-                    key={step.id ?? i}
-                    className="flex flex-col items-start md:items-center text-left md:text-center justify-start md:justify-center p-4 border-zinc-700/0 border focus:outline-none group bg-lines rounded-md hover:rounded-lg hover:border hover:bg-stone-100 dark:hover:bg-stone-950/90 hover:shadow-2xl hover:border-indigo-500 duration-300 hover:duration-300 transition-all card-bottom-lit"
-                    variants={stepVariants}
-                  >
-                    {/* Circular icon with numbered badge */}
-                    <div className="w-20 h-20 mx-auto flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border-2 border-indigo-700 group-hover:border-indigo-500 -border-stone-700 mb-5 relative shrink-0">
-                      <DynamicIcon
-                        className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
-                        name={step.iconName}
-                        size={24}
-                      />
-                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-[10px] font-mono text-indigo-700 dark:text-indigo-400">
-                        {i + 1}
-                      </span>
-                    </div>
-
-                    {/* Duration badge */}
-                    {step.duration && (
-                      <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
-                        <LucideIcons.Clock size={10} className="text-stone-300" />
-                        <span className="text-[10px] text-stone-300 font-medium">
-                          {step.duration}
-                        </span>
-                      </div>
-                    )}
-
-                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
-                      {step.title}
-                    </h3>
-                    <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed pb-8">
-                      {step.description}
-                    </p>
-                  </motion.div>
-                ))}
-              </motion.div>
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  )
-}
+'use client'
+import React from 'react'
+import * as LucideIcons from 'lucide-react'
+import { motion, type Variants } from 'framer-motion'
+export type DDProcessProps = Record<string, any>
+type StepItem = {
+  id?: string | null
+  iconName?: string | null
+  title?: string | null
+  description?: string | null
+  duration?: string | null
+}
+
+function DynamicIcon({
+  name,
+  size = 24,
+  ...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 size={size} {...props} />
+}
+
+// Enumerate all possible classes so Tailwind doesn't purge them
+const gridColsMap: Record<number, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  show: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.05,
+    },
+  },
+}
+
+const stepVariants: Variants = {
+  hidden: { opacity: 0, y: 28 },
+  show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+}
+
+export const DDProcess: React.FC<DDProcessProps> = ({
+  eyebrow,
+  headlineMain,
+  headlineAccent,
+  description,
+  steps,
+  sectionId,
+  customCSS,
+}) => {
+  const stepItems = (steps ?? []) as StepItem[]
+  const colCount = Math.min(stepItems.length || 4, 6)
+  const lgCols = gridColsMap[colCount] ?? 'lg:grid-cols-4'
+
+  return (
+    <>
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      <div id={sectionId ?? 'process'} className="py-24">
+        <div className="max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6">
+          {/* Header */}
+          <div className="text-center max-w-2xl mx-auto mb-16">
+            {eyebrow && (
+              <p className="text-[11.5px] font-semibold text-stone-400 tracking-widest uppercase mb-3 top-caption">
+                {eyebrow}
+              </p>
+            )}
+            <h2 className="text-3d text-4xl md:text-5xl font-bold text-stone-900 dark:text-stone-50 leading-tight mb-5">
+              {headlineMain}
+              <br />
+              <span className="text-stone-400">{headlineAccent}</span>
+            </h2>
+            {description && (
+              <p className="text-stone-700 dark:text-stone-300 text-base leading-relaxed">
+                {description}
+              </p>
+            )}
+          </div>
+          {/* Steps */}
+          {stepItems.length > 0 && (
+            <div className="relative steps-container mb-4">
+              {/* Single connector line spanning icon centres */}
+              <div
+                className="hidden lg:block absolute top-10 h-px bg-indigo-700  z-0"
+                style={{
+                  left: `calc(100% / ${colCount} / 2)`,
+                  right: `calc(100% / ${colCount} / 2)`,
+                }}
+              />
+
+              <motion.div
+                className={`grid grid-cols-2 sm:grid-cols-2 ${lgCols} gap-8 sm:gap-6 relative z-10`}
+                variants={containerVariants}
+                initial="hidden"
+                whileInView="show"
+                viewport={{ once: false, amount: 0.2 }}
+              >
+                {stepItems.map((step, i) => (
+                  <motion.div
+                    key={step.id ?? i}
+                    className="flex flex-col items-start md:items-center text-left md:text-center justify-start md:justify-center p-4 border-zinc-700/0 border focus:outline-none group bg-lines rounded-md hover:rounded-lg hover:border hover:bg-stone-100 dark:hover:bg-stone-950/90 hover:shadow-2xl hover:border-indigo-500 duration-300 hover:duration-300 transition-all card-bottom-lit"
+                    variants={stepVariants}
+                  >
+                    {/* Circular icon with numbered badge */}
+                    <div className="w-20 h-20 mx-auto flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border-2 border-indigo-700 group-hover:border-indigo-500 -border-stone-700 mb-5 relative shrink-0">
+                      <DynamicIcon
+                        className="dark:text-indigo-400 text-indigo-700 group-hover:dark:text-lime-400 duration-300 transition-all"
+                        name={step.iconName}
+                        size={24}
+                      />
+                      <span className="absolute -top-1 -right-1 w-6 h-6 flex items-center justify-center rounded-full bg-stone-200 dark:bg-stone-900 border border-indigo-700 text-[10px] font-mono text-indigo-700 dark:text-indigo-400">
+                        {i + 1}
+                      </span>
+                    </div>
+
+                    {/* Duration badge */}
+                    {step.duration && (
+                      <div className="inline-flex items-center gap-1 bg-7 bg-stone-800 border border-stone-700 rounded-full px-2.5 py-0.5 mb-3 group-hover:bg-indigo-800 group-hover:border-indigo-600 dark:group-hover:border-lime-500">
+                        <LucideIcons.Clock size={10} className="text-stone-300" />
+                        <span className="text-[10px] text-stone-300 font-medium">
+                          {step.duration}
+                        </span>
+                      </div>
+                    )}
+
+                    <h3 className="text-lg font-semibold text-stone-900 dark:text-stone-50 mb-2">
+                      {step.title}
+                    </h3>
+                    <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed pb-8">
+                      {step.description}
+                    </p>
+                  </motion.div>
+                ))}
+              </motion.div>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,150 +1,150 @@
-import type { Block } from 'payload'
-
-export const DDProcess: Block = {
-  slug: 'DD-Process',
-  interfaceName: 'DDProcess',
-  labels: {
-    singular: 'Studio Process',
-    plural: 'Studio Process Sections'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Header',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              defaultValue: 'How We Work'
-            },
-            {
-              name: 'headlineMain',
-              type: 'text',
-              label: 'Headline (Main)',
-              defaultValue: 'A process built for',
-              required: true
-            },
-            {
-              name: 'headlineAccent',
-              type: 'text',
-              label: 'Headline (Accent)',
-              defaultValue: 'real outcomes',
-              required: true
-            },
-            {
-              name: 'description',
-              type: 'textarea',
-              label: 'Description',
-              defaultValue:
-                'We run a tight, transparent process that keeps you informed and involved — without wasting your time.'
-            }
-          ]
-        },
-        {
-          label: 'Steps',
-          fields: [
-            {
-              name: 'steps',
-              type: 'array',
-              label: 'Process Steps',
-              minRows: 1,
-              fields: [
-                {
-                  name: 'iconName',
-                  type: 'text',
-                  label: 'Lucide Icon Name',
-                  required: true,
-                  admin: {
-                    description: 'e.g. Search, Pencil, Hammer, Rocket, CheckCircle'
-                  }
-                },
-                {
-                  name: 'number',
-                  type: 'text',
-                  label: 'Step Number',
-                  admin: {
-                    description: 'e.g. 01, 02'
-                  }
-                },
-                {
-                  name: 'title',
-                  type: 'text',
-                  label: 'Step Title',
-                  required: true
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  label: 'Description',
-                  required: true
-                },
-                {
-                  name: 'duration',
-                  type: 'text',
-                  label: 'Typical Duration',
-                  admin: {
-                    description: 'e.g. 1–2 weeks, 1 day'
-                  }
-                }
-              ],
-              defaultValue: [
-                {
-                  iconName: 'Search',
-                  number: '01',
-                  title: 'Discover',
-                  description:
-                    'We start with a deep-dive kickoff — understanding your users, your goals, and the constraints we need to design around.',
-                  duration: '1–2 days'
-                },
-                {
-                  iconName: 'PenTool',
-                  number: '02',
-                  title: 'Design',
-                  description:
-                    'Wireframes, flows, and high-fidelity UI. We move fast and keep you in the loop with regular check-ins and async Figma access.',
-                  duration: '1–2 weeks'
-                },
-                {
-                  iconName: 'Code2',
-                  number: '03',
-                  title: 'Build',
-                  description:
-                    'Clean, typed, tested code. We ship in short sprints with daily updates and a staging environment from day one.',
-                  duration: '2–8 weeks'
-                },
-                {
-                  iconName: 'Rocket',
-                  number: '04',
-                  title: 'Launch',
-                  description:
-                    'We handle deployment, monitoring, and handoff documentation so your team is set up for long-term success.',
-                  duration: '2–3 days'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              defaultValue: 'process'
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDProcess: Block = {
+  slug: 'DD-Process',
+  interfaceName: 'DDProcess',
+  labels: {
+    singular: 'Studio Process',
+    plural: 'Studio Process Sections'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'How We Work'
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline (Main)',
+              defaultValue: 'A process built for',
+              required: true
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline (Accent)',
+              defaultValue: 'real outcomes',
+              required: true
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              defaultValue:
+                'We run a tight, transparent process that keeps you informed and involved — without wasting your time.'
+            }
+          ]
+        },
+        {
+          label: 'Steps',
+          fields: [
+            {
+              name: 'steps',
+              type: 'array',
+              label: 'Process Steps',
+              minRows: 1,
+              fields: [
+                {
+                  name: 'iconName',
+                  type: 'text',
+                  label: 'Lucide Icon Name',
+                  required: true,
+                  admin: {
+                    description: 'e.g. Search, Pencil, Hammer, Rocket, CheckCircle'
+                  }
+                },
+                {
+                  name: 'number',
+                  type: 'text',
+                  label: 'Step Number',
+                  admin: {
+                    description: 'e.g. 01, 02'
+                  }
+                },
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Step Title',
+                  required: true
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                  required: true
+                },
+                {
+                  name: 'duration',
+                  type: 'text',
+                  label: 'Typical Duration',
+                  admin: {
+                    description: 'e.g. 1–2 weeks, 1 day'
+                  }
+                }
+              ],
+              defaultValue: [
+                {
+                  iconName: 'Search',
+                  number: '01',
+                  title: 'Discover',
+                  description:
+                    'We start with a deep-dive kickoff — understanding your users, your goals, and the constraints we need to design around.',
+                  duration: '1–2 days'
+                },
+                {
+                  iconName: 'PenTool',
+                  number: '02',
+                  title: 'Design',
+                  description:
+                    'Wireframes, flows, and high-fidelity UI. We move fast and keep you in the loop with regular check-ins and async Figma access.',
+                  duration: '1–2 weeks'
+                },
+                {
+                  iconName: 'Code2',
+                  number: '03',
+                  title: 'Build',
+                  description:
+                    'Clean, typed, tested code. We ship in short sprints with daily updates and a staging environment from day one.',
+                  duration: '2–8 weeks'
+                },
+                {
+                  iconName: 'Rocket',
+                  number: '04',
+                  title: 'Launch',
+                  description:
+                    'We handle deployment, monitoring, and handoff documentation so your team is set up for long-term success.',
+                  duration: '2–3 days'
+                }
+              ]
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'process'
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}