@braintwopoint0/playback-commons 0.1.0

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ui/button.tsx","../../src/utils/cn.ts","../../src/ui/card.tsx","../../src/ui/badge.tsx","../../src/ui/label.tsx","../../src/ui/input.tsx","../../src/ui/dialog.tsx","../../src/ui/animated-tooltip.tsx","../../src/ui/card-hover-effect.tsx","../../src/ui/flip-words.tsx","../../src/ui/hero-highlight.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../utils/cn'\n\nconst buttonVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap rounded-md 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-primary underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-10 px-4 py-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : 'button'\n    return (\n      <Comp\n        className={cn(buttonVariants({ variant, size, className }))}\n        ref={ref}\n        {...props}\n      />\n    )\n  }\n)\nButton.displayName = 'Button'\n\nexport { Button, buttonVariants }\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'rounded-lg border bg-card text-card-foreground shadow-sm',\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = 'Card'\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex flex-col space-y-1.5 p-6', className)}\n    {...props}\n  />\n))\nCardHeader.displayName = 'CardHeader'\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      'text-2xl font-semibold leading-none tracking-tight',\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = 'CardTitle'\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n))\nCardDescription.displayName = 'CardDescription'\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />\n))\nCardContent.displayName = 'CardContent'\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex items-center p-6 pt-0', className)}\n    {...props}\n  />\n))\nCardFooter.displayName = 'CardFooter'\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n","import * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../utils/cn'\n\nconst badgeVariants = cva(\n  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      variant: {\n        default:\n          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',\n        secondary:\n          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        destructive:\n          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, variant, ...props }: BadgeProps) {\n  return (\n    <div className={cn(badgeVariants({ variant }), className)} {...props} />\n  )\n}\n\nexport { Badge, badgeVariants }\n","'use client'\n\nimport * as React from 'react'\nimport * as LabelPrimitive from '@radix-ui/react-label'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../utils/cn'\n\nconst labelVariants = cva(\n  'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n)\n\nconst Label = React.forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &\n    VariantProps<typeof labelVariants>\n>(({ className, ...props }, ref) => (\n  <LabelPrimitive.Root\n    ref={ref}\n    className={cn(labelVariants(), className)}\n    {...props}\n  />\n))\nLabel.displayName = LabelPrimitive.Root.displayName\n\nexport { Label }\n","'use client'\n\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { useMotionTemplate, useMotionValue, motion } from 'motion/react'\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, ...props }, ref) => {\n    const radius = 100\n    const [visible, setVisible] = React.useState(false)\n\n    let mouseX = useMotionValue(0)\n    let mouseY = useMotionValue(0)\n\n    function handleMouseMove({ currentTarget, clientX, clientY }: any) {\n      let { left, top } = currentTarget.getBoundingClientRect()\n\n      mouseX.set(clientX - left)\n      mouseY.set(clientY - top)\n    }\n    return (\n      <motion.div\n        style={{\n          background: useMotionTemplate`\n        radial-gradient(\n          ${visible ? radius + 'px' : '0px'} circle at ${mouseX}px ${mouseY}px,\n          var(--timberwolf),\n          transparent 80%\n        )\n      `,\n        }}\n        onMouseMove={handleMouseMove}\n        onMouseEnter={() => setVisible(true)}\n        onMouseLeave={() => setVisible(false)}\n        className=\"p-[2px] rounded-lg transition duration-300 group/input\"\n      >\n        <input\n          type={type}\n          className={cn(\n            `flex h-10 w-full border-none bg-zinc-800 text-white shadow-input rounded-md px-3 py-2 text-sm  file:border-0 file:bg-transparent\n          file:text-sm file:font-mediumplaceholder-text-neutral-600\n          focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-600\n           disabled:cursor-not-allowed disabled:opacity-50\n           shadow-[0px_0px_1px_1px_var(--neutral-700)]\n           group-hover/input:shadow-none transition duration-400\n           `,\n            className\n          )}\n          ref={ref}\n          {...props}\n        />\n      </motion.div>\n    )\n  }\n)\nInput.displayName = 'Input'\n\nexport { Input }\n","'use client'\n\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cn } from '../utils/cn'\nimport { Cross2Icon } from '@radix-ui/react-icons'\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n      className\n    )}\n    {...props}\n  />\n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <DialogPortal>\n    <DialogOverlay />\n    <DialogPrimitive.Content\n      ref={ref}\n      className={cn(\n        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-zinc-800 bg-zinc-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <DialogPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-zinc-950 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-zinc-300 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-zinc-800 data-[state=open]:text-zinc-400\">\n        <Cross2Icon className=\"h-4 w-4\" />\n        <span className=\"sr-only\">Close</span>\n      </DialogPrimitive.Close>\n    </DialogPrimitive.Content>\n  </DialogPortal>\n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      'flex flex-col space-y-1.5 text-center sm:text-left',\n      className\n    )}\n    {...props}\n  />\n)\nDialogHeader.displayName = 'DialogHeader'\n\nconst DialogFooter = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\n      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n      className\n    )}\n    {...props}\n  />\n)\nDialogFooter.displayName = 'DialogFooter'\n\nconst DialogTitle = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-lg font-semibold leading-none tracking-tight',\n      className\n    )}\n    {...props}\n  />\n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n  React.ElementRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-zinc-400', className)}\n    {...props}\n  />\n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n  Dialog,\n  DialogPortal,\n  DialogOverlay,\n  DialogTrigger,\n  DialogClose,\n  DialogContent,\n  DialogHeader,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n","'use client'\n\nimport React, { useState } from 'react'\nimport {\n  motion,\n  useTransform,\n  AnimatePresence,\n  useMotionValue,\n  useSpring,\n} from 'motion/react'\n\nexport const AnimatedTooltip = ({\n  items,\n}: {\n  items: {\n    id: number\n    name: string\n    designation: string\n    image: string\n  }[]\n}) => {\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n  const springConfig = { stiffness: 100, damping: 5 }\n  const x = useMotionValue(0)\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  )\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  )\n  const handleMouseMove = (event: any) => {\n    const halfWidth = event.target.offsetWidth / 2\n    x.set(event.nativeEvent.offsetX - halfWidth)\n  }\n\n  return (\n    <>\n      {items.map((item, idx) => (\n        <div\n          className=\"-mr-4  relative group\"\n          key={item.name}\n          onMouseEnter={() => setHoveredIndex(item.id)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          {hoveredIndex === item.id && (\n            <motion.div\n              initial={{ opacity: 0, y: 20, scale: 0.6 }}\n              animate={{\n                opacity: 1,\n                y: 0,\n                scale: 1,\n                transition: {\n                  type: 'spring',\n                  stiffness: 260,\n                  damping: 10,\n                },\n              }}\n              exit={{ opacity: 0, y: 20, scale: 0.6 }}\n              style={{\n                translateX: translateX,\n                rotate: rotate,\n                whiteSpace: 'nowrap',\n              }}\n              className=\"absolute -top-16 -left-1/2 translate-x-1/2 flex text-xs  flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2\"\n            >\n              <div className=\"absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px \" />\n              <div className=\"absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px \" />\n              <div className=\"font-bold text-white relative z-30 text-base\">\n                {item.name}\n              </div>\n              <div className=\"text-white text-xs\">{item.designation}</div>\n            </motion.div>\n          )}\n          <img\n            onMouseMove={handleMouseMove}\n            height={100}\n            width={100}\n            src={item.image}\n            alt={item.name}\n            className=\"object-cover !m-0 !p-0 object-top rounded-full h-16 w-16 border-2 group-hover:scale-105 group-hover:z-30 border-[var(--ash-grey)] relative transition duration-500\"\n          />\n        </div>\n      ))}\n    </>\n  )\n}\n","'use client'\n\nimport { cn } from '../utils/cn'\nimport { AnimatePresence, motion } from 'motion/react'\nimport Link from 'next/link'\nimport { useState } from 'react'\n\nexport const HoverEffect = ({\n  items,\n  className,\n}: {\n  items: {\n    title: string\n    description: string\n    link: string\n    logoUrl: string\n  }[]\n  className?: string\n}) => {\n  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null)\n\n  return (\n    <div\n      className={cn(\n        'flex flex-wrap justify-center items-center pb-10',\n        className\n      )}\n    >\n      {items.map((item, idx) => (\n        <Link\n          href={item?.link}\n          key={item?.link}\n          className=\"relative group block p-2 h-72 w-80\"\n          onMouseEnter={() => setHoveredIndex(idx)}\n          onMouseLeave={() => setHoveredIndex(null)}\n        >\n          <AnimatePresence>\n            {hoveredIndex === idx && (\n              <motion.span\n                className=\"absolute inset-0 h-full w-full bg-neutral-400/[0.5] block rounded-3xl\"\n                layoutId=\"hoverBackground\"\n                initial={{ opacity: 0 }}\n                animate={{\n                  opacity: 1,\n                  transition: { duration: 0.15 },\n                }}\n                exit={{\n                  opacity: 0,\n                  transition: { duration: 0.15, delay: 0.2 },\n                }}\n              />\n            )}\n          </AnimatePresence>\n          <HoverCard logoUrl={item.logoUrl}>\n            <HoverCardTitle>{item.title}</HoverCardTitle>\n            <HoverCardDescription>{item.description}</HoverCardDescription>\n          </HoverCard>\n        </Link>\n      ))}\n    </div>\n  )\n}\n\nexport const HoverCard = ({\n  className,\n  children,\n  logoUrl,\n}: {\n  className?: string\n  children: React.ReactNode\n  logoUrl: string\n}) => {\n  return (\n    <div\n      className={cn(\n        'rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-white/[0.2] group-hover:border-[var(--timberwolf)] relative z-20',\n        className\n      )}\n    >\n      <div\n        className=\"absolute bottom-[-3rem] left-[-5rem] h-56 w-56 opacity-50\"\n        style={{\n          backgroundImage: `url(${logoUrl})`,\n          backgroundPosition: 'bottom left',\n          backgroundSize: 'contain',\n          backgroundRepeat: 'no-repeat',\n          maskImage: 'linear-gradient(to bottom left, transparent, black)',\n        }}\n      />\n      <div className=\"relative z-50\">\n        <div className=\"p-4\">{children}</div>\n      </div>\n    </div>\n  )\n}\nexport const HoverCardTitle = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => {\n  return (\n    <h4 className={cn('text-zinc-100 font-bold tracking-wide mt-4', className)}>\n      {children}\n    </h4>\n  )\n}\nexport const HoverCardDescription = ({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) => {\n  return (\n    <p\n      className={cn(\n        'mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm',\n        className\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n","'use client'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { AnimatePresence, motion, LayoutGroup } from 'motion/react'\nimport { cn } from '../utils/cn'\n\nexport const FlipWords = ({\n  words,\n  duration = 3000,\n  className,\n}: {\n  words: string[]\n  duration?: number\n  className?: string\n}) => {\n  const [currentWord, setCurrentWord] = useState(words[0])\n  const [isAnimating, setIsAnimating] = useState<boolean>(false)\n\n  const startAnimation = useCallback(() => {\n    const word = words[words.indexOf(currentWord) + 1] || words[0]\n    setCurrentWord(word)\n    setIsAnimating(true)\n  }, [currentWord, words])\n\n  useEffect(() => {\n    if (!isAnimating)\n      setTimeout(() => {\n        startAnimation()\n      }, duration)\n  }, [isAnimating, duration, startAnimation])\n\n  return (\n    <AnimatePresence\n      onExitComplete={() => {\n        setIsAnimating(false)\n      }}\n    >\n      <motion.div\n        initial={{\n          opacity: 0,\n          y: 10,\n        }}\n        animate={{\n          opacity: 1,\n          y: 0,\n        }}\n        transition={{\n          type: 'spring',\n          stiffness: 100,\n          damping: 10,\n        }}\n        exit={{\n          opacity: 0,\n          y: -40,\n          x: 40,\n          filter: 'blur(8px)',\n          scale: 2,\n          position: 'absolute',\n        }}\n        className={cn(\n          'z-10 inline-block relative text-left text-neutral-100 px-2',\n          className\n        )}\n        key={currentWord}\n      >\n        {currentWord.split(' ').map((word, wordIndex) => (\n          <motion.span\n            key={word + wordIndex}\n            initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}\n            animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n            transition={{\n              delay: wordIndex * 0.3,\n              duration: 0.3,\n            }}\n            className=\"inline-block whitespace-nowrap\"\n          >\n            {word.split('').map((letter, letterIndex) => (\n              <motion.span\n                key={word + letterIndex}\n                initial={{ opacity: 0, y: 10, filter: 'blur(8px)' }}\n                animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                transition={{\n                  delay: wordIndex * 0.3 + letterIndex * 0.05,\n                  duration: 0.2,\n                }}\n                className=\"inline-block\"\n              >\n                {letter}\n              </motion.span>\n            ))}\n            <span className=\"inline-block\">&nbsp;</span>\n          </motion.span>\n        ))}\n      </motion.div>\n    </AnimatePresence>\n  )\n}\n","'use client'\n\nimport { cn } from '../utils/cn'\nimport {\n  useMotionValue,\n  motion,\n  useMotionTemplate,\n  animate,\n} from 'motion/react'\nimport React, { useEffect, useState } from 'react'\n\nexport const HeroHighlight = ({\n  children,\n  className,\n  containerClassName,\n}: {\n  children: React.ReactNode\n  className?: string\n  containerClassName?: string\n}) => {\n  let mouseX = useMotionValue(0)\n  let mouseY = useMotionValue(0)\n  const [isHoverable, setIsHoverable] = useState(false)\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(pointer: fine)')\n    setIsHoverable(mediaQuery.matches)\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      setIsHoverable(e.matches)\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange)\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!isHoverable) {\n      const updatePosition = () => {\n        const randomX = Math.random() * window.innerWidth\n        const randomY = Math.random() * window.innerHeight\n        animate(mouseX, randomX, { duration: 2 })\n        animate(mouseY, randomY, { duration: 2 })\n      }\n\n      const interval = setInterval(updatePosition, 2000)\n      updatePosition()\n\n      return () => clearInterval(interval)\n    }\n  }, [isHoverable, mouseX, mouseY])\n\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!isHoverable || !event.currentTarget) return\n    const { left, top } = event.currentTarget.getBoundingClientRect()\n    mouseX.set(event.clientX - left)\n    mouseY.set(event.clientY - top)\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative h-[40rem] flex items-center bg-[var(--night)] justify-center w-full group',\n        containerClassName\n      )}\n      onMouseMove={handleMouseMove}\n    >\n      <div className=\"absolute inset-0 bg-dot-thick-neutral-800 pointer-events-none\" />\n      <motion.div\n        className=\"pointer-events-none bg-dot-thick-gray-100 absolute inset-0 opacity-0 transition duration-300 group-hover:opacity-100\"\n        style={{\n          WebkitMaskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n          maskImage: useMotionTemplate`\n            radial-gradient(\n              200px circle at ${mouseX}px ${mouseY}px,\n              black 0%,\n              transparent 100%\n            )\n          `,\n        }}\n      />\n\n      <div className={cn('relative z-20', className)}>{children}</div>\n    </div>\n  )\n}\n\nexport const Highlight = ({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) => {\n  return (\n    <motion.span\n      initial={{\n        backgroundSize: '0% 100%',\n      }}\n      animate={{\n        backgroundSize: '100% 100%',\n      }}\n      transition={{\n        duration: 2,\n        ease: 'linear',\n        delay: 0.5,\n      }}\n      style={{\n        backgroundRepeat: 'no-repeat',\n        backgroundPosition: 'left center',\n        display: 'inline',\n      }}\n      className={cn(\n        `relative inline-block pb-1 px-1 rounded-lg bg-gradient-to-r from-[var(--ash-grey)] to-[var(--timberwolf)]`,\n        className\n      )}\n    >\n      {children}\n    </motion.span>\n  )\n}\n"],"mappings":"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","names":["React","jsx","cva","jsx","cva","React","cva","jsx","cva","React","jsx","React","jsx","useState","motion","useMotionValue","jsx","jsxs","AnimatePresence","motion","useState","jsx","jsxs","useState","AnimatePresence","motion","jsx","jsxs","useState","AnimatePresence","motion","useMotionValue","motion","useMotionTemplate","useEffect","useState","jsx","jsxs"]}

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare function formatPrice(amount: number, currency?: string): string;
+declare function formatDate(date: string | Date, options?: Intl.DateTimeFormatOptions): string;
+declare function formatDateTime(date: string | Date): string;
+
+export { cn, formatDate, formatDateTime, formatPrice };

package/dist/utils/index.js

@@ -0,0 +1,44 @@
+"use client";
+
+// src/utils/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/format.ts
+function formatPrice(amount, currency = "GBP") {
+  return new Intl.NumberFormat("en-GB", {
+    style: "currency",
+    currency
+  }).format(amount);
+}
+function formatDate(date, options) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString(
+    "en-GB",
+    options ?? {
+      day: "numeric",
+      month: "short",
+      year: "numeric"
+    }
+  );
+}
+function formatDateTime(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleString("en-GB", {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+}
+export {
+  cn,
+  formatDate,
+  formatDateTime,
+  formatPrice
+};
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/utils/format.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","export function formatPrice(amount: number, currency: string = 'GBP'): string {\n  return new Intl.NumberFormat('en-GB', {\n    style: 'currency',\n    currency,\n  }).format(amount)\n}\n\nexport function formatDate(\n  date: string | Date,\n  options?: Intl.DateTimeFormatOptions\n): string {\n  const d = typeof date === 'string' ? new Date(date) : date\n  return d.toLocaleDateString(\n    'en-GB',\n    options ?? {\n      day: 'numeric',\n      month: 'short',\n      year: 'numeric',\n    }\n  )\n}\n\nexport function formatDateTime(date: string | Date): string {\n  const d = typeof date === 'string' ? new Date(date) : date\n  return d.toLocaleString('en-GB', {\n    day: 'numeric',\n    month: 'short',\n    year: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n  })\n}\n"],"mappings":";;;AAAA,SAAS,YAA6B;AACtC,SAAS,eAAe;AAEjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ACLO,SAAS,YAAY,QAAgB,WAAmB,OAAe;AAC5E,SAAO,IAAI,KAAK,aAAa,SAAS;AAAA,IACpC,OAAO;AAAA,IACP;AAAA,EACF,CAAC,EAAE,OAAO,MAAM;AAClB;AAEO,SAAS,WACd,MACA,SACQ;AACR,QAAM,IAAI,OAAO,SAAS,WAAW,IAAI,KAAK,IAAI,IAAI;AACtD,SAAO,EAAE;AAAA,IACP;AAAA,IACA,WAAW;AAAA,MACT,KAAK;AAAA,MACL,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAEO,SAAS,eAAe,MAA6B;AAC1D,QAAM,IAAI,OAAO,SAAS,WAAW,IAAI,KAAK,IAAI,IAAI;AACtD,SAAO,EAAE,eAAe,SAAS;AAAA,IAC/B,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,CAAC;AACH;","names":[]}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@braintwopoint0/playback-commons",
+  "version": "0.1.0",
+  "description": "Shared UI components, auth utilities, and Supabase client for the PLAYBACK Sports ecosystem",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./ui": {
+      "import": "./dist/ui/index.js",
+      "types": "./dist/ui/index.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils/index.js",
+      "types": "./dist/utils/index.d.ts"
+    },
+    "./auth": {
+      "import": "./dist/auth/index.js",
+      "types": "./dist/auth/index.d.ts"
+    },
+    "./supabase": {
+      "import": "./dist/supabase/index.js",
+      "types": "./dist/supabase/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next": ">=14",
+    "@supabase/ssr": ">=0.5",
+    "@supabase/supabase-js": "^2.50.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.6.0",
+    "class-variance-authority": "^0.7.1",
+    "motion": "^12.23.22",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.2.3"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "typescript": "^5",
+    "react": "^19",
+    "react-dom": "^19",
+    "next": "^15",
+    "@supabase/ssr": "^0.6.1",
+    "@supabase/supabase-js": "^2.50.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}