@rokkit/ui 1.0.0-next.119 → 1.0.0-next.121
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 +124 -0
- package/package.json +5 -3
- package/src/Pill.svelte +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
# @rokkit/ui
|
|
2
|
+
|
|
3
|
+
A collection of data-driven UI components for Svelte applications that improve developer experience.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm install @rokkit/ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
or
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
bun add @rokkit/ui
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Components
|
|
18
|
+
|
|
19
|
+
### Basic Components
|
|
20
|
+
|
|
21
|
+
- **Button** - Versatile button component with support for variants, icons, and different button types
|
|
22
|
+
- **Icon** - Display icons with consistent styling
|
|
23
|
+
- **Item** - Base component for displaying individual items within lists
|
|
24
|
+
- **Pill** - Compact label component for status indicators or tags
|
|
25
|
+
- **ProgressBar** - Visual indicator of progress or completion
|
|
26
|
+
- **Separator** - Visual divider between content sections
|
|
27
|
+
- **Connector** - Visual connector between elements
|
|
28
|
+
- **Summary** - Display summary information
|
|
29
|
+
- **ValidationReport** - Display validation results and error messages
|
|
30
|
+
|
|
31
|
+
### Layout Components
|
|
32
|
+
|
|
33
|
+
- **Accordion** - Collapsible content panels
|
|
34
|
+
- **Card** - Container for displaying content with consistent styling
|
|
35
|
+
- **ResponsiveGrid** - Grid layout that adjusts based on screen size
|
|
36
|
+
- **SlidingColumns** - Multi-column layout with sliding navigation
|
|
37
|
+
- **Tabs** - Tabbed interface for organizing content
|
|
38
|
+
- **Overlay** - Modal overlay for dialogs and popups
|
|
39
|
+
- **Message** - Styled message display
|
|
40
|
+
|
|
41
|
+
### Navigation Components
|
|
42
|
+
|
|
43
|
+
- **BreadCrumbs** - Navigation breadcrumb trail
|
|
44
|
+
- **Link** - Styled link component
|
|
45
|
+
- **PageNavigator** - Component for paginating through content
|
|
46
|
+
- **NestedPaginator** - Pagination for nested data structures
|
|
47
|
+
|
|
48
|
+
### Form Components
|
|
49
|
+
|
|
50
|
+
- **InputField** - Base component for form inputs
|
|
51
|
+
- **Form** - Container for form elements with built-in validation
|
|
52
|
+
- **FieldLayout** - Layout component for form fields
|
|
53
|
+
- **CheckBox** - Checkbox input component
|
|
54
|
+
- **RadioGroup** - Group of radio button options
|
|
55
|
+
- **Toggle** - Toggle switch component
|
|
56
|
+
- **Switch** - Switch control component
|
|
57
|
+
- **Select** - Dropdown select component
|
|
58
|
+
- **MultiSelect** - Multiple selection dropdown component
|
|
59
|
+
- **DropDown** - Dropdown menu component
|
|
60
|
+
- **DropSearch** - Searchable dropdown component
|
|
61
|
+
- **Range** - Range selection component
|
|
62
|
+
- **RangeMinMax** - Range with minimum and maximum values
|
|
63
|
+
- **RangeSlider** - Slider control for selecting from a range
|
|
64
|
+
- **RangeTick** - Range with tick marks
|
|
65
|
+
- **Calendar** - Date selection calendar
|
|
66
|
+
- **Rating** - Star rating component
|
|
67
|
+
|
|
68
|
+
### Data Components
|
|
69
|
+
|
|
70
|
+
- **DataEditor** - Component for editing structured data
|
|
71
|
+
- **ListEditor** - Component for editing lists
|
|
72
|
+
- **NestedEditor** - Component for editing nested data structures
|
|
73
|
+
- **List** - Display a list of items
|
|
74
|
+
- **ListBody** - Container for list items
|
|
75
|
+
- **NestedList** - Display nested/hierarchical lists
|
|
76
|
+
- **Table** - Table component for structured data (alias for TreeTable)
|
|
77
|
+
- **TreeTable** - Table component with support for hierarchical data
|
|
78
|
+
- **Tree** - Tree view for hierarchical data
|
|
79
|
+
- **Node** - Individual node within a tree
|
|
80
|
+
|
|
81
|
+
### Progress & Navigation Components
|
|
82
|
+
|
|
83
|
+
- **Stepper** - Step-by-step process indicator
|
|
84
|
+
- **ProgressDots** - Progress indicator using dots
|
|
85
|
+
- **Carousel** - Image or content carousel
|
|
86
|
+
|
|
87
|
+
### Visual Effect Components
|
|
88
|
+
|
|
89
|
+
- **Shine** - Add shine effect to elements
|
|
90
|
+
- **Tilt** - Add tilt effect to elements
|
|
91
|
+
- **Scrollable** - Scrollable container with custom scrollbars
|
|
92
|
+
|
|
93
|
+
### Theme Components
|
|
94
|
+
|
|
95
|
+
- **ToggleThemeMode** - Toggle between light and dark themes
|
|
96
|
+
|
|
97
|
+
## Usage Example
|
|
98
|
+
|
|
99
|
+
```svelte
|
|
100
|
+
<script>
|
|
101
|
+
import { Button, Icon, Card } from '@rokkit/ui'
|
|
102
|
+
</script>
|
|
103
|
+
|
|
104
|
+
<Card>
|
|
105
|
+
<h2>Example Card</h2>
|
|
106
|
+
<p>This is an example of using the Card component</p>
|
|
107
|
+
<Button variant="primary" label="Click Me" leftIcon="check" />
|
|
108
|
+
</Card>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Dependencies
|
|
112
|
+
|
|
113
|
+
- @rokkit/actions
|
|
114
|
+
- @rokkit/core
|
|
115
|
+
- @rokkit/data
|
|
116
|
+
- @rokkit/input
|
|
117
|
+
- @rokkit/states
|
|
118
|
+
- d3-scale
|
|
119
|
+
- date-fns
|
|
120
|
+
- ramda
|
|
121
|
+
|
|
122
|
+
## License
|
|
123
|
+
|
|
124
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/ui",
|
|
3
|
-
"version": "1.0.0-next.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.0-next.121",
|
|
4
|
+
"description": "Data driven UI components, improving DX",
|
|
5
5
|
"author": "Jerry Thomas <me@jerrythomas.name>",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"module": "src/index.js",
|
|
@@ -17,7 +17,9 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"src/**/*.js",
|
|
19
19
|
"src/**/*.svelte",
|
|
20
|
-
"dist/**/*.d.ts"
|
|
20
|
+
"dist/**/*.d.ts",
|
|
21
|
+
"README.md",
|
|
22
|
+
"package.json"
|
|
21
23
|
],
|
|
22
24
|
"exports": {
|
|
23
25
|
"./package.json": "./package.json",
|