@fastwork/xosmoz-svelte
v0.0.25
Published
Svelte 5 components for Xosmoz design system
Readme
@fastwork/xosmoz-svelte
Svelte 5 components for the Xosmoz design system.
Installation
npm install @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-css
# or
yarn add @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-css
# or
pnpm add @fastwork/xosmoz-svelte @fastwork/xosmoz-theme @fastwork/xosmoz-cssRequirements
| Package | Minimum Version |
|---------|-----------------|
| svelte | ^5.0.0 |
| @fastwork/xosmoz-theme | >=0.0.33 |
| @fastwork/xosmoz-css | >=0.0.20 |
Usage
1. Import Styles
Add the required CSS to your app entry point or layout:
<!-- In your +layout.svelte or app entry -->
<script>
import '@fastwork/xosmoz-svelte/styles.css';
</script>Or import styles individually for more control:
import '@fastwork/xosmoz-theme/base.css';
import '@fastwork/xosmoz-theme/themes.css';
import '@fastwork/xosmoz-css/component.css';2. Set Theme
Add a data-theme attribute to enable theming:
<html data-theme="light">
<!-- or "dark" -->
</html>3. Use Components
<script>
import { Button } from '@fastwork/xosmoz-svelte';
</script>
<Button variant="primary" size="medium">
Click me
</Button>Components
Button
A versatile button component with multiple variants and sizes.
<script>
import { Button } from '@fastwork/xosmoz-svelte';
</script>
<!-- Variants -->
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>
<!-- Sizes -->
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<!-- States -->
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>
<!-- Modifiers -->
<Button fluid>Full Width</Button>
<Button pill>Pill Shape</Button>
<Button square>Square</Button>Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| variant | 'primary' \| 'secondary' \| 'outline' \| 'tertiary' \| 'ghost' \| 'danger' \| 'success' \| 'white' | 'primary' | Button style variant |
| size | 'small' \| 'medium' \| 'large' | 'medium' | Button size |
| disabled | boolean | false | Disable the button |
| loading | boolean | false | Show loading spinner |
| fluid | boolean | false | Full width button |
| pill | boolean | false | Pill-shaped border radius |
| square | boolean | false | Square aspect ratio |
| type | 'button' \| 'submit' \| 'reset' | 'button' | Button type attribute |
Slots
| Slot | Description |
|------|-------------|
| children | Main button content |
| startIcon | Icon before the text |
| endIcon | Icon after the text |
Development (Storybook)
Run Storybook
# From monorepo root
yarn storybook
# Or using NX
nx run xosmoz-svelte:storybookOpens Storybook at http://localhost:6006
Build Storybook
yarn storybook:buildProject Structure
src/
├── lib/
│ ├── components/ # Svelte components
│ │ ├── Button.svelte
│ │ └── Button.stories.ts
│ ├── docs/ # Documentation pages
│ └── index.ts # Package exports
└── .storybook/ # Storybook configLicense
MIT