pejay-ui 1.0.1 → 1.0.3
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 +150 -31
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -28,34 +28,153 @@ 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
|
-
|
|
31
|
+
Here is the list of components. You can copy the command using the **Copy** button on the right:
|
|
32
|
+
|
|
33
|
+
<table>
|
|
34
|
+
<thead>
|
|
35
|
+
<tr>
|
|
36
|
+
<th>Component</th>
|
|
37
|
+
<th>Description</th>
|
|
38
|
+
<th>Install Command</th>
|
|
39
|
+
<th>Action</th>
|
|
40
|
+
</tr>
|
|
41
|
+
</thead>
|
|
42
|
+
<tbody>
|
|
43
|
+
<!-- Buttons -->
|
|
44
|
+
<tr>
|
|
45
|
+
<td><strong>button</strong></td>
|
|
46
|
+
<td>Premium interactive button with multiple variants, loaders, and tooltips.</td>
|
|
47
|
+
<td><code>npx pejay-ui add button</code></td>
|
|
48
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add button')">Copy</button></td>
|
|
49
|
+
</tr>
|
|
50
|
+
<!-- Form Inputs -->
|
|
51
|
+
<tr>
|
|
52
|
+
<td><strong>form/input</strong></td>
|
|
53
|
+
<td>Standard text input field with labels and validation errors.</td>
|
|
54
|
+
<td><code>npx pejay-ui add form/input</code></td>
|
|
55
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/input')">Copy</button></td>
|
|
56
|
+
</tr>
|
|
57
|
+
<tr>
|
|
58
|
+
<td><strong>form/amount-input</strong></td>
|
|
59
|
+
<td>Numeric input configured for formatted currency entry.</td>
|
|
60
|
+
<td><code>npx pejay-ui add form/amount-input</code></td>
|
|
61
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/amount-input')">Copy</button></td>
|
|
62
|
+
</tr>
|
|
63
|
+
<tr>
|
|
64
|
+
<td><strong>form/checkbox</strong></td>
|
|
65
|
+
<td>Styled single checkbox input.</td>
|
|
66
|
+
<td><code>npx pejay-ui add form/checkbox</code></td>
|
|
67
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/checkbox')">Copy</button></td>
|
|
68
|
+
</tr>
|
|
69
|
+
<tr>
|
|
70
|
+
<td><strong>form/checkbox-group</strong></td>
|
|
71
|
+
<td>Group of checkboxes managing single/multiple selection states.</td>
|
|
72
|
+
<td><code>npx pejay-ui add form/checkbox-group</code></td>
|
|
73
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/checkbox-group')">Copy</button></td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td><strong>form/email-input</strong></td>
|
|
77
|
+
<td>Dedicated input for email addresses with prefix icon.</td>
|
|
78
|
+
<td><code>npx pejay-ui add form/email-input</code></td>
|
|
79
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/email-input')">Copy</button></td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td><strong>form/file-input</strong></td>
|
|
83
|
+
<td>Premium dropzone-style file upload component.</td>
|
|
84
|
+
<td><code>npx pejay-ui add form/file-input</code></td>
|
|
85
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/file-input')">Copy</button></td>
|
|
86
|
+
</tr>
|
|
87
|
+
<tr>
|
|
88
|
+
<td><strong>form/number-input</strong></td>
|
|
89
|
+
<td>Input field for numerical values with increment/decrement steppers.</td>
|
|
90
|
+
<td><code>npx pejay-ui add form/number-input</code></td>
|
|
91
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/number-input')">Copy</button></td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td><strong>form/password-input</strong></td>
|
|
95
|
+
<td>Secure text input with eye icon toggle to show/hide password.</td>
|
|
96
|
+
<td><code>npx pejay-ui add form/password-input</code></td>
|
|
97
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/password-input')">Copy</button></td>
|
|
98
|
+
</tr>
|
|
99
|
+
<tr>
|
|
100
|
+
<td><strong>form/phone-input</strong></td>
|
|
101
|
+
<td>Formatted input field for telephone numbers.</td>
|
|
102
|
+
<td><code>npx pejay-ui add form/phone-input</code></td>
|
|
103
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/phone-input')">Copy</button></td>
|
|
104
|
+
</tr>
|
|
105
|
+
<tr>
|
|
106
|
+
<td><strong>form/radio</strong></td>
|
|
107
|
+
<td>Styled radio selection dot.</td>
|
|
108
|
+
<td><code>npx pejay-ui add form/radio</code></td>
|
|
109
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/radio')">Copy</button></td>
|
|
110
|
+
</tr>
|
|
111
|
+
<tr>
|
|
112
|
+
<td><strong>form/radio-group</strong></td>
|
|
113
|
+
<td>Group of mutually exclusive radio options.</td>
|
|
114
|
+
<td><code>npx pejay-ui add form/radio-group</code></td>
|
|
115
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/radio-group')">Copy</button></td>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td><strong>form/range-slider</strong></td>
|
|
119
|
+
<td>Slider controls for choosing values from a numeric range.</td>
|
|
120
|
+
<td><code>npx pejay-ui add form/range-slider</code></td>
|
|
121
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/range-slider')">Copy</button></td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td><strong>form/switch</strong></td>
|
|
125
|
+
<td>Styled toggle switch representing boolean options.</td>
|
|
126
|
+
<td><code>npx pejay-ui add form/switch</code></td>
|
|
127
|
+
<td><button onclick="navigator.clipboard.writeText('npx pejay-ui add form/switch')">Copy</button></td>
|
|
128
|
+
</tr>
|
|
129
|
+
<tr>
|
|
130
|
+
<td><strong>form/textarea</strong></td>
|
|
131
|
+
<td>Multiline text area input with character counter/limits.</td>
|
|
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>
|