virtual-ui-lib 1.0.41 → 1.0.42
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/dist/index.js +41 -0
- package/dist/index.mjs +40 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
CodeBlock: () => CodeBlock,
|
|
33
|
+
CustomInputField: () => CustomInputField,
|
|
33
34
|
OtpInput: () => OtpInput,
|
|
34
35
|
SmartButton: () => SmartButton,
|
|
35
36
|
StatCard: () => StatCard,
|
|
@@ -307,9 +308,49 @@ var SmartButton = ({
|
|
|
307
308
|
isLoading ? /* @__PURE__ */ import_react5.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
|
|
308
309
|
);
|
|
309
310
|
};
|
|
311
|
+
|
|
312
|
+
// src/components/CustomInputField/CustomInputField.jsx
|
|
313
|
+
var import_react6 = __toESM(require("react"));
|
|
314
|
+
var CustomInputField = ({
|
|
315
|
+
label = "Label",
|
|
316
|
+
placeholder = "Enter text...",
|
|
317
|
+
errorMessage = "",
|
|
318
|
+
helperText = "",
|
|
319
|
+
value = "",
|
|
320
|
+
bg = "#1e293b",
|
|
321
|
+
textColor = "#f1f5f9",
|
|
322
|
+
accent = "#7c3aed",
|
|
323
|
+
padding = "10px",
|
|
324
|
+
radius = "8px",
|
|
325
|
+
onChange = () => {
|
|
326
|
+
}
|
|
327
|
+
}) => {
|
|
328
|
+
const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
|
|
329
|
+
return /* @__PURE__ */ import_react6.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ import_react6.default.createElement(
|
|
330
|
+
"input",
|
|
331
|
+
{
|
|
332
|
+
type: "text",
|
|
333
|
+
value,
|
|
334
|
+
placeholder,
|
|
335
|
+
onFocus: () => setIsFocused(true),
|
|
336
|
+
onBlur: () => setIsFocused(false),
|
|
337
|
+
onChange: (e) => onChange(e.target.value),
|
|
338
|
+
style: {
|
|
339
|
+
background: bg,
|
|
340
|
+
color: textColor,
|
|
341
|
+
padding,
|
|
342
|
+
borderRadius: radius,
|
|
343
|
+
border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
|
|
344
|
+
transition: "border-color 0.3s ease",
|
|
345
|
+
width: "100%"
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
), errorMessage && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
|
|
349
|
+
};
|
|
310
350
|
// Annotate the CommonJS export names for ESM import in node:
|
|
311
351
|
0 && (module.exports = {
|
|
312
352
|
CodeBlock,
|
|
353
|
+
CustomInputField,
|
|
313
354
|
OtpInput,
|
|
314
355
|
SmartButton,
|
|
315
356
|
StatCard,
|
package/dist/index.mjs
CHANGED
|
@@ -268,8 +268,48 @@ var SmartButton = ({
|
|
|
268
268
|
isLoading ? /* @__PURE__ */ React5.createElement("span", null, "Loading...") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, icon && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
|
|
269
269
|
);
|
|
270
270
|
};
|
|
271
|
+
|
|
272
|
+
// src/components/CustomInputField/CustomInputField.jsx
|
|
273
|
+
import React6, { useState as useState5 } from "react";
|
|
274
|
+
var CustomInputField = ({
|
|
275
|
+
label = "Label",
|
|
276
|
+
placeholder = "Enter text...",
|
|
277
|
+
errorMessage = "",
|
|
278
|
+
helperText = "",
|
|
279
|
+
value = "",
|
|
280
|
+
bg = "#1e293b",
|
|
281
|
+
textColor = "#f1f5f9",
|
|
282
|
+
accent = "#7c3aed",
|
|
283
|
+
padding = "10px",
|
|
284
|
+
radius = "8px",
|
|
285
|
+
onChange = () => {
|
|
286
|
+
}
|
|
287
|
+
}) => {
|
|
288
|
+
const [isFocused, setIsFocused] = useState5(false);
|
|
289
|
+
return /* @__PURE__ */ React6.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React6.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React6.createElement(
|
|
290
|
+
"input",
|
|
291
|
+
{
|
|
292
|
+
type: "text",
|
|
293
|
+
value,
|
|
294
|
+
placeholder,
|
|
295
|
+
onFocus: () => setIsFocused(true),
|
|
296
|
+
onBlur: () => setIsFocused(false),
|
|
297
|
+
onChange: (e) => onChange(e.target.value),
|
|
298
|
+
style: {
|
|
299
|
+
background: bg,
|
|
300
|
+
color: textColor,
|
|
301
|
+
padding,
|
|
302
|
+
borderRadius: radius,
|
|
303
|
+
border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
|
|
304
|
+
transition: "border-color 0.3s ease",
|
|
305
|
+
width: "100%"
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
), errorMessage && /* @__PURE__ */ React6.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React6.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
|
|
309
|
+
};
|
|
271
310
|
export {
|
|
272
311
|
CodeBlock,
|
|
312
|
+
CustomInputField,
|
|
273
313
|
OtpInput,
|
|
274
314
|
SmartButton,
|
|
275
315
|
StatCard,
|