IntelliWakeTSSvelteKitV2.5

A professional SvelteKit component library with 41+ reusable UI components and utilities. Built with Svelte 5, TypeScript, and Tailwind CSS v4.

Version: 1.0.81 | License: MIT

Quick Start

Installation

pnpm add intelliwaketssveltekitv25

Basic Usage

<script>
  import { Switch, InputNumber, Modal, ArrayTable } from 'intelliwaketssveltekitv25';
  import 'intelliwaketssveltekitv25/dist/app.css';

  let enabled = $state(false);
  let price = $state(29.99);
</script>

<Switch bind:checked={enabled}>Enable Feature</Switch>
<InputNumber bind:value={price} currency />

Documentation

For Developers

• Integration Guide (INTEGRATION.md) - Installation, setup, and configuration
• Storybook - Interactive component examples (run pnpm storybook)
• Development Guide (CLAUDE.md) - Contributing and development workflow

For AI Assistants (Claude Code, Copilot, etc.)

• LLM Component Guide (LLM.md) - AI-optimized component reference with usage examples and common mistakes

Featured Components

Form Controls (Replace Native HTML)

• Switch - Toggle switches (replaces <input type="checkbox">)
• InputNumber - Formatted numeric inputs with currency/percent support (replaces <input type="number">)
• CheckBox - Custom checkboxes with flexible styling
• TextArea - Auto-resizing textarea
• DropDown - Rich dropdown menus (replaces <select>)
• MultiSelect - Multi-select dropdown with search

Layout & Navigation

• Modal - Feature-rich dialog with drag support (replaces <dialog>)
• MasterDetailLayout - Responsive master-detail pattern
• TabHeader / TabHref - Tab navigation components
• Paginator - Pagination controls

Data Display

• ArrayTable - Sortable, type-safe data tables (replaces manual <table>)
• VirtualList / VirtualTable - High-performance virtual scrolling for large datasets
• Calendar - Date picker and calendar display
• DateRangePicker - Date range selection

Utilities

• PathAnalyzer - Route parsing and navigation helpers
• ArrayFunctions - Data manipulation utilities
• FormEnhance - Form enhancement utilities
• Functions / FunctionsBrowser / FunctionsServer - Cross-environment utilities

Requirements

Peer Dependencies

{
  "@solidbasisventures/intelliwaketsfoundation": "^5.13.57",
  "@sveltejs/kit": "^2.49.2",
  "svelte": "^5.46.1"
}

Tailwind Configuration

Your project must define these custom colors in tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: {
        main: '#your-color',    // Primary brand color
        face: '#your-color',    // Darker for contrast
        hover: '#your-color',   // Hover state
        light: '#your-color',   // Light background
        selected: '#your-color' // Selected state
      },
      secondary: {
        main: '#your-color',
        light: '#your-color'
      }
    }
  }
}

See INTEGRATION.md for complete setup instructions.

Key Features

• Svelte 5 Runes - Modern reactive programming with $state, $derived, $effect, $bindable
• TypeScript Generics - Type-safe components (e.g., ArrayTable<YourDataType>)
• Tailwind CSS v4 - Utility-first styling with custom theme integration
• Comprehensive Testing - Vitest for unit tests, Playwright for E2E, Storybook for visual testing
• Accessibility - ARIA labels, keyboard navigation, and screen reader support
• Performance - Virtual scrolling, lazy loading, and optimized rendering

Development Commands

# Development
pnpm dev              # Start dev server
pnpm test             # Run tests in watch mode
pnpm storybook        # Start Storybook on port 6006

# Building
pnpm build            # Build library and package
pnpm package          # Package for distribution

# Quality Checks
pnpm lint             # Run ESLint and Prettier
pnpm format           # Format code
pnpm check            # Type check with svelte-check
pnpm docs:check       # Check documentation coverage

# Publishing
pnpm Publish          # Bump patch version and publish to npm

Documentation Coverage

Phase 1 components (5/41) are fully documented with JSDoc, Storybook stories, and LLM.md entries:

1. ✅ Switch - Toggle switches
2. ✅ InputNumber - Formatted numeric inputs
3. ✅ Modal - Dialog overlays
4. ✅ DropDown - Rich dropdown menus
5. ✅ ArrayTable - Sortable data tables

Run pnpm docs:check to see current documentation status.

Project Structure

intelliwaketssveltekitv25/
├── src/
│   ├── lib/              # Component library (published)
│   │   ├── *.svelte      # 41 UI components
│   │   ├── *.stories.ts  # Storybook stories
│   │   └── index.ts      # Public API exports
│   ├── routes/           # Demo application (not published)
│   └── params/           # SvelteKit parameter matchers
├── dist/                 # Build output
├── LLM.md                # AI assistant documentation
├── INTEGRATION.md        # Setup and integration guide
├── CLAUDE.md             # Development guide
└── README.md             # This file

Browser Support

• Chrome/Edge (latest 2 versions)
• Firefox (latest 2 versions)
• Safari (latest 2 versions)
• iOS Safari (latest 2 versions)

Contributing

See CLAUDE.md for development workflow and contribution guidelines.

License

MIT License - See LICENSE file for details

Links

• Package: npm
• Repository: Contact maintainer for repository access
• Issues: Contact maintainer for issue tracking

Support

For questions or issues:

1. Check LLM.md for component usage and common mistakes
2. Review INTEGRATION.md for setup instructions
3. Explore Storybook examples (pnpm storybook)
4. Contact the library maintainer

Built with ❤️ using Svelte 5, TypeScript, and Tailwind CSS