carbon-ui-lib 1.0.0 → 1.0.1

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.
Files changed (3) hide show
  1. package/dist/index.js +121 -0
  2. package/dist/index.mjs +120 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -32,6 +32,7 @@ __export(index_exports, {
32
32
  Button: () => Button,
33
33
  Card: () => Card,
34
34
  ECommerceCard: () => ECommerceCard,
35
+ InputForm: () => InputForm,
35
36
  Profilecard: () => Profilecard
36
37
  });
37
38
  module.exports = __toCommonJS(index_exports);
@@ -312,10 +313,130 @@ var ECommerceCard = ({
312
313
  ))
313
314
  );
314
315
  };
316
+
317
+ // src/components/InputForm/InputForm.jsx
318
+ var import_react5 = __toESM(require("react"));
319
+ var InputForm = ({
320
+ title = "Contact Us",
321
+ description = "Fill out the form below and we'll get back to you shortly.",
322
+ fields = [
323
+ { label: "Name", type: "text", placeholder: "John Doe" },
324
+ { label: "Email", type: "email", placeholder: "john@example.com" },
325
+ { label: "Message", type: "textarea", placeholder: "Your message here..." }
326
+ ],
327
+ submitText = "Submit",
328
+ accent = "#6366f1",
329
+ bg = "#0f172a",
330
+ onSubmit = () => {
331
+ }
332
+ }) => {
333
+ const [formData, setFormData] = (0, import_react5.useState)({});
334
+ const alpha = (hex, op) => {
335
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
336
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
337
+ };
338
+ const handleChange = (e, field) => {
339
+ setFormData((prev) => ({
340
+ ...prev,
341
+ [field]: e.target.value
342
+ }));
343
+ };
344
+ const handleSubmit = (e) => {
345
+ e.preventDefault();
346
+ onSubmit(formData);
347
+ };
348
+ return /* @__PURE__ */ import_react5.default.createElement("div", { style: {
349
+ background: bg,
350
+ borderRadius: "20px",
351
+ padding: "28px",
352
+ width: "400px",
353
+ border: "1px solid rgba(255,255,255,0.08)",
354
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
355
+ fontFamily: "system-ui,sans-serif"
356
+ } }, /* @__PURE__ */ import_react5.default.createElement("h2", { style: {
357
+ fontSize: "22px",
358
+ fontWeight: "700",
359
+ color: "#fff",
360
+ margin: "0 0 8px",
361
+ textAlign: "center"
362
+ } }, title), /* @__PURE__ */ import_react5.default.createElement("p", { style: {
363
+ fontSize: "14px",
364
+ color: "rgba(255,255,255,0.5)",
365
+ margin: "0 0 24px",
366
+ textAlign: "center",
367
+ lineHeight: 1.5
368
+ } }, description), /* @__PURE__ */ import_react5.default.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "18px" } }, fields.map((field, i) => /* @__PURE__ */ import_react5.default.createElement("div", { key: i }, /* @__PURE__ */ import_react5.default.createElement("label", { style: {
369
+ display: "block",
370
+ fontSize: "13px",
371
+ fontWeight: "600",
372
+ color: "rgba(255,255,255,0.7)",
373
+ marginBottom: "6px"
374
+ } }, field.label), field.type === "textarea" ? /* @__PURE__ */ import_react5.default.createElement(
375
+ "textarea",
376
+ {
377
+ onChange: (e) => handleChange(e, field.label),
378
+ placeholder: field.placeholder,
379
+ style: {
380
+ width: "100%",
381
+ minHeight: "100px",
382
+ padding: "12px",
383
+ borderRadius: "10px",
384
+ background: "rgba(255,255,255,0.05)",
385
+ border: "1px solid rgba(255,255,255,0.1)",
386
+ color: "#fff",
387
+ fontFamily: "inherit",
388
+ fontSize: "14px",
389
+ resize: "vertical",
390
+ outline: "none",
391
+ transition: "border-color 0.2s"
392
+ }
393
+ }
394
+ ) : /* @__PURE__ */ import_react5.default.createElement(
395
+ "input",
396
+ {
397
+ type: field.type,
398
+ onChange: (e) => handleChange(e, field.label),
399
+ placeholder: field.placeholder,
400
+ style: {
401
+ width: "100%",
402
+ padding: "12px",
403
+ borderRadius: "10px",
404
+ background: "rgba(255,255,255,0.05)",
405
+ border: "1px solid rgba(255,255,255,0.1)",
406
+ color: "#fff",
407
+ fontFamily: "inherit",
408
+ fontSize: "14px",
409
+ outline: "none",
410
+ transition: "border-color 0.2s"
411
+ }
412
+ }
413
+ ))), /* @__PURE__ */ import_react5.default.createElement(
414
+ "button",
415
+ {
416
+ type: "submit",
417
+ style: {
418
+ width: "100%",
419
+ padding: "14px",
420
+ borderRadius: "10px",
421
+ border: "none",
422
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
423
+ color: "#fff",
424
+ fontSize: "14px",
425
+ fontWeight: "700",
426
+ cursor: "pointer",
427
+ fontFamily: "inherit",
428
+ marginTop: "10px",
429
+ transition: "transform 0.2s, box-shadow 0.2s"
430
+ }
431
+ },
432
+ submitText
433
+ ))));
434
+ };
315
435
  // Annotate the CommonJS export names for ESM import in node:
316
436
  0 && (module.exports = {
317
437
  Button,
318
438
  Card,
319
439
  ECommerceCard,
440
+ InputForm,
320
441
  Profilecard
321
442
  });
package/dist/index.mjs CHANGED
@@ -274,9 +274,129 @@ var ECommerceCard = ({
274
274
  ))
275
275
  );
276
276
  };
277
+
278
+ // src/components/InputForm/InputForm.jsx
279
+ import React5, { useState as useState5 } from "react";
280
+ var InputForm = ({
281
+ title = "Contact Us",
282
+ description = "Fill out the form below and we'll get back to you shortly.",
283
+ fields = [
284
+ { label: "Name", type: "text", placeholder: "John Doe" },
285
+ { label: "Email", type: "email", placeholder: "john@example.com" },
286
+ { label: "Message", type: "textarea", placeholder: "Your message here..." }
287
+ ],
288
+ submitText = "Submit",
289
+ accent = "#6366f1",
290
+ bg = "#0f172a",
291
+ onSubmit = () => {
292
+ }
293
+ }) => {
294
+ const [formData, setFormData] = useState5({});
295
+ const alpha = (hex, op) => {
296
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
297
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
298
+ };
299
+ const handleChange = (e, field) => {
300
+ setFormData((prev) => ({
301
+ ...prev,
302
+ [field]: e.target.value
303
+ }));
304
+ };
305
+ const handleSubmit = (e) => {
306
+ e.preventDefault();
307
+ onSubmit(formData);
308
+ };
309
+ return /* @__PURE__ */ React5.createElement("div", { style: {
310
+ background: bg,
311
+ borderRadius: "20px",
312
+ padding: "28px",
313
+ width: "400px",
314
+ border: "1px solid rgba(255,255,255,0.08)",
315
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
316
+ fontFamily: "system-ui,sans-serif"
317
+ } }, /* @__PURE__ */ React5.createElement("h2", { style: {
318
+ fontSize: "22px",
319
+ fontWeight: "700",
320
+ color: "#fff",
321
+ margin: "0 0 8px",
322
+ textAlign: "center"
323
+ } }, title), /* @__PURE__ */ React5.createElement("p", { style: {
324
+ fontSize: "14px",
325
+ color: "rgba(255,255,255,0.5)",
326
+ margin: "0 0 24px",
327
+ textAlign: "center",
328
+ lineHeight: 1.5
329
+ } }, description), /* @__PURE__ */ React5.createElement("form", { onSubmit: handleSubmit }, /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "18px" } }, fields.map((field, i) => /* @__PURE__ */ React5.createElement("div", { key: i }, /* @__PURE__ */ React5.createElement("label", { style: {
330
+ display: "block",
331
+ fontSize: "13px",
332
+ fontWeight: "600",
333
+ color: "rgba(255,255,255,0.7)",
334
+ marginBottom: "6px"
335
+ } }, field.label), field.type === "textarea" ? /* @__PURE__ */ React5.createElement(
336
+ "textarea",
337
+ {
338
+ onChange: (e) => handleChange(e, field.label),
339
+ placeholder: field.placeholder,
340
+ style: {
341
+ width: "100%",
342
+ minHeight: "100px",
343
+ padding: "12px",
344
+ borderRadius: "10px",
345
+ background: "rgba(255,255,255,0.05)",
346
+ border: "1px solid rgba(255,255,255,0.1)",
347
+ color: "#fff",
348
+ fontFamily: "inherit",
349
+ fontSize: "14px",
350
+ resize: "vertical",
351
+ outline: "none",
352
+ transition: "border-color 0.2s"
353
+ }
354
+ }
355
+ ) : /* @__PURE__ */ React5.createElement(
356
+ "input",
357
+ {
358
+ type: field.type,
359
+ onChange: (e) => handleChange(e, field.label),
360
+ placeholder: field.placeholder,
361
+ style: {
362
+ width: "100%",
363
+ padding: "12px",
364
+ borderRadius: "10px",
365
+ background: "rgba(255,255,255,0.05)",
366
+ border: "1px solid rgba(255,255,255,0.1)",
367
+ color: "#fff",
368
+ fontFamily: "inherit",
369
+ fontSize: "14px",
370
+ outline: "none",
371
+ transition: "border-color 0.2s"
372
+ }
373
+ }
374
+ ))), /* @__PURE__ */ React5.createElement(
375
+ "button",
376
+ {
377
+ type: "submit",
378
+ style: {
379
+ width: "100%",
380
+ padding: "14px",
381
+ borderRadius: "10px",
382
+ border: "none",
383
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
384
+ color: "#fff",
385
+ fontSize: "14px",
386
+ fontWeight: "700",
387
+ cursor: "pointer",
388
+ fontFamily: "inherit",
389
+ marginTop: "10px",
390
+ transition: "transform 0.2s, box-shadow 0.2s"
391
+ }
392
+ },
393
+ submitText
394
+ ))));
395
+ };
277
396
  export {
278
397
  Button,
279
398
  Card,
280
399
  ECommerceCard,
400
+ InputForm,
281
401
  Profilecard
282
402
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-ui-lib",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Carbon UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Harsh",