npm package: @rayvelez/stripes-ui
Description: Dynamic React UI components with animated stripe patterns, elastic transitions, and cyberpunk aesthetics
Author: Ray Velez
Latest version: 0.1.1

# @rayvelez/stripes-ui

A dynamic React UI component library featuring animated stripe patterns, elastic transitions, and cyberpunk aesthetics. Build futuristic interfaces with smooth, staggered animations and neon color schemes.

## Installation

```bash
npm install @rayvelez/stripes-ui
```

## Quick Start

Wrap your app with the `StripesProvider` to enable the theme system:

```jsx
import { StripesProvider, StripeButton, StripeCard } from '@rayvelez/stripes-ui';

function App() {
  return (
    <StripesProvider>
      <StripeCard title="Welcome" variant="glass">
        <p>Your content here</p>
        <StripeButton variant="neon" onClick={() => alert('Clicked!')}>
          Get Started
        </StripeButton>
      </StripeCard>
    </StripesProvider>
  );
}
```

## Available Components

### Core Components

- **StripesProvider** - Theme context provider (required wrapper)
- **StripeButton** - Button with animated stripe overlays
- **StripeCard** - Card container with stripe patterns
- **StripeInput** - Input field with animated underlines
- **StripeToggle** - Toggle switch with stripe fill animation
- **StripeLoader** - Multiple loading animation styles
- **StripeSection** - Full-width section with diagonal stripes

## Component Examples

### StripeButton

```jsx
import { StripeButton } from '@rayvelez/stripes-ui';

// Variants: primary, secondary, ghost, neon
<StripeButton variant="neon" size="large">
  Click Me
</StripeButton>
```

### StripeCard

```jsx
import { StripeCard } from '@rayvelez/stripes-ui';

// Variants: default, bordered, glass, neon
<StripeCard
  title="Features"
  subtitle="Our services"
  variant="glass"
  hoverable
>
  <p>Card content</p>
</StripeCard>
```

### StripeInput

```jsx
import { StripeInput } from '@rayvelez/stripes-ui';

// Variants: default, neon, minimal, cyber
<StripeInput
  label="Email"
  type="email"
  placeholder="Enter your email"
  variant="cyber"
/>
```

### StripeToggle

```jsx
import { StripeToggle } from '@rayvelez/stripes-ui';

<StripeToggle
  label="Enable notifications"
  variant="neon"
  size="medium"
  onChange={(checked) => console.log(checked)}
/>
```

### StripeLoader

```jsx
import { StripeLoader } from '@rayvelez/stripes-ui';

// Variants: bars, wave, pulse, dots
<StripeLoader variant="wave" size="large" />
```

### StripeSection

```jsx
import { StripeSection } from '@rayvelez/stripes-ui';

// Variants: hero, feature, diagonal, animated
<StripeSection
  variant="hero"
  title="Welcome to the Future"
  subtitle="Experience next-gen UI"
  fullHeight
  animated
>
  <StripeButton variant="neon">Get Started</StripeButton>
</StripeSection>
```

## Theme System

The library includes a comprehensive token system:

### Colors
- Electric Blue (`#05eafa`)
- Hot Pink (`#ff6bd3`)
- Neon Cyan (`#00ffff`)
- Dark backgrounds with gradient support

### Typography
- Display font: Orbitron
- Body font: Inter
- Mono font: IBM Plex Mono

### Animations
- Elastic easing curves
- Staggered stripe animations
- Pulse, glow, and wave effects
- Configurable animation durations

## Design Tokens

Access design tokens directly:

```jsx
import { colors, typography, animations, effects } from '@rayvelez/stripes-ui';

const customStyle = {
  color: colors.electricBlue,
  fontFamily: typography.fonts.heading,
  transition: animations.transitions.all,
  boxShadow: effects.shadows.neonGlow
};
```

## Features

- 🎨 **Cyberpunk Aesthetics** - Neon colors, dark themes, futuristic design
- ⚡ **Elastic Animations** - Smooth, staggered stripe effects on interactions
- 🎭 **Multiple Variants** - Each component offers several style variants
- 📱 **Responsive** - Mobile-friendly components
- 🔧 **TypeScript Support** - Full type definitions included
- 🎯 **Zero Dependencies** - Only requires React as peer dependency
- 🌈 **Blend Modes** - Advanced CSS effects for visual depth

## Requirements

- React 18.0.0 or higher
- React DOM 18.0.0 or higher

## License

MIT

## Author

Ray Velez

## Keywords

react, ui, design-system, stripes, animation, cyberpunk, neon, elastic, components