'use client' import { useEffect, useRef, useState, type CSSProperties } from 'react' import { AnimatePresence, motion } from 'motion/react' import { IconShapesFillDuo18, IconTrashFillDuo18, IconPenNib3FillDuo18, IconClipboardFillDuo18, IconBellFillDuo18, IconGamepadButtonsFillDuo18, IconShopFillDuo18, IconImages2FillDuo18, IconFacialRecognitionFillDuo18, IconAlarmClockFillDuo18 } from 'nucleo-ui-essential-fill-duo-18'; import { twMerge } from "tailwind-merge"; import { ClassValue, clsx } from 'clsx'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } type GooeyToolbarVariant = 'peel' | 'amoeba' type GooeyItem = { id: string label: string icon: React.ComponentType<{ className?: string }> } type GooeyToolbarProps = { variant?: GooeyToolbarVariant defaultVariant?: GooeyToolbarVariant showVariantToggle?: boolean className?: string } const filterId = 'gooey-toolbar-filter' const spring = { type: 'spring' as const, stiffness: 300, damping: 34, mass: 0.8, } const gooStyle = { filter: `url(#${filterId})`, } satisfies CSSProperties const blobClass = 'rounded-full bg-foreground text-background shadow-[0_12px_30px_-18px_rgb(0_0_0/0.7)] transition-colors hover:bg-foreground/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background' const peelActions: GooeyItem[] = [ { id: 'edit', label: 'Edit', icon: IconPenNib3FillDuo18 }, { id: 'copy', label: 'Copy', icon: IconClipboardFillDuo18 }, { id: 'share', label: 'Share', icon: IconBellFillDuo18 }, { id: 'delete', label: 'Delete', icon: IconTrashFillDuo18 }, ] const amoebaTools: GooeyItem[] = [ { id: 'shop', label: 'Shop', icon: IconShopFillDuo18 }, { id: 'images', label: 'Images', icon: IconImages2FillDuo18 }, { id: 'face', label: 'Face', icon: IconFacialRecognitionFillDuo18 }, { id: 'clock', label: 'Clock', icon: IconAlarmClockFillDuo18 }, ] function getArcPoint( index: number, total: number, radius: number, startAngle: number, endAngle: number ) { const angle = total === 1 ? (startAngle + endAngle) / 2 : startAngle + ((endAngle - startAngle) / (total - 1)) * index const radians = (angle * Math.PI) / 180 return { x: Math.cos(radians) * radius, y: Math.sin(radians) * radius, } } // Simple minimalist toggle group instead of library toggle group function VariantToggle({ value, onValueChange, }: { value: GooeyToolbarVariant onValueChange: (value: GooeyToolbarVariant) => void }) { return (

) } function PeelToolbar() { const [isOpen, setIsOpen] = useState(false) const [activeId, setActiveId] = useState(null) return (

{ setIsOpen((current) => !current) if (isOpen) setActiveId(null) }} transition={spring} type="button" >

{isOpen ? ( {peelActions.map((action, index) => { const Icon = action.icon const isActive = activeId === action.id return ( setActiveId((current) => current === action.id ? null : action.id ) } transition={{ ...spring, delay: index * 0.025, }} type="button" > ) })} ) : null}

) } function AmoebaToolbar() { const containerRef = useRef(null) const [isOpen, setIsOpen] = useState(false) const [activeId, setActiveId] = useState(null) useEffect(() => { const handlePointerDown = (event: MouseEvent) => { if (!containerRef.current?.contains(event.target as Node)) { setIsOpen(false) setActiveId(null) } } document.addEventListener('mousedown', handlePointerDown) return () => document.removeEventListener('mousedown', handlePointerDown) }, []) return (

{ if (isOpen) { setIsOpen(false) setActiveId(null) return } setIsOpen(true) }} transition={spring} type="button" > {isOpen ? amoebaTools.map((tool, index) => { const point = getArcPoint(index, amoebaTools.length, 72, 210, -30) const Icon = tool.icon const isActive = activeId === tool.id return ( { event.stopPropagation() setActiveId((current) => current === tool.id ? null : tool.id ) }} transition={{ ...spring, delay: index * 0.04, }} type="button" > ) }) : null}

) } export function GooeyFilter() { return ( ) } export function GooeyToolbar({ className, defaultVariant = 'peel', showVariantToggle = true, variant, }: GooeyToolbarProps) { const [selectedVariant, setSelectedVariant] = useState(defaultVariant) const currentVariant = variant ?? selectedVariant return (

{showVariantToggle ? (

) : null} {currentVariant === 'peel' ? : }

) } export const PeelTab = PeelToolbar export const AmoebaFab = AmoebaToolbar export default GooeyToolbar

Dependencies

Installation

Usage