blocks-dusted 0.1.11 → 0.1.13

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

@@ -1,43 +1,46 @@
-'use client'
-
-import * as React from 'react'
-import ButtonDustedFluid, {
-  type ButtonDustedFluidLinkType
-} from '@/components/ui/button-dusted-fluid'
-import { cn } from '@/utilities/ui'
-
-export type ButtonECDustedFluidProps = {
-  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5'
-  label?: string
-  className?: string
-  wrapperClassName?: string
-  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
-  iconPosition?: 'before' | 'after'
-  iconName?: string
-  link?: ButtonDustedFluidLinkType | null
-}
-
-export function DDFluidBtn({
-  variant = 'v1',
-  label = 'BUTTON',
-  className,
-  wrapperClassName,
-  displayMode,
-  iconPosition,
-  iconName,
-  link
-}: ButtonECDustedFluidProps) {
-  return (
-    <div className={wrapperClassName}>
-      <ButtonDustedFluid
-        variant={variant}
-        label={label}
-        className={cn('dustedfluid-button', className)}
-        displayMode={displayMode}
-        iconPosition={iconPosition}
-        iconName={iconName}
-        link={link}
-      />
-    </div>
-  )
-}
+'use client'
+
+import * as React from 'react'
+import ButtonDustedFluid, {
+  type ButtonDustedFluidLinkType,
+} from '@/components/ui/button-dusted-fluid'
+import { cn } from '@/utilities/ui'
+
+export type ButtonECDustedFluidProps = {
+  variant?: 'v1' | 'v2' | 'v3' | 'v4' | 'v5'
+  label?: string
+  className?: string
+  wrapperClassName?: string
+  displayMode?: 'iconWithLabel' | 'iconOnly' | 'labelOnly'
+  iconPosition?: 'before' | 'after'
+  iconName?: string
+  link?: ButtonDustedFluidLinkType | null
+}
+
+export function DDFluidBtn({
+  variant = 'v1',
+  label = 'BUTTON',
+  className,
+  wrapperClassName,
+  displayMode,
+  iconPosition,
+  iconName,
+  link,
+}: ButtonECDustedFluidProps) {
+  return (
+    <div className={cn('flex justify-center', wrapperClassName)}>
+      <ButtonDustedFluid
+        variant={variant}
+        label={label}
+        className={cn(
+          'dustedfluid-button !rounded-full font-semibold text-stone-900 dark:text-stone-100',
+          className,
+        )}
+        displayMode={displayMode}
+        iconPosition={iconPosition}
+        iconName={iconName}
+        link={link}
+      />
+    </div>
+  )
+}

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

@@ -1,149 +1,150 @@
-'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
+'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)
+  const connectedXOffset = Math.min(xOffset, 48)
+
+  // 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 flex w-full justify-center ${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="gooey-info-stage relative my-16 inline-flex items-center justify-center"
+        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: connectedXOffset - 8,
+          }}
+          animate={{
+            opacity: open ? 1 : 0,
+            scale: open ? 1 : 0.85,
+            x: open ? connectedXOffset : connectedXOffset - 8,
+          }}
+          transition={{ type: 'spring', stiffness: 250, damping: 22 }}
+          onHoverStart={() => setOpen(true)}
+          onHoverEnd={() => setOpen(false)}
+          className={`gooey-info-panel 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