@willphan1712000/frontend 1.0.0 → 1.0.2

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 (8) hide show
  1. package/README.md +4 -25
  2. package/dist/index.d.mts +33 -13
  3. package/dist/index.d.ts +33 -13
  4. package/dist/index.js +632 -78
  5. package/dist/index.mjs +629 -79
  6. package/index.ts +4 -1
  7. package/package.json +2 -2
  8. package/dist/index.css +0 -233
package/dist/index.mjs CHANGED
@@ -7,6 +7,25 @@ function _array_like_to_array(arr, len) {
7
7
  function _array_with_holes(arr) {
8
8
  if (Array.isArray(arr)) return arr;
9
9
  }
10
+ function _array_without_holes(arr) {
11
+ if (Array.isArray(arr)) return _array_like_to_array(arr);
12
+ }
13
+ function _define_property(obj, key, value) {
14
+ if (key in obj) {
15
+ Object.defineProperty(obj, key, {
16
+ value: value,
17
+ enumerable: true,
18
+ configurable: true,
19
+ writable: true
20
+ });
21
+ } else {
22
+ obj[key] = value;
23
+ }
24
+ return obj;
25
+ }
26
+ function _iterable_to_array(iter) {
27
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
28
+ }
10
29
  function _iterable_to_array_limit(arr, i) {
11
30
  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
12
31
  if (_i == null) return;
@@ -34,9 +53,54 @@ function _iterable_to_array_limit(arr, i) {
34
53
  function _non_iterable_rest() {
35
54
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
36
55
  }
56
+ function _non_iterable_spread() {
57
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
58
+ }
59
+ function _object_spread(target) {
60
+ for(var i = 1; i < arguments.length; i++){
61
+ var source = arguments[i] != null ? arguments[i] : {};
62
+ var ownKeys = Object.keys(source);
63
+ if (typeof Object.getOwnPropertySymbols === "function") {
64
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
65
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
66
+ }));
67
+ }
68
+ ownKeys.forEach(function(key) {
69
+ _define_property(target, key, source[key]);
70
+ });
71
+ }
72
+ return target;
73
+ }
74
+ function ownKeys(object, enumerableOnly) {
75
+ var keys = Object.keys(object);
76
+ if (Object.getOwnPropertySymbols) {
77
+ var symbols = Object.getOwnPropertySymbols(object);
78
+ if (enumerableOnly) {
79
+ symbols = symbols.filter(function(sym) {
80
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
81
+ });
82
+ }
83
+ keys.push.apply(keys, symbols);
84
+ }
85
+ return keys;
86
+ }
87
+ function _object_spread_props(target, source) {
88
+ source = source != null ? source : {};
89
+ if (Object.getOwnPropertyDescriptors) {
90
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
91
+ } else {
92
+ ownKeys(Object(source)).forEach(function(key) {
93
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
94
+ });
95
+ }
96
+ return target;
97
+ }
37
98
  function _sliced_to_array(arr, i) {
38
99
  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
39
100
  }
101
+ function _to_consumable_array(arr) {
102
+ return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
103
+ }
40
104
  function _unsupported_iterable_to_array(o, minLen) {
41
105
  if (!o) return;
42
106
  if (typeof o === "string") return _array_like_to_array(o, minLen);
@@ -56,25 +120,80 @@ function useMyContext() {
56
120
  }
57
121
  // src/components/DropdownSelect/Dropdown.tsx
58
122
  import { useEffect, useRef, useState } from "react";
59
- // scss-module:./dropdownSelect.module.css#scss-module
60
- var dropdownSelect_module_default = {
61
- "select_box": "dropdownSelect-module__select_box___Q8S31",
62
- "value": "dropdownSelect-module__value___izaXQ",
63
- "close": "dropdownSelect-module__close___axGDo",
64
- "element": "dropdownSelect-module__element___Q56x3",
65
- "dropdown": "dropdownSelect-module__dropdown___cjfHn",
66
- "search_border": "dropdownSelect-module__search_border___xQU5q",
67
- "search": "dropdownSelect-module__search___kGmqs"
123
+ // src/components/DropdownSelect/styles.ts
124
+ var styles = {
125
+ select_box: {
126
+ borderRadius: "10px",
127
+ border: "solid 1px #dadada",
128
+ padding: "5px 10px",
129
+ display: "flex",
130
+ justifyContent: "space-between",
131
+ alignItems: "center",
132
+ cursor: "pointer"
133
+ },
134
+ value: {
135
+ marginRight: "auto"
136
+ },
137
+ close: {
138
+ borderRadius: "50%",
139
+ width: "20px",
140
+ height: "20px",
141
+ display: "flex",
142
+ justifyContent: "center",
143
+ alignItems: "center"
144
+ },
145
+ element: {
146
+ display: "flex",
147
+ padding: "5px",
148
+ borderRadius: "10px",
149
+ justifyContent: "flex-start",
150
+ alignItems: "center",
151
+ cursor: "pointer"
152
+ },
153
+ dropdown: {
154
+ position: "absolute",
155
+ boxSizing: "border-box",
156
+ width: "100%",
157
+ left: "0",
158
+ display: "flex",
159
+ flexDirection: "column",
160
+ border: "solid 1px #dadada",
161
+ borderRadius: "10px",
162
+ padding: "5px",
163
+ maxHeight: "300px",
164
+ overflowY: "auto",
165
+ backgroundColor: "white"
166
+ },
167
+ search_border: {
168
+ position: "sticky",
169
+ top: 0,
170
+ left: 0,
171
+ boxSizing: "border-box",
172
+ width: "100%",
173
+ backgroundColor: "white",
174
+ marginBottom: "5px"
175
+ },
176
+ search: {
177
+ width: "100%",
178
+ borderRadius: "5px",
179
+ padding: "5px",
180
+ border: "solid 1px #dadada",
181
+ display: "flex",
182
+ justifyContent: "flex-start",
183
+ alignItems: "center",
184
+ boxSizing: "border-box"
185
+ }
68
186
  };
187
+ var styles_default = styles;
69
188
  // src/components/DropdownSelect/Search.tsx
70
189
  import { jsx } from "react/jsx-runtime";
71
190
  var Search = function(param) {
72
191
  var options = param.options, onSearch = param.onSearch;
73
192
  return /* @__PURE__ */ jsx("div", {
74
- className: dropdownSelect_module_default.search_border,
193
+ style: styles_default.search_border,
75
194
  children: /* @__PURE__ */ jsx("input", {
76
195
  placeholder: "Search",
77
- className: dropdownSelect_module_default.search,
196
+ style: styles_default.search,
78
197
  id: "search",
79
198
  name: "search",
80
199
  onChange: function(e) {
@@ -91,7 +210,8 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
91
210
  var Dropdown = function() {
92
211
  var _useMyContext = useMyContext(), options = _useMyContext.options, onChange = _useMyContext.onChange, setOpen = _useMyContext.setOpen;
93
212
  var _useState = _sliced_to_array(useState(true), 2), isVisible = _useState[0], setVisible = _useState[1];
94
- var _useState1 = _sliced_to_array(useState(options), 2), optionsCopy = _useState1[0], setOption = _useState1[1];
213
+ var _useState1 = _sliced_to_array(useState(-1), 2), keyOnHover = _useState1[0], setKeyOnHover = _useState1[1];
214
+ var _useState2 = _sliced_to_array(useState(options), 2), optionsCopy = _useState2[0], setOption = _useState2[1];
95
215
  var dropdownRef = useRef(null);
96
216
  var handleResize = function() {
97
217
  var dropdown = dropdownRef.current;
@@ -113,13 +233,12 @@ var Dropdown = function() {
113
233
  };
114
234
  }, []);
115
235
  return /* @__PURE__ */ jsxs("div", {
116
- className: dropdownSelect_module_default.dropdown,
117
236
  ref: dropdownRef,
118
- style: isVisible ? {
237
+ style: isVisible ? _object_spread_props(_object_spread({}, styles_default.dropdown), {
119
238
  top: "calc(100% + 5px)"
120
- } : {
239
+ }) : _object_spread_props(_object_spread({}, styles_default.dropdown), {
121
240
  bottom: "calc(100% + 5px)"
122
- },
241
+ }),
123
242
  children: [
124
243
  /* @__PURE__ */ jsx2(Search_default, {
125
244
  options: options,
@@ -127,13 +246,21 @@ var Dropdown = function() {
127
246
  }),
128
247
  optionsCopy.map(function(option, key) {
129
248
  return /* @__PURE__ */ jsx2("div", {
130
- className: dropdownSelect_module_default.element,
249
+ style: _object_spread_props(_object_spread({}, styles_default.element), {
250
+ backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
251
+ }),
131
252
  onClick: function() {
132
253
  onChange(option.value);
133
254
  setOpen(function(prev) {
134
255
  return !prev;
135
256
  });
136
257
  },
258
+ onMouseEnter: function() {
259
+ return setKeyOnHover(key);
260
+ },
261
+ onMouseLeave: function() {
262
+ return setKeyOnHover(-1);
263
+ },
137
264
  children: option.label
138
265
  }, key);
139
266
  })
@@ -147,6 +274,7 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
147
274
  var DropdownSelect = function(param) {
148
275
  var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
149
276
  var _useState2 = _sliced_to_array(useState2(false), 2), open = _useState2[0], setOpen = _useState2[1];
277
+ var _useState21 = _sliced_to_array(useState2(false), 2), isHoverClose = _useState21[0], setHoverClose = _useState21[1];
150
278
  var selectRef = useRef2(null);
151
279
  var clickHandler = function(e) {
152
280
  var select = selectRef.current;
@@ -175,7 +303,7 @@ var DropdownSelect = function(param) {
175
303
  ref: selectRef,
176
304
  children: [
177
305
  /* @__PURE__ */ jsxs2("div", {
178
- className: dropdownSelect_module_default.select_box,
306
+ style: styles_default.select_box,
179
307
  onClick: function() {
180
308
  return setOpen(function(prev) {
181
309
  return !prev;
@@ -183,11 +311,13 @@ var DropdownSelect = function(param) {
183
311
  },
184
312
  children: [
185
313
  /* @__PURE__ */ jsx3("div", {
186
- className: dropdownSelect_module_default.value,
314
+ style: styles_default.value,
187
315
  children: value
188
316
  }),
189
317
  /* @__PURE__ */ jsx3("div", {
190
- className: dropdownSelect_module_default.close,
318
+ style: _object_spread_props(_object_spread({}, styles_default.close), {
319
+ backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
320
+ }),
191
321
  title: "clear",
192
322
  onClick: function() {
193
323
  onChange("");
@@ -195,6 +325,12 @@ var DropdownSelect = function(param) {
195
325
  return !prev;
196
326
  });
197
327
  },
328
+ onMouseEnter: function() {
329
+ return setHoverClose(true);
330
+ },
331
+ onMouseLeave: function() {
332
+ return setHoverClose(false);
333
+ },
198
334
  children: /* @__PURE__ */ jsx3(IoMdClose, {})
199
335
  })
200
336
  ]
@@ -207,15 +343,6 @@ var DropdownSelect = function(param) {
207
343
  var DropdownSelect_default = DropdownSelect;
208
344
  // src/components/RangeSlider/RangeSlider.tsx
209
345
  import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
210
- // scss-module:./rangeSlider.module.css#scss-module
211
- var rangeSlider_module_default = {
212
- "slider_border": "rangeSlider-module__slider_border___CoeFx",
213
- "thumb": "rangeSlider-module__thumb___OnFSM",
214
- "thumb_shadow": "rangeSlider-module__thumb_shadow___L16TY",
215
- "fill": "rangeSlider-module__fill___urGCN",
216
- "rest": "rangeSlider-module__rest___pO2pi",
217
- "value": "rangeSlider-module__value___Evg0D"
218
- };
219
346
  // src/components/RangeSlider/functions.ts
220
347
  function encode(value, min, max) {
221
348
  return (parseInt(value) - parseInt(min)) * 100 / (parseInt(max) - parseInt(min));
@@ -223,6 +350,70 @@ function encode(value, min, max) {
223
350
  function decode(percent, min, max) {
224
351
  return Math.round(parseInt(min) + percent * (parseInt(max) - parseInt(min)));
225
352
  }
353
+ // src/components/RangeSlider/styles.ts
354
+ var styles2 = {
355
+ slider_border: {
356
+ position: "relative",
357
+ display: "flex",
358
+ gap: "5px",
359
+ flexDirection: "column",
360
+ height: "10px"
361
+ },
362
+ thumb: {
363
+ width: "17px",
364
+ height: "17px",
365
+ cursor: "pointer",
366
+ position: "absolute",
367
+ borderRadius: "50%",
368
+ top: "50%",
369
+ transform: "translate(-50%, -50%)",
370
+ zIndex: 1
371
+ },
372
+ thumb_shadow: {
373
+ content: '""',
374
+ position: "absolute",
375
+ top: "-9px",
376
+ left: "-9px",
377
+ width: "35px",
378
+ height: "35px",
379
+ opacity: 0.2,
380
+ zIndex: -1,
381
+ borderRadius: "50%",
382
+ scale: "0",
383
+ transition: "scale .1s linear"
384
+ },
385
+ fill: {
386
+ position: "absolute",
387
+ left: 0,
388
+ top: 0,
389
+ height: "100%",
390
+ borderRadius: "5px",
391
+ cursor: "pointer"
392
+ },
393
+ rest: {
394
+ position: "absolute",
395
+ top: "50%",
396
+ transform: "translateY(-50%)",
397
+ opacity: 0.3,
398
+ width: "100%",
399
+ height: "70%",
400
+ borderRadius: "5px",
401
+ cursor: "pointer"
402
+ },
403
+ value: {
404
+ position: "absolute",
405
+ bottom: "30px",
406
+ left: "50%",
407
+ transform: "translateX(-50%)",
408
+ transformOrigin: "bottom left",
409
+ backgroundColor: "#f0f0f7",
410
+ borderRadius: "5px",
411
+ padding: "5px",
412
+ scale: "0",
413
+ transition: "scale .1s linear"
414
+ }
415
+ };
416
+ var styles_default2 = styles2;
226
417
  // src/components/RangeSlider/RangeSlider.tsx
227
418
  import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
228
419
  var RangeSlider = function(param) {
@@ -279,10 +470,9 @@ var RangeSlider = function(param) {
279
470
  isMouseDown
280
471
  ]);
281
472
  return /* @__PURE__ */ jsxs3("div", {
282
- className: rangeSlider_module_default.slider_border,
283
- style: {
473
+ style: _object_spread_props(_object_spread({}, styles_default2.slider_border), {
284
474
  width: "".concat(width, "px")
285
- },
475
+ }),
286
476
  onMouseDown: function(e) {
287
477
  handleDrag(true, e);
288
478
  setMouseDown(true);
@@ -294,18 +484,16 @@ var RangeSlider = function(param) {
294
484
  ref: sliderBorderRef,
295
485
  children: [
296
486
  /* @__PURE__ */ jsx4("span", {
297
- className: rangeSlider_module_default.fill,
298
- style: {
487
+ style: _object_spread_props(_object_spread({}, styles_default2.fill), {
299
488
  background: color,
300
489
  width: "".concat(percentage, "%")
301
- }
490
+ })
302
491
  }),
303
492
  /* @__PURE__ */ jsxs3("span", {
304
- className: rangeSlider_module_default.thumb,
305
- style: {
493
+ style: _object_spread_props(_object_spread({}, styles_default2.thumb), {
306
494
  background: color,
307
495
  left: "".concat(percentage, "%")
308
- },
496
+ }),
309
497
  onMouseMove: function() {
310
498
  return setHover(true);
311
499
  },
@@ -314,63 +502,107 @@ var RangeSlider = function(param) {
314
502
  },
315
503
  children: [
316
504
  /* @__PURE__ */ jsx4("span", {
317
- className: rangeSlider_module_default.value,
318
- style: {
505
+ style: _object_spread_props(_object_spread({}, styles_default2.value), {
319
506
  scale: isMouseDown || isHover ? "1" : "0"
320
- },
507
+ }),
321
508
  children: value
322
509
  }),
323
510
  /* @__PURE__ */ jsx4("span", {
324
- className: rangeSlider_module_default.thumb_shadow,
325
- style: {
511
+ style: _object_spread_props(_object_spread({}, styles_default2.thumb_shadow), {
326
512
  background: color,
327
513
  scale: isMouseDown || isHover ? "1" : "0"
328
- }
514
+ })
329
515
  })
330
516
  ]
331
517
  }),
332
518
  /* @__PURE__ */ jsx4("span", {
333
- className: rangeSlider_module_default.rest,
334
- style: {
519
+ style: _object_spread_props(_object_spread({}, styles_default2.rest), {
335
520
  background: color
336
- }
521
+ })
337
522
  })
338
523
  ]
339
524
  });
340
525
  };
341
526
  var RangeSlider_default = RangeSlider;
342
- // scss-module:./optionSlider.module.css#scss-module
343
- var optionSlider_module_default = {
344
- "border": "optionSlider-module__border___DvXkD",
345
- "background": "optionSlider-module__background___P6MQP",
346
- "options": "optionSlider-module__options___OLBcd",
347
- "element": "optionSlider-module__element___obtjI"
527
+ // src/components/OptionSlider/styles.ts
528
+ var styles3 = {
529
+ border: {
530
+ borderRadius: "10px",
531
+ overflow: "auto",
532
+ boxShadow: "rgba(0, 0, 0, 0.16) 0px 1px 4px",
533
+ aspectRatio: "4",
534
+ display: "flex",
535
+ flexDirection: "row",
536
+ position: "relative",
537
+ scrollbarWidth: "none",
538
+ msOverflowStyle: "none",
539
+ boxSizing: "border-box",
540
+ margin: 0,
541
+ padding: 0
542
+ },
543
+ background: {
544
+ position: "relative",
545
+ width: "100%",
546
+ height: "100%",
547
+ opacity: "0.3",
548
+ boxSizing: "border-box",
549
+ margin: 0,
550
+ padding: 0
551
+ },
552
+ options: {
553
+ height: "100%",
554
+ padding: "5px",
555
+ gap: "5px",
556
+ position: "absolute",
557
+ top: "50%",
558
+ transform: "translateY(-50%)",
559
+ left: 0,
560
+ display: "flex",
561
+ flexDirection: "row",
562
+ justifyContent: "center",
563
+ alignItems: "center",
564
+ boxSizing: "border-box",
565
+ margin: 0
566
+ },
567
+ element: {
568
+ display: "flex",
569
+ justifyContent: "center",
570
+ alignItems: "center",
571
+ cursor: "pointer",
572
+ width: "auto",
573
+ height: "100%",
574
+ aspectRatio: "1 / 1",
575
+ borderRadius: "50%",
576
+ overflow: "hidden",
577
+ border: "solid 1px #000",
578
+ boxSizing: "border-box",
579
+ margin: 0,
580
+ padding: 0
581
+ }
348
582
  };
583
+ var styles_default3 = styles3;
349
584
  // src/components/OptionSlider/OptionSlider.tsx
350
585
  import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
351
586
  var OptionSlider = function(param) {
352
587
  var value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width, options = param.options, _param_color = param.color, color = _param_color === void 0 ? "#f0f0f7" : _param_color;
353
588
  return /* @__PURE__ */ jsxs4("div", {
354
- className: optionSlider_module_default.border,
355
- style: {
589
+ style: _object_spread_props(_object_spread({}, styles_default3.border), {
356
590
  width: "".concat(width, "px")
357
- },
591
+ }),
358
592
  children: [
359
593
  /* @__PURE__ */ jsx5("div", {
360
- className: optionSlider_module_default.background,
361
- style: {
594
+ style: _object_spread_props(_object_spread({}, styles_default3.background), {
362
595
  background: color
363
- }
596
+ })
364
597
  }),
365
598
  /* @__PURE__ */ jsx5("div", {
366
- className: optionSlider_module_default.options,
599
+ style: styles_default3.options,
367
600
  children: options.map(function(option, key) {
368
601
  return /* @__PURE__ */ jsx5("div", {
369
- style: {
602
+ style: _object_spread_props(_object_spread({}, styles_default3.element), {
370
603
  background: color,
371
604
  border: value === option.value ? "solid 2px #000" : "solid 1px #000"
372
- },
373
- className: optionSlider_module_default.element,
605
+ }),
374
606
  onClick: function() {
375
607
  return onChange(option.value);
376
608
  },
@@ -385,12 +617,6 @@ var OptionSlider = function(param) {
385
617
  var OptionSlider_default = OptionSlider;
386
618
  // src/components/ColorPickerSlider/ColorPickerSlider.tsx
387
619
  import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
388
- // scss-module:./colorPickerSlider.module.css#scss-module
389
- var colorPickerSlider_module_default = {
390
- "border": "colorPickerSlider-module__border___-6cw8",
391
- "thumb": "colorPickerSlider-module__thumb___p2fHW",
392
- "label": "colorPickerSlider-module__label___Aa0AV"
393
- };
394
620
  // src/components/ColorPickerSlider/functions.ts
395
621
  function encode2(color) {
396
622
  var h = hexToHsl(color).h;
@@ -494,6 +720,39 @@ function hslToHex(h, s, l) {
494
720
  };
495
721
  return "#".concat(toHex(r)).concat(toHex(g)).concat(toHex(b));
496
722
  }
723
+ // src/components/ColorPickerSlider/styles.ts
724
+ var styles4 = {
725
+ border: {
726
+ background: "linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))",
727
+ borderRadius: "10px",
728
+ aspectRatio: 20,
729
+ cursor: "pointer",
730
+ appearance: "none",
731
+ outline: "none",
732
+ position: "relative"
733
+ },
734
+ thumb: {
735
+ borderRadius: "50%",
736
+ aspectRatio: 1,
737
+ position: "absolute",
738
+ top: "50%",
739
+ transform: "translate(-50%, -50%)",
740
+ boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px",
741
+ border: "solid 2px #fff"
742
+ },
743
+ label: {
744
+ position: "absolute",
745
+ bottom: "200%",
746
+ transform: "translateX(-50%)",
747
+ borderRadius: "5px",
748
+ padding: "5px",
749
+ fontSize: "15px",
750
+ background: "#f0f0f7",
751
+ transition: "scale .1s linear",
752
+ transformOrigin: "bottom left"
753
+ }
754
+ };
755
+ var styles_default4 = styles4;
497
756
  // src/components/ColorPickerSlider/ColorPickerSlider.tsx
498
757
  import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
499
758
  var ColorPickerSlider = function(param) {
@@ -545,10 +804,9 @@ var ColorPickerSlider = function(param) {
545
804
  isMouseDown
546
805
  ]);
547
806
  return /* @__PURE__ */ jsxs5("div", {
548
- className: colorPickerSlider_module_default.border,
549
- style: {
807
+ style: _object_spread_props(_object_spread({}, styles_default4.border), {
550
808
  width: "".concat(width, "px")
551
- },
809
+ }),
552
810
  onMouseDown: function(e) {
553
811
  handleDrag(true, e);
554
812
  setMouseDown(true);
@@ -560,12 +818,11 @@ var ColorPickerSlider = function(param) {
560
818
  ref: sliderBorderRef,
561
819
  children: [
562
820
  /* @__PURE__ */ jsx6("div", {
563
- className: colorPickerSlider_module_default.thumb,
564
- style: {
821
+ style: _object_spread_props(_object_spread({}, styles_default4.thumb), {
565
822
  width: "".concat(parseInt(width) * 0.1, "px"),
566
823
  background: value,
567
824
  left: "".concat(percentage, "%")
568
- },
825
+ }),
569
826
  onMouseMove: function() {
570
827
  return setHover(true);
571
828
  },
@@ -574,15 +831,308 @@ var ColorPickerSlider = function(param) {
574
831
  }
575
832
  }),
576
833
  /* @__PURE__ */ jsx6("div", {
577
- className: colorPickerSlider_module_default.label,
578
- style: {
834
+ style: _object_spread_props(_object_spread({}, styles_default4.label), {
579
835
  left: "".concat(percentage, "%"),
580
836
  scale: isHover || isMouseDown ? "1" : "0"
581
- },
837
+ }),
582
838
  children: value
583
839
  })
584
840
  ]
585
841
  });
586
842
  };
587
843
  var ColorPickerSlider_default = ColorPickerSlider;
588
- export { ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };
844
+ // src/components/MultiSelect/MultiSelect.tsx
845
+ import { useEffect as useEffect6, useRef as useRef6, useState as useState6 } from "react";
846
+ // src/components/MultiSelect/context.ts
847
+ import { createContext as createContext2, useContext as useContext2 } from "react";
848
+ var MyContext2 = createContext2(void 0);
849
+ function useMyContext2() {
850
+ var data = useContext2(MyContext2);
851
+ if (data === void 0) throw new Error("Select context is undefined");
852
+ return data;
853
+ }
854
+ // src/components/MultiSelect/Dropdown.tsx
855
+ import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
856
+ // src/components/MultiSelect/styles.ts
857
+ var styles5 = {
858
+ select_box: {
859
+ borderRadius: "10px",
860
+ border: "solid 1px #dadada",
861
+ padding: "5px 10px",
862
+ display: "flex",
863
+ justifyContent: "space-between",
864
+ alignItems: "center",
865
+ cursor: "pointer"
866
+ },
867
+ value: {
868
+ display: "flex",
869
+ flexDirection: "row",
870
+ gap: "15px",
871
+ flexWrap: "wrap"
872
+ },
873
+ eachValue: {
874
+ borderRadius: "5px",
875
+ backgroundColor: "#f0f0f7",
876
+ padding: "5px",
877
+ position: "relative"
878
+ },
879
+ closeEach: {
880
+ position: "absolute",
881
+ top: 0,
882
+ right: 0,
883
+ transform: "translate(50%, -50%)",
884
+ borderRadius: "50%",
885
+ backgroundColor: "#fc2c2cf0",
886
+ aspectRatio: 1,
887
+ width: "24px",
888
+ display: "flex",
889
+ justifyContent: "center",
890
+ alignItems: "center",
891
+ color: "white",
892
+ transition: "scale .2s linear",
893
+ transformOrigin: "top right"
894
+ },
895
+ close: {
896
+ borderRadius: "50%",
897
+ width: "20px",
898
+ height: "20px",
899
+ display: "flex",
900
+ justifyContent: "center",
901
+ alignItems: "center"
902
+ },
903
+ element: {
904
+ display: "flex",
905
+ padding: "5px",
906
+ borderRadius: "10px",
907
+ justifyContent: "flex-start",
908
+ alignItems: "center",
909
+ cursor: "pointer"
910
+ },
911
+ dropdown: {
912
+ position: "absolute",
913
+ boxSizing: "border-box",
914
+ width: "100%",
915
+ left: "0",
916
+ display: "flex",
917
+ flexDirection: "column",
918
+ border: "solid 1px #dadada",
919
+ borderRadius: "10px",
920
+ padding: "5px",
921
+ maxHeight: "300px",
922
+ overflowY: "auto",
923
+ backgroundColor: "white"
924
+ },
925
+ search_border: {
926
+ position: "sticky",
927
+ top: 0,
928
+ left: 0,
929
+ boxSizing: "border-box",
930
+ width: "100%",
931
+ backgroundColor: "white",
932
+ marginBottom: "5px"
933
+ },
934
+ search: {
935
+ width: "100%",
936
+ borderRadius: "5px",
937
+ padding: "5px",
938
+ border: "solid 1px #dadada",
939
+ display: "flex",
940
+ justifyContent: "flex-start",
941
+ alignItems: "center",
942
+ boxSizing: "border-box"
943
+ }
944
+ };
945
+ var styles_default5 = styles5;
946
+ // src/components/MultiSelect/Search.tsx
947
+ import { jsx as jsx7 } from "react/jsx-runtime";
948
+ var Search2 = function(param) {
949
+ var options = param.options, onSearch = param.onSearch;
950
+ return /* @__PURE__ */ jsx7("div", {
951
+ style: styles_default5.search_border,
952
+ children: /* @__PURE__ */ jsx7("input", {
953
+ placeholder: "Search",
954
+ style: styles_default5.search,
955
+ id: "search",
956
+ name: "search",
957
+ onChange: function(e) {
958
+ return onSearch(options.filter(function(ele) {
959
+ return ele.value.toLowerCase().includes(e.target.value.toLowerCase());
960
+ }));
961
+ }
962
+ })
963
+ });
964
+ };
965
+ var Search_default2 = Search2;
966
+ // src/components/MultiSelect/Dropdown.tsx
967
+ import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
968
+ var Dropdown2 = function() {
969
+ var _useMyContext2 = useMyContext2(), options = _useMyContext2.options, onChange = _useMyContext2.onChange, setOpen = _useMyContext2.setOpen;
970
+ var _useState5 = _sliced_to_array(useState5(true), 2), isVisible = _useState5[0], setVisible = _useState5[1];
971
+ var _useState51 = _sliced_to_array(useState5(-1), 2), keyOnHover = _useState51[0], setKeyOnHover = _useState51[1];
972
+ var _useState52 = _sliced_to_array(useState5(options), 2), optionsCopy = _useState52[0], setOption = _useState52[1];
973
+ var dropdownRef = useRef5(null);
974
+ var handleResize = function() {
975
+ var dropdown = dropdownRef.current;
976
+ var dimension = dropdown.getBoundingClientRect();
977
+ var distanceToBottom = window.innerHeight - dimension.bottom;
978
+ var distanceToTop = dimension.top;
979
+ if (distanceToBottom < 0) {
980
+ setVisible(false);
981
+ }
982
+ if (distanceToTop < 0) {
983
+ setVisible(true);
984
+ }
985
+ };
986
+ useEffect5(function() {
987
+ handleResize();
988
+ window.addEventListener("scroll", handleResize);
989
+ return function() {
990
+ window.removeEventListener("scroll", handleResize);
991
+ };
992
+ }, []);
993
+ return /* @__PURE__ */ jsxs6("div", {
994
+ ref: dropdownRef,
995
+ style: isVisible ? _object_spread_props(_object_spread({}, styles_default5.dropdown), {
996
+ top: "calc(100% + 5px)"
997
+ }) : _object_spread_props(_object_spread({}, styles_default5.dropdown), {
998
+ bottom: "calc(100% + 5px)"
999
+ }),
1000
+ children: [
1001
+ /* @__PURE__ */ jsx8(Search_default2, {
1002
+ options: options,
1003
+ onSearch: setOption
1004
+ }),
1005
+ optionsCopy.map(function(option, key) {
1006
+ return /* @__PURE__ */ jsx8("div", {
1007
+ style: _object_spread_props(_object_spread({}, styles_default5.element), {
1008
+ backgroundColor: keyOnHover === key ? "#f0f0f0" : "#fff"
1009
+ }),
1010
+ onClick: function() {
1011
+ onChange(function(prev) {
1012
+ if (prev.includes(option.value)) return _to_consumable_array(prev);
1013
+ return _to_consumable_array(prev).concat([
1014
+ option.value
1015
+ ]);
1016
+ });
1017
+ setOpen(function(prev) {
1018
+ return !prev;
1019
+ });
1020
+ },
1021
+ onMouseEnter: function() {
1022
+ return setKeyOnHover(key);
1023
+ },
1024
+ onMouseLeave: function() {
1025
+ return setKeyOnHover(-1);
1026
+ },
1027
+ children: option.label
1028
+ }, key);
1029
+ })
1030
+ ]
1031
+ });
1032
+ };
1033
+ var Dropdown_default2 = Dropdown2;
1034
+ // src/components/MultiSelect/MultiSelect.tsx
1035
+ import { IoMdClose as IoMdClose2 } from "react-icons/io";
1036
+ import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
1037
+ var MultiSelect = function(param) {
1038
+ var options = param.options, value = param.value, onChange = param.onChange, _param_width = param.width, width = _param_width === void 0 ? "200" : _param_width;
1039
+ var _useState6 = _sliced_to_array(useState6(false), 2), open = _useState6[0], setOpen = _useState6[1];
1040
+ var _useState61 = _sliced_to_array(useState6(false), 2), isHoverClose = _useState61[0], setHoverClose = _useState61[1];
1041
+ var _useState62 = _sliced_to_array(useState6(-1), 2), isHoverCloseEach = _useState62[0], setHoverCloseEach = _useState62[1];
1042
+ var selectRef = useRef6(null);
1043
+ var clickHandler = function(e) {
1044
+ var select = selectRef.current;
1045
+ if (!select.contains(e.target)) {
1046
+ setOpen(false);
1047
+ }
1048
+ };
1049
+ useEffect6(function() {
1050
+ window.addEventListener("click", clickHandler);
1051
+ return function() {
1052
+ return window.removeEventListener("click", clickHandler);
1053
+ };
1054
+ }, []);
1055
+ return /* @__PURE__ */ jsx9(MyContext2.Provider, {
1056
+ value: {
1057
+ options: options,
1058
+ value: value,
1059
+ onChange: onChange,
1060
+ setOpen: setOpen
1061
+ },
1062
+ children: /* @__PURE__ */ jsxs7("div", {
1063
+ style: {
1064
+ width: "".concat(width, "px"),
1065
+ position: "relative"
1066
+ },
1067
+ ref: selectRef,
1068
+ children: [
1069
+ /* @__PURE__ */ jsxs7("div", {
1070
+ style: styles_default5.select_box,
1071
+ onClick: function() {
1072
+ return setOpen(function(prev) {
1073
+ return !prev;
1074
+ });
1075
+ },
1076
+ children: [
1077
+ /* @__PURE__ */ jsx9("div", {
1078
+ style: styles_default5.value,
1079
+ children: value.map(function(eachValue, key) {
1080
+ return /* @__PURE__ */ jsxs7("div", {
1081
+ style: styles_default5.eachValue,
1082
+ children: [
1083
+ /* @__PURE__ */ jsx9("span", {
1084
+ onMouseEnter: function() {
1085
+ setHoverCloseEach(key);
1086
+ },
1087
+ onMouseLeave: function() {
1088
+ setHoverCloseEach(-1);
1089
+ },
1090
+ title: "Remove this option",
1091
+ style: _object_spread_props(_object_spread({}, styles_default5.closeEach), {
1092
+ scale: isHoverCloseEach === key ? "1.2" : "1"
1093
+ }),
1094
+ onClick: function() {
1095
+ onChange(function(prev) {
1096
+ return prev.filter(function(o) {
1097
+ return o !== eachValue;
1098
+ });
1099
+ });
1100
+ setOpen(function(prev) {
1101
+ return !prev;
1102
+ });
1103
+ },
1104
+ children: /* @__PURE__ */ jsx9(IoMdClose2, {})
1105
+ }),
1106
+ eachValue
1107
+ ]
1108
+ }, key);
1109
+ })
1110
+ }),
1111
+ /* @__PURE__ */ jsx9("div", {
1112
+ style: _object_spread_props(_object_spread({}, styles_default5.close), {
1113
+ backgroundColor: isHoverClose ? "#f0f0f0" : "#fff"
1114
+ }),
1115
+ title: "Clear all",
1116
+ onClick: function() {
1117
+ onChange([]);
1118
+ setOpen(function(prev) {
1119
+ return !prev;
1120
+ });
1121
+ },
1122
+ onMouseEnter: function() {
1123
+ return setHoverClose(true);
1124
+ },
1125
+ onMouseLeave: function() {
1126
+ return setHoverClose(false);
1127
+ },
1128
+ children: /* @__PURE__ */ jsx9(IoMdClose2, {})
1129
+ })
1130
+ ]
1131
+ }),
1132
+ open && /* @__PURE__ */ jsx9(Dropdown_default2, {})
1133
+ ]
1134
+ })
1135
+ });
1136
+ };
1137
+ var MultiSelect_default = MultiSelect;
1138
+ export { ColorPickerSlider_default as ColorPickerSlider, DropdownSelect_default as DropdownSelect, MultiSelect_default as MultiSelect, OptionSlider_default as OptionSlider, RangeSlider_default as RangeSlider };