compote-ui 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +2 -0
- package/package.json +63 -0
package/README.md
ADDED
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
# Compote UI
|
|
2
|
+
|
|
3
|
+
An opinionated UI component library for Svelte, built on top of [Ark UI](https://ark-ui.com) with additional components and features not available in the core Ark UI library.
|
|
4
|
+
|
|
5
|
+
## About
|
|
6
|
+
|
|
7
|
+
Compote UI provides a set of accessible, customizable, and well-styled UI components for Svelte applications. While Ark UI offers excellent headless components with robust accessibility, Compote UI goes a step further by:
|
|
8
|
+
|
|
9
|
+
- **Opinionated defaults** with sensible styling out of the box
|
|
10
|
+
- **Additional components** that fill gaps in the Ark UI ecosystem
|
|
11
|
+
- **Tailwind CSS integration** for easy customization
|
|
12
|
+
- **TypeScript support** with full type definitions
|
|
13
|
+
- **Accessibility-first** approach, building on Ark UI's strong foundation
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install compote-ui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Or with other package managers:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm add compote-ui
|
|
25
|
+
yarn add compote-ui
|
|
26
|
+
bun add compote-ui
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Peer Dependencies
|
|
30
|
+
|
|
31
|
+
Compote UI requires Svelte 5 or later:
|
|
32
|
+
|
|
33
|
+
## Quick Start
|
|
34
|
+
|
|
35
|
+
```svelte
|
|
36
|
+
<script>
|
|
37
|
+
import { Button, Card } from 'compote-ui';
|
|
38
|
+
</script>
|
|
39
|
+
|
|
40
|
+
<Card>
|
|
41
|
+
<h1>Hello from Compote UI</h1>
|
|
42
|
+
<Button variant="primary">Click me</Button>
|
|
43
|
+
</Card>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## Features
|
|
47
|
+
|
|
48
|
+
- ✅ **Built on Ark UI** - Leveraging battle-tested accessible primitives
|
|
49
|
+
- 🎨 **Tailwind CSS** - Easy theming and customization
|
|
50
|
+
- 🔧 **TypeScript** - Full type safety and autocomplete
|
|
51
|
+
- ♿ **Accessible** - WCAG compliant components
|
|
52
|
+
- 🚀 **Svelte 5** - Modern Svelte with runes and enhanced reactivity
|
|
53
|
+
- 📦 **Tree-shakeable** - Only bundle what you use
|
|
54
|
+
|
|
55
|
+
## Components
|
|
56
|
+
|
|
57
|
+
Compote UI includes all Ark UI components plus additional components:
|
|
58
|
+
|
|
59
|
+
### From Ark UI
|
|
60
|
+
|
|
61
|
+
- Accordion, Avatar, Checkbox, Collapsible, Combobox, Dialog, Dropdown Menu, Hover Card, Menu, Pagination, Popover, Progress, Radio Group, Select, Slider, Switch, Tabs, Toast, Toggle, Tooltip, and more...
|
|
62
|
+
|
|
63
|
+
### Additional Components
|
|
64
|
+
|
|
65
|
+
- _Additional components that extend Ark UI functionality_
|
|
66
|
+
- _Custom styled variants with opinionated defaults_
|
|
67
|
+
|
|
68
|
+
## Theming
|
|
69
|
+
|
|
70
|
+
Compote UI uses Tailwind CSS, making it easy to customize the appearance to match your brand:
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|
|
75
|
+
|
|
76
|
+
## Links
|
|
77
|
+
|
|
78
|
+
- [GitHub](https://github.com/@tihomir971/compote-ui)
|
|
79
|
+
- [Issues](https://github.com/@tihomir971/compote-ui/issues)
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "compote-ui",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"scripts": {
|
|
5
|
+
"dev": "vite dev",
|
|
6
|
+
"build": "vite build && npm run prepack",
|
|
7
|
+
"preview": "vite preview",
|
|
8
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
9
|
+
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
10
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
11
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
12
|
+
"lint": "prettier --check . && eslint .",
|
|
13
|
+
"format": "prettier --write ."
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"!dist/**/*.test.*",
|
|
18
|
+
"!dist/**/*.spec.*"
|
|
19
|
+
],
|
|
20
|
+
"sideEffects": [
|
|
21
|
+
"**/*.css"
|
|
22
|
+
],
|
|
23
|
+
"svelte": "./dist/index.js",
|
|
24
|
+
"types": "./dist/index.d.ts",
|
|
25
|
+
"type": "module",
|
|
26
|
+
"exports": {
|
|
27
|
+
".": {
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
|
+
"svelte": "./dist/index.js"
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
"peerDependencies": {
|
|
33
|
+
"svelte": "^5.0.0"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@eslint/compat": "^2.0.3",
|
|
37
|
+
"@eslint/js": "^10.0.1",
|
|
38
|
+
"@sveltejs/adapter-auto": "^7.0.0",
|
|
39
|
+
"@sveltejs/kit": "^2.50.2",
|
|
40
|
+
"@sveltejs/package": "^2.5.7",
|
|
41
|
+
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
|
42
|
+
"@tailwindcss/vite": "^4.1.18",
|
|
43
|
+
"@types/node": "^25.5.0",
|
|
44
|
+
"eslint": "^10.0.3",
|
|
45
|
+
"eslint-config-prettier": "^10.1.8",
|
|
46
|
+
"eslint-plugin-svelte": "^3.15.2",
|
|
47
|
+
"globals": "^17.4.0",
|
|
48
|
+
"prettier": "^3.8.1",
|
|
49
|
+
"prettier-plugin-svelte": "^3.4.1",
|
|
50
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
51
|
+
"publint": "^0.3.17",
|
|
52
|
+
"svelte": "^5.54.0",
|
|
53
|
+
"svelte-check": "^4.4.2",
|
|
54
|
+
"tailwindcss": "^4.1.18",
|
|
55
|
+
"typescript": "^6.0.2",
|
|
56
|
+
"typescript-eslint": "^8.57.0",
|
|
57
|
+
"vite": "^8.0.3",
|
|
58
|
+
"vite-plugin-devtools-json": "^1.0.0"
|
|
59
|
+
},
|
|
60
|
+
"keywords": [
|
|
61
|
+
"svelte"
|
|
62
|
+
]
|
|
63
|
+
}
|