logosphere-ui 0.0.0-alpha.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 +97 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +148 -0
- package/dist/index.js +1075 -0
- package/dist/vite.svg +1 -0
- package/package.json +71 -0
package/README.md
ADDED
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# @logo/logosphere
|
|
2
|
+
|
|
3
|
+
A modern, tree-shakable component library built with Lit and TypeScript.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @logo/logosphere
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Importing Individual Components (Tree-shaking Supported)
|
|
14
|
+
|
|
15
|
+
```javascript
|
|
16
|
+
import { MyButton, Card, Checkbox } from '@logo/logosphere';
|
|
17
|
+
|
|
18
|
+
// Only the imported components will be included in your bundle
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Using Components
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<!-- Button Component -->
|
|
25
|
+
<my-button variant="solid" size="md" theme="primary">
|
|
26
|
+
Click me
|
|
27
|
+
</my-button>
|
|
28
|
+
|
|
29
|
+
<!-- Card Component -->
|
|
30
|
+
<ledsui-card>
|
|
31
|
+
<div slot="header">Card Header</div>
|
|
32
|
+
<div slot="body">Card Body Content</div>
|
|
33
|
+
<div slot="footer">Card Footer</div>
|
|
34
|
+
</ledsui-card>
|
|
35
|
+
|
|
36
|
+
<!-- Checkbox Component -->
|
|
37
|
+
<check-box
|
|
38
|
+
label="Accept terms"
|
|
39
|
+
value="terms"
|
|
40
|
+
checked>
|
|
41
|
+
</check-box>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Available Components
|
|
45
|
+
|
|
46
|
+
- **MyButton** - Customizable button component
|
|
47
|
+
- **Card** - Card layout component with header, body, footer slots
|
|
48
|
+
- **Checkbox** - Checkbox input component
|
|
49
|
+
- **Switch** - Toggle switch component
|
|
50
|
+
- **TextArea** - Textarea input component
|
|
51
|
+
- **Modal** - Modal dialog component
|
|
52
|
+
- **Combobox** - Dropdown selection component
|
|
53
|
+
- **FormField** - Form field wrapper component
|
|
54
|
+
- **Breadcrumb** - Navigation breadcrumb component
|
|
55
|
+
|
|
56
|
+
## Tree-shaking
|
|
57
|
+
|
|
58
|
+
This library is built with tree-shaking in mind. When you import only specific components, bundlers like Webpack, Vite, or Rollup will automatically exclude unused components from your final bundle.
|
|
59
|
+
|
|
60
|
+
```javascript
|
|
61
|
+
// This will only include MyButton and Card in your bundle
|
|
62
|
+
import { MyButton, Card } from '@logo/logosphere';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Framework Support
|
|
66
|
+
|
|
67
|
+
Since this library is built with web components (Lit), it works with:
|
|
68
|
+
|
|
69
|
+
- ✅ Vanilla JavaScript
|
|
70
|
+
- ✅ React
|
|
71
|
+
- ✅ Vue
|
|
72
|
+
- ✅ Angular
|
|
73
|
+
- ✅ Svelte
|
|
74
|
+
- ✅ Any framework that supports web components
|
|
75
|
+
|
|
76
|
+
## Development
|
|
77
|
+
|
|
78
|
+
```bash
|
|
79
|
+
# Install dependencies
|
|
80
|
+
npm install
|
|
81
|
+
|
|
82
|
+
# Start development server
|
|
83
|
+
npm run dev
|
|
84
|
+
|
|
85
|
+
# Build library
|
|
86
|
+
npm run build:lib
|
|
87
|
+
|
|
88
|
+
# Run tests
|
|
89
|
+
npm test
|
|
90
|
+
|
|
91
|
+
# Start Storybook
|
|
92
|
+
npm run storybook
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## License
|
|
96
|
+
|
|
97
|
+
MIT
|