pejay-ui 1.0.3 → 1.0.4
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 +101 -150
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,153 +28,104 @@ npx pejay-ui remove <component-name>
|
|
|
28
28
|
|
|
29
29
|
## Available Components
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
<td><code>npx pejay-ui add form/textarea</code></td>
|
|
133
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/textarea')">Copy</button></td>
|
|
134
|
-
</tr>
|
|
135
|
-
<tr>
|
|
136
|
-
<td><strong>form/url-input</strong></td>
|
|
137
|
-
<td>Styled input field specifically formatted for web addresses.</td>
|
|
138
|
-
<td><code>npx pejay-ui add form/url-input</code></td>
|
|
139
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/url-input')">Copy</button></td>
|
|
140
|
-
</tr>
|
|
141
|
-
<!-- Date & Time Pickers -->
|
|
142
|
-
<tr>
|
|
143
|
-
<td><strong>form/date-picker</strong></td>
|
|
144
|
-
<td>Calendar-based date selector popover with inline selects.</td>
|
|
145
|
-
<td><code>npx pejay-ui add form/date-picker</code></td>
|
|
146
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/date-picker')">Copy</button></td>
|
|
147
|
-
</tr>
|
|
148
|
-
<tr>
|
|
149
|
-
<td><strong>form/date-range-picker</strong></td>
|
|
150
|
-
<td>Date range selector to pick start and end dates.</td>
|
|
151
|
-
<td><code>npx pejay-ui add form/date-range-picker</code></td>
|
|
152
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/date-range-picker')">Copy</button></td>
|
|
153
|
-
</tr>
|
|
154
|
-
<tr>
|
|
155
|
-
<td><strong>form/time-picker</strong></td>
|
|
156
|
-
<td>Dropdown component for picking hours, minutes, and AM/PM.</td>
|
|
157
|
-
<td><code>npx pejay-ui add form/time-picker</code></td>
|
|
158
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/time-picker')">Copy</button></td>
|
|
159
|
-
</tr>
|
|
160
|
-
<tr>
|
|
161
|
-
<td><strong>form/time-range-picker</strong></td>
|
|
162
|
-
<td>Popover time selector for configuring custom duration intervals.</td>
|
|
163
|
-
<td><code>npx pejay-ui add form/time-range-picker</code></td>
|
|
164
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/time-range-picker')">Copy</button></td>
|
|
165
|
-
</tr>
|
|
166
|
-
<!-- Dropdowns & Selects -->
|
|
167
|
-
<tr>
|
|
168
|
-
<td><strong>dropdown/select-input</strong></td>
|
|
169
|
-
<td>Elegant single-select searchable dropdown input.</td>
|
|
170
|
-
<td><code>npx pejay-ui add dropdown/select-input</code></td>
|
|
171
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add dropdown/select-input')">Copy</button></td>
|
|
172
|
-
</tr>
|
|
173
|
-
<tr>
|
|
174
|
-
<td><strong>dropdown/multiselect-input</strong></td>
|
|
175
|
-
<td>Searchable multiselect dropdown with dismissible tag pills.</td>
|
|
176
|
-
<td><code>npx pejay-ui add dropdown/multiselect-input</code></td>
|
|
177
|
-
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add dropdown/multiselect-input')">Copy</button></td>
|
|
178
|
-
</tr>
|
|
179
|
-
</tbody>
|
|
180
|
-
</table>
|
|
31
|
+
Below is the list of components you can add. Each has a copyable command block with a working native copy button on GitHub and NPM:
|
|
32
|
+
|
|
33
|
+
### Buttons
|
|
34
|
+
|
|
35
|
+
* **`button`**: Premium interactive button supporting multiple variants (solid, soft, ghost), loaders, and custom hover tooltips.
|
|
36
|
+
```bash
|
|
37
|
+
npx pejay-ui add button
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Form Inputs
|
|
41
|
+
|
|
42
|
+
* **`form/input`**: Standard text input field with validation, labels, and error messaging.
|
|
43
|
+
```bash
|
|
44
|
+
npx pejay-ui add form/input
|
|
45
|
+
```
|
|
46
|
+
* **`form/amount-input`**: Numeric input configured for currency entry with symbol prefixes and formatting.
|
|
47
|
+
```bash
|
|
48
|
+
npx pejay-ui add form/amount-input
|
|
49
|
+
```
|
|
50
|
+
* **`form/checkbox`**: Styled single checkbox input.
|
|
51
|
+
```bash
|
|
52
|
+
npx pejay-ui add form/checkbox
|
|
53
|
+
```
|
|
54
|
+
* **`form/checkbox-group`**: Group of checkboxes managing single or multiple selection states with item indices.
|
|
55
|
+
```bash
|
|
56
|
+
npx pejay-ui add form/checkbox-group
|
|
57
|
+
```
|
|
58
|
+
* **`form/email-input`**: Dedicated input for email addresses with prefix icon.
|
|
59
|
+
```bash
|
|
60
|
+
npx pejay-ui add form/email-input
|
|
61
|
+
```
|
|
62
|
+
* **`form/file-input`**: Premium dropzone-style file upload component supporting drag-and-drop and progress/preview states.
|
|
63
|
+
```bash
|
|
64
|
+
npx pejay-ui add form/file-input
|
|
65
|
+
```
|
|
66
|
+
* **`form/number-input`**: Input field for numerical values with increment/decrement steppers.
|
|
67
|
+
```bash
|
|
68
|
+
npx pejay-ui add form/number-input
|
|
69
|
+
```
|
|
70
|
+
* **`form/password-input`**: Secure text input with eye icon toggle to show/hide the password.
|
|
71
|
+
```bash
|
|
72
|
+
npx pejay-ui add form/password-input
|
|
73
|
+
```
|
|
74
|
+
* **`form/phone-input`**: Formatted input field for telephone numbers.
|
|
75
|
+
```bash
|
|
76
|
+
npx pejay-ui add form/phone-input
|
|
77
|
+
```
|
|
78
|
+
* **`form/radio`**: Styled radio selection dot.
|
|
79
|
+
```bash
|
|
80
|
+
npx pejay-ui add form/radio
|
|
81
|
+
```
|
|
82
|
+
* **`form/radio-group`**: Group of mutually exclusive radio options.
|
|
83
|
+
```bash
|
|
84
|
+
npx pejay-ui add form/radio-group
|
|
85
|
+
```
|
|
86
|
+
* **`form/range-slider`**: Slider controls for choosing values from a numeric range.
|
|
87
|
+
```bash
|
|
88
|
+
npx pejay-ui add form/range-slider
|
|
89
|
+
```
|
|
90
|
+
* **`form/switch`**: Styled toggle switch representing boolean options.
|
|
91
|
+
```bash
|
|
92
|
+
npx pejay-ui add form/switch
|
|
93
|
+
```
|
|
94
|
+
* **`form/textarea`**: Multiline text area input with character counter/limit indicators.
|
|
95
|
+
```bash
|
|
96
|
+
npx pejay-ui add form/textarea
|
|
97
|
+
```
|
|
98
|
+
* **`form/url-input`**: Styled input field specifically formatted for web addresses/links.
|
|
99
|
+
```bash
|
|
100
|
+
npx pejay-ui add form/url-input
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Date & Time Pickers
|
|
104
|
+
|
|
105
|
+
* **`form/date-picker`**: Calendar-based date selector popover with inline month/year dropdowns.
|
|
106
|
+
```bash
|
|
107
|
+
npx pejay-ui add form/date-picker
|
|
108
|
+
```
|
|
109
|
+
* **`form/date-range-picker`**: Date range selector to pick start and end dates with highlight ranges.
|
|
110
|
+
```bash
|
|
111
|
+
npx pejay-ui add form/date-range-picker
|
|
112
|
+
```
|
|
113
|
+
* **`form/time-picker`**: Dropdown component for picking specific hours, minutes, and AM/PM.
|
|
114
|
+
```bash
|
|
115
|
+
npx pejay-ui add form/time-picker
|
|
116
|
+
```
|
|
117
|
+
* **`form/time-range-picker`**: Popover time selector for configuring custom duration intervals.
|
|
118
|
+
```bash
|
|
119
|
+
npx pejay-ui add form/time-range-picker
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Dropdowns & Selects
|
|
123
|
+
|
|
124
|
+
* **`dropdown/select-input`**: Elegant single-select searchable dropdown input.
|
|
125
|
+
```bash
|
|
126
|
+
npx pejay-ui add dropdown/select-input
|
|
127
|
+
```
|
|
128
|
+
* **`dropdown/multiselect-input`**: Searchable multiselect dropdown which renders selected options as dismissible tag pills.
|
|
129
|
+
```bash
|
|
130
|
+
npx pejay-ui add dropdown/multiselect-input
|
|
131
|
+
```
|