performa 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 +51 -13
- package/dist/index.cjs +38 -38
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +38 -38
- package/dist/index.js.map +1 -1
- package/dist/nextjs.cjs +20 -20
- package/dist/nextjs.cjs.map +1 -1
- package/dist/nextjs.js +20 -20
- package/dist/nextjs.js.map +1 -1
- package/dist/react-router.cjs +20 -20
- package/dist/react-router.cjs.map +1 -1
- package/dist/react-router.js +20 -20
- package/dist/react-router.js.map +1 -1
- package/dist/tanstack-start.cjs +20 -20
- package/dist/tanstack-start.cjs.map +1 -1
- package/dist/tanstack-start.js +20 -20
- package/dist/tanstack-start.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -105,48 +105,48 @@ var defaultTheme = {
|
|
|
105
105
|
required: "text-red-500 ml-1"
|
|
106
106
|
},
|
|
107
107
|
input: {
|
|
108
|
-
base: "block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-
|
|
108
|
+
base: "block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500",
|
|
109
109
|
error: "border-red-500 dark:border-red-400",
|
|
110
110
|
disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
|
|
111
|
-
focus: "focus:outline-none focus:ring focus:ring-
|
|
111
|
+
focus: "focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
|
|
112
112
|
},
|
|
113
113
|
select: {
|
|
114
|
-
base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring focus:ring-
|
|
114
|
+
base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
|
|
115
115
|
error: "border-red-500 dark:border-red-400",
|
|
116
116
|
disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
|
|
117
117
|
option: "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
|
|
118
118
|
},
|
|
119
119
|
textarea: {
|
|
120
|
-
base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-
|
|
120
|
+
base: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed",
|
|
121
121
|
error: "border-red-500 dark:border-red-400",
|
|
122
122
|
disabled: "disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed"
|
|
123
123
|
},
|
|
124
124
|
checkbox: {
|
|
125
|
-
base: "h-4 w-4 text-
|
|
125
|
+
base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded disabled:cursor-not-allowed",
|
|
126
126
|
error: "border-red-500 dark:border-red-400",
|
|
127
127
|
label: "ml-2 block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
128
128
|
},
|
|
129
129
|
toggle: {
|
|
130
|
-
track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 dark:bg-gray-600 peer-focus:ring-2 peer-focus:ring-
|
|
131
|
-
trackActive: "peer-checked:bg-
|
|
130
|
+
track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 dark:bg-gray-600 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2 dark:peer-focus:ring-offset-gray-800",
|
|
131
|
+
trackActive: "peer-checked:bg-blue-600 peer-checked:dark:bg-blue-500",
|
|
132
132
|
thumb: "absolute left-1 top-1 w-4 h-4 bg-white dark:bg-gray-200 rounded-full transition-transform duration-200 peer-checked:translate-x-5",
|
|
133
133
|
label: "block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
134
134
|
},
|
|
135
135
|
radio: {
|
|
136
|
-
base: "h-4 w-4 text-
|
|
136
|
+
base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 disabled:cursor-not-allowed",
|
|
137
137
|
label: "ml-2 text-sm text-gray-700 dark:text-gray-300",
|
|
138
138
|
group: "mt-1"
|
|
139
139
|
},
|
|
140
140
|
file: {
|
|
141
|
-
dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 dark:border-gray-600 hover:border-
|
|
142
|
-
dropzoneActive: "border-
|
|
141
|
+
dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500 transition-colors duration-200",
|
|
142
|
+
dropzoneActive: "border-blue-500 bg-blue-50 dark:bg-blue-900/20",
|
|
143
143
|
dropzoneError: "border-red-500 dark:border-red-400 hover:border-red-500 dark:hover:border-red-400",
|
|
144
144
|
icon: "w-8 h-8 text-gray-400 dark:text-gray-500",
|
|
145
145
|
text: "mt-2 text-sm text-gray-500 dark:text-gray-400",
|
|
146
146
|
hint: "mt-1 text-xs text-gray-500 dark:text-gray-400"
|
|
147
147
|
},
|
|
148
148
|
submit: {
|
|
149
|
-
base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-
|
|
149
|
+
base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800 focus:ring-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
|
|
150
150
|
loading: "opacity-75",
|
|
151
151
|
spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
|
|
152
152
|
},
|
|
@@ -159,18 +159,18 @@ var defaultTheme = {
|
|
|
159
159
|
info: "bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800"
|
|
160
160
|
},
|
|
161
161
|
datetime: {
|
|
162
|
-
input: "block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-
|
|
162
|
+
input: "block w-full px-3 py-2 pr-10 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-700 disabled:cursor-not-allowed cursor-pointer",
|
|
163
163
|
dropdown: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
|
|
164
164
|
picker: "absolute z-50 mt-2 p-4 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg w-80",
|
|
165
165
|
calendar: "grid grid-cols-7 gap-1 mb-4",
|
|
166
|
-
day: "p-2 text-sm rounded hover:bg-
|
|
167
|
-
daySelected: "bg-
|
|
168
|
-
dayButton: "p-2 text-sm rounded hover:bg-
|
|
169
|
-
dayButtonSelected: "bg-
|
|
166
|
+
day: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700 dark:text-gray-300",
|
|
167
|
+
daySelected: "bg-blue-600 text-white",
|
|
168
|
+
dayButton: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700 dark:text-gray-300",
|
|
169
|
+
dayButtonSelected: "bg-blue-600 text-white",
|
|
170
170
|
timeInput: "w-14 px-2 py-1 text-center border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100",
|
|
171
171
|
timeLabel: "text-xs font-medium text-gray-700 dark:text-gray-300",
|
|
172
172
|
periodButton: "px-3 py-1 text-xs rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300",
|
|
173
|
-
periodButtonActive: "bg-
|
|
173
|
+
periodButtonActive: "bg-blue-600 text-white",
|
|
174
174
|
iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400",
|
|
175
175
|
navButton: "p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-700 dark:text-white",
|
|
176
176
|
monthYear: "text-sm font-medium text-gray-900 dark:text-gray-100",
|
|
@@ -178,7 +178,7 @@ var defaultTheme = {
|
|
|
178
178
|
formatButton: "px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-200 dark:hover:bg-gray-600"
|
|
179
179
|
},
|
|
180
180
|
button: {
|
|
181
|
-
primary: "flex-1 px-3 py-2 text-sm bg-
|
|
181
|
+
primary: "flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
|
|
182
182
|
secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
|
|
183
183
|
},
|
|
184
184
|
readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100",
|
|
@@ -198,48 +198,48 @@ var lightOnlyTheme = {
|
|
|
198
198
|
required: "text-red-500 ml-1"
|
|
199
199
|
},
|
|
200
200
|
input: {
|
|
201
|
-
base: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-
|
|
201
|
+
base: "block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500",
|
|
202
202
|
error: "border-red-500",
|
|
203
203
|
disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
|
|
204
|
-
focus: "focus:outline-none focus:ring focus:ring-
|
|
204
|
+
focus: "focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500"
|
|
205
205
|
},
|
|
206
206
|
select: {
|
|
207
|
-
base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 focus:outline-none focus:ring focus:ring-
|
|
207
|
+
base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
|
|
208
208
|
error: "border-red-500",
|
|
209
209
|
disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed",
|
|
210
210
|
option: "bg-white text-gray-900"
|
|
211
211
|
},
|
|
212
212
|
textarea: {
|
|
213
|
-
base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-
|
|
213
|
+
base: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed",
|
|
214
214
|
error: "border-red-500",
|
|
215
215
|
disabled: "disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
216
216
|
},
|
|
217
217
|
checkbox: {
|
|
218
|
-
base: "h-4 w-4 text-
|
|
218
|
+
base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded disabled:cursor-not-allowed",
|
|
219
219
|
error: "border-red-500",
|
|
220
220
|
label: "ml-2 block text-sm font-medium text-gray-700"
|
|
221
221
|
},
|
|
222
222
|
toggle: {
|
|
223
|
-
track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 peer-focus:ring-2 peer-focus:ring-
|
|
224
|
-
trackActive: "peer-checked:bg-
|
|
223
|
+
track: "absolute inset-0 rounded-full transition-colors duration-200 bg-gray-300 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2",
|
|
224
|
+
trackActive: "peer-checked:bg-blue-600",
|
|
225
225
|
thumb: "absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 peer-checked:translate-x-5",
|
|
226
226
|
label: "block text-sm font-medium text-gray-700"
|
|
227
227
|
},
|
|
228
228
|
radio: {
|
|
229
|
-
base: "h-4 w-4 text-
|
|
229
|
+
base: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 disabled:cursor-not-allowed",
|
|
230
230
|
label: "ml-2 text-sm text-gray-700",
|
|
231
231
|
group: "mt-1"
|
|
232
232
|
},
|
|
233
233
|
file: {
|
|
234
|
-
dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 hover:border-
|
|
235
|
-
dropzoneActive: "border-
|
|
234
|
+
dropzone: "flex flex-col items-center justify-center w-full p-6 border-2 border-dashed rounded-md cursor-pointer border-gray-300 hover:border-blue-500 transition-colors duration-200",
|
|
235
|
+
dropzoneActive: "border-blue-500 bg-blue-50",
|
|
236
236
|
dropzoneError: "border-red-500 hover:border-red-500",
|
|
237
237
|
icon: "w-8 h-8 text-gray-400",
|
|
238
238
|
text: "mt-2 text-sm text-gray-500",
|
|
239
239
|
hint: "mt-1 text-xs text-gray-500"
|
|
240
240
|
},
|
|
241
241
|
submit: {
|
|
242
|
-
base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-
|
|
242
|
+
base: "mt-1 flex items-center justify-center w-full px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed",
|
|
243
243
|
loading: "opacity-75",
|
|
244
244
|
spinner: "mr-3 -ml-1 size-5 animate-spin text-white"
|
|
245
245
|
},
|
|
@@ -252,18 +252,18 @@ var lightOnlyTheme = {
|
|
|
252
252
|
info: "bg-blue-50 text-blue-800 border-blue-200"
|
|
253
253
|
},
|
|
254
254
|
datetime: {
|
|
255
|
-
input: "block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-
|
|
255
|
+
input: "block w-full px-3 py-2 pr-10 border border-gray-300 rounded-md shadow-sm bg-white text-gray-900 placeholder-gray-400 focus:outline-none focus:ring focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed cursor-pointer",
|
|
256
256
|
dropdown: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
|
|
257
257
|
picker: "absolute z-50 mt-2 p-4 bg-white border border-gray-300 rounded-lg shadow-lg w-80",
|
|
258
258
|
calendar: "grid grid-cols-7 gap-1 mb-4",
|
|
259
|
-
day: "p-2 text-sm rounded hover:bg-
|
|
260
|
-
daySelected: "bg-
|
|
261
|
-
dayButton: "p-2 text-sm rounded hover:bg-
|
|
262
|
-
dayButtonSelected: "bg-
|
|
259
|
+
day: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700",
|
|
260
|
+
daySelected: "bg-blue-600 text-white",
|
|
261
|
+
dayButton: "p-2 text-sm rounded hover:bg-blue-600 hover:text-white transition-colors text-gray-700",
|
|
262
|
+
dayButtonSelected: "bg-blue-600 text-white",
|
|
263
263
|
timeInput: "w-14 px-2 py-1 text-center border border-gray-300 rounded bg-white text-gray-900",
|
|
264
264
|
timeLabel: "text-xs font-medium text-gray-700",
|
|
265
265
|
periodButton: "px-3 py-1 text-xs rounded bg-gray-100 text-gray-700",
|
|
266
|
-
periodButtonActive: "bg-
|
|
266
|
+
periodButtonActive: "bg-blue-600 text-white",
|
|
267
267
|
iconButton: "absolute right-2 top-1/2 -translate-y-1/2 text-gray-500",
|
|
268
268
|
navButton: "p-1 hover:bg-gray-100 rounded text-gray-700",
|
|
269
269
|
monthYear: "text-sm font-medium text-gray-900",
|
|
@@ -271,7 +271,7 @@ var lightOnlyTheme = {
|
|
|
271
271
|
formatButton: "px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200"
|
|
272
272
|
},
|
|
273
273
|
button: {
|
|
274
|
-
primary: "flex-1 px-3 py-2 text-sm bg-
|
|
274
|
+
primary: "flex-1 px-3 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
|
|
275
275
|
secondary: "flex-1 px-3 py-2 text-sm border border-gray-300 rounded hover:bg-gray-50 text-gray-700"
|
|
276
276
|
},
|
|
277
277
|
readonly: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-100 text-gray-900",
|
|
@@ -1171,7 +1171,7 @@ function FileInput({
|
|
|
1171
1171
|
)
|
|
1172
1172
|
}
|
|
1173
1173
|
),
|
|
1174
|
-
/* @__PURE__ */ jsx("p", { className: theme.file?.text, children: fileName ? /* @__PURE__ */ jsx("span", { className: "font-medium text-
|
|
1174
|
+
/* @__PURE__ */ jsx("p", { className: theme.file?.text, children: fileName ? /* @__PURE__ */ jsx("span", { className: "font-medium text-blue-600 dark:text-blue-400", children: fileName }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
1175
1175
|
/* @__PURE__ */ jsx("span", { className: "font-medium", children: labels.fileUpload?.clickToUpload }),
|
|
1176
1176
|
" ",
|
|
1177
1177
|
labels.fileUpload?.dragAndDrop
|
|
@@ -1208,7 +1208,7 @@ function FileInput({
|
|
|
1208
1208
|
href: fileUrl,
|
|
1209
1209
|
target: "_blank",
|
|
1210
1210
|
rel: "noopener noreferrer",
|
|
1211
|
-
className: "mt-2 inline-flex items-center text-xs text-
|
|
1211
|
+
className: "mt-2 inline-flex items-center text-xs text-blue-600 hover:underline dark:text-blue-400",
|
|
1212
1212
|
children: [
|
|
1213
1213
|
"View Current ",
|
|
1214
1214
|
label,
|