virtuo-ui-library 1.0.11 → 1.0.12

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 +90 -0
  2. package/dist/index.mjs +89 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -35,6 +35,7 @@ __export(index_exports, {
35
35
  LoginForm: () => LoginForm,
36
36
  NavBar: () => NavBar,
37
37
  ProfileCard: () => ProfileCard,
38
+ SearchBar: () => SearchBar,
38
39
  SideBar: () => SideBar
39
40
  });
40
41
  module.exports = __toCommonJS(index_exports);
@@ -645,6 +646,94 @@ var LoginForm = ({
645
646
  signupText
646
647
  ))));
647
648
  };
649
+
650
+ // src/components/SearchBar/SearchBar.jsx
651
+ var import_react8 = __toESM(require("react"));
652
+ var SearchBar = ({
653
+ placeholder = "Search...",
654
+ accent = "#6366f1",
655
+ bg = "#0f172a",
656
+ width = "400px",
657
+ onSearch = (query) => {
658
+ },
659
+ debounceTime = 300
660
+ }) => {
661
+ const [query, setQuery] = (0, import_react8.useState)("");
662
+ const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
663
+ const alpha = (hex, op) => {
664
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
665
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
666
+ };
667
+ const handleChange = (e) => {
668
+ setQuery(e.target.value);
669
+ };
670
+ const handleKeyDown = (e) => {
671
+ if (e.key === "Enter") {
672
+ onSearch(query);
673
+ }
674
+ };
675
+ return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
676
+ position: "relative",
677
+ width,
678
+ maxWidth: "100%"
679
+ } }, /* @__PURE__ */ import_react8.default.createElement(
680
+ "input",
681
+ {
682
+ type: "text",
683
+ value: query,
684
+ onChange: handleChange,
685
+ onKeyDown: handleKeyDown,
686
+ onFocus: () => setIsFocused(true),
687
+ onBlur: () => setIsFocused(false),
688
+ placeholder,
689
+ style: {
690
+ width: "100%",
691
+ padding: "12px 16px 12px 42px",
692
+ borderRadius: "12px",
693
+ border: "1px solid " + (isFocused ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"),
694
+ background: "rgba(255,255,255,0.03)",
695
+ color: "#fff",
696
+ fontSize: "14px",
697
+ fontFamily: "system-ui, sans-serif",
698
+ outline: "none",
699
+ transition: "border 0.2s, box-shadow 0.2s",
700
+ boxShadow: isFocused ? "0 0 0 3px " + alpha(accent, 0.15) : "none"
701
+ }
702
+ }
703
+ ), /* @__PURE__ */ import_react8.default.createElement("div", { style: {
704
+ position: "absolute",
705
+ left: "16px",
706
+ top: "50%",
707
+ transform: "translateY(-50%)",
708
+ color: isFocused ? accent : "rgba(255,255,255,0.4)",
709
+ transition: "color 0.2s"
710
+ } }, /* @__PURE__ */ import_react8.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react8.default.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ import_react8.default.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }))), query && /* @__PURE__ */ import_react8.default.createElement(
711
+ "button",
712
+ {
713
+ onClick: () => {
714
+ setQuery("");
715
+ onSearch("");
716
+ },
717
+ style: {
718
+ position: "absolute",
719
+ right: "12px",
720
+ top: "50%",
721
+ transform: "translateY(-50%)",
722
+ background: "transparent",
723
+ border: "none",
724
+ color: "rgba(255,255,255,0.3)",
725
+ cursor: "pointer",
726
+ padding: "4px",
727
+ borderRadius: "50%",
728
+ display: "flex",
729
+ alignItems: "center",
730
+ justifyContent: "center",
731
+ transition: "color 0.2s"
732
+ }
733
+ },
734
+ /* @__PURE__ */ import_react8.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react8.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react8.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
735
+ ));
736
+ };
648
737
  // Annotate the CommonJS export names for ESM import in node:
649
738
  0 && (module.exports = {
650
739
  Button,
@@ -653,5 +742,6 @@ var LoginForm = ({
653
742
  LoginForm,
654
743
  NavBar,
655
744
  ProfileCard,
745
+ SearchBar,
656
746
  SideBar
657
747
  });
package/dist/index.mjs CHANGED
@@ -604,6 +604,94 @@ var LoginForm = ({
604
604
  signupText
605
605
  ))));
606
606
  };
607
+
608
+ // src/components/SearchBar/SearchBar.jsx
609
+ import React8, { useState as useState7 } from "react";
610
+ var SearchBar = ({
611
+ placeholder = "Search...",
612
+ accent = "#6366f1",
613
+ bg = "#0f172a",
614
+ width = "400px",
615
+ onSearch = (query) => {
616
+ },
617
+ debounceTime = 300
618
+ }) => {
619
+ const [query, setQuery] = useState7("");
620
+ const [isFocused, setIsFocused] = useState7(false);
621
+ const alpha = (hex, op) => {
622
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
623
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
624
+ };
625
+ const handleChange = (e) => {
626
+ setQuery(e.target.value);
627
+ };
628
+ const handleKeyDown = (e) => {
629
+ if (e.key === "Enter") {
630
+ onSearch(query);
631
+ }
632
+ };
633
+ return /* @__PURE__ */ React8.createElement("div", { style: {
634
+ position: "relative",
635
+ width,
636
+ maxWidth: "100%"
637
+ } }, /* @__PURE__ */ React8.createElement(
638
+ "input",
639
+ {
640
+ type: "text",
641
+ value: query,
642
+ onChange: handleChange,
643
+ onKeyDown: handleKeyDown,
644
+ onFocus: () => setIsFocused(true),
645
+ onBlur: () => setIsFocused(false),
646
+ placeholder,
647
+ style: {
648
+ width: "100%",
649
+ padding: "12px 16px 12px 42px",
650
+ borderRadius: "12px",
651
+ border: "1px solid " + (isFocused ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"),
652
+ background: "rgba(255,255,255,0.03)",
653
+ color: "#fff",
654
+ fontSize: "14px",
655
+ fontFamily: "system-ui, sans-serif",
656
+ outline: "none",
657
+ transition: "border 0.2s, box-shadow 0.2s",
658
+ boxShadow: isFocused ? "0 0 0 3px " + alpha(accent, 0.15) : "none"
659
+ }
660
+ }
661
+ ), /* @__PURE__ */ React8.createElement("div", { style: {
662
+ position: "absolute",
663
+ left: "16px",
664
+ top: "50%",
665
+ transform: "translateY(-50%)",
666
+ color: isFocused ? accent : "rgba(255,255,255,0.4)",
667
+ transition: "color 0.2s"
668
+ } }, /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React8.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React8.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }))), query && /* @__PURE__ */ React8.createElement(
669
+ "button",
670
+ {
671
+ onClick: () => {
672
+ setQuery("");
673
+ onSearch("");
674
+ },
675
+ style: {
676
+ position: "absolute",
677
+ right: "12px",
678
+ top: "50%",
679
+ transform: "translateY(-50%)",
680
+ background: "transparent",
681
+ border: "none",
682
+ color: "rgba(255,255,255,0.3)",
683
+ cursor: "pointer",
684
+ padding: "4px",
685
+ borderRadius: "50%",
686
+ display: "flex",
687
+ alignItems: "center",
688
+ justifyContent: "center",
689
+ transition: "color 0.2s"
690
+ }
691
+ },
692
+ /* @__PURE__ */ React8.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React8.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React8.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))
693
+ ));
694
+ };
607
695
  export {
608
696
  Button,
609
697
  Card,
@@ -611,5 +699,6 @@ export {
611
699
  LoginForm,
612
700
  NavBar,
613
701
  ProfileCard,
702
+ SearchBar,
614
703
  SideBar
615
704
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.11",
3
+ "version": "1.0.12",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",