blocks-dusted 0.1.0

package/templates/shared/components/ui/anims/fade.tsx

@@ -0,0 +1,83 @@
+'use client'
+import { motion, useInView } from 'framer-motion'
+import * as React from 'react'
+
+export function TextFade({
+  direction,
+  children,
+  className = '',
+  stagger = 0.1,
+  delay = 0.3
+}: {
+  direction: 'up' | 'down' | 'left' | 'right'
+  children: React.ReactNode
+  className?: string
+  stagger?: number
+  delay?: number
+}) {
+  const getVariant = () => {
+    const baseTransition = {
+      type: 'spring' as const,
+      duration: 0.9,
+      delay
+    }
+
+    switch (direction) {
+      case 'down':
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: -20 }
+        }
+      case 'up':
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: 20 }
+        }
+      case 'left':
+        return {
+          show: { opacity: 1, x: 0, transition: baseTransition },
+          hidden: { opacity: 0, x: 20 }
+        }
+      case 'right':
+        return {
+          show: { opacity: 1, x: 0, transition: baseTransition },
+          hidden: { opacity: 0, x: -20 }
+        }
+      default:
+        return {
+          show: { opacity: 1, y: 0, transition: baseTransition },
+          hidden: { opacity: 0, y: 20 }
+        }
+    }
+  }
+
+  const FADE_VARIANT = getVariant()
+  const ref = React.useRef(null)
+  const isInView = useInView(ref, { once: false })
+
+  return (
+    <motion.div
+      ref={ref}
+      initial="hidden"
+      animate={isInView ? 'show' : ''}
+      viewport={{ once: false, amount: 0.5 }}
+      variants={{
+        hidden: {},
+        show: {
+          transition: {
+            staggerChildren: stagger
+          }
+        }
+      }}
+      className={className}
+    >
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child) ? (
+          <motion.div variants={FADE_VARIANT}>{child}</motion.div>
+        ) : (
+          child
+        )
+      )}
+    </motion.div>
+  )
+}

package/templates/shared/components/ui/button.tsx

@@ -0,0 +1,233 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/utilities/ui";
+import { Slot } from "@radix-ui/react-slot";
+import { type VariantProps, cva } from "class-variance-authority";
+
+// Ripple effect CSS (injected at runtime)
+const rippleCSS = `
+  .ripple-container { position: relative; overflow: hidden; }
+  .ripple-effect { position: absolute; border-radius: 50%; transform: scale(0); animation: ripple-animation 600ms linear; pointer-events: none; z-index: 10; }
+  @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } }
+`;
+
+// Tailwind + CVA variants
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    defaultVariants: { size: "default", variant: "default" },
+    variants: {
+      size: {
+        clear: "",
+        default: "h-10 px-4 py-2",
+        icon: "h-10 w-10",
+        lg: "h-11 px-8",
+        sm: "h-7 px-2",
+      },
+      variant: {
+        default:
+          "ripple-default bg-primary text-stone-200 dark:text-stone-200 --text-primary-foreground transition-all duration-300 hover:shadow-md hover:color-accent will-change-transform",
+        destructive:
+          "ripple-destructive bg-destructive text-stone-200 dark:text-stone-200  text-destructive-foreground transition-all duration-300 hover:shadow-md hover:bg-destructive/90 will-change-transform",
+        ghost:
+          "ripple-ghost bg-blur text-stone-200 dark:text-stone-200  transition-all duration-300 hover:shadow-md hover:text-accent-foreground will-change-transform",
+        link: "ripple-link",
+        outline:
+          "ripple-outline border border-border text-stone-200 dark:text-stone-200  bg-transparent hover:bg-white/10 transition-all duration-300 hover:shadow-lg hover:text-alt will-change-transform",
+        secondary:
+          "ripple-secondary text-stone-200 dark:text-stone-200  bg-secondary text-secondary-foreground transition-all duration-300 hover:shadow-md hover:bg-secondary/80 will-change-transform",
+
+        // ---- extra visual variants (v1..v8)
+        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 text-zinc-800 dark:border-stone-600 dark:shadow-[3px_3px_0px_0px_rgba(255,255,255,0.7)] active:dark:shadow-none dark:text-zinc-50 dark:bg-zinc-950",
+        v2: "ripple-v2 text-stone-200 dark:text-stone-200 group relative justify-center rounded-0 overflow-hidden ease-in-out hover:scale-100 hover:shadow-lg text-zinc-50 bg-linear-to-tr from-zinc-900 to-zinc-700 hover:shadow-zinc-500/30 dark:text-stone-900 dark:bg-linear-to-tr dark:from-zinc-50 dark:to-zinc-100 dark:hover:shadow-zinc-700/30",
+        v3: "ripple-v3 text-stone-200 dark:text-stone-200  relative overflow-hidden group hover:ring-2 hover:ring-offset-2 ease-out hover:bg-gradient-to-r bg-zinc-900 hover:from-zinc-800 hover:to-zinc-700 text-zinc-50 hover:ring-zinc-900 dark:bg-zinc-50 dark:hover:from-zinc-50 dark:hover:to-zinc-100 dark:text-zinc-800 dark:hover:ring-white dark:ring-offset-black",
+        v4: "ripple-v4 text-stone-200 dark:text-stone-200  group relative overflow-hidden rounded-md bg-linear-to-tr duration-300 ease-in-out active:translate-y-0.5 active:scale-100 active:shadow-none from-zinc-800 to-zinc-700 text-black shadow-[0px_3px_0px_rgba(82,82,91,0.9)] dark:active:shadow-none dark:from-zinc-50 dark:to-zinc-100 dark:text-zinc-800 dark:shadow-[0px_3px_0px_rgba(161,161,170,0.9)]",
+        v5: "ripple-v5 text-stone-200 dark:text-stone-200  relative overflow-hidden border shadow group invert-[1] border-stone-300 text-zinc-800 bg-zinc-50 dark:border-stone-700 dark:text-zinc-100 dark:bg-zinc-950",
+        v6: "ripple-v6 text-stone-200 dark:text-stone-200  relative rounded-sm border dark:border-stone-200 border-stone-600 group scale-y-[.88] scale-x-[0.97] group-hover:scale-100 duration-300 font-semibold transition dark:bg-zinc-50 bg-zinc-950 text-zinc-100 dark:text-zinc-800",
+        v7: "ripple-v7 text-stone-200 dark:text-stone-200  relative hover:no-underline px-[1px] pb-0 ease-in after:absolute after:bottom-0 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",
+        v8: "ripple-v8 text-stone-200 dark:text-stone-200  shadow-embossed hover:shadow-none ease-out hover:scale-100 dark:bg-[#121212] dark:text-[#999999] bg-zinc-50 text-stone-900",
+      },
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  icon?: React.ReactNode;
+  href?: string; // ← Add href prop for navigation
+  newTab?: boolean; // ← Add newTab prop
+  onNavigate?: () => void; // ← Add navigation callback
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  {
+    asChild = false,
+    className,
+    size,
+    variant,
+    onClick,
+    icon,
+    children,
+    href,
+    newTab = false,
+    onNavigate,
+    ...props
+  },
+  ref,
+) {
+  // inject CSS once
+  React.useEffect(() => {
+    const style = document.createElement("style");
+    style.innerHTML = rippleCSS;
+    document.head.appendChild(style);
+    return () => style.remove();
+  }, []);
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const button = e.currentTarget;
+    const ripple = document.createElement("span");
+    const rect = button.getBoundingClientRect();
+
+    ripple.className = "ripple-effect";
+    ripple.style.left = `${e.clientX - rect.left}px`;
+    ripple.style.top = `${e.clientY - rect.top}px`;
+    ripple.style.width =
+      ripple.style.height = `${Math.max(rect.width, rect.height)}px`;
+
+    const variantClass = Array.from(button.classList).find((cls) =>
+      cls.startsWith("ripple-"),
+    );
+    switch (variantClass) {
+      case "ripple-destructive":
+        ripple.style.backgroundColor = "rgba(255, 0, 0, 0.3)";
+        break;
+      case "ripple-outline":
+        ripple.style.backgroundColor = "rgba(255, 255, 255, 0.15)";
+        break;
+      case "ripple-secondary":
+        ripple.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+        break;
+      case "ripple-ghost":
+      case "ripple-link":
+        ripple.style.backgroundColor = "rgba(139, 92, 246, 0.25)";
+        break;
+      default:
+        ripple.style.backgroundColor = "rgba(139, 92, 246, 0.8)";
+        break;
+    }
+
+    button.appendChild(ripple);
+    ripple.addEventListener("animationend", () => ripple.remove());
+
+    // Handle navigation if href is provided
+    if (href) {
+      e.preventDefault();
+
+      // Call onNavigate callback (e.g., closeDrawer)
+      onNavigate?.();
+
+      // Navigate after a small delay for drawer animation
+      setTimeout(() => {
+        if (newTab) {
+          window.open(href, "_blank");
+        } else {
+          window.location.href = href;
+        }
+      }, 150);
+    }
+
+    // Call original onClick handler
+    onClick?.(e);
+  };
+
+  // --- CONTENT (decorations only when not `asChild`)
+  const content =
+    variant === "v5" ? (
+      <>
+        <span className="absolute inset-0 rounded-sm 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-800">
+          {icon ?? null}
+        </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>
+        <span className="relative invisible">{children}</span>
+      </>
+    ) : variant === "v2" ? (
+      <>
+        <span className="relative">{children}</span>
+        <span
+          className="absolute inset-0 flex size-full justify-center [transform:skew(-14deg)_translateX(-100%)] group-hover:duration-1000 group-hover:[transform:skew(-14deg)_translateX(100%)]"
+          style={{ width: "200% !important" }}
+          aria-hidden="true"
+        >
+          <span className="relative h-full w-32 scale-200 bg-black/20 dark:bg-black/10" />
+        </span>
+      </>
+    ) : variant === "v3" ? (
+      <>
+        <span
+          className="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white/80 dark:bg-zinc-900 opacity-10 rotate-12 group-hover:-translate-x-60 ease"
+          aria-hidden="true"
+        />
+        <span className="relative">{children}</span>
+      </>
+    ) : variant === "v4" ? (
+      <>
+        <span
+          className="absolute size-0 rounded-md bg-white/80 dark:bg-black/80 opacity-10 transition-all duration-300 ease-out group-hover:size-full text-stone-200 dark:text-stone-200"
+          aria-hidden="true"
+        />
+        <span className="relative">{children}</span>
+      </>
+    ) : (
+      <span className="relative inline-flex items-center gap-1">
+        {icon && <span className="mx-1">{icon}</span>}
+        {children}
+      </span>
+    );
+
+  // --- RENDER
+  if (asChild) {
+    const singleChild = React.isValidElement(children) ? (
+      children
+    ) : (
+      <span className="inline-flex items-center">{children}</span>
+    );
+
+    return (
+      <Slot
+        onClick={handleClick as any}
+        className={cn(
+          "ripple-container",
+          buttonVariants({ size, variant }),
+          className,
+        )}
+        ref={ref as any}
+        {...props}
+      >
+        {singleChild}
+      </Slot>
+    );
+  }
+
+  return (
+    <button
+      ref={ref}
+      onClick={handleClick}
+      className={cn(
+        "ripple-container",
+        buttonVariants({ size, variant }),
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </button>
+  );
+});
+
+export { Button, buttonVariants };

package/templates/shared/components/ui/input.tsx

@@ -0,0 +1,41 @@
+import { cn } from '@/utilities/ui'
+import * as React from 'react'
+
+const Input: React.FC<
+  {
+    ref?: React.Ref<HTMLInputElement>
+  } & React.InputHTMLAttributes<HTMLInputElement>
+> = ({ type, className, ref, ...props }) => {
+  return (
+    <div
+      className={cn(
+        'group relative flex h-10 w-full items-center justify-center top-0 rounded',
+        '!rounded !border-border !border-stone-600'
+      )}
+    >
+      <input
+        className={cn(
+          'text-stone-200 dark:text-stone-200 flex h-10 w-full rounded border border-stone-600 bg-neutral-900/50 px-3 py-2 text-sm',
+          'ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'group-focus-within:brightness-110  group-focus-within:contrast-110',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        type={type}
+        {...props}
+      />
+
+      <style>{`.glass-input{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.075);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 32%,rgba(255,255,255,.004)),linear-gradient(145deg,rgba(255,255,255,.03),transparent 26%,rgba(0,0,0,.24) 100%),rgba(9,10,15,.82);backdrop-filter:blur(22px) saturate(1.05);-webkit-backdrop-filter:blur(22px) saturate(1.05);box-shadow:0 22px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.105),inset 0 -18px 30px rgba(0,0,0,.46);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease,filter .28s ease;corner-shape:squircle}.glass-input::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;corner-shape:squircle;background:linear-gradient(130deg,rgba(255,255,255,.075),transparent 26%,transparent 68%,rgba(255,255,255,.025)),radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.08),transparent 7rem);mix-blend-mode:soft-light}.glass-input::after{content:'';position:absolute;inset:1px;pointer-events:none;border-radius:inherit;corner-shape:squircle;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 12px 18px rgba(255,255,255,.018),inset 0 -18px 32px rgba(0,0,0,.42)}.glass-input:hover,.glass-input:focus-within{transform:translateY(-2px);filter:brightness(1.03) saturate(1.05);border-color:rgba(129,140,248,.22);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012) 32%,rgba(255,255,255,.006)),linear-gradient(145deg,rgba(255,255,255,.035),transparent 26%,rgba(0,0,0,.28) 100%),rgba(6,7,11,.92);box-shadow:0 30px 42px rgba(0,0,0,.66),0 0 38px rgba(99,102,241,.11),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -18px 30px rgba(0,0,0,.52)}.glass-input input{position:relative;z-index:2;background:transparent;color:#fff;outline:none}.glass-input input::placeholder{color:rgba(224,231,255,.28)}`}</style>
+
+      {/* LEFT EDGE GLOW (hover + focus only) */}
+      <div className="pointer-events-none absolute inset-y-0 left-0 w-[10rem] rounded bg-transparent opacity-0  duration-300 group-hover:duration-150 group-hover:opacity-100 group-focus-within:!opacity-100 group-focus-within:saturate-0 group-focus-within:brightness-50  group-focus-within:w-[15rem] !bg-[radial-gradient(ellipse_at_left,rgba(139,92,246,0.35)_0%,rgba(139,92,246,0.25)_20%,rgba(139,92,246,0.12)_40%,transparent_70%)] mix-blend-screen brightness-75 transition-all" />
+
+      {/* HARD EDGE LINE (hover + focus only) */}
+      <div className="pointer-events-none absolute left-[0] top-[50%] group-hover:top-[48%] group-focus-within:top-[48%] h-[55%] group-focus-within:h-[57%] group-hover:h-[57%] w-[2px]  group-focus-within:w-[3px] group-hover:w-[3px] -translate-y-1/2 rounded bg-violet-500/70 opacity-100 blur-[0] group-hover:blur-[0.5px] transition-opacity duration-300 group-hover:duration-150  group-hover:opacity-100 group-focus-within:blur-[0.5px] mix-blend-plus-lighter" />
+    </div>
+  )
+}
+
+export { Input }

package/templates/shared/fields/lucide-icon-picker/Cell.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import * as LucideIcons from 'lucide-react'
+import { icons } from 'lucide-react'
+
+export type IconName = keyof typeof icons
+
+const IconPickerCell = ({ cellData }: { cellData: string }) => {
+  if (!cellData) return <span className="text-muted-foreground">No icon</span>
+
+  const iconName = cellData as IconName
+  const Icon = LucideIcons[iconName]
+
+  if (!Icon) return <span className="text-muted-foreground">{cellData}</span>
+
+  return (
+    <div className="flex items-center gap-2">
+      <Icon className="h-4 w-4" style={{ marginRight: '4px' }} />
+      <span className="text-sm">{iconName}</span>
+    </div>
+  )
+}
+
+export default IconPickerCell

package/templates/shared/fields/lucide-icon-picker/README.md

@@ -0,0 +1,160 @@
+# Lucide Icon Picker Field
+
+A customizable icon picker field for PayloadCMS with Lucide icons, fuzzy search, and virtualized rendering.
+
+## Features
+
+- ✨ **Lucide Icons** - Access to the complete Lucide icon library
+- 🔍 **Fuzzy Search** - Powered by Fuse.js for intelligent icon discovery
+- ⚡ **Virtualized Rendering** - Smooth performance with @tanstack/react-virtual
+- 👁️ **Icon Preview** - Visual preview in both edit and list views
+- 🎨 **Custom Cell Component** - Displays icon preview with name in admin list views
+
+## Installation
+
+Dependencies installed:
+
+- `fuse.js` - For fuzzy search
+- `@tanstack/react-virtual` - For virtualized rendering
+- `lucide-react` - Icon library (already in project)
+
+## Basic Usage
+
+```typescript
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+
+export const MyCollection = {
+  slug: 'my-collection',
+  fields: [
+    iconPicker({
+      name: 'icon',
+      required: true,
+      description: 'Choose an icon for this feature'
+    })
+  ]
+}
+```
+
+## Advanced Usage
+
+```typescript
+import { iconPicker } from '@/fields/lucide-icon-picker/field'
+
+export const Features = {
+  slug: 'features',
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true
+    },
+    iconPicker({
+      name: 'featureIcon',
+      required: true,
+      description: 'Icon displayed for this feature'
+    }),
+    {
+      name: 'description',
+      type: 'textarea'
+    }
+  ]
+}
+```
+
+## With Conditional Logic
+
+```typescript
+iconPicker({
+  name: 'menuIcon',
+  description: 'Icon displayed in the navigation menu',
+  overrides: (field) => ({
+    ...field,
+    admin: {
+      ...field.admin,
+      condition: (data) => data.showIcon === true
+    }
+  })
+})
+```
+
+## API Reference
+
+### iconPicker Options
+
+| Prop          | Type                              | Default  | Description                       |
+| ------------- | --------------------------------- | -------- | --------------------------------- |
+| `name`        | `string`                          | `'icon'` | Field name                        |
+| `required`    | `boolean`                         | `false`  | Whether field is required         |
+| `description` | `string`                          | -        | Helper text shown below field     |
+| `overrides`   | `(field: TextField) => TextField` | -        | Function to override field config |
+
+## Using Icons on Frontend
+
+```tsx
+import * as LucideIcons from 'lucide-react'
+
+interface FeatureProps {
+  icon: string
+  title: string
+  description: string
+}
+
+export function Feature({ icon, title, description }: FeatureProps) {
+  const Icon = LucideIcons[icon as keyof typeof LucideIcons]
+
+  return (
+    <div className="feature">
+      {Icon && <Icon className="h-6 w-6" />}
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  )
+}
+```
+
+## Implementation Details
+
+### Files Structure
+
+```
+src/fields/lucide-icon-picker/
+├── field.ts          # Field definition and types
+├── index.tsx         # Main field component with picker UI
+└── Cell.tsx          # List view cell component
+```
+
+### Key Features
+
+1. **Fuzzy Search**: Uses Fuse.js with a threshold of 0.3 for flexible matching
+2. **Virtualization**: Only renders visible icons for performance (6 icons per row)
+3. **Icon Preview**: Shows selected icon in both the picker and list view
+4. **Responsive**: Grid layout adapts to container size
+
+### Performance
+
+- Virtualizes ~1000+ icons for smooth scrolling
+- Debounced search for smooth typing experience
+- Only visible icons are rendered in the DOM
+
+## Example Collections
+
+See these collections for examples:
+
+- (Add your collection examples here as you use the field)
+
+## Troubleshooting
+
+### Icons not displaying
+
+- Ensure `lucide-react` is installed: `npm install lucide-react`
+- Verify the icon name matches exactly (case-sensitive)
+
+### Search not working
+
+- Check that `fuse.js` is installed
+- Clear browser cache and reload
+
+### Performance issues
+
+- The field uses virtualization, but very large result sets (1000+) may still lag
+- Consider adding more specific search terms

package/templates/shared/fields/lucide-icon-picker/field.ts

@@ -0,0 +1,40 @@
+import { TextField } from 'payload'
+
+export interface IconPickerFieldProps {
+  name?: string
+  required?: boolean
+  showTextInput?: boolean
+  searchable?: boolean
+  categorized?: boolean
+  searchPlaceholder?: string
+  triggerPlaceholder?: string
+  description?: string
+  overrides?: (field: TextField) => TextField
+}
+
+export const iconPicker = ({
+  name = 'icon',
+  required = false,
+  showTextInput = true,
+  searchable = true,
+  categorized = true,
+  searchPlaceholder = 'Search icons...',
+  triggerPlaceholder = 'Select Icon',
+  description,
+  overrides
+}: IconPickerFieldProps = {}): TextField => {
+  const field: TextField = {
+    name,
+    type: 'text',
+    required,
+    admin: {
+      description,
+      components: {
+        Field: '/fields/lucide-icon-picker/index.tsx',
+        Cell: '/fields/lucide-icon-picker/Cell.tsx'
+      }
+    }
+  }
+
+  return overrides ? overrides(field) : field
+}