npm package: @islandspan/span-ui
Description: Reusable UI components for Svelte projects
Author: Islandspan Solutions
Latest version: 0.1.9

# @islandspan/span-ui

A collection of reusable Svelte components for building modern web applications.

## Installation

```bash
npm install @islandspan/span-ui
```

## Components

### Button

A versatile button component with multiple variants and styles, inspired by Tailwind CSS design patterns.

**Props:**
- `label` (string) - Button text (default: "Click")
- `onClick` (function) - Click handler
- `variant` (string) - Button style: `primary`, `secondary`, `soft`, `outline`, `ghost`, `danger` (default: "primary")
- `size` (string) - Button size: `xs`, `sm`, `md`, `lg`, `xl` (default: "md")
- `disabled` (boolean) - Disabled state (default: false)
- `type` (string) - Button type attribute (default: "button")
- `fullWidth` (boolean) - Full width button (default: false)
- `rounded` (boolean) - Fully rounded/pill-shaped button (default: false)
- `circular` (boolean) - Circular icon button (default: false)
- `ariaLabel` (string) - Accessibility label

**Variants:**
- **Primary** - Indigo solid button for primary actions
- **Secondary** - White button with border for secondary actions
- **Soft** - Light indigo background for subtle emphasis
- **Outline** - Transparent with colored border
- **Ghost** - Transparent with minimal styling
- **Danger** - Red solid button for destructive actions

**Examples:**

```svelte
<script>
  import { Button } from '@islandspan/span-ui';
  
  function handleClick() {
    alert('Button clicked!');
  }
</script>

<!-- Primary button -->
<Button label="Primary" variant="primary" onClick={handleClick} />

<!-- Secondary button -->
<Button label="Secondary" variant="secondary" onClick={handleClick} />

<!-- Soft button -->
<Button label="Soft" variant="soft" onClick={handleClick} />

<!-- Different sizes -->
<Button label="Small" size="sm" onClick={handleClick} />
<Button label="Medium" size="md" onClick={handleClick} />
<Button label="Large" size="lg" onClick={handleClick} />

<!-- Rounded button -->
<Button label="Rounded" rounded={true} onClick={handleClick} />

<!-- Full width button -->
<Button label="Full Width" fullWidth={true} onClick={handleClick} />

<!-- Disabled button -->
<Button label="Disabled" disabled={true} onClick={handleClick} />

<!-- Button with icon using slot -->
<Button variant="primary" onClick={handleClick}>
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
  </svg>
  Add Item
</Button>

<!-- Circular icon button -->
<Button circular={true} ariaLabel="Settings">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
  </svg>
</Button>
```

### Modal

A modal dialog component with backdrop.

**Props:**
- `show` (boolean) - Controls visibility (default: false)
- `title` (string) - Modal title
- `onClose` (function) - Close handler

**Example:**

```svelte
<script>
  import { Modal } from '@islandspan/span-ui';
  
  let showModal = false;
</script>

<button on:click={() => showModal = true}>Open Modal</button>

<Modal 
  show={showModal} 
  title="My Modal" 
  onClose={() => showModal = false}
>
  <p>Modal content goes here</p>
</Modal>
```

### DataTable

A data table component for displaying tabular data.

**Props:**
- `items` (array) - Array of objects with `name` and `contact`
- `onEdit` (function) - Edit handler
- `onDelete` (function) - Delete handler

**Example:**

```svelte
<script>
  import { DataTable } from '@islandspan/span-ui';
  
  const items = [
    { name: 'John', contact: 'john@example.com' },
    { name: 'Jane', contact: 'jane@example.com' }
  ];

  function handleEdit(item) {
    console.log('Edit', item);
  }

  function handleDelete(item) {
    console.log('Delete', item);
  }
</script>

<DataTable {items} onEdit={handleEdit} onDelete={handleDelete} />
```

## Usage

Import components individually:

```svelte
<script>
  import { Button, Modal, DataTable } from '@islandspan/span-ui';
</script>
```

Or import all components:

```svelte
<script>
  import * as SpanUI from '@islandspan/span-ui';
</script>

<SpanUI.Button label="Hello" />
```

## Development

```bash
# Install dependencies
npm install

# Build the library
npm run build

# Development mode
npm run dev
```

## License

MIT © IslandSpan Solutions

## Repository

[https://github.com/islandspan-solutions/SpanUI](https://github.com/islandspan-solutions/SpanUI)