blocks-dusted 0.1.10 → 0.1.11

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

@@ -0,0 +1,132 @@
+'use client'
+
+import React from 'react'
+import { cn } from '@/utilities/ui'
+import type { Testimonial } from '@/payload-types'
+
+type TestimonialsMarqueeBlockProps = {
+  heading?: string | null
+  testimonials?: (Testimonial | string | number)[] | null
+  row1Duration?: number | null
+  row2Duration?: number | null
+  sectionId?: string | null
+  customCSS?: string | null
+}
+import RichText from '@/components/RichText/index'
+
+function TestimonialCard({ item }: { item: Testimonial }) {
+  const logo =
+    typeof item.sourceLogo === 'object' && item.sourceLogo !== null
+      ? (item.sourceLogo as { url?: string | null }).url
+      : null
+
+  return (
+    <div className="relative scale-90 -ml-2 -mr-2 h-fit max-w-sm shrink-0 cursor-pointer overflow-hidden rounded-xl border border-[#2A2A30] bg-[#1a1a1f] p-4 space-y-2.5">
+      {item.title && <h2 className="mb-2.5 text-sm font-medium text-[#8B9F6B]">{item.title}</h2>}
+
+      <div className="flex items-center gap-0">
+        <div className="flex items-center text-xs">
+          {item.ratingText && (
+            <span className="ml-0 font-medium text-[#E8E6E1]">{item.ratingText}</span>
+          )}
+          {item.date && <span className="ml-3 text-[#6B6860]">{item.date}</span>}
+        </div>
+      </div>
+
+      {item.content && (
+        <div className="text-sm text-[#9A9790]">
+          <RichText data={item.content} enableGutter={false} enableProse={false} />
+        </div>
+      )}
+
+      {logo && (
+        <img
+          alt={item.sourceLogoAlt || 'Source Logo'}
+          loading="lazy"
+          width={50}
+          height={50}
+          decoding="async"
+          src={logo}
+          className="mt-2 h-auto w-[50px] object-contain"
+        />
+      )}
+    </div>
+  )
+}
+
+function MarqueeRow({
+  items,
+  reverse = false,
+  duration = 30
+}: {
+  items: Testimonial[]
+  reverse?: boolean
+  duration?: number
+}) {
+  const duplicated = [...items, ...items, ...items, ...items]
+
+  return (
+    <div className="group flex overflow-hidden px-2 py-0 -mt-1 -mb-1 flex-row">
+      <div
+        className={cn(
+          'flex scale-90 shrink-0 justify-around gap-0 flex-row will-change-transform',
+          reverse ? 'animate-marquee-reverse' : 'animate-marquee',
+          'group-hover:[animation-play-state:paused]'
+        )}
+        style={{ animationDuration: `${duration}s` }}
+      >
+        {duplicated.map((item, idx) => (
+          <TestimonialCard key={idx} item={item} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const DDTestMarq: React.FC<TestimonialsMarqueeBlockProps> = (props) => {
+  const {
+    heading,
+    testimonials,
+    row1Duration = 35,
+    row2Duration = 40,
+    sectionId,
+    customCSS
+  } = props
+
+  const populated = (testimonials ?? []).filter(
+    (t: Testimonial | string | number): t is Testimonial => typeof t === 'object' && t !== null
+  )
+
+  if (populated.length === 0) return null
+
+  const midpoint = Math.ceil(populated.length / 2)
+  const row1 = populated.slice(0, midpoint)
+  const row2 = populated.slice(midpoint)
+
+  return (
+    <section id={sectionId ?? 'testimonials'} className="mx-auto max-w-8xl px-0 py-0 md:px-0">
+      {customCSS && <style dangerouslySetInnerHTML={{ __html: customCSS }} />}
+
+      {heading && (
+        <h2
+          className="max-w-5xl mx-auto mb-12 text-3xl font-bold tracking-tighter text-[#E8E6E1] sm:text-4xl"
+          style={{ fontFamily: "'Space Grotesk', sans-serif" }}
+        >
+          {heading}
+        </h2>
+      )}
+
+      <div className="relative flex w-full flex-col items-center justify-center overflow-hidden">
+        {row1.length > 0 && <MarqueeRow items={row1} duration={row1Duration ?? 35} />}
+        {row2.length > 0 && <MarqueeRow items={row2} reverse duration={row2Duration ?? 40} />}
+
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-[6rem] blur-md bg-[linear-gradient(90deg,#0b0b11,#0c0b12,transparent,transparent,transparent)] mix-blend-darken" />
+        <div className="pointer-events-none absolute inset-y-0 left-0 w-[6rem] bg-[linear-gradient(90deg,#0b0b11,#0c0b12,transparent,transparent,transparent)] mix-blend-darken" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-[6rem] blur-md bg-[linear-gradient(270deg,#09090d,#09090d,transparent,transparent,transparent)] mix-blend-darken" />
+        <div className="pointer-events-none absolute inset-y-0 right-0 w-[6rem] bg-[linear-gradient(270deg,#09090d,#09090d,transparent,transparent,transparent)] mix-blend-darken" />
+      </div>
+    </section>
+  )
+}
+
+export default DDTestMarq

package/templates/blocks/DD-TestMarq/README.md

@@ -0,0 +1,4 @@
+# DD-TestMarq
+
+Portable first-pass conversion of `TestimonialsMarqueeBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

package/templates/blocks/DD-TestMarq/RowLabel.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import React from 'react'
+
+type RowLabelProps = { data?: { title?: string }; index?: number }
+
+export const RowLabel: React.FC<RowLabelProps> = ({ data, index }) => {
+  return <div>{data?.title || `Testimonial ${String((index ?? 0) + 1).padStart(2, '0')}`}</div>
+}

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

@@ -0,0 +1,88 @@
+import type { Block } from 'payload'
+
+export const DDTestMarq: Block = {
+  slug: 'DD-TestMarq',
+  interfaceName: 'DDTestMarq',
+  labels: {
+    singular: 'Testimonials Marquee',
+    plural: 'Testimonials Marquee Blocks'
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Content',
+          fields: [
+            {
+              name: 'heading',
+              type: 'text',
+              label: 'Heading',
+              defaultValue: 'Testimonials'
+            },
+            {
+              name: 'testimonials',
+              type: 'relationship',
+              relationTo: 'testimonials',
+              hasMany: true,
+              label: 'Select Testimonials',
+              admin: {
+                description:
+                  'Pick from the Testimonials collection. Fields used: title, quote, ratingText, date, sourceLogo, sourceLogoAlt.'
+              }
+            }
+          ]
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'row1Duration',
+                  type: 'number',
+                  label: 'Row 1 Duration (s)',
+                  defaultValue: 35,
+                  min: 5,
+                  max: 180,
+                  admin: {
+                    width: '50%',
+                    description: 'Scroll speed for the first row — lower = faster.'
+                  }
+                },
+                {
+                  name: 'row2Duration',
+                  type: 'number',
+                  label: 'Row 2 Duration (s)',
+                  defaultValue: 40,
+                  min: 5,
+                  max: 180,
+                  admin: {
+                    width: '50%',
+                    description: 'Scroll speed for the second row — lower = faster.'
+                  }
+                }
+              ]
+            },
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'testimonials',
+              admin: {
+                description: 'Unique ID for anchor linking.'
+              }
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

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

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

@@ -0,0 +1,247 @@
+'use client'
+
+import React, { useId, useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Navigation, Pagination } from 'swiper/modules'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import { cn } from '@/utilities/ui'
+import RichText from '@/components/RichText/index'
+// import { Media } from '@/components/Media'
+import Image from 'next/image'
+
+export type TestimonialItem = {
+  id: string
+  clientName: any
+  designation: any
+  company: any
+  content: any
+  companyLogo?: any
+}
+
+export type TestimonialBlockProps = {
+  testimonials: TestimonialItem[]
+  heading?: any
+  testimonialClass?: string
+  sectionId?: string
+  subHeader?: string
+  showPagination?: boolean
+  showNavigation?: boolean
+  slidesPerViewTablet?: number
+  slidesPerViewDesktop?: number
+  carouselSpeed?: number
+}
+
+export const DDTestim: React.FC<TestimonialBlockProps> = ({
+  testimonials,
+  heading,
+  testimonialClass,
+  sectionId,
+  subHeader,
+  showPagination = true,
+  showNavigation = true,
+  slidesPerViewTablet = 2,
+  slidesPerViewDesktop = 3,
+  carouselSpeed = 1000
+}) => {
+  const uniqueId = useId().replace(/:/g, '')
+  const [swiperReady, setSwiperReady] = useState(false)
+
+  useEffect(() => {
+    setSwiperReady(true)
+  }, [])
+
+  if (!testimonials || testimonials.length === 0) return null
+
+  return (
+    <section
+      className={cn(
+        'testimonialsSwiper relative px-0 pb-16 pt-0',
+        'py-16',
+        '[--swiper-navigation-top-offset:82%] [--swiper-navigation-size:24px] [--swiper-navigation-sides-offset:33rem] [--swiper-navigation-color:var(--color-accent)] [--swiper-pagination-color: #5c4dfd] [--swiper-pagination-bullet-inactive-color:var(--color-alt)]',
+        '[&_.swiper]:min-w-[375px] [&_.swiper]:!w-full [&_.swiper]:!pb-8 [&_.swiper]:![perspective:1200px] [&_.swiper]:![transform-style:preserve-3d]',
+        'max-md:[&_.swiper]:ml-0 max-md:[&_.swiper]:min-w-[300px] max-md:[&_.swiper]:scale-95',
+        '[&_.swiper-wrapper]:ml-[-4rem] [&_.swiper-wrapper]:scale-95 [&_.swiper-wrapper]:gap-8 [&_.swiper-wrapper]:p-0',
+        '[&_.swiper-pagination-fraction]:relative [&_.swiper-pagination-fraction]:top-6 [&_.swiper-pagination-fraction]:mx-auto [&_.swiper-pagination-fraction]:w-fit [&_.swiper-pagination-fraction]:max-w-[90%] [&_.swiper-pagination-fraction]:pt-4',
+        '[&_.swiper-pagination-custom]:relative [&_.swiper-pagination-custom]:top-6 [&_.swiper-pagination-custom]:mx-auto [&_.swiper-pagination-custom]:w-fit [&_.swiper-pagination-custom]:max-w-[90%] [&_.swiper-pagination-custom]:pt-4',
+        '[&_.swiper-horizontal>.swiper-pagination-bullets]:relative [&_.swiper-horizontal>.swiper-pagination-bullets]:top-6 [&_.swiper-horizontal>.swiper-pagination-bullets]:mx-auto [&_.swiper-horizontal>.swiper-pagination-bullets]:w-fit [&_.swiper-horizontal>.swiper-pagination-bullets]:max-w-[90%] [&_.swiper-horizontal>.swiper-pagination-bullets]:pt-4',
+        '[&_.swiper-pagination-bullets.swiper-pagination-horizontal]:relative [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:top-6 [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:mx-auto [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:w-fit [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:max-w-[90%] [&_.swiper-pagination-bullets.swiper-pagination-horizontal]:pt-4',
+        '[html[data-theme="light"]_&_.swiperButtonPrev]:invert [html[data-theme="light"]_&_.swiperButtonPrev]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonPrev]:transition-opacity [html[data-theme="light"]_&_.swiperButtonPrev]:duration-300',
+        '[html[data-theme="light"]_&_.swiperButtonNext]:invert [html[data-theme="light"]_&_.swiperButtonNext]:hue-rotate-[24deg] [html[data-theme="light"]_&_.swiperButtonNext]:transition-opacity [html[data-theme="light"]_&_.swiperButtonNext]:duration-300',
+        testimonialClass
+      )}
+      id={sectionId || 'testimonials'}
+    >
+      {(heading || subHeader) && (
+        <div className="mb-10 text-center">
+          {subHeader && <h6 className="text-lg font-semibold">{subHeader}</h6>}
+          {heading && swiperReady && (
+            <RichText
+              className="mb-6 text-2xl font-bold md:text-3xl"
+              data={heading}
+              suppressContentEditableWarning
+              suppressHydrationWarning
+            />
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        {swiperReady && (
+          <Swiper
+            modules={[Navigation, Pagination]}
+            pagination={showPagination ? { clickable: true } : undefined}
+            navigation={
+              showNavigation
+                ? {
+                    nextEl: `.next-${uniqueId}`,
+                    prevEl: `.prev-${uniqueId}`
+                  }
+                : undefined
+            }
+            speed={carouselSpeed}
+            spaceBetween={20}
+            slidesPerView={1}
+            loop={testimonials.length > 1}
+            breakpoints={{
+              768: {
+                slidesPerView: slidesPerViewTablet
+              },
+              1024: {
+                slidesPerView: slidesPerViewDesktop
+              }
+            }}
+            className="swiper-container w-full lg:max-w-full"
+          >
+            {testimonials.map((testimonial) => (
+              <SwiperSlide key={testimonial.id} className="swiper-slide card-bottom-lit">
+                <motion.div
+                  initial={{ opacity: 0, y: 30 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.4 }}
+                  className="m-0 mt-8 flex items-center gap-0 rounded-sm bg-card px-0 shadow-xl"
+                >
+                  <div className="flex-1 p-0">
+                    <div className="relative pb-8 pt-8">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="256.721"
+                        height="208.227"
+                        viewBox="0 0 256.721 208.227"
+                        className="absolute -left-2 -top-10 pt-8 opacity-40"
+                      >
+                        <path
+                          d="M-23.723-530.169v97.327H-121.05v-68.7q0-40.076,13.359-73.472T-62.845-639.9l36.259,28.625Q-63.8-570.244-68.57-530.169Zm158.395,0v97.327H37.345v-68.7q0-40.076,13.359-73.472T95.55-639.9l36.259,28.625Q94.6-570.244,89.825-530.169Z"
+                          transform="translate(121.55 640.568)"
+                          fill="#fff"
+                          stroke="#fff"
+                          strokeWidth="1"
+                          opacity="0.25"
+                        />
+                      </svg>
+                      s
+                      <div className="container p-4 pt-8">
+                        {swiperReady && (
+                          <RichText
+                            suppressContentEditableWarning
+                            suppressHydrationWarning
+                            data={testimonial.content}
+                            className={cn(
+                              'testimonialContent min-h-fit max-h-[50vh] text-stone-200 dark:text-stone-200 max-w-none overflow-hidden px-0 md:px-6',
+                              '[&_.customSpan]:text-base [&_.customSpan]:leading-8 [&_.customSpan]:brightness-125',
+                              '[&_p]:text-base [&_p]:leading-8 [&_p]:brightness-125',
+                              'max-md:max-h-fit max-md:[&_.customSpan]:text-base max-md:[&_.customSpan]:leading-normal'
+                            )}
+                            enableGutter={false}
+                            enableProse={false}
+                          />
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex items-center pb-4 shadow-xl">
+                      <div className="bg-4 dark:bg-1 p-4 shadow-xl">
+                        <div className="color-base">
+                          <div className="block">
+                            {swiperReady && (
+                              <RichText
+                                suppressContentEditableWarning
+                                suppressHydrationWarning
+                                enableGutter={false}
+                                enableProse={false}
+                                className="testimonial-clientname text-lg font-semibold text-white"
+                                data={testimonial.clientName}
+                              />
+                            )}
+                          </div>
+                        </div>
+
+                        <div className="color-base font-semibold">
+                          <div className="block">
+                            {swiperReady && (
+                              <RichText
+                                suppressContentEditableWarning
+                                suppressHydrationWarning
+                                data={testimonial.company}
+                                enableGutter={false}
+                                enableProse={false}
+                                className="testimonial-company mt-1 origin-left scale-90 text-xs text-white/80"
+                              />
+                            )}
+                          </div>
+                        </div>
+                      </div>
+
+                      {testimonial.companyLogo?.url && (
+                        <div className="testimonialLogo relative left-2 top-2 ml-auto flex h-auto w-40 items-center justify-center pr-8 opacity-90">
+                          {/* <Media
+                            resource={testimonial.companyLogo}
+                            className="max-h-32 max-w-32 object-contain"
+                          /> */}
+
+                          <Image
+                            src={testimonial.companyLogo.url}
+                            alt={''}
+                            fill
+                            sizes="40px"
+                            className="object-cover object-top"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </motion.div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
+      </div>
+
+      {showNavigation && (
+        <div className="swiperNavArrows relative top-[-50px] flex justify-center">
+          <button
+            className={cn(
+              `swiperButtonPrev swiper-button-prev prev-${uniqueId}`,
+              'z-[100] h-8 w-10 translate-y-[80%] rotate-[180deg] cursor-pointer rounded-none p-2 opacity-100 transition-all duration-300',
+              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30'
+            )}
+          >
+            <span className="ti-arrow-left relative left-2" />
+          </button>
+
+          <button
+            className={cn(
+              `swiperButtonNext swiper-button-next next-${uniqueId}`,
+              'z-[100] h-8 w-10 translate-y-[80%] rotate-[180deg]  cursor-pointer rounded-none p-2 opacity-100 transition-all duration-300',
+              'bg-transparent hover:border-white/50 hover:bg-white/5 disabled:cursor-not-allowed disabled:opacity-30'
+            )}
+          >
+            <span className="ti-arrow-right relative right-2" />
+          </button>
+        </div>
+      )}
+    </section>
+  )
+}

package/templates/blocks/DD-Testim/README.md

@@ -0,0 +1,4 @@
+# DD-Testim
+
+Portable first-pass conversion of `TestimonialBlock` from ROUND-TWO-CONVERSION. Project-specific roots and nested unconverted block dependencies were intentionally replaced with local rendering so the template can install into a clean Payload project.
+

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

@@ -0,0 +1,101 @@
+import { Block } from 'payload'
+
+export const DDTestim: Block = {
+  slug: 'DD-Testim',
+  interfaceName: 'DDTestim',
+  labels: {
+    singular: 'Testimonial Carousel',
+    plural: 'Testimonial Carousels',
+  },
+  fields: [
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'sectionId',
+          label: 'Section ID',
+          type: 'text',
+          admin: {
+            width: '50%',
+            description: 'Set the anchor ID for this section (e.g., "testimonials").',
+          },
+        },
+        {
+          name: 'testimonialClass',
+          label: 'Container Class Name',
+          type: 'text',
+          admin: {
+            width: '50%',
+            description: 'Optional extra Tailwind/custom classes for section wrapper.',
+          },
+        },
+      ],
+    },
+    {
+      name: 'testimonials',
+      type: 'relationship',
+      relationTo: 'testimonials',
+      hasMany: true,
+      required: false,
+      label: 'Select Testimonials',
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'showNavigation',
+          type: 'checkbox',
+          hidden: false,
+          label: 'Show Navigation Arrows',
+          defaultValue: true,
+          admin: {
+            width: '50%',
+          },
+        },
+        {
+          name: 'showPagination',
+          type: 'checkbox',
+          label: 'Show Pagination Dots',
+          defaultValue: true,
+          admin: {
+            width: '50%',
+          },
+        },
+      ],
+    },
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'slidesPerViewTablet',
+          type: 'number',
+          label: 'Slides Per View (Tablet ≥768px)',
+          defaultValue: 2,
+          admin: {
+            width: '50%',
+            description: 'How many slides visible on tablet screens (default 2).',
+          },
+        },
+        {
+          name: 'slidesPerViewDesktop',
+          type: 'number',
+          label: 'Slides Per View (Desktop ≥1024px)',
+          defaultValue: 3,
+          admin: {
+            width: '50%',
+            description: 'How many slides visible on desktop screens (default 3).',
+          },
+        },
+      ],
+    },
+    {
+      name: 'carouselSpeed',
+      type: 'number',
+      label: 'Carousel Speed (ms)',
+      defaultValue: 1000,
+      admin: {
+        description: 'Transition speed in milliseconds (default 1000ms).',
+      },
+    },
+  ],
+}