@islandspan/span-ui

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

Installation

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:

<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:

<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:

<script>
  import { DataTable } from '@islandspan/span-ui';
  
  const items = [
    { name: 'John', contact: '[email protected]' },
    { name: 'Jane', contact: '[email protected]' }
  ];

  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:

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

Or import all components:

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

<SpanUI.Button label="Hello" />

Development

# 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