npm package: @pixelfusion-nz/ui-button
Description: A reusable React button component
Latest version: 1.0.6

# @pixelfusion-nz/ui-button

A customizable React button component with built-in styles, TypeScript support, and various states.

## Features

- 🎨 Multiple variants (primary, secondary, outline)
- 📏 Different sizes (small, medium, large)
- 🔄 Loading state support
- 🎯 Hover effects
- 📦 No CSS imports needed
- 💪 TypeScript support
- ♿ Accessibility-friendly
- 🔌 Framework agnostic (works with React, Next.js, Astro, etc.)

## Installation

### Public Package
```bash
npm install @pixelfusion-nz/ui-button
```

### Private Package
If you're using this as a private package, you'll need to:

1. Set up your npm organization:
   ```bash
   npm org create pixelfusion-nz
   ```

2. Configure npm authentication:
   ```bash
   # Create or edit .npmrc in your project root
   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```

3. Set up the NPM_TOKEN environment variable:
   ```bash
   # Add to your shell profile (.zshrc, .bashrc, etc.)
   export NPM_TOKEN=your_npm_token_here
   ```

4. Install the private package:
   ```bash
   npm install @pixelfusion-nz/ui-button
   ```

## Usage

### Basic Usage

```jsx
import { Button } from '@pixelfusion-nz/ui-button';

function App() {
  return <Button variant="primary">Click me</Button>;
}
```

### Variants

```jsx
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="outline">Outline Button</Button>
```

### Sizes

```jsx
<Button size="small">Small Button</Button>
<Button size="medium">Medium Button</Button>
<Button size="large">Large Button</Button>
```

### Loading State

```jsx
<Button isLoading>Loading...</Button>
```

### Disabled State

```jsx
<Button disabled>Disabled Button</Button>
```

### In Astro

```astro
---
import { Button } from '@pixelfusion-nz/ui-button';
---

<Button variant="primary">Astro Button</Button>
```

## API

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'primary' \| 'secondary' \| 'outline'` | `'primary'` | The visual style variant of the button |
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | The size of the button |
| `isLoading` | `boolean` | `false` | Shows a loading spinner and disables the button |
| `disabled` | `boolean` | `false` | Disables the button |
| `className` | `string` | `''` | Additional CSS classes to apply |
| `style` | `CSSProperties` | `undefined` | Additional inline styles to apply |
| `children` | `ReactNode` | `undefined` | The content of the button |

## Development & Deployment

### Local Development

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```

3. Make your changes
4. Build the package:
   ```bash
   npm run build
   ```

### Publishing

#### As a Public Package

1. Update version:
   ```bash
   npm version patch # or minor, or major
   ```

2. Build and publish:
   ```bash
   npm run build
   npm publish --access public
   ```

#### As a Private Package

1. Set up private npm organization:
   ```bash
   # Create organization if not exists
   npm org create pixelfusion-nz
   ```

2. Configure npm authentication:
   ```bash
   # Generate new token from npm website
   npm token create
   
   # Add to .npmrc
   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```

3. Update package.json:
   ```json
   {
     "name": "@pixelfusion-nz/ui-button",
     "publishConfig": {
       "access": "restricted"
     }
   }
   ```

4. Build and publish:
   ```bash
   npm version patch # or minor, or major
   npm run build
   npm publish --access restricted
   ```

### Using Private Package in Other Projects

1. Create .npmrc in project root:
   ```
   @pixelfusion-nz:registry=https://registry.npmjs.org/
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```

2. Add NPM_TOKEN to environment:
   ```bash
   # Add to your shell profile (.zshrc, .bashrc, etc.)
   export NPM_TOKEN=your_npm_token_here
   ```

3. Install package:
   ```bash
   npm install @pixelfusion-nz/ui-button
   ```

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## License

MIT

## Support

For issues and feature requests, please open an issue in the repository.