blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/Button47/manifest.json

@@ -0,0 +1,105 @@
+{
+  "type": "block",
+  "name": "Button47",
+  "label": "Button 47",
+  "sourceName": "Button47",
+  "portableName": "Button47",
+  "slug": "button47",
+  "version": "0.0.1",
+  "source": {
+    "repo": "Hadizainal/Dusted-Payload-Blocks",
+    "originalPath": "CLI-TestGround/dusted-blocks-demo/src/blocks/Button47",
+    "originalSlug": "button47",
+    "originalConfigExport": "Button47",
+    "originalComponentExport": "Button47",
+    "originalInterfaceName": "Button47Block"
+  },
+  "files": [
+    {
+      "from": "Component.tsx",
+      "to": "src/blocks/Button47/Component.tsx"
+    },
+    {
+      "from": "config.ts",
+      "to": "src/blocks/Button47/config.ts"
+    },
+    {
+      "from": "link.ts",
+      "to": "src/blocks/Button47/link.ts"
+    },
+    {
+      "from": "styles.module.scss",
+      "to": "src/blocks/Button47/styles.module.scss"
+    }
+  ],
+  "dependencies": [
+    "@mui/material",
+    "lucide-react",
+    "motion",
+    "sass"
+  ],
+  "sharedFiles": [],
+  "requiredProjectFiles": [
+    {
+      "path": "src/payload-types.ts",
+      "reason": "Component and link resolver use generated Button47 types."
+    },
+    {
+      "path": "src/utilities/ui.ts",
+      "reason": "Component imports cn from @/utilities/ui."
+    },
+    {
+      "path": "src/fields/link.ts",
+      "reason": "Payload config uses the shared link field."
+    },
+    {
+      "path": "src/fields/lucide-icon-picker/field.ts",
+      "reason": "Payload config uses the Lucide icon picker field."
+    }
+  ],
+  "optionalProjectFiles": [],
+  "collectionRegistration": {
+    "enabled": true,
+    "collections": [
+      "Pages",
+      "Posts"
+    ]
+  },
+  "renderBlocksRegistration": {
+    "enabled": true
+  },
+  "renderBlocksBehavior": {
+    "wrapperless": false
+  },
+  "pageRouteIntegration": {
+    "required": false,
+    "manualSteps": []
+  },
+  "manual": [
+    "Register Button47 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register button47 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "manualSteps": [
+    "Register Button47 in Pages/Posts block arrays if automatic registration was skipped.",
+    "Register button47 in RenderBlocks if automatic registration was skipped.",
+    "Run payload generate:types after schema changes.",
+    "Run payload generate:importmap if admin/component imports changed."
+  ],
+  "patchTargets": {
+    "blockConfigRegistration": {
+      "description": "Installer can register Button47 from @/blocks/Button47/config."
+    },
+    "renderBlocksRegistration": {
+      "description": "Installer can register button47 with component export Button47."
+    }
+  },
+  "notes": [
+    "Promoted from the verified Dusted Blocks demo implementation.",
+    "Installer preserves existing destination files and reports project requirements before writing."
+  ],
+  "exportName": "Button47",
+  "componentExportName": "Button47",
+  "interfaceName": "Button47Block"
+}

package/templates/blocks/Button47/styles.module.scss

@@ -0,0 +1,75 @@
+.root {
+  --button47-frame: #a3e635;
+  --button47-ghost-bg: #1e1b4b;
+  --button47-ghost-hover: #312e81;
+  --button47-ghost-text: #d9f99d;
+  --button47-focus: #a3e635;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-family: inherit;
+}
+:global([data-theme='light']) .root {
+  --button47-frame: #4338ca;
+  --button47-focus: #4338ca;
+  --button47-ghost-bg: #eef2ff;
+  --button47-ghost-hover: #e0e7ff;
+  --button47-ghost-text: #3730a3;
+}
+
+.focusFrame {
+  max-width: 100%;
+  min-width: 0;
+  border-radius: 4px;
+  corner-shape: squircle;
+  &:has(a:focus-visible) {
+    outline: 3px solid var(--button47-focus);
+    outline-offset: 4px;
+  }
+}
+.bevel,
+.button {
+  clip-path: polygon(
+    0 0,
+    calc(100% - 16px) 0,
+    100% 16px,
+    100% 100%,
+    16px 100%,
+    0 calc(100% - 16px)
+  );
+  transition:
+    background-color 0.3s,
+    border-color 0.3s,
+    clip-path 0.3s,
+    box-shadow 0.3s;
+}
+.bevel {
+  padding: 0;
+  border: 1px outset;
+  border-radius: 4px;
+  corner-shape: squircle;
+  &:hover {
+    clip-path: polygon(
+      0 0,
+      calc(100% - 14px) 0,
+      100% 14px,
+      100% 100%,
+      14px 100%,
+      0 calc(100% - 14px)
+    );
+  }
+}
+.button {
+  border-radius: 4px;
+  corner-shape: squircle;
+  overflow-wrap: anywhere;
+  text-decoration: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+  .root *,
+  .root *::before,
+  .root *::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}

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

@@ -10,10 +10,30 @@ import { cn } from '@/utilities/ui'
 
 type AccordionButtonVariant = 'default' | 'destructive' | 'v1' | 'v2' | 'v3' | 'v5' | 'v7'
 
+type AccordionButtonVariantName =
+  | 'default'
+  | 'destructive'
+  | 'offset_shadow'
+  | 'gradient_sheen'
+  | 'contrast_sweep'
+  | 'reveal_panel'
+  | 'underline_accent'
+
+const buttonVariantNames: Record<AccordionButtonVariant, AccordionButtonVariantName> = {
+  default: 'default',
+  destructive: 'destructive',
+  v1: 'offset_shadow',
+  v2: 'gradient_sheen',
+  v3: 'contrast_sweep',
+  v5: 'reveal_panel',
+  v7: 'underline_accent',
+}
+
 const rippleCSS = `
   .accordion-ripple-container { position: relative; overflow: hidden; }
   .accordion-ripple-effect { position: absolute; border-radius: 50%; transform: scale(0); animation: accordion-ripple-animation 600ms linear; pointer-events: none; z-index: 10; }
   @keyframes accordion-ripple-animation { to { transform: scale(4); opacity: 0; } }
+  [data-theme="light"] [data-button-variant="destructive"] { background-color: rgba(239,68,68,1) !important;}
 `
 
 const buttonAccordVariants = cva(
@@ -23,26 +43,27 @@ const buttonAccordVariants = cva(
     variants: {
       variant: {
         default:
-          'ripple-default bg-primary text-stone-200 dark:text-stone-900 hover:shadow-md hover:color-accent will-change-transform',
+          'ripple-default border border-stone-300/10 bg-stone-100 text-stone-800 dark:text-stone-900 hover:bg-stone-200 hover:shadow-md hover:color-accent will-change-transform',
         destructive:
-          'ripple-destructive bg-red-950/50 border border-red-500/50 text-stone-200 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.6),inset_0_0_12px_rgba(239,68,68,0.8)] dark:text-stone-200 text-destructive-foreground hover:bg-destructive/90 will-change-transform',
-        v1: 'ripple-v1 border-[0.5px] text-stone-200 dark:text-stone-200 rounded-sm bg-transparent duration-200 hover:bg-primary shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none border-stone-800 hover:text-zinc-200 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_var(--border-color)] active:dark:shadow-none dark:bg-zinc-950',
-        v2: 'ripple-v2 text-stone-200 dark:text-stone-900 group relative rounded-none overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg bg-gradient-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:bg-gradient-to-tr dark:from-neutral-950 dark:to-neutral-900 dark:hover:shadow-zinc-700/30',
-        v3: 'ripple-v3 text-stone-200 dark:text-stone-900 relative overflow-hidden group ease-out bg-zinc-900 hover:bg-gradient-to-r hover:from-zinc-800 hover:to-zinc-700 dark:bg-zinc-50 dark:hover:from-zinc-50 dark:hover:to-zinc-100',
-        v5: 'ripple-v5 text-stone-200 dark:text-stone-200 relative overflow-hidden border shadow group invert-[1] border-stone-300 bg-zinc-50 dark:border-stone-700 dark:bg-zinc-950',
-        v7: "ripple-v7 text-stone-200 dark:text-stone-200 relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-[-2px] after:left-0 after:h-0.5 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-zinc-50 after:bg-zinc-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100"
-      }
-    }
-  }
+          'ripple-destructive border border-red-700 bg-red-100 text-red-950 shadow-[inset_0_0_0_1px_rgb(185_28_28/0.45),inset_0_0_12px_rgb(185_28_28/0.25)] hover:bg-red-200 dark:border-red-500/50 dark:bg-red-950/50 dark:text-stone-200 dark:shadow-[inset_0_0_0_1px_rgba(239,68,68,0.6),inset_0_0_12px_rgba(239,68,68,0.8)] dark:hover:bg-red-900/80 will-change-transform',
+        v1: 'ripple-v1 border-[0.5px] border-stone-800 bg-stone-50 text-stone-800 duration-200 hover:bg-stone-800 hover:text-stone-50 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] active:shadow-none dark:border-stone-600 dark:bg-zinc-950 dark:text-stone-200 dark:shadow-[3px_3px_0px_0px_var(--border-color)] active:dark:shadow-none',
+        v2: 'ripple-v2 group relative overflow-hidden rounded-none border border-stone-300/10 bg-stone-100 text-stone-800 ease-in-out hover:scale-100 hover:bg-stone-200 hover:shadow-lg hover:shadow-stone-400/30 dark:bg-gradient-to-tr dark:from-neutral-950 dark:to-neutral-900 dark:text-stone-100 dark:hover:shadow-zinc-700/30',
+        v3: 'ripple-v3 group relative overflow-hidden border border-stone-300/10 bg-stone-100 text-stone-800 ease-out hover:bg-gradient-to-r hover:from-stone-100 hover:to-stone-200 dark:bg-zinc-50 dark:text-stone-900 dark:hover:from-zinc-50 dark:hover:to-zinc-100',
+        v5: 'ripple-v5 group relative overflow-hidden border border-stone-300/10 bg-stone-50 text-stone-800 shadow dark:border-stone-700 dark:bg-zinc-950 dark:text-stone-200',
+        v7: "ripple-v7 text-stone-800 dark:text-stone-200 relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-[-2px] after:left-0 after:h-1 after:w-full after:translate-y-[3px] after:rounded-full after:dark:bg-indigo-50 after:bg-indigo-800 after:opacity-0 after:duration-300 after:content-[''] hover:after:-translate-y-1 hover:after:opacity-100",
+      },
+    },
+  },
 )
 
 interface ButtonAccordProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonAccordVariants> {}
 
 const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(function ButtonAccord(
   { className, variant, onClick, children, ...props },
-  ref
+  ref,
 ) {
   useEffect(() => {
     const style = document.createElement('style')
@@ -60,7 +81,8 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
     ripple.style.left = `${event.clientX - rect.left}px`
     ripple.style.top = `${event.clientY - rect.top}px`
     ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`
-    ripple.style.backgroundColor = variant === 'destructive' ? 'rgba(255, 0, 0, 0.3)' : 'rgba(139, 92, 246, 0.45)'
+    ripple.style.backgroundColor =
+      variant === 'destructive' ? 'rgba(255, 0, 0, 0.3)' : 'rgba(139, 92, 246, 0.45)'
 
     button.appendChild(ripple)
     ripple.addEventListener('animationend', () => ripple.remove())
@@ -70,7 +92,9 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
   const content =
     variant === 'v5' ? (
       <>
-        <span className="absolute inset-0 !border-none rounded-none flex items-center justify-center size-full duration-700 -translate-x-full group-hover:translate-x-0 bg-zinc-800 dark:bg-zinc-100 text-zinc-100 dark:text-zinc-100" />
+        <span className="absolute inset-0 !border-none rounded-none flex size-full -translate-x-full items-center justify-center bg-stone-800 text-stone-50 duration-700 group-hover:translate-x-0 dark:bg-zinc-100 dark:text-zinc-900">
+          {children}
+        </span>
         <span className="absolute flex items-center justify-center w-full h-full transition-all duration-500 ease-out transform group-hover:translate-x-full">
           {children}
         </span>
@@ -95,6 +119,7 @@ const ButtonAccord = React.forwardRef<HTMLButtonElement, ButtonAccordProps>(func
     <button
       ref={ref}
       onClick={handleClick}
+      data-button-variant={buttonVariantNames[variant || 'default']}
       className={cn(buttonAccordVariants({ variant }), className)}
       {...props}
     >
@@ -140,12 +165,9 @@ export interface AccordionBlockProps {
   accordionButtonVariant?: AccordionButtonVariant
 }
 
-export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: AccordionButtonVariant }> = ({
-  title,
-  content,
-  accordionId,
-  buttonVariant = 'v2'
-}) => {
+export const AccordionItem: React.FC<
+  AccordionItemData & { buttonVariant?: AccordionButtonVariant }
+> = ({ title, content, accordionId, buttonVariant = 'v2' }) => {
   const [isOpen, setIsOpen] = useState(false)
   const [height, setHeight] = useState('0px')
   const contentRef = useRef<HTMLDivElement>(null)
@@ -162,7 +184,7 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
       className={`accordion-item max-w-full ${isOpen ? 'mb-4 shadow-2xl' : 'mb-0 shadow-md'}`}
       id={accordionId}
     >
-      <div className="accordion-title-button shadow-lg backdrop-blur-lg">
+      <div className="accordion-title-button border border-stone-300/10 bg-stone-100/80 shadow-lg backdrop-blur-lg dark:border-stone-800 dark:bg-stone-950/20">
         <ButtonAccord
           suppressHydrationWarning
           suppressContentEditableWarning
@@ -178,29 +200,23 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
             <RichText className={TITLE_CLS} data={title as any} enableGutter={false} />
           </div>
           {isOpen ? (
-            <ChevronUp
-              className="chevron-up-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
-              style={{ color: 'var(--active)' }}
-            />
+            <ChevronUp className="chevron-up-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 text-stone-900 dark:text-stone-100 mix-blend-difference" />
           ) : (
-            <ChevronDown
-              className="chevron-down-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 color-accent dark:text-[var(--color-alt)]"
-              style={{ color: 'var(--active)' }}
-            />
+            <ChevronDown className="chevron-down-icon fixed right-2 top-1 mt-3 h-6 w-6 opacity-50 text-stone-900 dark:text-stone-100 mix-blend-difference" />
           )}
         </ButtonAccord>
-        <AccordionSeparator className="accordion-separator dd-bg-50" />
+        <AccordionSeparator className="accordion-separator bg-stone-300 dark:bg-border" />
         <div
           ref={contentRef}
           id={`accordion-content-${accordionId}`}
           style={{
             height,
-            transition: 'height 0.3s ease'
+            transition: 'height 0.3s ease',
           }}
-          className="accordion-content-wrapper overflow-hidden"
+          className="accordion-content-wrapper overflow-hidden border-x border-b border-stone-300/10 bg-stone-50 dark:border-stone-800 dark:bg-transparent"
         >
           <RichText
-            className="p-4 color-text bg-[rgba(159,159,159,0.18)]"
+            className="bg-stone-100/80 p-4 text-stone-700 dark:bg-[rgba(159,159,159,0.18)] dark:text-stone-200"
             data={content as any}
             enableGutter={false}
           />
@@ -210,9 +226,12 @@ export const AccordionItem: React.FC<AccordionItemData & { buttonVariant?: Accor
   )
 }
 
-export const DDAccordion: React.FC<AccordionBlockProps> = ({ items, accordionButtonVariant = 'v2' }) => {
+export const DDAccordion: React.FC<AccordionBlockProps> = ({
+  items,
+  accordionButtonVariant = 'v2',
+}) => {
   return (
-    <div className="accordion-container max-w-full">
+    <div className="accordion-container mx-auto my-6 w-full max-w-5xl space-y-3 px-4">
       {items.map((item, index) => (
         <AccordionItem
           key={item.accordionId || `accordion-item-${index}`}
@@ -226,4 +245,4 @@ export const DDAccordion: React.FC<AccordionBlockProps> = ({ items, accordionBut
   )
 }
 
-export default DDAccordion
+export default DDAccordion

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

@@ -1,34 +1,32 @@
-import type { Block } from 'payload'
-
-import { BlocksFeature } from '@payloadcms/richtext-lexical'
-
-import { defaultLexical } from '@/fields/defaultLexical'
-
-import { DDBanner } from '@/blocks/DD-Banner/config'
-import { Code } from '@/blocks/Code/config'
-import { MediaBlock } from '@/blocks/MediaBlock/config'
-import { DDIconButton } from '../DD-IconButton/config'
-import { DDAnimText } from '@/blocks/DD-AnimText/config'
-
-export const DDAccordion: Block = {
-  slug: 'DD-Accordion',
-  interfaceName: 'DDAccordion',
-  labels: {
-    singular: 'Accordion Block',
-    plural: 'Accordion Blocks'
-  },
-  fields: [
-    {
-      name: 'accordionId',
-      type: 'text',
-      hidden: true,
-      label: 'Accordian ID',
-      required: false,
-      admin: {
-        description: 'Unique ID for the accordian block',
-        width: '50%'
-      }
-    },
+import type { Block } from 'payload'
+
+import { BlocksFeature } from '@payloadcms/richtext-lexical'
+import { createDefaultLexical } from '@/fields/defaultLexical'
+
+import { DDBanner } from '@/blocks/DD-Banner/config'
+import { Code } from '@/blocks/Code/config'
+import { MediaBlock } from '@/blocks/MediaBlock/config'
+import { DDAnimText } from '@/blocks/DD-AnimText/config'
+
+export const DDAccordion: Block = {
+  slug: 'DD-Accordion',
+  interfaceName: 'DDAccordion',
+  labels: {
+    singular: 'Accordion Block',
+    plural: 'Accordion Blocks',
+  },
+  fields: [
+    {
+      name: 'accordionId',
+      type: 'text',
+      hidden: true,
+      label: 'Accordian ID',
+      required: false,
+      admin: {
+        description: 'Unique ID for the accordian block',
+        width: '50%',
+      },
+    },
     {
       name: 'accordionButtonVariant',
       type: 'select',
@@ -41,33 +39,47 @@ export const DDAccordion: Block = {
         { label: 'Gradient Sheen', value: 'v2' },
         { label: 'Contrast Sweep', value: 'v3' },
         { label: 'Reveal Panel', value: 'v5' },
-        { label: 'Underline Accent', value: 'v7' }
+        { label: 'Underline Accent', value: 'v7' },
       ],
       admin: {
-        description: 'Selects the local ButtonAccord visual treatment for every accordion title button.',
-        width: '50%'
-      }
-    },    {
-      name: 'items',
-      type: 'array',
-      label: 'Accordion Items',
-      required: true,
-      fields: [
-        {
-          name: 'title',
-          label: 'Accordian Title',
-          type: 'richText',
-          editor: defaultLexical,
-          required: false
-        },
-        {
-          name: 'content',
-          label: 'Accordian Content',
-          type: 'richText',
-          editor: defaultLexical,
-          required: false
-        }
-      ]
-    }
-  ]
-}
+        description:
+          'Selects the local ButtonAccord visual treatment for every accordion title button.',
+        width: '50%',
+      },
+    },
+    {
+      name: 'items',
+      type: 'array',
+      label: 'Accordion Items',
+      required: true,
+      fields: [
+        {
+          name: 'title',
+          label: 'Accordian Title',
+          type: 'richText',
+          editor: createDefaultLexical({
+            features: [
+              BlocksFeature({
+                blocks: [DDBanner, Code, MediaBlock, DDAnimText], // No Buttons in Button(Title)
+              }),
+            ],
+          }),
+          required: false,
+        },
+        {
+          name: 'content',
+          label: 'Accordian Content',
+          type: 'richText',
+          editor: createDefaultLexical({
+            features: [
+              BlocksFeature({
+                blocks: [DDBanner, Code, MediaBlock, DDAnimText], // No Buttons in Button(Title)
+              }),
+            ],
+          }),
+          required: false,
+        },
+      ],
+    },
+  ],
+}