npm package: @paxapos/fyc-svelte
Description: [![npm version](https://badge.fury.io/js/@paxapos%2Ffyc-svelte.svg)](https://www.npmjs.com/package/@paxapos/fyc-svelte) [![npm downloads](https://img.shields.io/npm/dm/@paxapos/fyc-svelte.svg)](https://www.npmjs.com/package/@paxapos/fyc-svelte)
Latest version: 0.0.18

# @paxapos/fyc-svelte

[![npm version](https://badge.fury.io/js/@paxapos%2Ffyc-svelte.svg)](https://www.npmjs.com/package/@paxapos/fyc-svelte)
[![npm downloads](https://img.shields.io/npm/dm/@paxapos/fyc-svelte.svg)](https://www.npmjs.com/package/@paxapos/fyc-svelte)

Comprehensive Svelte component library combining Flowbite Svelte components, Flowbite Icons, and custom FYC components for building modern web applications.

## 📦 Installation

```bash
npm install @paxapos/fyc-svelte
# or
pnpm add @paxapos/fyc-svelte
# or
yarn add @paxapos/fyc-svelte
```

## 🎯 What's Included

### 🎨 60+ Flowbite Svelte Components
Complete UI toolkit with layout, forms, buttons, data display, and utility components.

### 🎭 500+ Flowbite Icons
Comprehensive icon library covering interface, navigation, actions, communication, and brand icons.

### 🏗️ 11 Custom FYC Components
Specialized components built specifically for modern web applications.

## 🚀 Quick Start

```svelte
<script>
  import {
    Button, Card, FycInput, FycAppLayout,
    CheckCircleOutline
  } from '@paxapos/fyc-svelte';

  // Import the styles
  import '@paxapos/fyc-svelte/style.css';

  let username = '';
</script>

<FycAppLayout>
  <main class="p-6">
    <Card class="max-w-md mx-auto">
      <h2 class="text-xl font-bold mb-4">Welcome</h2>

      <FycInput
        label="Username"
        placeholder="Enter username"
        bind:value={username}
      />

      <Button class="w-full mt-4">
        <CheckCircleOutline class="mr-2" />
        Submit
      </Button>
    </Card>
  </main>
</FycAppLayout>
```

## 📚 Documentation

- **[🎨 Storybook](http://localhost:6006)** - Interactive component playground (run `pnpm storybook`)
- **[Flowbite Svelte Docs](https://flowbite-svelte.com/)** - Complete Flowbite component documentation## 🛠️ Development

### Prerequisites

- Node.js 22+
- pnpm 9+

### Setup

```bash
# Clone the repository
git clone https://github.com/paxapos/core.git
cd core/packages/fyc-svelte

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run Storybook
pnpm storybook
```

### Building

```bash
# Build the library
pnpm run build

# Type check
pnpm run check

# Clean build artifacts
pnpm run clean
```

## 📦 Publishing

This package is automatically published to npm via GitHub Actions when a release is created.

Create a release with tag format `fyc-svelte-v1.2.3` to trigger automatic publishing.

### Manual Publishing

```bash
# Use the provided script
./publish.sh

# Or manually
pnpm run build
npm publish --access public
```

## 🏗️ Architecture

### Component Categories

```
@paxapos/fyc-svelte/
├── 🎨 Flowbite Components (60+)
│   ├── Layout & Navigation
│   ├── Forms & Inputs
│   ├── Buttons & Actions
│   ├── Display Components
│   └── Data Components
├── 🎭 Flowbite Icons (500+)
│   ├── Interface Icons
│   ├── Navigation Icons
│   ├── Action Icons
│   └── Brand Icons
└── 🏗️ Custom FYC Components (11)
    ├── Input Components
    ├── Button Components
    ├── Layout Components
    └── UI Components
```

## 🔧 Peer Dependencies

```json
{
  "svelte": "^5.0.0",
  "tailwindcss": "^4.1.0"
}
```

Make sure you have these installed in your project.

## 📋 Browser Support

- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch: `git checkout -b feature/new-component`
3. Make your changes
4. Add tests if applicable
5. Run `pnpm run check` and `pnpm run build`
6. Submit a pull request

## 📄 License

MIT License - see [LICENSE](../../LICENSE) for details.

## 🔗 Links

- 📦 [npm Package](https://www.npmjs.com/package/@paxapos/fyc-svelte)
- 🐙 [GitHub Repository](https://github.com/paxapos/core)
- 📚 [Flowbite Svelte Docs](https://flowbite-svelte.com/)
- 🎨 [Flowbite Icons](https://flowbite.com/icons/)
- 🎭 [Tailwind CSS](https://tailwindcss.com/)

## 🆕 Recent Updates

Check the [Releases](https://github.com/paxapos/core/releases) page for the latest updates and changelogs.

---

**Built with ❤️ by the PaxaPOS team**