@igorao79/uivix 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,215 @@
+# @igorao79/uivix
+
+A modern React + Tailwind CSS component library with 50+ animated components, text effects, and backgrounds.
+
+## Installation
+
+```bash
+npm install @igorao79/uivix
+```
+
+**Peer dependencies:**
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Quick Start
+
+```tsx
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@igorao79/uivix";
+
+function App() {
+  return (
+    <Card variant="spotlight">
+      <CardHeader>
+        <CardTitle>Hello uivix</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button variant="gradient">Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Form
+
+| Component | Variants | Description |
+|-----------|----------|-------------|
+| `Button` | default, secondary, outline, ghost, destructive, link, gradient, glow, soft | Customizable button with loading state, icons |
+| `Input` | default, filled, underline, floating, ghost, glow | Text input with label, error state, icons |
+| `PasswordInput` | - | Password input with show/hide toggle |
+| `SearchInput` | - | Search input with clear button |
+| `OTPInput` | - | One-time password input with auto-advance |
+| `Label` | - | Accessible form label |
+| `Toggle` | default, ios, material, outline, glow, pill, slim, labeled | Toggle switch with multiple styles |
+
+### Card
+
+| Component | Variants | Description |
+|-----------|----------|-------------|
+| `Card` | default, bordered, elevated, ghost, gradient, glass, spotlight, neon, tilt, animated-border, noise, lifted | Card container with mouse-tracking effects |
+| `CardHeader` | - | Card header section |
+| `CardTitle` | - | Card heading |
+| `CardDescription` | - | Card secondary text |
+| `CardContent` | - | Card body |
+| `CardFooter` | - | Card footer with flex layout |
+
+### Text Animations
+
+| Component | Description |
+|-----------|-------------|
+| `TypewriterText` | Typewriter effect with blinking cursor |
+| `GradientText` | Animated gradient text colors |
+| `GlitchText` | Periodic glitch/distortion effect |
+| `ShimmerText` | Shimmer sweep across text |
+| `WaveText` | Per-letter wave animation |
+| `BlurText` | Blur-in reveal per word or letter |
+| `CounterText` | Animated number counter |
+| `MediaText` | Text with image/video fill |
+| `SparklesText` | Floating sparkle particles around text |
+| `HighlightText` | Animated marker highlight (7 styles: marker, underline, box, strikethrough, gradient, glow, bracket) |
+
+### Backgrounds
+
+| Component | Description |
+|-----------|-------------|
+| `ParticleBackground` | Floating text/emoji/image nodes with connecting lines |
+| `AuroraBackground` | Northern lights color animation |
+| `GridBackground` | Animated dot/line grid |
+| `StarfieldBackground` | Flying through stars effect |
+| `WaveBackground` | Layered wave animation |
+| `GradientMeshBackground` | Animated gradient mesh blobs |
+| `MatrixRainBackground` | Matrix-style falling characters |
+| `BokehBackground` | Blurred floating shapes (circle, hexagon, diamond, triangle, star, ring, mixed) |
+| `PixelBackground` | Pixel art backgrounds (rain, life, terrain, noise) |
+| `RippleBackground` | Expanding ripple circles |
+| `DotPatternBackground` | Animated dot pattern |
+| `RetroGridBackground` | 80s-style perspective grid |
+| `MeteorBackground` | Falling meteor streaks |
+| `BeamsBackground` | Animated light beams |
+
+### Other
+
+| Component | Variants | Description |
+|-----------|----------|-------------|
+| `Badge` | 16 variants (default, success, warning, destructive, glow, gradient, glass, neon, shimmer, premium, etc.) | Status badges with dot indicator |
+| `Tooltip` | 10 variants (default, dark, light, gradient, glass, neon, success, warning, error, outlined) | Hover tooltip with arrow |
+| `Avatar` | circle, square | Avatar with status dot (online, offline, busy, away) |
+| `Progress` | - | Animated progress bar |
+| `Skeleton` | - | Loading skeleton placeholder |
+| `Separator` | - | Horizontal/vertical divider |
+| `Marquee` | - | Scrolling content ticker |
+
+### Utilities
+
+| Export | Description |
+|--------|-------------|
+| `cn()` | Utility function combining `clsx` + `tailwind-merge` |
+
+## Usage Examples
+
+### Button
+
+```tsx
+import { Button } from "@igorao79/uivix";
+
+<Button variant="gradient" size="lg" loading>
+  Submitting...
+</Button>
+
+<Button variant="glow" leftIcon={<StarIcon />}>
+  Glow Button
+</Button>
+```
+
+### Text Animations
+
+```tsx
+import { TypewriterText, GlitchText, HighlightText } from "@igorao79/uivix";
+
+<TypewriterText words={["Hello", "World", "uivix"]} speed={100} />
+
+<GlitchText intensity={5}>GLITCH</GlitchText>
+
+<p>
+  This is an <HighlightText variant="marker" color="rgba(139,92,246,0.4)">important concept</HighlightText> in design.
+</p>
+```
+
+### Backgrounds
+
+```tsx
+import { AuroraBackground, BokehBackground, PixelBackground } from "@igorao79/uivix";
+
+// Full-page aurora
+<AuroraBackground />
+
+// Bokeh with mixed shapes
+<BokehBackground shape="mixed" count={20} />
+
+// Pixel art Game of Life
+<PixelBackground variant="life" pixelSize={6} />
+```
+
+### Card with Effects
+
+```tsx
+import { Card, CardHeader, CardTitle, CardContent, CardFooter, Button } from "@igorao79/uivix";
+
+// 3D tilt card
+<Card variant="tilt">
+  <CardHeader>
+    <CardTitle>3D Tilt</CardTitle>
+  </CardHeader>
+  <CardContent>
+    <p>Move your mouse over me!</p>
+  </CardContent>
+  <CardFooter>
+    <Button>Action</Button>
+  </CardFooter>
+</Card>
+```
+
+### Toggle & Tooltip
+
+```tsx
+import { Toggle, Tooltip, Badge } from "@igorao79/uivix";
+
+<Toggle variant="ios" size="md" label="Dark Mode" />
+
+<Tooltip content="Hello!" side="top" variant="gradient">
+  <button>Hover me</button>
+</Tooltip>
+
+<Badge variant="premium" dot>PRO</Badge>
+```
+
+## Customization
+
+All components accept `className` for Tailwind overrides:
+
+```tsx
+<Button className="bg-red-500 hover:bg-red-600 text-xl rounded-none">
+  Custom Button
+</Button>
+
+<Card className="bg-blue-950 border-blue-500">
+  Custom styled card
+</Card>
+```
+
+## TypeScript
+
+Full TypeScript support with exported types for all components:
+
+```tsx
+import type { ButtonProps, CardProps, TooltipVariant } from "@igorao79/uivix";
+```
+
+## License
+
+MIT

package/dist/index.js

@@ -1600,8 +1600,8 @@ var ParticleBackground = ({
     const onMouseLeave = () => {
       mouseRef.current = { x: -9999, y: -9999 };
     };
-    canvas.addEventListener("mousemove", onMouse);
-    canvas.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mousemove", onMouse);
+    window.addEventListener("mouseleave", onMouseLeave);
     const getColor = (shade, alpha) => {
       const v = 40;
       const r = Math.round(baseR + (shade - 0.5) * v);
@@ -1712,8 +1712,8 @@ var ParticleBackground = ({
     return () => {
       cancelAnimationFrame(rafRef.current);
       window.removeEventListener("resize", resize);
-      canvas.removeEventListener("mousemove", onMouse);
-      canvas.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mousemove", onMouse);
+      window.removeEventListener("mouseleave", onMouseLeave);
     };
   }, [items, count, connectionDistance, arrows, mouseDistance, color, speed, fontSize, imageSize, lineWidth, maxOpacity, normalize]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(