@luxfi/ui 7.4.15 → 8.1.0

package/src/qr-code.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+import { QRCodeSVG } from "qrcode.react"
+
+import { cn } from "./utils"
+
+interface QRCodeImageSettings {
+  src: string
+  height: number
+  width: number
+  excavate?: boolean
+  x?: number
+  y?: number
+}
+
+interface QRCodeProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: string
+  size?: number
+  level?: "L" | "M" | "Q" | "H"
+  bgColor?: string
+  fgColor?: string
+  includeMargin?: boolean
+  imageSettings?: QRCodeImageSettings
+}
+
+const QRCode = React.forwardRef<HTMLDivElement, QRCodeProps>(
+  (
+    {
+      className,
+      value,
+      size = 256,
+      level = "M",
+      bgColor = "#FFFFFF",
+      fgColor = "#000000",
+      includeMargin = false,
+      imageSettings,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        className={cn("inline-flex items-center justify-center", className)}
+        {...props}
+      >
+        <QRCodeSVG
+          value={value}
+          size={size}
+          level={level}
+          bgColor={bgColor}
+          fgColor={fgColor}
+          includeMargin={includeMargin}
+          imageSettings={imageSettings as any}
+        />
+      </Box>
+    )
+  }
+)
+QRCode.displayName = "QRCode"
+
+export { QRCode }

package/src/relative-time.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { Box } from '@hanzo/ui'
+
+import { cn } from "./utils"
+
+export interface RelativeTimeProps
+  extends React.HTMLAttributes<HTMLTimeElement> {
+  date: Date | string
+  format?: "auto" | "short" | "long"
+  updateInterval?: number
+}
+
+const RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(
+  (
+    { className, date, format = "auto", updateInterval = 60000, ...props },
+    ref
+  ) => {
+    const [relativeTime, setRelativeTime] = React.useState("")
+
+    const getRelativeTime = React.useCallback(() => {
+      const now = new Date()
+      const then = new Date(date)
+      const diffInSeconds = Math.floor((now.getTime() - then.getTime()) / 1000)
+
+      if (format === "short") {
+        if (diffInSeconds < 60) return `${diffInSeconds}s`
+        if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)}m`
+        if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h`
+        if (diffInSeconds < 604800)
+          return `${Math.floor(diffInSeconds / 86400)}d`
+        if (diffInSeconds < 2592000)
+          return `${Math.floor(diffInSeconds / 604800)}w`
+        if (diffInSeconds < 31536000)
+          return `${Math.floor(diffInSeconds / 2592000)}mo`
+        return `${Math.floor(diffInSeconds / 31536000)}y`
+      }
+
+      if (diffInSeconds < 60) return "just now"
+      if (diffInSeconds < 120) return "1 minute ago"
+      if (diffInSeconds < 3600)
+        return `${Math.floor(diffInSeconds / 60)} minutes ago`
+      if (diffInSeconds < 7200) return "1 hour ago"
+      if (diffInSeconds < 86400)
+        return `${Math.floor(diffInSeconds / 3600)} hours ago`
+      if (diffInSeconds < 172800) return "1 day ago"
+      if (diffInSeconds < 604800)
+        return `${Math.floor(diffInSeconds / 86400)} days ago`
+      if (diffInSeconds < 1209600) return "1 week ago"
+      if (diffInSeconds < 2592000)
+        return `${Math.floor(diffInSeconds / 604800)} weeks ago`
+      if (diffInSeconds < 5184000) return "1 month ago"
+      if (diffInSeconds < 31536000)
+        return `${Math.floor(diffInSeconds / 2592000)} months ago`
+      if (diffInSeconds < 63072000) return "1 year ago"
+      return `${Math.floor(diffInSeconds / 31536000)} years ago`
+    }, [date, format])
+
+    React.useEffect(() => {
+      setRelativeTime(getRelativeTime())
+
+      const interval = setInterval(() => {
+        setRelativeTime(getRelativeTime())
+      }, updateInterval)
+
+      return () => clearInterval(interval)
+    }, [getRelativeTime, updateInterval])
+
+    return (
+      <Box tag="time"
+        ref={ref}
+        dateTime={new Date(date).toISOString()}
+        className={cn(className)}
+        {...props}
+      >
+        {relativeTime}
+      </Box>
+    )
+  }
+)
+RelativeTime.displayName = "RelativeTime"
+
+export { RelativeTime }

package/src/resizable.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { GripVertical } from "lucide-react"
+import { Box, css } from '@hanzo/ui'
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "./utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <Box className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical style={css('h-2.5 w-2.5')} />
+      </Box>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/reveal-animation.tsx

@@ -0,0 +1,532 @@
+"use client"
+
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import { motion, useAnimation, useInView, Variants } from "motion/react"
+
+import { cn } from "./utils"
+
+/**
+ * Custom hook to detect prefers-reduced-motion
+ */
+function usePrefersReducedMotion(): boolean {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setPrefersReducedMotion(mediaQuery.matches)
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches)
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+    return () => mediaQuery.removeEventListener("change", handleChange)
+  }, [])
+
+  return prefersReducedMotion
+}
+
+export interface RevealAnimationProps {
+  /**
+   * Children to animate
+   */
+  children: React.ReactNode
+  /**
+   * Animation direction
+   */
+  direction?: "up" | "down" | "left" | "right" | "fade" | "scale" | "rotate"
+  /**
+   * Animation duration in milliseconds
+   */
+  duration?: number
+  /**
+   * Delay before animation starts in milliseconds
+   */
+  delay?: number
+  /**
+   * Distance for directional animations
+   */
+  distance?: number
+  /**
+   * Whether to stagger children animations
+   */
+  staggerChildren?: boolean
+  /**
+   * Stagger delay between children in milliseconds
+   */
+  staggerDelay?: number
+  /**
+   * Intersection threshold (0-1)
+   */
+  threshold?: number
+  /**
+   * Root margin for intersection observer
+   */
+  rootMargin?: string
+  /**
+   * Whether animation should trigger once or every time
+   */
+  triggerOnce?: boolean
+  /**
+   * Custom CSS class
+   */
+  className?: string
+  /**
+   * Custom styling
+   */
+  style?: React.CSSProperties
+  /**
+   * Callback when animation starts
+   */
+  onAnimationStart?: () => void
+  /**
+   * Callback when animation completes
+   */
+  onAnimationComplete?: () => void
+  /**
+   * Custom variants for complex animations
+   */
+  customVariants?: Variants
+  /**
+   * Whether to use viewport detection or custom trigger
+   */
+  useViewport?: boolean
+  /**
+   * Manual trigger (when useViewport is false)
+   */
+  trigger?: boolean
+  /**
+   * Easing function
+   */
+  easing?:
+    | "linear"
+    | "easeIn"
+    | "easeOut"
+    | "easeInOut"
+    | "circIn"
+    | "circOut"
+    | "circInOut"
+    | "backIn"
+    | "backOut"
+    | "backInOut"
+  /**
+   * Whether to animate on scroll
+   */
+  animateOnScroll?: boolean
+  /**
+   * Scroll animation progress (0-1)
+   */
+  scrollProgress?: number
+}
+
+const easingFunctions = {
+  linear: [0, 0, 1, 1],
+  easeIn: [0.42, 0, 1, 1],
+  easeOut: [0, 0, 0.58, 1],
+  easeInOut: [0.42, 0, 0.58, 1],
+  circIn: [0.6, 0.04, 0.98, 0.335],
+  circOut: [0.075, 0.82, 0.165, 1],
+  circInOut: [0.785, 0.135, 0.15, 0.86],
+  backIn: [0.6, -0.28, 0.735, 0.045],
+  backOut: [0.175, 0.885, 0.32, 1.275],
+  backInOut: [0.68, -0.55, 0.265, 1.55],
+} as const
+
+const directionVariants = {
+  up: {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0 },
+  },
+  down: {
+    hidden: { opacity: 0, y: -50 },
+    visible: { opacity: 1, y: 0 },
+  },
+  left: {
+    hidden: { opacity: 0, x: 50 },
+    visible: { opacity: 1, x: 0 },
+  },
+  right: {
+    hidden: { opacity: 0, x: -50 },
+    visible: { opacity: 1, x: 0 },
+  },
+  fade: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+  },
+  scale: {
+    hidden: { opacity: 0, scale: 0.8 },
+    visible: { opacity: 1, scale: 1 },
+  },
+  rotate: {
+    hidden: { opacity: 0, rotate: -10, scale: 0.9 },
+    visible: { opacity: 1, rotate: 0, scale: 1 },
+  },
+}
+
+/**
+ * Custom hook for scroll-based animations
+ */
+function useScrollAnimation(animateOnScroll: boolean, scrollProgress?: number) {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    if (!animateOnScroll) return
+
+    if (scrollProgress !== undefined) {
+      setProgress(scrollProgress)
+      return
+    }
+
+    const handleScroll = () => {
+      const scrolled = window.scrollY
+      const maxScroll =
+        document.documentElement.scrollHeight - window.innerHeight
+      const progress = Math.min(scrolled / maxScroll, 1)
+      setProgress(progress)
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [animateOnScroll, scrollProgress])
+
+  return progress
+}
+
+/**
+ * Custom hook for intersection-based reveal
+ */
+function useRevealAnimation(
+  threshold: number,
+  rootMargin: string,
+  triggerOnce: boolean,
+  useViewport: boolean,
+  manualTrigger?: boolean
+) {
+  const ref = useRef<HTMLDivElement>(null)
+  const isInView = useInView(ref, {
+    amount: threshold,
+    margin: rootMargin as any,
+    once: triggerOnce,
+  })
+  const controls = useAnimation()
+
+  const [hasTriggered, setHasTriggered] = useState(false)
+
+  useEffect(() => {
+    if (!useViewport && manualTrigger !== undefined) {
+      if (manualTrigger && !hasTriggered) {
+        controls.start("visible")
+        setHasTriggered(true)
+      } else if (!manualTrigger && !triggerOnce) {
+        controls.start("hidden")
+      }
+      return
+    }
+
+    if (useViewport) {
+      if (isInView) {
+        controls.start("visible")
+        setHasTriggered(true)
+      } else if (!triggerOnce && hasTriggered) {
+        controls.start("hidden")
+      }
+    }
+  }, [
+    isInView,
+    controls,
+    useViewport,
+    manualTrigger,
+    triggerOnce,
+    hasTriggered,
+  ])
+
+  return { ref, controls, isInView: useViewport ? isInView : manualTrigger }
+}
+
+/**
+ * Reveal animation component with scroll and intersection triggers
+ */
+export function RevealAnimation({
+  children,
+  direction = "up",
+  duration = 600,
+  delay = 0,
+  distance = 50,
+  staggerChildren = false,
+  staggerDelay = 100,
+  threshold = 0.1,
+  rootMargin = "0px",
+  triggerOnce = true,
+  className,
+  style,
+  onAnimationStart,
+  onAnimationComplete,
+  customVariants,
+  useViewport = true,
+  trigger,
+  easing = "easeOut",
+  animateOnScroll = false,
+  scrollProgress,
+}: RevealAnimationProps) {
+  const prefersReducedMotion = usePrefersReducedMotion()
+
+  const { ref, controls, isInView } = useRevealAnimation(
+    threshold,
+    rootMargin,
+    triggerOnce,
+    useViewport,
+    trigger
+  )
+
+  const scrollAnimationProgress = useScrollAnimation(
+    animateOnScroll,
+    scrollProgress
+  )
+
+  // Skip animations if reduced motion is preferred
+  useEffect(() => {
+    if (prefersReducedMotion) {
+      controls.set("visible")
+    }
+  }, [prefersReducedMotion, controls])
+
+  const variants = customVariants || {
+    ...directionVariants[direction],
+    hidden: {
+      ...directionVariants[direction].hidden,
+      ...(direction === "up" && { y: distance }),
+      ...(direction === "down" && { y: -distance }),
+      ...(direction === "left" && { x: distance }),
+      ...(direction === "right" && { x: -distance }),
+    },
+  }
+
+  const containerVariants: Variants = staggerChildren
+    ? {
+        hidden: {},
+        visible: {
+          transition: {
+            staggerChildren: staggerDelay / 1000,
+            delayChildren: delay / 1000,
+          },
+        },
+      }
+    : variants
+
+  const childVariants: Variants = staggerChildren ? variants : {}
+
+  const transition = {
+    duration: duration / 1000,
+    delay: staggerChildren ? 0 : delay / 1000,
+    ease: easingFunctions[easing] as any,
+  }
+
+  // Handle scroll-based animation
+  useEffect(() => {
+    if (animateOnScroll) {
+      const progress = scrollAnimationProgress
+      if (progress > 0) {
+        controls.start("visible")
+      } else {
+        controls.start("hidden")
+      }
+    }
+  }, [animateOnScroll, scrollAnimationProgress, controls])
+
+  const handleAnimationStart = () => {
+    onAnimationStart?.()
+  }
+
+  const handleAnimationComplete = () => {
+    onAnimationComplete?.()
+  }
+
+  const renderChildren = () => {
+    if (!staggerChildren) {
+      return children
+    }
+
+    return React.Children.map(children, (child, index) => (
+      <motion.div
+        key={index}
+        variants={childVariants}
+        transition={{
+          ...transition,
+          delay: index * (staggerDelay / 1000),
+        }}
+        onAnimationStart={index === 0 ? handleAnimationStart : undefined}
+        onAnimationComplete={
+          index === React.Children.count(children) - 1
+            ? handleAnimationComplete
+            : undefined
+        }
+      >
+        {child}
+      </motion.div>
+    ))
+  }
+
+  return (
+    <motion.div
+      ref={ref as never}
+      className={cn(className)}
+      style={style}
+      variants={containerVariants}
+      initial="hidden"
+      animate={controls}
+      transition={transition}
+      onAnimationStart={!staggerChildren ? handleAnimationStart : undefined}
+      onAnimationComplete={
+        !staggerChildren ? handleAnimationComplete : undefined
+      }
+    >
+      {renderChildren()}
+    </motion.div>
+  )
+}
+
+/**
+ * Multiple reveal animations for complex layouts
+ */
+export function RevealGroup({
+  children,
+  staggerDelay = 200,
+  ...props
+}: {
+  children: React.ReactNode
+  staggerDelay?: number
+} & Omit<RevealAnimationProps, "children" | "staggerChildren">) {
+  return (
+    <div>
+      {React.Children.map(children, (child, index) => (
+        <RevealAnimation key={index} delay={index * staggerDelay} {...props}>
+          {child}
+        </RevealAnimation>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * Scroll-triggered reveal with progress
+ */
+export function ScrollReveal({
+  children,
+  startOffset = 0,
+  endOffset = 1,
+  ...props
+}: {
+  children: React.ReactNode
+  startOffset?: number
+  endOffset?: number
+} & Omit<RevealAnimationProps, "children" | "animateOnScroll">) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [scrollProgress, setScrollProgress] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!ref.current) return
+
+      const element = ref.current
+      const rect = element.getBoundingClientRect()
+      const windowHeight = window.innerHeight
+
+      const elementTop = rect.top
+      const elementHeight = rect.height
+
+      const startPoint = windowHeight * (1 - startOffset)
+      const endPoint = -elementHeight * endOffset
+
+      const progress = Math.max(
+        0,
+        Math.min(1, (startPoint - elementTop) / (startPoint - endPoint))
+      )
+      setScrollProgress(progress)
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    handleScroll() // Initial call
+
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [startOffset, endOffset])
+
+  return (
+    <div ref={ref}>
+      <RevealAnimation
+        animateOnScroll
+        scrollProgress={scrollProgress}
+        {...props}
+      >
+        {children}
+      </RevealAnimation>
+    </div>
+  )
+}
+
+/**
+ * Preset reveal animation variations
+ */
+export const RevealPresets = {
+  /**
+   * Gentle fade up
+   */
+  FadeUp: (props: Omit<RevealAnimationProps, "direction" | "easing">) => (
+    <RevealAnimation direction="up" easing="easeOut" {...props} />
+  ),
+
+  /**
+   * Bouncy scale
+   */
+  BounceScale: (props: Omit<RevealAnimationProps, "direction" | "easing">) => (
+    <RevealAnimation
+      direction="scale"
+      easing="backOut"
+      duration={800}
+      {...props}
+    />
+  ),
+
+  /**
+   * Staggered list reveal
+   */
+  StaggerList: (
+    props: Omit<RevealAnimationProps, "staggerChildren" | "direction">
+  ) => (
+    <RevealAnimation
+      direction="up"
+      staggerChildren
+      staggerDelay={150}
+      {...props}
+    />
+  ),
+
+  /**
+   * Slide from left
+   */
+  SlideLeft: (props: Omit<RevealAnimationProps, "direction" | "distance">) => (
+    <RevealAnimation direction="left" distance={100} {...props} />
+  ),
+
+  /**
+   * Rotate reveal
+   */
+  RotateReveal: (props: Omit<RevealAnimationProps, "direction" | "easing">) => (
+    <RevealAnimation
+      direction="rotate"
+      easing="backOut"
+      duration={1000}
+      {...props}
+    />
+  ),
+
+  /**
+   * Progressive scroll reveal
+   */
+  ScrollProgressive: (props: Omit<RevealAnimationProps, "animateOnScroll">) => (
+    <RevealAnimation animateOnScroll useViewport={false} {...props} />
+  ),
+}
+
+export default RevealAnimation