@willphan1712000/frontend 1.1.0 → 1.2.0

package/README.md

@@ -1,8 +1,15 @@
 <img style="width: 15%" src="./will.png">
 
-## Will-js is a Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
+## Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
 
 ## UI Components
+- DropdownSelect, type Options
+- RangeSlider
+- OptionSlider, type SliderOptions
+- ColorPickerSlider
+- MultiSelect
+- Button
+- Avatar
 
 ## Technology
 

package/dist/index.d.mts

@@ -9,17 +9,15 @@ interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
-    width?: string;
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
  * @param value - a chosen value
  * @param onChange - a function to set a value
- * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;

package/dist/index.d.ts

@@ -9,17 +9,15 @@ interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
-    width?: string;
 }
 /**
  * Dropdown Select component, allowing users to select options from dropdown menu
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
  * @param value - a chosen value
  * @param onChange - a function to set a value
- * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange }: Props$b) => react_jsx_runtime.JSX.Element;
 
 interface Props$a {
     value: string;

package/dist/index.js

@@ -422,6 +422,10 @@ function useMyContext() {
 var import_react2 = require("react");
 // src/components/DropdownSelect/styles.ts
 var styles = {
+    container: {
+        width: "100%",
+        position: "relative"
+    },
     select_box: {
         borderRadius: "10px",
         border: "solid 1px #dadada",
@@ -498,7 +502,7 @@ var Search = function(param) {
             name: "search",
             onChange: function(e) {
                 return onSearch(options.filter(function(ele) {
-                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                    return ele.label.toLowerCase().includes(e.target.value.toLowerCase());
                 }));
             }
         })
@@ -572,7 +576,7 @@ var Dropdown_default = Dropdown;
 var import_io = require("react-icons/io");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var DropdownSelect = function(param) {
-    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var options = param.options, value = param.value, onChange = param.onChange;
     var _ref = _sliced_to_array((0, import_react3.useState)(false), 2), open = _ref[0], setOpen = _ref[1];
     var _ref1 = _sliced_to_array((0, import_react3.useState)(false), 2), isHoverClose = _ref1[0], setHoverClose = _ref1[1];
     var selectRef = (0, import_react3.useRef)(null);
@@ -596,10 +600,7 @@ var DropdownSelect = function(param) {
             setOpen: setOpen
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {
-            style: {
-                width: "".concat(width, "px"),
-                position: "relative"
-            },
+            style: styles_default.container,
             ref: selectRef,
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", {

package/dist/index.mjs

@@ -306,6 +306,10 @@ function useMyContext() {
 import { useEffect, useRef, useState } from "react";
 // src/components/DropdownSelect/styles.ts
 var styles = {
+    container: {
+        width: "100%",
+        position: "relative"
+    },
     select_box: {
         borderRadius: "10px",
         border: "solid 1px #dadada",
@@ -382,7 +386,7 @@ var Search = function(param) {
             name: "search",
             onChange: function(e) {
                 return onSearch(options.filter(function(ele) {
-                    return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
+                    return ele.label.toLowerCase().includes(e.target.value.toLowerCase());
                 }));
             }
         })
@@ -456,7 +460,7 @@ var Dropdown_default = Dropdown;
 import { IoMdClose } from "react-icons/io";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var DropdownSelect = function(param) {
-    var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
+    var options = param.options, value = param.value, onChange = param.onChange;
     var _useState2 = _sliced_to_array(useState2(false), 2), open = _useState2[0], setOpen = _useState2[1];
     var _useState21 = _sliced_to_array(useState2(false), 2), isHoverClose = _useState21[0], setHoverClose = _useState21[1];
     var selectRef = useRef2(null);
@@ -480,10 +484,7 @@ var DropdownSelect = function(param) {
             setOpen: setOpen
         },
         children: /* @__PURE__ */ jsxs2("div", {
-            style: {
-                width: "".concat(width, "px"),
-                position: "relative"
-            },
+            style: styles_default.container,
             ref: selectRef,
             children: [
                 /* @__PURE__ */ jsxs2("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@willphan1712000/frontend",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Frontend Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",