blocks-dusted 0.1.11 → 0.1.13

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

@@ -47,21 +47,21 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
   customClassName,
   animate = false,
   maxWidth,
-  padding = 'none'
+  padding = 'none',
 }) => {
   // Gap mappings
   const gapClasses = {
     none: 'gap-0',
     small: 'gap-2',
     medium: 'gap-3',
-    large: 'gap-4'
+    large: 'gap-4',
   }
 
   // Layout mappings
   const layoutClasses = {
     row: 'flex-row flex-nowrap overflow-x-auto',
     column: 'flex-col',
-    'row-wrap': 'flex-row flex-wrap'
+    'row-wrap': 'flex-row flex-wrap',
   }
 
   // Alignment mappings
@@ -69,7 +69,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     start: 'justify-start',
     center: 'justify-center',
     end: 'justify-end',
-    'space-between': 'justify-between'
+    'space-between': 'justify-between',
   }
 
   // Padding mappings
@@ -77,7 +77,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     none: '',
     small: 'p-2',
     medium: 'p-4',
-    large: 'p-6'
+    large: 'p-6',
   }
 
   // Helper to determine if a color is a Tailwind class or CSS color
@@ -137,9 +137,9 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     visible: {
       opacity: 1,
       transition: {
-        staggerChildren: 0.1
-      }
-    }
+        staggerChildren: 0.1,
+      },
+    },
   }
 
   const chipVariants: Variants = {
@@ -149,9 +149,9 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
       y: 0,
       transition: {
         duration: 0.4,
-        ease: 'easeOut'
-      }
-    }
+        ease: 'easeOut',
+      },
+    },
   }
 
   const ChipElement = ({ chip, index }: { chip: Chip; index: number }): React.ReactElement => {
@@ -165,7 +165,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
         <span className="relative z-10 mx-auto flex max-w-md items-center bg-gradient-to-r from-transparent via-white/80 via-50% to-transparent bg-clip-text bg-no-repeat text-neutral-400/70 [background-position:0_0] [background-size:var(--shiny-width)_100%] [--shiny-width:100px] select-none">
           <span className="flex items-center text-white">
             {/* {chip.icon && (
-              <span className="chip-icon mr-2 inline-flex h-3.5 w-3.5 items-center justify-center text-[10px] leading-none">
+              <span className="chip-icon mr-2 inline-flex h-3.5 w-3.5 items-center justify-center text-xs leading-none">
                 {chip.icon}
               </span>
             )} */}
@@ -180,7 +180,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
       '[&[href]]:cursor-pointer [&[href]]:no-underline',
       hoverEffect &&
         'hover:-translate-y-0.5 hover:shadow-[0_0_26px_rgba(186,85,211,0.35)] active:translate-y-0',
-      getChipClasses(chip)
+      getChipClasses(chip),
     )
 
     const chipElement = chip.link ? (
@@ -216,7 +216,7 @@ export const ChipBlockComponent: React.FC<ChipBlockProps> = ({
     gapClasses[gap],
     alignmentClasses[alignment],
     paddingClasses[padding],
-    customClassName
+    customClassName,
   )
 
   if (animate) {

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

@@ -1,256 +1,255 @@
-'use client'
-
-import React, { Fragment, useState } from 'react'
-import { Check, Minus, Plus } from 'lucide-react'
-
-type TierKey = 'free' | 'pro' | 'team'
-
-type CellValue = boolean | string
-
-interface FeatureRow {
-  id?: string | null
-  label?: string | null
-  free?: CellValue | null
-  pro?: CellValue | null
-  team?: CellValue | null
-}
-
-interface FeatureGroup {
-  id?: string | null
-  group?: string | null
-  rows?: FeatureRow[] | null
-}
-
-interface TierHeader {
-  key: TierKey
-  label: string
-  highlight: boolean
-}
-
-interface StudioComparisonTableProps {
-  eyebrow?: string | null
-  heading?: string | null
-  defaultOpen?: boolean | null
-  groups?: FeatureGroup[] | null
-  sectionId?: string | null
-  customCSS?: string | null
-  [key: string]: unknown
-}
-
-const DEFAULT_GROUPS: FeatureGroup[] = [
-  {
-    group: 'Components & Templates',
-    rows: [
-      { label: 'Free components', free: true, pro: true, team: true },
-      { label: 'Premium components', free: false, pro: '120+', team: '120+' },
-      { label: 'Free templates', free: true, pro: true, team: true },
-      { label: 'Premium templates', free: false, pro: '24+', team: '24+' },
-      { label: 'Payload CMS v3 blocks', free: false, pro: true, team: true },
-      { label: 'Figma source files', free: false, pro: true, team: true },
-    ],
-  },
-  {
-    group: 'Licensing',
-    rows: [
-      { label: 'Personal use', free: true, pro: true, team: true },
-      {
-        label: 'Commercial projects',
-        free: false,
-        pro: '1 project',
-        team: 'Unlimited',
-      },
-      { label: 'White-label license', free: false, pro: false, team: true },
-      { label: 'Client resale rights', free: false, pro: false, team: true },
-    ],
-  },
-  {
-    group: 'Updates & Access',
-    rows: [
-      { label: 'Lifetime updates', free: true, pro: true, team: true },
-      {
-        label: 'Early access to new releases',
-        free: false,
-        pro: true,
-        team: true,
-      },
-      { label: 'Download source files', free: false, pro: true, team: true },
-    ],
-  },
-  {
-    group: 'Support',
-    rows: [
-      { label: 'Community Discord', free: true, pro: true, team: true },
-      { label: 'Priority email support', free: false, pro: true, team: true },
-      { label: 'Dedicated Slack channel', free: false, pro: false, team: true },
-      { label: '1-on-1 onboarding call', free: false, pro: false, team: true },
-      { label: 'SLA support guarantee', free: false, pro: false, team: true },
-    ],
-  },
-  {
-    group: 'Team',
-    rows: [
-      { label: 'Team seats', free: '1', pro: '1', team: 'Up to 10' },
-      {
-        label: 'Invoice & billing management',
-        free: false,
-        pro: false,
-        team: true,
-      },
-      {
-        label: 'Custom Payload CMS schemas',
-        free: false,
-        pro: false,
-        team: true,
-      },
-    ],
-  },
-]
-
-function Cell({ value, highlight }: { value: CellValue | null | undefined; highlight: boolean }) {
-  if (typeof value === 'string') {
-    return (
-      <span
-        className={`text-sm font-medium ${highlight ? 'text-indigo-900 dark:text-lime-400' : 'text-stone-700 dark:text-stone-300'}`}
-      >
-        {value}
-      </span>
-    )
-  }
-
-  if (value === true) {
-    return (
-      <div
-        className={`mx-auto flex h-5 w-5 items-center justify-center rounded-full ${
-          highlight ? 'bg-stone-900' : 'bg-stone-800'
-        }`}
-        style={{ cornerShape: 'squircle' } as React.CSSProperties}
-      >
-        <Check className={`h-3 w-3 ${highlight ? 'text-stone-50' : 'text-stone-300'}`} />
-      </div>
-    )
-  }
-
-  return (
-    <div className="mx-auto flex h-5 w-5 items-center justify-center opacity-30">
-      <Minus className="h-4 w-4 text-stone-600" />
-    </div>
-  )
-}
-
-export function DDComparisonTable({
-  eyebrow = 'Full breakdown',
-  heading = 'Compare all features',
-  defaultOpen = true,
-  groups,
-  sectionId,
-}: StudioComparisonTableProps) {
-  const [open, setOpen] = useState(defaultOpen !== false)
-  const featureGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS
-
-  const tiers: TierHeader[] = [
-    { key: 'free', label: 'Free', highlight: false },
-    { key: 'pro', label: 'Pro', highlight: true },
-    { key: 'team', label: 'Team', highlight: false },
-  ]
-
-  return (
-    <section
-      id={sectionId ?? undefined}
-      className="studio-comparison-table border-t border-stone-800 bg-transparent px-6 py-20"
-    >
-      <div className="mx-auto max-w-6xl">
-        
-        <button
-          type="button"
-          onClick={() => setOpen((current) => !current)}
-          className="group mb-8 flex w-full cursor-pointer items-center justify-between gap-6 text-left"
-        >
-          <div>
-            {eyebrow && (
-              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-stone-500">
-                {eyebrow}
-              </p>
-            )}
-            {heading && (
-              <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50">
-                {heading}
-              </h2>
-            )}
-          </div>
-
-          <div
-            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
-            style={{ cornerShape: 'squircle' } as React.CSSProperties}
-          >
-            {open ? (
-              <Minus className="h-4 w-4 text-stone-700 dark:text-stone-400 transition-transform duration-300" />
-            ) : (
-              <Plus className="h-4 w-4 text-stone-700 dark:text-stone-300 transition-transform duration-300" />
-            )}
-          </div>
-        </button>
-
-        {open && (
-          <div className="overflow-x-auto">
-            <table className="w-full min-w-160">
-              <thead>
-                <tr>
-                  <th className="w-1/2 pb-0 text-left" />
-                  {tiers.map((tier) => (
-                    <th key={tier.key} className="pb-0 text-center">
-                      <span
-                        className={`inline-block rounded-lg px-4 py-1.5 text-sm font-semibold ${
-                          tier.highlight
-                            ? 'bg-stone-100 text-stone-900'
-                            : 'border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800/50 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500'
-                        }`}
-                        style={{ cornerShape: 'squircle' } as React.CSSProperties}
-                      >
-                        {tier.label}
-                      </span>
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-
-              <tbody>
-                {featureGroups.map((group, groupIndex) => (
-                  <Fragment key={group.id ?? group.group ?? groupIndex}>
-                    <tr>
-                      <td colSpan={4} className="pb-3 pt-0">
-                        <span className="text-xs font-bold uppercase tracking-widest text-stone-500">
-                          {group.group}
-                        </span>
-                      </td>
-                    </tr>
-
-                    {(group.rows ?? []).map((row, rowIndex) => (
-                      <tr
-                        key={row.id ?? row.label ?? rowIndex}
-                        className={`border-t transition-colors hover:bg-stone-200/40 dark:hover:bg-stone-900/40 ${
-                          rowIndex === 0 ? 'border-stone-800' : 'border-stone-800/50'
-                        }`}
-                      >
-                        <td className="py-3.5 pr-6">
-                          <span className="text-sm text-stone-400">{row.label}</span>
-                        </td>
-
-                        {tiers.map((tier) => (
-                          <td key={tier.key} className="py-3.5 text-center">
-                            <Cell value={row[tier.key]} highlight={tier.highlight} />
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </Fragment>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </section>
-  )
-}
-
-export default DDComparisonTable
+'use client'
+
+import React, { Fragment, useState } from 'react'
+import { Check, Minus, Plus } from 'lucide-react'
+
+type TierKey = 'free' | 'pro' | 'team'
+
+type CellValue = boolean | string
+
+interface FeatureRow {
+  id?: string | null
+  label?: string | null
+  free?: CellValue | null
+  pro?: CellValue | null
+  team?: CellValue | null
+}
+
+interface FeatureGroup {
+  id?: string | null
+  group?: string | null
+  rows?: FeatureRow[] | null
+}
+
+interface TierHeader {
+  key: TierKey
+  label: string
+  highlight: boolean
+}
+
+interface StudioComparisonTableProps {
+  eyebrow?: string | null
+  heading?: string | null
+  defaultOpen?: boolean | null
+  groups?: FeatureGroup[] | null
+  sectionId?: string | null
+  customCSS?: string | null
+  [key: string]: unknown
+}
+
+const DEFAULT_GROUPS: FeatureGroup[] = [
+  {
+    group: 'Components & Templates',
+    rows: [
+      { label: 'Free components', free: true, pro: true, team: true },
+      { label: 'Premium components', free: false, pro: '120+', team: '120+' },
+      { label: 'Free templates', free: true, pro: true, team: true },
+      { label: 'Premium templates', free: false, pro: '24+', team: '24+' },
+      { label: 'Payload CMS v3 blocks', free: false, pro: true, team: true },
+      { label: 'Figma source files', free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: 'Licensing',
+    rows: [
+      { label: 'Personal use', free: true, pro: true, team: true },
+      {
+        label: 'Commercial projects',
+        free: false,
+        pro: '1 project',
+        team: 'Unlimited',
+      },
+      { label: 'White-label license', free: false, pro: false, team: true },
+      { label: 'Client resale rights', free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: 'Updates & Access',
+    rows: [
+      { label: 'Lifetime updates', free: true, pro: true, team: true },
+      {
+        label: 'Early access to new releases',
+        free: false,
+        pro: true,
+        team: true,
+      },
+      { label: 'Download source files', free: false, pro: true, team: true },
+    ],
+  },
+  {
+    group: 'Support',
+    rows: [
+      { label: 'Community Discord', free: true, pro: true, team: true },
+      { label: 'Priority email support', free: false, pro: true, team: true },
+      { label: 'Dedicated Slack channel', free: false, pro: false, team: true },
+      { label: '1-on-1 onboarding call', free: false, pro: false, team: true },
+      { label: 'SLA support guarantee', free: false, pro: false, team: true },
+    ],
+  },
+  {
+    group: 'Team',
+    rows: [
+      { label: 'Team seats', free: '1', pro: '1', team: 'Up to 10' },
+      {
+        label: 'Invoice & billing management',
+        free: false,
+        pro: false,
+        team: true,
+      },
+      {
+        label: 'Custom Payload CMS schemas',
+        free: false,
+        pro: false,
+        team: true,
+      },
+    ],
+  },
+]
+
+function Cell({ value, highlight }: { value: CellValue | null | undefined; highlight: boolean }) {
+  if (typeof value === 'string') {
+    return (
+      <span
+        className={`text-sm font-medium ${highlight ? 'text-indigo-900 dark:text-lime-400' : 'text-stone-700 dark:text-stone-300'}`}
+      >
+        {value}
+      </span>
+    )
+  }
+
+  if (value === true) {
+    return (
+      <div
+        className={`mx-auto flex h-5 w-5 items-center justify-center rounded-full ${
+          highlight ? 'bg-stone-900' : 'bg-stone-800'
+        }`}
+        style={{ cornerShape: 'squircle' } as React.CSSProperties}
+      >
+        <Check className={`h-3 w-3 ${highlight ? 'text-stone-50' : 'text-stone-300'}`} />
+      </div>
+    )
+  }
+
+  return (
+    <div className="mx-auto flex h-5 w-5 items-center justify-center opacity-30">
+      <Minus className="h-4 w-4 text-stone-600" />
+    </div>
+  )
+}
+
+export function DDComparisonTable({
+  eyebrow = 'Full breakdown',
+  heading = 'Compare all features',
+  defaultOpen = true,
+  groups,
+  sectionId,
+}: StudioComparisonTableProps) {
+  const [open, setOpen] = useState(defaultOpen !== false)
+  const featureGroups = groups && groups.length > 0 ? groups : DEFAULT_GROUPS
+
+  const tiers: TierHeader[] = [
+    { key: 'free', label: 'Free', highlight: false },
+    { key: 'pro', label: 'Pro', highlight: true },
+    { key: 'team', label: 'Team', highlight: false },
+  ]
+
+  return (
+    <section
+      id={sectionId ?? undefined}
+      className="studio-comparison-table w-full border-t border-stone-800 bg-transparent px-6 py-20"
+    >
+      <div className="mx-auto w-full max-w-7xl">
+        <button
+          type="button"
+          onClick={() => setOpen((current) => !current)}
+          className="group mb-8 flex w-full cursor-pointer items-center justify-between gap-6 text-left"
+        >
+          <div>
+            {eyebrow && (
+              <p className="mb-1 text-xs font-semibold uppercase tracking-widest text-stone-500">
+                {eyebrow}
+              </p>
+            )}
+            {heading && (
+              <h2 className="text-3xl font-semibold text-stone-900 dark:text-stone-50">
+                {heading}
+              </h2>
+            )}
+          </div>
+
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500"
+            style={{ cornerShape: 'squircle' } as React.CSSProperties}
+          >
+            {open ? (
+              <Minus className="h-4 w-4 text-stone-700 dark:text-stone-400 transition-transform duration-300" />
+            ) : (
+              <Plus className="h-4 w-4 text-stone-700 dark:text-stone-300 transition-transform duration-300" />
+            )}
+          </div>
+        </button>
+
+        {open && (
+          <div className="overflow-x-auto">
+            <table className="w-full min-w-160">
+              <thead>
+                <tr>
+                  <th className="w-1/2 pb-0 text-left" />
+                  {tiers.map((tier) => (
+                    <th key={tier.key} className="pb-0 text-center">
+                      <span
+                        className={`inline-block rounded-lg px-4 py-1.5 text-sm font-semibold ${
+                          tier.highlight
+                            ? 'bg-stone-100 text-stone-900'
+                            : 'border-stone-100 bg-stone-200 dark:border-stone-700 dark:bg-stone-800/50 transition-colors group-hover:border-stone-300 dark:group-hover:border-stone-500'
+                        }`}
+                        style={{ cornerShape: 'squircle' } as React.CSSProperties}
+                      >
+                        {tier.label}
+                      </span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+
+              <tbody>
+                {featureGroups.map((group, groupIndex) => (
+                  <Fragment key={group.id ?? group.group ?? groupIndex}>
+                    <tr>
+                      <td colSpan={4} className="pb-3 pt-0">
+                        <span className="text-xs font-bold uppercase tracking-widest text-stone-500">
+                          {group.group}
+                        </span>
+                      </td>
+                    </tr>
+
+                    {(group.rows ?? []).map((row, rowIndex) => (
+                      <tr
+                        key={row.id ?? row.label ?? rowIndex}
+                        className={`border-t transition-colors hover:bg-stone-200/40 dark:hover:bg-stone-900/40 ${
+                          rowIndex === 0 ? 'border-stone-800' : 'border-stone-800/50'
+                        }`}
+                      >
+                        <td className="py-3.5 pr-6">
+                          <span className="text-sm text-stone-400">{row.label}</span>
+                        </td>
+
+                        {tiers.map((tier) => (
+                          <td key={tier.key} className="py-3.5 text-center">
+                            <Cell value={row[tier.key]} highlight={tier.highlight} />
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default DDComparisonTable