cyberui-2045 2.3.0 → 2.4.0

package/dist/components/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../src/components/Carousel.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback, memo, useMemo } from \"react\";\r\nimport Image from \"./Image\";\r\nimport type { ResponsiveValue } from \"../utils/responsive\";\r\nimport {\r\n  getResponsiveClasses,\r\n  RESPONSIVE_SIZE_MAPS,\r\n} from \"../utils/responsive\";\r\nimport { cn } from \"../utils/cn\";\r\n\r\n/**\r\n * Size options for the Carousel component\r\n */\r\nexport type CarouselSize = \"sm\" | \"md\" | \"lg\";\r\n\r\n/**\r\n * Transition effects for the Carousel\r\n */\r\nexport type CarouselTransition = \"slide\" | \"fade\" | \"matrix\" | \"signal-glitch\";\r\n\r\n/**\r\n * Object fit options for images\r\n */\r\nexport type CarouselObjectFit = \"cover\" | \"contain\";\r\n\r\n/**\r\n * Image data structure for Carousel\r\n */\r\nexport interface CarouselImageData {\r\n  /** Image source URL */\r\n  src: string;\r\n  /** Alt text for accessibility */\r\n  alt: string;\r\n  /** Optional fallback image URL */\r\n  fallbackSrc?: string;\r\n  /** Optional caption */\r\n  caption?: string;\r\n}\r\n\r\n/**\r\n * Lifecycle callback functions for Carousel events\r\n */\r\nexport interface CarouselCallbacks {\r\n  /** Fired before slide change (fromIndex, toIndex) */\r\n  onBeforeChange?: (fromIndex: number, toIndex: number) => void;\r\n  /** Fired after slide change */\r\n  onAfterChange?: (index: number) => void;\r\n}\r\n\r\n\r\n/**\r\n * Props for the CyberUI Carousel component\r\n *\r\n * @example\r\n * // Basic carousel — images is CarouselImageData[]: { src, alt, fallbackSrc?, caption? }\r\n * <Carousel\r\n *   images={[\r\n *     { src: 'img1.jpg', alt: 'Cyber City', caption: 'Night District' },\r\n *     { src: 'img2.jpg', alt: 'Neon Lights', fallbackSrc: 'fallback.jpg' }\r\n *   ]}\r\n *   currentIndex={index}\r\n *   onChange={setIndex}\r\n * />\r\n *\r\n * @example\r\n * // Glitch effect carousel\r\n * <Carousel\r\n *   images={images}\r\n *   currentIndex={index}\r\n *   onChange={setIndex}\r\n *   transition=\"signal-glitch\"\r\n *   glitchRate={0.5}\r\n *   autoPlay\r\n *   interval={5000}\r\n * />\r\n */\r\nexport interface CarouselProps extends CarouselCallbacks {\r\n  /** Array of images to display */\r\n  images: CarouselImageData[];\r\n  /** Current slide index (controlled) */\r\n  currentIndex: number;\r\n  /** Callback when slide changes */\r\n  onChange: (index: number) => void;\r\n  /** Size variant with responsive support */\r\n  size?: ResponsiveValue<CarouselSize>;\r\n  /** Enable auto-play functionality */\r\n  autoPlay?: boolean;\r\n  /** Auto-play interval in milliseconds */\r\n  interval?: number;\r\n  /** Enable infinite loop */\r\n  infinite?: boolean;\r\n  /** Transition effect */\r\n  transition?: CarouselTransition;\r\n  /** Image object fit behavior */\r\n  objectFit?: CarouselObjectFit;\r\n  /** Show navigation arrows */\r\n  showArrows?: boolean;\r\n  /** Show slide indicators */\r\n  showIndicators?: boolean;\r\n  /** Additional CSS classes */\r\n  className?: string;\r\n  /** Disable click-to-expand on images */\r\n  disableImagePreview?: boolean;\r\n  /** Control signal-glitch effect frequency. Float (0.0-1.0) for probability, boolean for on/off */\r\n  glitchRate?: number | boolean;\r\n}\r\n\r\n/**\r\n * A cinematic, high-performance cyberpunk carousel with glitch transitions and responsive scaling.\r\n * \r\n * @example\r\n * <Carousel \r\n *   images={[\r\n *     { src: 'city.jpg', alt: 'Neo-Tokyo', caption: 'Sector 7' },\r\n *     { src: 'lab.jpg', alt: 'Bio-Lab', caption: 'Deep Research' }\r\n *   ]} \r\n *   currentIndex={index} \r\n *   onChange={setIndex} \r\n *   transition=\"signal-glitch\" \r\n * />\r\n */\r\nconst Carousel: React.FC<CarouselProps> = ({\r\n  images,\r\n  currentIndex,\r\n  onChange,\r\n  size = \"md\",\r\n  autoPlay = true,\r\n  interval = 3000,\r\n  infinite = true,\r\n  transition = \"slide\",\r\n  objectFit = \"cover\",\r\n  showArrows = true,\r\n  showIndicators = true,\r\n  className = \"\",\r\n  disableImagePreview = false,\r\n  glitchRate = 1.0,\r\n  onBeforeChange,\r\n  onAfterChange,\r\n}) => {\r\n  const [isTransitioning, setIsTransitioning] = useState(false);\r\n  const [autoPlayActive, setAutoPlayActive] = useState(autoPlay);\r\n  const [shouldGlitch, setShouldGlitch] = useState(true);\r\n\r\n  // Memoized classes\r\n  const sizeClasses = useMemo(\r\n    () => getResponsiveClasses(size, RESPONSIVE_SIZE_MAPS.carousel),\r\n    [size]\r\n  );\r\n\r\n  // Image classes (objectFit handled by CSS selectors)\r\n  const getImageClasses = \"w-full h-full\";\r\n\r\n  // Handle slide change with lifecycle callbacks\r\n  const handleSlideChange = useCallback(\r\n    (newIndex: number) => {\r\n      if (newIndex === currentIndex || isTransitioning) return;\r\n\r\n      // Determine if this transition should use glitch effects (for signal-glitch transition)\r\n      const shouldUseGlitch =\r\n        transition === \"signal-glitch\" &&\r\n        (() => {\r\n          if (typeof glitchRate === \"boolean\") {\r\n            return glitchRate;\r\n          }\r\n          // Float value: probability check\r\n          return Math.random() < glitchRate;\r\n        })();\r\n\r\n      setShouldGlitch(shouldUseGlitch);\r\n      setIsTransitioning(true);\r\n      onBeforeChange?.(currentIndex, newIndex);\r\n\r\n      // For slide transition, change immediately since CSS handles animation\r\n      // For fade/matrix transitions, wait for transition to complete\r\n      // For signal-glitch, use glitch timing only if effects are active, otherwise use fade timing\r\n      const delay =\r\n        transition === \"slide\"\r\n          ? 0\r\n          : transition === \"signal-glitch\" && shouldUseGlitch\r\n          ? 600\r\n          : 250;\r\n\r\n      setTimeout(() => {\r\n        onChange(newIndex);\r\n        setIsTransitioning(false);\r\n        onAfterChange?.(newIndex);\r\n      }, delay);\r\n    },\r\n    [\r\n      currentIndex,\r\n      isTransitioning,\r\n      onChange,\r\n      onBeforeChange,\r\n      onAfterChange,\r\n      transition,\r\n      glitchRate,\r\n    ]\r\n  );\r\n\r\n  // Auto-play logic\r\n  useEffect(() => {\r\n    if (!autoPlayActive || images.length <= 1) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const nextIndex = infinite\r\n        ? (currentIndex + 1) % images.length\r\n        : Math.min(currentIndex + 1, images.length - 1);\r\n\r\n      if (!infinite && nextIndex === images.length - 1) {\r\n        setAutoPlayActive(false);\r\n        return;\r\n      }\r\n\r\n      handleSlideChange(nextIndex);\r\n    }, interval);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [\r\n    autoPlayActive,\r\n    currentIndex,\r\n    images.length,\r\n    infinite,\r\n    interval,\r\n    handleSlideChange,\r\n  ]);\r\n\r\n  // Navigation handlers\r\n  const goToPrevious = useCallback(() => {\r\n    if (images.length <= 1) return;\r\n\r\n    const prevIndex = infinite\r\n      ? (currentIndex - 1 + images.length) % images.length\r\n      : Math.max(currentIndex - 1, 0);\r\n\r\n    setAutoPlayActive(false);\r\n    handleSlideChange(prevIndex);\r\n  }, [currentIndex, images.length, infinite, handleSlideChange]);\r\n\r\n  const goToNext = useCallback(() => {\r\n    if (images.length <= 1) return;\r\n\r\n    const nextIndex = infinite\r\n      ? (currentIndex + 1) % images.length\r\n      : Math.min(currentIndex + 1, images.length - 1);\r\n\r\n    setAutoPlayActive(false);\r\n    handleSlideChange(nextIndex);\r\n  }, [currentIndex, images.length, infinite, handleSlideChange]);\r\n\r\n  const goToSlide = useCallback(\r\n    (index: number) => {\r\n      setAutoPlayActive(false);\r\n      handleSlideChange(index);\r\n    },\r\n    [handleSlideChange]\r\n  );\r\n\r\n  // Keyboard navigation\r\n  useEffect(() => {\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === \"ArrowLeft\") goToPrevious();\r\n      if (e.key === \"ArrowRight\") goToNext();\r\n    };\r\n\r\n    window.addEventListener(\"keydown\", handleKeyDown);\r\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\r\n  }, [goToPrevious, goToNext]);\r\n\r\n  // ============================================================================\r\n  // TRANSITION RENDERING HELPERS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Renders the slide transition (horizontal sliding)\r\n   */\r\n  const renderSlideTransition = () => (\r\n    <div\r\n      className=\"flex h-full transition-transform duration-500 ease-in-out\"\r\n      style={{\r\n        transform: `translateX(-${currentIndex * 100}%)`,\r\n        willChange: \"transform\",\r\n      }}\r\n    >\r\n      {images.map((image, index) => (\r\n        <div key={index} className=\"w-full h-full flex-shrink-0\">\r\n          <Image\r\n            src={image.src}\r\n            alt={image.alt}\r\n            fallback={image.fallbackSrc}\r\n            className={getImageClasses}\r\n            size=\"lg\"\r\n            preview={!disableImagePreview}\r\n            loading={index <= 1 ? \"eager\" : \"lazy\"}\r\n            onPreviewOpen={() => setAutoPlayActive(false)}\r\n            onPreviewClose={() => setAutoPlayActive(autoPlay)}\r\n          />\r\n        </div>\r\n      ))}\r\n    </div>\r\n  );\r\n\r\n  /**\r\n   * Renders fade and matrix transitions (stacked with opacity/transforms)\r\n   */\r\n  const renderFadeMatrixTransition = () => (\r\n    <>\r\n      {images.map((image, index) => {\r\n        const isActive = index === currentIndex;\r\n        const transitionStyle =\r\n          transition === \"fade\"\r\n            ? {\r\n                opacity: isActive ? 1 : 0,\r\n                transition: \"opacity 500ms ease-in-out\",\r\n                willChange: \"opacity\",\r\n              }\r\n            : transition === \"matrix\"\r\n            ? {\r\n                opacity: isActive ? 1 : 0,\r\n                transform: isActive\r\n                  ? \"scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0) skew(0deg) perspective(1000px)\"\r\n                  : isTransitioning\r\n                  ? \"scale(0.6) rotateX(35deg) rotateY(15deg) rotateZ(-3deg) translateZ(-80px) skew(5deg, 2deg) perspective(1000px)\"\r\n                  : \"scale(0.92) rotateX(8deg) rotateY(2deg) translateZ(-20px) skew(1deg) perspective(1000px)\",\r\n                filter: isActive\r\n                  ? \"brightness(1) contrast(1) hue-rotate(0deg) saturate(1) drop-shadow(0 0 10px rgba(0, 255, 136, 0.3))\"\r\n                  : isTransitioning\r\n                  ? \"brightness(0.1) contrast(4) hue-rotate(270deg) saturate(3) blur(2px) drop-shadow(0 0 20px rgba(255, 0, 93, 0.8)) drop-shadow(0 0 30px rgba(0, 255, 249, 0.6))\"\r\n                  : \"brightness(0.7) contrast(1.5) hue-rotate(120deg) saturate(1.4) drop-shadow(0 0 8px rgba(0, 255, 136, 0.4))\",\r\n                transition:\r\n                  \"all 1200ms cubic-bezier(0.175, 0.885, 0.32, 1.275)\",\r\n                willChange: \"transform, opacity, filter\",\r\n                boxShadow: isActive\r\n                  ? `0 0 30px rgba(0, 255, 136, 0.5), inset 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.2)`\r\n                  : isTransitioning\r\n                  ? `0 0 50px rgba(255, 0, 93, 1), 0 0 100px rgba(0, 255, 249, 0.8), 0 0 150px rgba(255, 251, 0, 0.6), inset 0 0 50px rgba(255, 0, 93, 0.3), inset 0 0 80px rgba(0, 255, 249, 0.2), 0 0 0 3px rgba(255, 0, 93, 0.8), 0 0 0 6px rgba(0, 255, 249, 0.6), 0 0 200px rgba(255, 251, 0, 0.3)`\r\n                  : `0 0 20px rgba(0, 255, 136, 0.4), inset 0 0 15px rgba(0, 255, 136, 0.1), 0 0 40px rgba(0, 255, 136, 0.2)`,\r\n              }\r\n            : {};\r\n\r\n        return (\r\n          <div\r\n            key={index}\r\n            className=\"absolute inset-0 w-full h-full\"\r\n            style={{\r\n              ...transitionStyle,\r\n              pointerEvents: isActive\r\n                ? (\"auto\" as React.CSSProperties[\"pointerEvents\"])\r\n                : (\"none\" as React.CSSProperties[\"pointerEvents\"]),\r\n            }}\r\n          >\r\n            <Image\r\n              src={image.src}\r\n              alt={image.alt}\r\n              fallback={image.fallbackSrc}\r\n              className={getImageClasses}\r\n              size=\"lg\"\r\n              preview={!disableImagePreview}\r\n              loading={index <= 1 ? \"eager\" : \"lazy\"}\r\n              onPreviewOpen={() => setAutoPlayActive(false)}\r\n              onPreviewClose={() => setAutoPlayActive(autoPlay)}\r\n            />\r\n\r\n            {/* Matrix-specific glitch effects */}\r\n            {transition === \"matrix\" &&\r\n              renderMatrixEffects(isActive, isTransitioning)}\r\n          </div>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n\r\n  /**\r\n   * Renders signal glitch transition with analog interference effects\r\n   */\r\n  const renderSignalGlitchTransition = () => (\r\n    <>\r\n      {images.map((image, index) => {\r\n        const isActive = index === currentIndex;\r\n        const isPrevious =\r\n          index === (currentIndex - 1 + images.length) % images.length;\r\n\r\n        // During signal glitch transition, use effects only if shouldGlitch is true\r\n        const imageStyle =\r\n          isTransitioning && transition === \"signal-glitch\" && shouldGlitch\r\n            ? {\r\n                opacity: isActive ? 1 : isPrevious ? 0.8 : 0,\r\n                animation: isActive\r\n                  ? \"signal-image-flicker-in 1s ease-out forwards\"\r\n                  : isPrevious\r\n                  ? \"signal-image-flicker-out 1s ease-out forwards\"\r\n                  : \"none\",\r\n                willChange: \"opacity\",\r\n                pointerEvents: (isTransitioning && !isActive\r\n                  ? \"none\"\r\n                  : \"auto\") as React.CSSProperties[\"pointerEvents\"],\r\n                transform: isTransitioning ? \"translateZ(0)\" : \"none\", // Reduce jumping with hardware acceleration\r\n              }\r\n            : {\r\n                opacity: isActive ? 1 : 0,\r\n                transition: \"opacity 250ms ease-in-out\",\r\n                willChange: \"opacity\",\r\n                pointerEvents: (isActive\r\n                  ? \"auto\"\r\n                  : \"none\") as React.CSSProperties[\"pointerEvents\"],\r\n              };\r\n\r\n        return (\r\n          <div\r\n            key={index}\r\n            className=\"absolute inset-0 w-full h-full\"\r\n            style={imageStyle}\r\n          >\r\n            <Image\r\n              src={image.src}\r\n              alt={image.alt}\r\n              fallback={image.fallbackSrc}\r\n              className={getImageClasses}\r\n              size=\"lg\"\r\n              preview={\r\n                !disableImagePreview &&\r\n                !(\r\n                  isTransitioning &&\r\n                  transition === \"signal-glitch\" &&\r\n                  shouldGlitch\r\n                )\r\n              }\r\n              loading={index <= 1 ? \"eager\" : \"lazy\"}\r\n              onPreviewOpen={() => setAutoPlayActive(false)}\r\n              onPreviewClose={() => setAutoPlayActive(autoPlay)}\r\n            />\r\n\r\n            {/* Signal-Glitch specific effects */}\r\n            {transition === \"signal-glitch\" &&\r\n              isTransitioning &&\r\n              shouldGlitch &&\r\n              renderSignalGlitchEffects(isActive)}\r\n          </div>\r\n        );\r\n      })}\r\n    </>\r\n  );\r\n\r\n  // ============================================================================\r\n  // EFFECT RENDERING HELPERS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Renders Matrix transition visual effects\r\n   */\r\n  const renderMatrixEffects = (isActive: boolean, isTransitioning: boolean) => (\r\n    <>\r\n      {/* Enhanced scanning line effects */}\r\n      {isTransitioning && (\r\n        <div className=\"absolute inset-0 overflow-hidden pointer-events-none\">\r\n          {/* Different effects based on active state */}\r\n          {isActive ? (\r\n            // Active image gets subtle enhancement effects\r\n            <div className=\"w-full h-full bg-gradient-to-b from-primary/5 to-transparent opacity-30\" />\r\n          ) : (\r\n            // Transitioning image gets more dramatic effects\r\n            <div className=\"w-full h-full bg-gradient-to-b from-primary/10 via-secondary/5 to-accent/10 opacity-50\" />\r\n          )}\r\n        </div>\r\n      )}\r\n    </>\r\n  );\r\n\r\n  /**\r\n   * Renders Signal Glitch visual effects with chaotic analog interference\r\n   */\r\n  const renderSignalGlitchEffects = (isActive: boolean) => (\r\n    <>\r\n      {/* Background Grid Lines - Intensity varies by active state */}\r\n      <div\r\n        className={`absolute inset-0 pointer-events-none z-5 ${\r\n          isActive ? \"opacity-30\" : \"opacity-15\"\r\n        }`}\r\n      >\r\n        <div\r\n          className=\"absolute inset-0\"\r\n          style={{\r\n            backgroundImage: `\r\n              linear-gradient(rgba(0, 255, 136, 0.3) 1px, transparent 1px),\r\n              linear-gradient(90deg, rgba(0, 255, 136, 0.3) 1px, transparent 1px)\r\n            `,\r\n            backgroundSize: \"40px 40px\",\r\n            animation: \"signal-glitch-blink 1s ease-in-out infinite\",\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Moving Scan Lines - Background */}\r\n      <div className=\"absolute inset-0 pointer-events-none z-10 overflow-hidden\">\r\n        {/* Primary scan line */}\r\n        <div\r\n          className=\"absolute w-full h-px bg-gradient-to-r from-transparent via-primary to-transparent opacity-80\"\r\n          style={\r\n            {\r\n              top: \"20%\",\r\n              animation: \"signal-glitch-vertical-sweep 1s linear infinite\",\r\n              boxShadow:\r\n                \"0 0 8px rgba(255, 0, 93, 1), 0 0 16px rgba(255, 0, 93, 0.5)\",\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n\r\n        {/* Secondary scan line */}\r\n        <div\r\n          className=\"absolute w-full h-px bg-gradient-to-r from-transparent via-secondary to-transparent opacity-60\"\r\n          style={\r\n            {\r\n              top: \"60%\",\r\n              animation:\r\n                \"signal-glitch-vertical-sweep 1.5s linear infinite 0.3s\",\r\n              boxShadow: \"0 0 6px rgba(0, 255, 249, 0.8)\",\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n\r\n        {/* Tertiary scan line */}\r\n        <div\r\n          className=\"absolute w-full h-px bg-gradient-to-r from-transparent via-accent to-transparent opacity-70\"\r\n          style={\r\n            {\r\n              top: \"80%\",\r\n              animation:\r\n                \"signal-glitch-vertical-sweep 0.8s linear infinite 0.7s\",\r\n              boxShadow: \"0 0 10px rgba(255, 251, 0, 0.9)\",\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n      </div>\r\n\r\n      {/* Fast Blinking Elements and Scanline Chaos */}\r\n      <div className=\"absolute inset-0 pointer-events-none z-30\">\r\n        {/* Rapid blinking overlay */}\r\n        <div\r\n          className=\"absolute inset-0 bg-gradient-to-b from-transparent via-primary/8 to-transparent\"\r\n          style={{\r\n            animation: \"signal-glitch-blink 1s ease-in-out infinite\",\r\n          }}\r\n        />\r\n\r\n        {/* Chaotic horizontal scanlines */}\r\n        <div\r\n          className=\"absolute w-full h-px bg-accent/80 top-1/3\"\r\n          style={{\r\n            animation: \"signal-scanline-jitter 1s linear infinite\",\r\n            boxShadow: \"0 0 4px rgba(255, 251, 0, 1)\",\r\n          }}\r\n        />\r\n\r\n        <div\r\n          className=\"absolute w-full h-px bg-secondary/60 top-2/3\"\r\n          style={{\r\n            animation: \"signal-scanline-jitter 1s linear infinite 0.4s\",\r\n            boxShadow: \"0 0 4px rgba(0, 255, 249, 0.8)\",\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* RGB Channel Separation - Faster */}\r\n      <div\r\n        className=\"absolute inset-0 pointer-events-none z-40\"\r\n        style={{\r\n          animation: \"signal-rgb-separation 1s ease-in-out infinite\",\r\n          mixBlendMode: \"screen\",\r\n        }}\r\n      >\r\n        <div className=\"absolute inset-0 bg-transparent\" />\r\n      </div>\r\n\r\n      {/* Enhanced Static and Noise */}\r\n      <div className=\"absolute inset-0 pointer-events-none z-50\">\r\n        {/* More chaotic static patterns */}\r\n        <div\r\n          className=\"absolute top-1/4 left-1/2 w-24 h-2 bg-white/30\"\r\n          style={{\r\n            animation: \"signal-glitch-blink 1s ease-in-out infinite 0.1s\",\r\n            transform: \"translateX(-50%)\",\r\n            filter: \"blur(0.8px)\",\r\n          }}\r\n        />\r\n\r\n        <div\r\n          className=\"absolute top-3/4 right-1/4 w-20 h-1 bg-primary/40\"\r\n          style={{\r\n            animation: \"signal-glitch-blink 1s ease-in-out infinite 0.8s\",\r\n            filter: \"blur(0.4px)\",\r\n          }}\r\n        />\r\n\r\n        {/* Brighter spikes */}\r\n        <div\r\n          className=\"absolute top-1/2 left-1/4 w-3 h-12 bg-accent/60\"\r\n          style={{\r\n            animation: \"signal-glitch-blink 1s ease-in-out infinite 0.5s\",\r\n            filter: \"blur(1.5px)\",\r\n          }}\r\n        />\r\n      </div>\r\n    </>\r\n  );\r\n\r\n  // ============================================================================\r\n  // NAVIGATION RENDERING HELPERS\r\n  // ============================================================================\r\n\r\n  /**\r\n   * Renders navigation arrows\r\n   */\r\n  const renderNavigationArrows = () =>\r\n    showArrows &&\r\n    images.length > 1 && (\r\n      <>\r\n        {/* Previous arrow */}\r\n        <button\r\n          onClick={goToPrevious}\r\n          disabled={\r\n            (!infinite && currentIndex === 0) ||\r\n            (isTransitioning && transition === \"signal-glitch\" && shouldGlitch)\r\n          }\r\n          className=\"group absolute left-2 top-1/2 -translate-y-1/2 w-16 h-16 text-primary hover:text-accent cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none transition-all duration-300 flex items-center justify-center hover:scale-110\"\r\n          aria-label=\"Previous image\"\r\n        >\r\n          <svg\r\n            width=\"48\"\r\n            height=\"48\"\r\n            viewBox=\"0 0 100 100\"\r\n            className=\"transition-all duration-300 group-hover:scale-110 overflow-visible\"\r\n            style={{ overflow: \"visible\" } as React.CSSProperties}\r\n          >\r\n            <defs>\r\n              <linearGradient\r\n                id=\"arrow-gradient-left\"\r\n                x1=\"100%\"\r\n                y1=\"0%\"\r\n                x2=\"0%\"\r\n                y2=\"0%\"\r\n              >\r\n                <stop\r\n                  offset=\"0%\"\r\n                  stopColor=\"rgb(0, 255, 136)\"\r\n                  stopOpacity=\"1\"\r\n                  className=\"transition-all duration-500 opacity-0 group-hover:opacity-100\"\r\n                />\r\n                <stop\r\n                  offset=\"50%\"\r\n                  stopColor=\"rgb(0, 255, 249)\"\r\n                  stopOpacity=\"1\"\r\n                  className=\"transition-all duration-500 opacity-0 group-hover:opacity-100\"\r\n                />\r\n                <stop\r\n                  offset=\"100%\"\r\n                  stopColor=\"rgb(255, 0, 93)\"\r\n                  stopOpacity=\"1\"\r\n                  className=\"transition-all duration-500 opacity-0 group-hover:opacity-100\"\r\n                />\r\n              </linearGradient>\r\n            </defs>\r\n            <path\r\n              d=\"M70 20 L20 50 L70 80 L60 50 Z\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"3\"\r\n              fill=\"none\"\r\n              className=\"transition-all duration-300 group-hover:stroke-[4]\"\r\n            />\r\n            {/* RGB cycling halo on hover */}\r\n            <path\r\n              d=\"M70 20 L20 50 L70 80 L60 50 Z\"\r\n              stroke=\"rgb(255, 0, 93)\"\r\n              strokeWidth=\"4\"\r\n              fill=\"none\"\r\n              className=\"opacity-0 group-hover:opacity-100 group-hover:animate-[rgbStroke_1.5s_linear_infinite] group-active:opacity-0\"\r\n              style={\r\n                {\r\n                  filter:\r\n                    \"drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor) drop-shadow(0 0 18px currentColor)\",\r\n                } as React.CSSProperties\r\n              }\r\n            />\r\n            {/* RGB cycling solid stroke on click */}\r\n            <path\r\n              d=\"M70 20 L20 50 L70 80 L60 50 Z\"\r\n              stroke=\"rgb(255, 0, 93)\"\r\n              strokeWidth=\"4\"\r\n              fill=\"none\"\r\n              className=\"opacity-0 group-active:opacity-100 group-active:animate-[rgbStroke_1.5s_linear_infinite]\"\r\n            />\r\n          </svg>\r\n        </button>\r\n\r\n        {/* Next arrow */}\r\n        <button\r\n          onClick={goToNext}\r\n          disabled={\r\n            (!infinite && currentIndex === images.length - 1) ||\r\n            (isTransitioning && transition === \"signal-glitch\" && shouldGlitch)\r\n          }\r\n          className=\"group absolute right-2 top-1/2 -translate-y-1/2 w-16 h-16 text-primary hover:text-accent cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none transition-all duration-300 flex items-center justify-center hover:scale-110\"\r\n          aria-label=\"Next image\"\r\n        >\r\n          <svg\r\n            width=\"48\"\r\n            height=\"48\"\r\n            viewBox=\"0 0 100 100\"\r\n            className=\"transition-all duration-300 group-hover:scale-110 overflow-visible\"\r\n            style={{ overflow: \"visible\" } as React.CSSProperties}\r\n          >\r\n            <path\r\n              d=\"M30 20 L80 50 L30 80 L40 50 Z\"\r\n              stroke=\"currentColor\"\r\n              strokeWidth=\"3\"\r\n              fill=\"none\"\r\n              className=\"transition-all duration-300 group-hover:stroke-[4]\"\r\n            />\r\n            {/* RGB cycling halo on hover */}\r\n            <path\r\n              d=\"M30 20 L80 50 L30 80 L40 50 Z\"\r\n              stroke=\"rgb(255, 0, 93)\"\r\n              strokeWidth=\"4\"\r\n              fill=\"none\"\r\n              className=\"opacity-0 group-hover:opacity-100 group-hover:animate-[rgbStroke_1.5s_linear_infinite] group-active:opacity-0\"\r\n              style={\r\n                {\r\n                  filter:\r\n                    \"drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor) drop-shadow(0 0 18px currentColor)\",\r\n                } as React.CSSProperties\r\n              }\r\n            />\r\n            {/* RGB cycling solid stroke on click */}\r\n            <path\r\n              d=\"M30 20 L80 50 L30 80 L40 50 Z\"\r\n              stroke=\"rgb(255, 0, 93)\"\r\n              strokeWidth=\"4\"\r\n              fill=\"none\"\r\n              className=\"opacity-0 group-active:opacity-100 group-active:animate-[rgbStroke_1.5s_linear_infinite]\"\r\n            />\r\n          </svg>\r\n        </button>\r\n      </>\r\n    );\r\n\r\n  /**\r\n   * Renders slide indicators\r\n   */\r\n  const renderIndicators = () =>\r\n    showIndicators &&\r\n    images.length > 1 && (\r\n      <div className=\"flex justify-center mt-4 space-x-4\">\r\n        {images.map((_, index) => (\r\n          <button\r\n            key={index}\r\n            onClick={() => goToSlide(index)}\r\n            disabled={\r\n              isTransitioning && transition === \"signal-glitch\" && shouldGlitch\r\n            }\r\n            className=\"group relative transition-all duration-300 hover:scale-110 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-30\"\r\n            style={{\r\n              width: \"24px\",\r\n              height: \"24px\",\r\n            }}\r\n            aria-label={`Go to slide ${index + 1}`}\r\n          >\r\n            {/* Rotating focus ring - diamond to square frame */}\r\n            {index === currentIndex && (\r\n              <div\r\n                className=\"absolute inset-[-1px] border-2\"\r\n                style={\r\n                  {\r\n                    borderColor: \"rgb(255, 0, 93)\",\r\n                    animation:\r\n                      \"rotateFocusRing 0.8s ease-out forwards, rgbBorder 1.5s linear infinite 0.8s\",\r\n                  } as React.CSSProperties\r\n                }\r\n              />\r\n            )}\r\n            {/* Diamond shape with RGB cycling */}\r\n            <div\r\n              className={`absolute inset-0 border-2 transition-all duration-300 ${\r\n                index === currentIndex\r\n                  ? \"border-primary bg-primary/30 shadow-lg-primary animate-[rgbBorder_1.5s_linear_infinite]\"\r\n                  : \"border-accent bg-surface/50 group-hover:border-primary group-hover:bg-primary/20 group-hover:shadow-primary group-hover:animate-[rgbBorder_1.5s_linear_infinite]\"\r\n              }`}\r\n              style={{\r\n                clipPath: \"polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)\",\r\n              }}\r\n            />\r\n            {/* Inner RGB glow effect with pulse */}\r\n            {index === currentIndex && (\r\n              <div\r\n                className=\"absolute inset-2 bg-primary/60 animate-pulse\"\r\n                style={\r\n                  {\r\n                    clipPath: \"polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)\",\r\n                    animation:\r\n                      \"rgbBackground 1.5s linear infinite, pulse 2s ease-in-out infinite\",\r\n                  } as React.CSSProperties\r\n                }\r\n              />\r\n            )}\r\n            {/* Electric RGB lines for active state */}\r\n            {index === currentIndex && (\r\n              <div className=\"absolute inset-0 opacity-80\">\r\n                <div\r\n                  className=\"absolute top-1/2 left-2 right-2 h-0.5 bg-primary/80 animate-pulse\"\r\n                  style={\r\n                    {\r\n                      transform: \"translateY(-50%)\",\r\n                      animation:\r\n                        \"rgbBackground 1.5s linear infinite, pulse 2s ease-in-out infinite\",\r\n                    } as React.CSSProperties\r\n                  }\r\n                />\r\n                <div\r\n                  className=\"absolute left-1/2 top-2 bottom-2 w-0.5 bg-primary/80 animate-pulse\"\r\n                  style={\r\n                    {\r\n                      transform: \"translateX(-50%)\",\r\n                      animation:\r\n                        \"rgbBackground 1.5s linear infinite, pulse 2s ease-in-out infinite\",\r\n                    } as React.CSSProperties\r\n                  }\r\n                />\r\n              </div>\r\n            )}\r\n          </button>\r\n        ))}\r\n      </div>\r\n    );\r\n\r\n  // ============================================================================\r\n  // MAIN RENDER\r\n  // ============================================================================\r\n\r\n  if (images.length === 0) {\r\n    return (\r\n      <div\r\n        className={cn(sizeClasses, 'w-full bg-surface border border-accent rounded-lg flex items-center justify-center', className)}\r\n      >\r\n        <p className=\"text-muted\">No images to display</p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const currentImage = images[currentIndex];\r\n\r\n  return (\r\n    <div className={cn('relative w-full', className)}>\r\n      {/* Main image container */}\r\n      <div\r\n        className={`relative w-full overflow-hidden rounded-lg border border-accent bg-surface ${sizeClasses}`}\r\n      >\r\n        {/* Cyberpunk frame effects */}\r\n        <div className=\"absolute inset-0 pointer-events-none\">\r\n          {/* Corner brackets */}\r\n          <div className=\"absolute top-2 left-2 w-4 h-4 border-l-2 border-t-2 border-primary opacity-60\"></div>\r\n          <div className=\"absolute top-2 right-2 w-4 h-4 border-r-2 border-t-2 border-primary opacity-60\"></div>\r\n          <div className=\"absolute bottom-2 left-2 w-4 h-4 border-l-2 border-b-2 border-primary opacity-60\"></div>\r\n          <div className=\"absolute bottom-2 right-2 w-4 h-4 border-r-2 border-b-2 border-primary opacity-60\"></div>\r\n\r\n          {/* Scanning line animation */}\r\n          <div className=\"absolute inset-0 bg-gradient-to-b from-transparent via-primary/10 to-transparent h-1 animate-pulse\"></div>\r\n        </div>\r\n\r\n        {/* Images Container */}\r\n        <div\r\n          className={`relative w-full h-full overflow-hidden carousel-${objectFit}`}\r\n        >\r\n          {transition === \"slide\" && renderSlideTransition()}\r\n          {(transition === \"fade\" || transition === \"matrix\") &&\r\n            renderFadeMatrixTransition()}\r\n          {transition === \"signal-glitch\" && renderSignalGlitchTransition()}\r\n        </div>\r\n\r\n        {/* Caption overlay */}\r\n        {currentImage.caption && (\r\n          <div className=\"absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4\">\r\n            <p className=\"text-white text-sm font-medium\">\r\n              {currentImage.caption}\r\n            </p>\r\n          </div>\r\n        )}\r\n\r\n        {/* Navigation arrows */}\r\n        {renderNavigationArrows()}\r\n      </div>\r\n\r\n      {/* Indicators */}\r\n      {renderIndicators()}\r\n    </div>\r\n  );\r\n};\r\n\r\nCarousel.displayName = \"CyberUI.Carousel\";\r\n\r\nexport default memo(Carousel);\r\n"],"names":["Carousel","images","currentIndex","onChange","size","autoPlay","interval","infinite","transition","objectFit","showArrows","showIndicators","className","disableImagePreview","glitchRate","onBeforeChange","onAfterChange","isTransitioning","setIsTransitioning","useState","autoPlayActive","setAutoPlayActive","shouldGlitch","setShouldGlitch","sizeClasses","useMemo","getResponsiveClasses","RESPONSIVE_SIZE_MAPS","getImageClasses","handleSlideChange","useCallback","newIndex","shouldUseGlitch","useEffect","timer","nextIndex","goToPrevious","prevIndex","goToNext","goToSlide","index","handleKeyDown","e","renderSlideTransition","jsx","image","Image","renderFadeMatrixTransition","Fragment","isActive","transitionStyle","jsxs","renderMatrixEffects","renderSignalGlitchTransition","isPrevious","imageStyle","renderSignalGlitchEffects","renderNavigationArrows","renderIndicators","_","cn","currentImage","Carousel$1","memo"],"mappings":"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"}

package/dist/components/Checkbox.js

@@ -0,0 +1,92 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import M from "react";
+import { getResponsiveClasses as c } from "../utils/responsive.js";
+import { cn as r } from "../utils/cn.js";
+const b = ({
+  label: i,
+  error: m,
+  size: a = "md",
+  className: h = "",
+  checked: n,
+  onChange: p,
+  onCheckedChange: u,
+  disabled: s,
+  ...x
+}) => {
+  const [d, f] = M.useState(x.defaultChecked || !1), o = n !== void 0 ? n : d, g = (t) => {
+    s || (n === void 0 && f(t.target.checked), p?.(t), u?.(t.target.checked));
+  }, k = {
+    sm: "w-4 h-4",
+    md: "w-5 h-5",
+    lg: "w-6 h-6"
+  }, C = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  }, v = {
+    sm: "ml-6",
+    md: "ml-8",
+    lg: "ml-9"
+  }, j = c(a, k), w = c(a, C), L = c(a, v), N = (t) => s ? "stroke-muted/20" : r("transition-all duration-200 group-hover:stroke-secondary group-hover:stroke-[1.5]", t ? "stroke-secondary" : "stroke-secondary/50"), y = (t) => {
+    const l = "transition-all duration-200";
+    return s ? r(l, t ? "fill-muted/20" : "fill-transparent") : r(l, t ? "fill-secondary" : "fill-transparent");
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: r("flex flex-col gap-1", h, s && "opacity-50 cursor-not-allowed"), children: [
+    /* @__PURE__ */ e.jsxs("label", { className: r("flex items-center gap-3 group", s ? "cursor-not-allowed pointer-events-none" : "cursor-pointer"), children: [
+      /* @__PURE__ */ e.jsxs("div", { className: r("relative flex-shrink-0", j), children: [
+        /* @__PURE__ */ e.jsx(
+          "input",
+          {
+            type: "checkbox",
+            className: "absolute opacity-0 w-0 h-0",
+            checked: o,
+            onChange: g,
+            disabled: s,
+            ...x
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(
+          "svg",
+          {
+            className: "absolute inset-0 w-full h-full pointer-events-none",
+            viewBox: "0 0 20 20",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                "path",
+                {
+                  d: "M 1 1 L 19 1 L 19 15 L 15 19 L 1 19 Z",
+                  className: "fill-base/50"
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "path",
+                {
+                  d: "M 1 1 L 19 1 L 19 15 L 15 19 L 1 19 Z",
+                  className: N(o),
+                  strokeWidth: "1",
+                  fill: "none"
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "path",
+                {
+                  d: "M 4 4 L 16 4 L 16 13 L 13 16 L 4 16 Z",
+                  className: y(o)
+                }
+              )
+            ]
+          }
+        )
+      ] }),
+      i && /* @__PURE__ */ e.jsx("span", { className: r("transition-colors", w, s ? "text-muted" : "text-muted group-hover:text-secondary"), children: i })
+    ] }),
+    m && !s && /* @__PURE__ */ e.jsx("span", { className: r("text-xs text-error", L), children: m })
+  ] });
+};
+b.displayName = "CyberUI.Checkbox";
+export {
+  b as default
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../src/components/Checkbox.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { ResponsiveValue } from \"../utils/responsive\";\r\nimport { getResponsiveClasses } from \"../utils/responsive\";\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A cyberpunk-styled checkbox with neon glow effects.\r\n *\r\n * Features a custom SVG checkbox with a cut corner design, matching the cyberpunk aesthetic.\r\n * Supports both controlled and uncontrolled modes.\r\n *\r\n * @example\r\n * // Basic checkbox\r\n * <Checkbox label=\"Accept terms\" />\r\n *\r\n * @example\r\n * // Controlled checkbox — simple boolean API (matches Toggle)\r\n * <Checkbox\r\n *   label=\"Enable notifications\"\r\n *   checked={isEnabled}\r\n *   onCheckedChange={setIsEnabled}\r\n * />\r\n *\r\n * @example\r\n * // With error message\r\n * <Checkbox\r\n *   label=\"Required field\"\r\n *   error=\"This field is required\"\r\n * />\r\n */\r\nexport interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {\r\n  /**\r\n   * Label text displayed next to the checkbox.\r\n   */\r\n  label?: string;\r\n  /**\r\n   * Error message to display below the checkbox.\r\n   */\r\n  error?: string;\r\n  /**\r\n   * Size of the checkbox. Supports responsive values.\r\n   * @default 'md'\r\n   */\r\n  size?: ResponsiveValue<'sm' | 'md' | 'lg'>;\r\n  /**\r\n   * Additional CSS classes.\r\n   */\r\n  className?: string;\r\n  /**\r\n   * Convenience callback that receives the boolean checked value directly.\r\n   * Mirrors Toggle's onChange API — use this instead of onChange when you only need the value.\r\n   */\r\n  onCheckedChange?: (checked: boolean) => void;\r\n}\r\n\r\nconst Checkbox: React.FC<CheckboxProps> = ({\r\n  label,\r\n  error,\r\n  size = 'md',\r\n  className = '',\r\n  checked: controlledChecked,\r\n  onChange,\r\n  onCheckedChange,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [internalChecked, setInternalChecked] = React.useState(props.defaultChecked || false);\r\n  const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked;\r\n\r\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (disabled) return;\r\n    if (controlledChecked === undefined) {\r\n      setInternalChecked(e.target.checked);\r\n    }\r\n    onChange?.(e);\r\n    onCheckedChange?.(e.target.checked);\r\n  };\r\n\r\n  const sizeMap = {\r\n    sm: 'w-4 h-4',\r\n    md: 'w-5 h-5',\r\n    lg: 'w-6 h-6',\r\n  };\r\n\r\n  const labelSizeMap = {\r\n    sm: 'text-xs',\r\n    md: 'text-sm',\r\n    lg: 'text-base',\r\n  };\r\n\r\n  const errorMarginMap = {\r\n    sm: 'ml-6',\r\n    md: 'ml-8',\r\n    lg: 'ml-9',\r\n  };\r\n\r\n  const sizeClasses = getResponsiveClasses(size, sizeMap);\r\n  const labelSizeClasses = getResponsiveClasses(size, labelSizeMap);\r\n  const errorMarginClasses = getResponsiveClasses(size, errorMarginMap);\r\n\r\n  const getBorderClasses = (isChecked: boolean): string => {\r\n    if (disabled) return 'stroke-muted/20';\r\n    const baseClasses = 'transition-all duration-200 group-hover:stroke-secondary group-hover:stroke-[1.5]';\r\n    return cn(baseClasses, isChecked ? 'stroke-secondary' : 'stroke-secondary/50');\r\n  };\r\n\r\n  const getInnerClasses = (isChecked: boolean): string => {\r\n    const baseClasses = 'transition-all duration-200';\r\n    if (disabled) {\r\n      return cn(baseClasses, isChecked ? 'fill-muted/20' : 'fill-transparent');\r\n    }\r\n    return cn(baseClasses, isChecked ? 'fill-secondary' : 'fill-transparent');\r\n  };\r\n\r\n  return (\r\n    <div className={cn('flex flex-col gap-1', className, disabled && 'opacity-50 cursor-not-allowed')}>\r\n      <label className={cn('flex items-center gap-3 group', disabled ? 'cursor-not-allowed pointer-events-none' : 'cursor-pointer')}>\r\n        <div className={cn('relative flex-shrink-0', sizeClasses)}>\r\n          <input\r\n            type=\"checkbox\"\r\n            className=\"absolute opacity-0 w-0 h-0\"\r\n            checked={isChecked}\r\n            onChange={handleChange}\r\n            disabled={disabled}\r\n            {...props}\r\n          />\r\n\r\n          <svg\r\n            className=\"absolute inset-0 w-full h-full pointer-events-none\"\r\n            viewBox=\"0 0 20 20\"\r\n            fill=\"none\"\r\n            xmlns=\"http://www.w3.org/2000/svg\"\r\n          >\r\n            <path\r\n              d=\"M 1 1 L 19 1 L 19 15 L 15 19 L 1 19 Z\"\r\n              className=\"fill-base/50\"\r\n            />\r\n\r\n            <path\r\n              d=\"M 1 1 L 19 1 L 19 15 L 15 19 L 1 19 Z\"\r\n              className={getBorderClasses(isChecked)}\r\n              strokeWidth=\"1\"\r\n              fill=\"none\"\r\n            />\r\n\r\n            <path\r\n              d=\"M 4 4 L 16 4 L 16 13 L 13 16 L 4 16 Z\"\r\n              className={getInnerClasses(isChecked)}\r\n            />\r\n          </svg>\r\n        </div>\r\n        {label && (\r\n          <span className={cn('transition-colors', labelSizeClasses, disabled ? 'text-muted' : 'text-muted group-hover:text-secondary')}>\r\n            {label}\r\n          </span>\r\n        )}\r\n      </label>\r\n      {error && !disabled && (\r\n        <span className={cn('text-xs text-error', errorMarginClasses)}>{error}</span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nCheckbox.displayName = \"CyberUI.Checkbox\";\r\n\r\nexport default Checkbox;\r\n\r\n"],"names":["Checkbox","label","error","size","className","controlledChecked","onChange","onCheckedChange","disabled","props","internalChecked","setInternalChecked","React","isChecked","handleChange","e","sizeMap","labelSizeMap","errorMarginMap","sizeClasses","getResponsiveClasses","labelSizeClasses","errorMarginClasses","getBorderClasses","cn","getInnerClasses","baseClasses","jsxs","jsx"],"mappings":"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"}

package/dist/components/CircularProgress.js

@@ -0,0 +1,87 @@
+import { j as e } from "../_virtual/jsx-runtime.js";
+import "react";
+import { cn as m } from "../utils/cn.js";
+import { warnOnce as h } from "../utils/devWarn.js";
+const u = {
+  sm: "w-16 h-16",
+  md: "w-24 h-24",
+  lg: "w-32 h-32",
+  xl: "w-40 h-40"
+}, x = ({
+  progress: r,
+  size: l = "md",
+  radius: t = 20,
+  className: c = "",
+  children: o,
+  ariaLabel: i
+}) => {
+  (r < 0 || r > 100) && h(
+    `circularprogress-range-${r}`,
+    `CircularProgress: progress={${r}} is outside the 0-100 range and will render an incorrect arc. Pass a percentage value, e.g. (loaded / total) * 100.`
+  );
+  const s = 2 * Math.PI * t, a = s / 2, n = a * (1 - r / 100), f = a * (1 - r / 100);
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      className: m("relative", u[l], c),
+      role: "progressbar",
+      "aria-label": i || "Progress",
+      "aria-valuenow": Math.max(0, Math.min(100, r)),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: [
+        /* @__PURE__ */ e.jsxs(
+          "svg",
+          {
+            className: "w-full h-full overflow-visible",
+            viewBox: "0 0 50 50",
+            children: [
+              /* @__PURE__ */ e.jsx(
+                "circle",
+                {
+                  cx: "25",
+                  cy: "25",
+                  r: t,
+                  fill: "none",
+                  stroke: "var(--color-accent)",
+                  strokeWidth: "4",
+                  strokeLinecap: "butt",
+                  strokeDasharray: `${a * 0.98} ${s}`,
+                  strokeDashoffset: n,
+                  transform: "rotate(-90 25 25)",
+                  style: {
+                    filter: "drop-shadow(0 0 8px var(--color-accent))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "circle",
+                {
+                  cx: "25",
+                  cy: "25",
+                  r: t,
+                  fill: "none",
+                  stroke: "var(--color-primary)",
+                  strokeWidth: "4",
+                  strokeLinecap: "butt",
+                  strokeDasharray: `${a * 0.98} ${s}`,
+                  strokeDashoffset: f,
+                  transform: "rotate(90 25 25)",
+                  style: {
+                    filter: "drop-shadow(0 0 8px var(--color-primary))"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        o && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: o })
+      ]
+    }
+  );
+};
+x.displayName = "CyberUI.CircularProgress";
+export {
+  x as default
+};
+//# sourceMappingURL=CircularProgress.js.map

package/dist/components/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sources":["../../src/components/CircularProgress.tsx"],"sourcesContent":["import React from 'react';\r\nimport { cn } from '../utils/cn';\r\nimport { warnOnce } from '../utils/devWarn';\r\n\r\n/**\r\n * A circular progress indicator with neon glow effects.\r\n *\r\n * Use the `size` prop for common cases — it constrains the container automatically.\r\n * Only use `radius` if you need a custom size (radius is in SVG units, viewBox is 50×50).\r\n *\r\n * @example\r\n * // Recommended: use size prop\r\n * <CircularProgress progress={75} size=\"md\">\r\n *   <span className=\"text-xs font-mono text-accent\">75%</span>\r\n * </CircularProgress>\r\n *\r\n * @example\r\n * // Custom size via className\r\n * <CircularProgress progress={45} className=\"w-32 h-32\">\r\n *   <span className=\"text-accent font-bold\">45%</span>\r\n * </CircularProgress>\r\n */\r\nexport interface CircularProgressProps {\r\n  /**\r\n   * Progress value (0-100).\r\n   */\r\n  progress: number;\r\n  /**\r\n   * Preset container size. Sets width and height of the component automatically.\r\n   * - sm: 64px, md: 96px, lg: 128px, xl: 160px\r\n   * @default 'md'\r\n   */\r\n  size?: 'sm' | 'md' | 'lg' | 'xl';\r\n  /**\r\n   * Radius of the SVG circle in SVG units (viewBox is 50×50, center at 25,25).\r\n   * Default 20 fits cleanly within the viewBox. Only override for custom layouts.\r\n   * @default 20\r\n   */\r\n  radius?: number;\r\n  /** Optional custom class name */\r\n  className?: string;\r\n  /** Optional content to render in the center of the circle */\r\n  children?: React.ReactNode;\r\n  /** Accessible label for screen readers */\r\n  ariaLabel?: string;\r\n}\r\n\r\nconst SIZE_MAP = {\r\n  sm: 'w-16 h-16',\r\n  md: 'w-24 h-24',\r\n  lg: 'w-32 h-32',\r\n  xl: 'w-40 h-40',\r\n};\r\n\r\n/**\r\n * A beautiful circular progress indicator with neon glow and dual-tone stroke.\r\n *\r\n * @example\r\n * <CircularProgress progress={60} size=\"md\">\r\n *   <span className=\"text-xs font-mono\">60%</span>\r\n * </CircularProgress>\r\n */\r\nconst CircularProgress: React.FC<CircularProgressProps> = ({\r\n  progress,\r\n  size = 'md',\r\n  radius = 20,\r\n  className = '',\r\n  children,\r\n  ariaLabel\r\n}) => {\r\n  if (progress < 0 || progress > 100) {\r\n    warnOnce(\r\n      `circularprogress-range-${progress}`,\r\n      `CircularProgress: progress={${progress}} is outside the 0-100 range and will render an incorrect arc. Pass a percentage value, e.g. (loaded / total) * 100.`\r\n    );\r\n  }\r\n\r\n  const circumference = 2 * Math.PI * radius;\r\n  const halfCircumference = circumference / 2;\r\n  const leftOffset = halfCircumference * (1 - progress / 100);\r\n  const rightOffset = halfCircumference * (1 - progress / 100);\r\n\r\n  return (\r\n    <div\r\n      className={cn('relative', SIZE_MAP[size], className)}\r\n      role=\"progressbar\"\r\n      aria-label={ariaLabel || 'Progress'}\r\n      aria-valuenow={Math.max(0, Math.min(100, progress))}\r\n      aria-valuemin={0}\r\n      aria-valuemax={100}\r\n    >\r\n      <svg\r\n        className=\"w-full h-full overflow-visible\"\r\n        viewBox=\"0 0 50 50\"\r\n      >\r\n        {/* Left half circle */}\r\n        <circle\r\n          cx=\"25\"\r\n          cy=\"25\"\r\n          r={radius}\r\n          fill=\"none\"\r\n          stroke=\"var(--color-accent)\"\r\n          strokeWidth=\"4\"\r\n          strokeLinecap=\"butt\"\r\n          strokeDasharray={`${halfCircumference * 0.98} ${circumference}`}\r\n          strokeDashoffset={leftOffset}\r\n          transform=\"rotate(-90 25 25)\"\r\n          style={{\r\n            filter: \"drop-shadow(0 0 8px var(--color-accent))\",\r\n          }}\r\n        />\r\n        {/* Right half circle */}\r\n        <circle\r\n          cx=\"25\"\r\n          cy=\"25\"\r\n          r={radius}\r\n          fill=\"none\"\r\n          stroke=\"var(--color-primary)\"\r\n          strokeWidth=\"4\"\r\n          strokeLinecap=\"butt\"\r\n          strokeDasharray={`${halfCircumference * 0.98} ${circumference}`}\r\n          strokeDashoffset={rightOffset}\r\n          transform=\"rotate(90 25 25)\"\r\n          style={{\r\n            filter: \"drop-shadow(0 0 8px var(--color-primary))\",\r\n          }}\r\n        />\r\n      </svg>\r\n      {children && (\r\n        <div className=\"absolute inset-0 flex items-center justify-center\">\r\n          {children}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nCircularProgress.displayName = \"CyberUI.CircularProgress\";\r\n\r\nexport default CircularProgress;\r\n"],"names":["SIZE_MAP","CircularProgress","progress","size","radius","className","children","ariaLabel","warnOnce","circumference","halfCircumference","leftOffset","rightOffset","jsxs","cn","jsx"],"mappings":";;;;AA+CA,MAAMA,IAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAUMC,IAAoD,CAAC;AAAA,EACzD,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,GAAIL,IAAW,KAAKA,IAAW,QAC7BM;AAAA,IACE,0BAA0BN,CAAQ;AAAA,IAClC,+BAA+BA,CAAQ;AAAA,EAAA;AAI3C,QAAMO,IAAgB,IAAI,KAAK,KAAKL,GAC9BM,IAAoBD,IAAgB,GACpCE,IAAaD,KAAqB,IAAIR,IAAW,MACjDU,IAAcF,KAAqB,IAAIR,IAAW;AAExD,SACEW,gBAAAA,EAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,YAAYd,EAASG,CAAI,GAAGE,CAAS;AAAA,MACnD,MAAK;AAAA,MACL,cAAYE,KAAa;AAAA,MACzB,iBAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKL,CAAQ,CAAC;AAAA,MAClD,iBAAe;AAAA,MACf,iBAAe;AAAA,MAEf,UAAA;AAAA,QAAAW,gBAAAA,EAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YAGR,UAAA;AAAA,cAAAE,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAGX;AAAA,kBACH,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,iBAAiB,GAAGM,IAAoB,IAAI,IAAID,CAAa;AAAA,kBAC7D,kBAAkBE;AAAA,kBAClB,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,QAAQ;AAAA,kBAAA;AAAA,gBACV;AAAA,cAAA;AAAA,cAGFI,gBAAAA,EAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,IAAG;AAAA,kBACH,IAAG;AAAA,kBACH,GAAGX;AAAA,kBACH,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBACZ,eAAc;AAAA,kBACd,iBAAiB,GAAGM,IAAoB,IAAI,IAAID,CAAa;AAAA,kBAC7D,kBAAkBG;AAAA,kBAClB,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,QAAQ;AAAA,kBAAA;AAAA,gBACV;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEDN,KACCS,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAU,qDACZ,UAAAT,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAL,EAAiB,cAAc;"}

package/dist/components/Divider.js

@@ -0,0 +1,24 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import { cn as l } from "../utils/cn.js";
+const p = ({
+  variant: s = "gradient",
+  orientation: a = "horizontal",
+  className: e = ""
+}) => {
+  const o = (r) => r === "horizontal" ? "w-full h-[1px]" : "w-[1px] h-full", n = (r, t) => ({
+    gradient: t === "horizontal" ? "bg-gradient-to-r from-transparent via-secondary/50 to-transparent" : "bg-gradient-to-b from-transparent via-secondary/50 to-transparent",
+    solid: "bg-secondary/30",
+    dashed: `border-dashed border-secondary/50 ${t === "horizontal" ? "border-t" : "border-l"}`
+  })[r], d = l(
+    o(a),
+    n(s, a),
+    e
+  );
+  return /* @__PURE__ */ i.jsx("div", { className: d });
+};
+p.displayName = "CyberUI.Divider";
+export {
+  p as default
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../src/components/Divider.tsx"],"sourcesContent":["import React from 'react';\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A decorative divider with cyberpunk styling.\r\n *\r\n * Supports multiple visual variants and both horizontal and vertical orientations.\r\n *\r\n * @example\r\n * // Gradient divider (default)\r\n * <Divider />\r\n *\r\n * @example\r\n * // Solid divider\r\n * <Divider variant=\"solid\" />\r\n *\r\n * @example\r\n * // Dashed divider\r\n * <Divider variant=\"dashed\" />\r\n *\r\n * @example\r\n * // Vertical divider\r\n * <Divider orientation=\"vertical\" className=\"h-8\" />\r\n */\r\nexport interface DividerProps {\r\n  /**\r\n   * Visual style of the divider.\r\n   * - `gradient`: Gradient fade from center (default).\r\n   * - `solid`: Solid semi-transparent line.\r\n   * - `dashed`: Dashed border style.\r\n   * @default 'gradient'\r\n   */\r\n  variant?: 'gradient' | 'solid' | 'dashed';\r\n  /**\r\n   * Orientation of the divider.\r\n   * @default 'horizontal'\r\n   */\r\n  orientation?: 'horizontal' | 'vertical';\r\n  /**\r\n   * Additional CSS classes.\r\n   */\r\n  className?: string;\r\n}\r\n\r\nconst Divider: React.FC<DividerProps> = ({\r\n  variant = 'gradient',\r\n  orientation = 'horizontal',\r\n  className = '',\r\n}) => {\r\n  const getBaseClasses = (orientation: string): string => {\r\n    return orientation === 'horizontal' ? 'w-full h-[1px]' : 'w-[1px] h-full';\r\n  };\r\n\r\n  const getVariantClasses = (variant: string, orientation: string): string => {\r\n    const variants = {\r\n      gradient: orientation === 'horizontal'\r\n        ? 'bg-gradient-to-r from-transparent via-secondary/50 to-transparent'\r\n        : 'bg-gradient-to-b from-transparent via-secondary/50 to-transparent',\r\n      solid: 'bg-secondary/30',\r\n      dashed: `border-dashed border-secondary/50 ${orientation === 'horizontal' ? 'border-t' : 'border-l'}`,\r\n    };\r\n    return variants[variant as keyof typeof variants];\r\n  };\r\n\r\n  const dividerClasses = cn(\r\n    getBaseClasses(orientation),\r\n    getVariantClasses(variant, orientation),\r\n    className,\r\n  );\r\n\r\n  return <div className={dividerClasses} />;\r\n};\r\n\r\nDivider.displayName = \"CyberUI.Divider\";\r\n\r\nexport default Divider;\r\n"],"names":["Divider","variant","orientation","className","getBaseClasses","getVariantClasses","dividerClasses","cn","jsx"],"mappings":";;;AA4CA,MAAMA,IAAkC,CAAC;AAAA,EACvC,SAAAC,IAAU;AAAA,EACV,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAiB,CAACF,MACfA,MAAgB,eAAe,mBAAmB,kBAGrDG,IAAoB,CAACJ,GAAiBC,OACzB;AAAA,IACf,UAAUA,MAAgB,eACtB,sEACA;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ,qCAAqCA,MAAgB,eAAe,aAAa,UAAU;AAAA,EAAA,GAErFD,CAAgC,GAG5CK,IAAiBC;AAAA,IACrBH,EAAeF,CAAW;AAAA,IAC1BG,EAAkBJ,GAASC,CAAW;AAAA,IACtCC;AAAA,EAAA;AAGF,SAAOK,gBAAAA,EAAAA,IAAC,OAAA,EAAI,WAAWF,EAAA,CAAgB;AACzC;AAEAN,EAAQ,cAAc;"}

package/dist/components/GradientText.js

@@ -0,0 +1,27 @@
+import { j as i } from "../_virtual/jsx-runtime.js";
+import "react";
+import { cn as c } from "../utils/cn.js";
+const o = ({
+  children: a,
+  variant: r = "primary",
+  as: e = "span",
+  className: t = ""
+}) => {
+  const s = (n) => ({
+    primary: "bg-linear-(--gradient-primary)",
+    secondary: "bg-linear-(--gradient-secondary)",
+    accent: "bg-linear-(--gradient-accent)"
+  })[n];
+  return /* @__PURE__ */ i.jsx(
+    e,
+    {
+      className: c("bg-clip-text text-transparent inline-block", s(r), t),
+      children: a
+    }
+  );
+};
+o.displayName = "CyberUI.GradientText";
+export {
+  o as default
+};
+//# sourceMappingURL=GradientText.js.map

package/dist/components/GradientText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientText.js","sources":["../../src/components/GradientText.tsx"],"sourcesContent":["import React from 'react';\r\nimport { cn } from '../utils/cn';\r\n\r\n/**\r\n * A component for rendering text with a neon gradient effect.\r\n *\r\n * @example\r\n * // Default cyan-purple gradient\r\n * <GradientText as=\"h1\" className=\"text-4xl font-bold\">\r\n *   CyberUI 2045\r\n * </GradientText>\r\n *\r\n * @example\r\n * // Secondary pink-purple gradient\r\n * <GradientText variant=\"secondary\">\r\n *   System Critical\r\n * </GradientText>\r\n *\r\n * @example\r\n * // Accent gradient for warnings\r\n * <GradientText variant=\"accent\" as=\"p\">\r\n *   Warning Level\r\n * </GradientText>\r\n */\r\nexport interface GradientTextProps {\r\n  /**\r\n   * The text content to render.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Visual style of the gradient.\r\n   * - `primary`: Cyan to pink gradient (secondary → primary).\r\n   * - `secondary`: Pink to yellow gradient (primary → accent).\r\n   * - `accent`: Yellow to cyan gradient (accent → secondary).\r\n   * @default 'primary'\r\n   */\r\n  variant?: 'primary' | 'secondary' | 'accent';\r\n  /**\r\n   * The HTML element to render as.\r\n   * @default 'span'\r\n   */\r\n  as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div';\r\n  /**\r\n   * Additional CSS classes.\r\n   */\r\n  className?: string;\r\n}\r\n\r\nconst GradientText: React.FC<GradientTextProps> = ({\r\n  children,\r\n  variant = 'primary',\r\n  as: Component = 'span',\r\n  className = '',\r\n}) => {\r\n  const getVariantClasses = (variant: string): string => {\r\n    const variants = {\r\n      primary: 'bg-linear-(--gradient-primary)',\r\n      secondary: 'bg-linear-(--gradient-secondary)',\r\n      accent: 'bg-linear-(--gradient-accent)',\r\n    };\r\n    return variants[variant as keyof typeof variants];\r\n  };\r\n\r\n  const baseClasses = 'bg-clip-text text-transparent inline-block';\r\n\r\n  return (\r\n    <Component\r\n      className={cn(baseClasses, getVariantClasses(variant), className)}\r\n    >\r\n      {children}\r\n    </Component>\r\n  );\r\n};\r\n\r\nGradientText.displayName = \"CyberUI.GradientText\";\r\n\r\nexport default GradientText;\r\n"],"names":["GradientText","children","variant","Component","className","getVariantClasses","jsx","cn"],"mappings":";;;AAgDA,MAAMA,IAA4C,CAAC;AAAA,EACjD,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,IAAIC,IAAY;AAAA,EAChB,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAoB,CAACH,OACR;AAAA,IACf,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,EAAA,GAEMA,CAAgC;AAKlD,SACEI,gBAAAA,EAAAA;AAAAA,IAACH;AAAA,IAAA;AAAA,MACC,WAAWI,EAJK,8CAIWF,EAAkBH,CAAO,GAAGE,CAAS;AAAA,MAE/D,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAD,EAAa,cAAc;"}