@flexmatch-dev/react-ui 0.0.2 → 0.0.3

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 (66) hide show
  1. package/cjs/components/Input/Selectable/InputButtonMultiSelect.d.ts +14 -0
  2. package/cjs/components/Input/Selectable/InputButtonMultiSelect.d.ts.map +1 -0
  3. package/cjs/components/Input/Selectable/InputButtonMultiSelect.js +96 -0
  4. package/cjs/components/Input/Selectable/InputButtonSelect.d.ts +14 -0
  5. package/cjs/components/Input/Selectable/InputButtonSelect.d.ts.map +1 -0
  6. package/cjs/components/Input/Selectable/InputButtonSelect.js +65 -0
  7. package/cjs/components/Input/Selectable/InputButtonSelectButton.d.ts +14 -0
  8. package/cjs/components/Input/Selectable/InputButtonSelectButton.d.ts.map +1 -0
  9. package/cjs/components/Input/Selectable/InputButtonSelectButton.js +78 -0
  10. package/cjs/components/Input/Selectable/InputCardSelect.d.ts +2 -1
  11. package/cjs/components/Input/Selectable/InputCardSelect.d.ts.map +1 -1
  12. package/cjs/components/Input/Selectable/InputCardSelect.js +4 -1
  13. package/cjs/components/Input/Selectable/InputCardSelectButton.d.ts +2 -1
  14. package/cjs/components/Input/Selectable/InputCardSelectButton.d.ts.map +1 -1
  15. package/cjs/components/Input/Selectable/InputCardSelectButton.js +4 -2
  16. package/cjs/components/Input/Selectable/InputRadiobutton.d.ts.map +1 -1
  17. package/cjs/components/Input/Selectable/InputRadiobutton.js +6 -30
  18. package/cjs/components/atoms/card-select.ui.d.ts.map +1 -1
  19. package/cjs/components/atoms/index.d.ts +1 -0
  20. package/cjs/components/atoms/index.d.ts.map +1 -1
  21. package/cjs/components/atoms/index.js +7 -0
  22. package/cjs/components/atoms/radio.ui.d.ts +14 -0
  23. package/cjs/components/atoms/radio.ui.d.ts.map +1 -0
  24. package/cjs/components/atoms/radio.ui.js +52 -0
  25. package/cjs/components/atoms/textbox.ui.d.ts +2 -1
  26. package/cjs/components/atoms/textbox.ui.d.ts.map +1 -1
  27. package/cjs/components/atoms/textbox.ui.js +11 -8
  28. package/cjs/context/Input.d.ts +10 -0
  29. package/cjs/context/Input.d.ts.map +1 -1
  30. package/cjs/index.d.ts +3 -0
  31. package/cjs/index.d.ts.map +1 -1
  32. package/cjs/index.js +21 -0
  33. package/dist/index.css +74 -10
  34. package/lib/components/Input/Selectable/InputButtonMultiSelect.d.ts +14 -0
  35. package/lib/components/Input/Selectable/InputButtonMultiSelect.d.ts.map +1 -0
  36. package/lib/components/Input/Selectable/InputButtonMultiSelect.js +89 -0
  37. package/lib/components/Input/Selectable/InputButtonSelect.d.ts +14 -0
  38. package/lib/components/Input/Selectable/InputButtonSelect.d.ts.map +1 -0
  39. package/lib/components/Input/Selectable/InputButtonSelect.js +58 -0
  40. package/lib/components/Input/Selectable/InputButtonSelectButton.d.ts +14 -0
  41. package/lib/components/Input/Selectable/InputButtonSelectButton.d.ts.map +1 -0
  42. package/lib/components/Input/Selectable/InputButtonSelectButton.js +71 -0
  43. package/lib/components/Input/Selectable/InputCardSelect.d.ts +2 -1
  44. package/lib/components/Input/Selectable/InputCardSelect.d.ts.map +1 -1
  45. package/lib/components/Input/Selectable/InputCardSelect.js +4 -1
  46. package/lib/components/Input/Selectable/InputCardSelectButton.d.ts +2 -1
  47. package/lib/components/Input/Selectable/InputCardSelectButton.d.ts.map +1 -1
  48. package/lib/components/Input/Selectable/InputCardSelectButton.js +4 -2
  49. package/lib/components/Input/Selectable/InputRadiobutton.d.ts.map +1 -1
  50. package/lib/components/Input/Selectable/InputRadiobutton.js +7 -31
  51. package/lib/components/atoms/card-select.ui.d.ts.map +1 -1
  52. package/lib/components/atoms/index.d.ts +1 -0
  53. package/lib/components/atoms/index.d.ts.map +1 -1
  54. package/lib/components/atoms/index.js +2 -1
  55. package/lib/components/atoms/radio.ui.d.ts +14 -0
  56. package/lib/components/atoms/radio.ui.d.ts.map +1 -0
  57. package/lib/components/atoms/radio.ui.js +45 -0
  58. package/lib/components/atoms/textbox.ui.d.ts +2 -1
  59. package/lib/components/atoms/textbox.ui.d.ts.map +1 -1
  60. package/lib/components/atoms/textbox.ui.js +11 -8
  61. package/lib/context/Input.d.ts +10 -0
  62. package/lib/context/Input.d.ts.map +1 -1
  63. package/lib/index.d.ts +3 -0
  64. package/lib/index.d.ts.map +1 -1
  65. package/lib/index.js +4 -1
  66. package/package.json +1 -1
@@ -8,7 +8,7 @@ exports["default"] = void 0;
8
8
  var _clsx = _interopRequireDefault(require("clsx"));
9
9
  var _react = require("react");
10
10
  var _jsxRuntime = require("react/jsx-runtime");
11
- var _excluded = ["className", "label", "readOnly", "disabled", "error", "height"];
11
+ var _excluded = ["className", "label", "readOnly", "disabled", "error", "height", "labelSide"];
12
12
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
14
14
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25,11 +25,13 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
25
25
  function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
26
26
  var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
27
27
  var className = _ref.className,
28
- label = _ref.label,
28
+ Label = _ref.label,
29
29
  readOnly = _ref.readOnly,
30
30
  disabled = _ref.disabled,
31
31
  error = _ref.error,
32
32
  height = _ref.height,
33
+ _ref$labelSide = _ref.labelSide,
34
+ labelSide = _ref$labelSide === void 0 ? 'right' : _ref$labelSide,
33
35
  props = _objectWithoutProperties(_ref, _excluded);
34
36
  var _useState = (0, _react.useState)(0),
35
37
  _useState2 = _slicedToArray(_useState, 2),
@@ -37,10 +39,10 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
37
39
  setLabelWidth = _useState2[1];
38
40
  var labelRef = (0, _react.useRef)(null);
39
41
  (0, _react.useEffect)(function () {
40
- if (label && labelRef.current) {
42
+ if (Label && labelRef.current) {
41
43
  setLabelWidth(labelRef.current.offsetWidth);
42
44
  }
43
- }, [label]);
45
+ }, [Label]);
44
46
  var heightStyle = (0, _react.useMemo)(function () {
45
47
  if (typeof height === 'number') {
46
48
  return "".concat(height, "px");
@@ -54,7 +56,8 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
54
56
  className: (0, _clsx["default"])('flexmatch-textbox-container', className),
55
57
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
56
58
  style: {
57
- paddingRight: "".concat(labelWidth + 14, "px"),
59
+ paddingRight: labelSide === 'right' ? "".concat(labelWidth + 16, "px") : '12px',
60
+ paddingLeft: labelSide === 'left' ? "".concat(labelWidth + 16, "px") : '12px',
58
61
  height: heightStyle
59
62
  },
60
63
  ref: ref
@@ -63,11 +66,11 @@ var TextboxUI = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
63
66
  readOnly: readOnly,
64
67
  disabled: disabled,
65
68
  className: (0, _clsx["default"])(className, 'flexmatch-textbox', error && 'error')
66
- })), (label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
69
+ })), Label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
67
70
  htmlFor: props.id,
68
71
  ref: labelRef,
69
- className: (0, _clsx["default"])('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly'),
70
- children: label
72
+ className: (0, _clsx["default"])('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly', labelSide === 'left' ? 'left' : 'right'),
73
+ children: Label
71
74
  })]
72
75
  });
73
76
  });
@@ -3,6 +3,11 @@ export interface InputSelectableOption<T> {
3
3
  value: T;
4
4
  disabled?: boolean;
5
5
  }
6
+ export interface InputMultiSelectableOption<T> {
7
+ label: string;
8
+ value: T | '*';
9
+ disabled?: boolean;
10
+ }
6
11
  export interface InputSelectableExtraOption<T> {
7
12
  value: T;
8
13
  description?: string;
@@ -13,4 +18,9 @@ export interface InputSelectableProps<T> {
13
18
  onChange?: (value: T) => void;
14
19
  options: InputSelectableOption<T>[];
15
20
  }
21
+ export interface InputMultiSelectableProps<T> {
22
+ value?: T[] | undefined;
23
+ onChange?: (value: T[]) => void;
24
+ options: InputMultiSelectableOption<T>[];
25
+ }
16
26
  //# sourceMappingURL=Input.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/context/Input.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CACrC"}
1
+ {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/context/Input.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,GAAG,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,0BAA0B,CAAC,CAAC;IAC3C,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;CACrC;AAED,MAAM,WAAW,yBAAyB,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;CAC1C"}
package/cjs/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { IconCheck } from '@assets/index';
2
+ export { default as RadioUI } from '@atoms/radio.ui';
2
3
  export { default as TextboxUI } from '@atoms/textbox.ui';
3
4
  export { default as TextareaUI } from '@atoms/textarea.ui';
4
5
  export { default as InfoCardUI } from '@atoms/info-card.ui';
@@ -8,5 +9,7 @@ export { default as InputSelectbox } from '@components/Input/Selectable/InputSel
8
9
  export { default as InputCheckbox } from '@components/Input/Selectable/InputCheckbox';
9
10
  export { default as InputCardSelect } from '@components/Input/Selectable/InputCardSelect';
10
11
  export { default as InputRadiobutton } from '@components/Input/Selectable/InputRadiobutton';
12
+ export { default as InputButtonSelect } from '@components/Input/Selectable/InputButtonSelect';
13
+ export { default as InputButtonMultiSelect } from '@components/Input/Selectable/InputButtonMultiSelect';
11
14
  export type { InputSelectableOption, InputSelectableExtraOption, InputSelectableProps, } from '@context/Input';
12
15
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAE5F,YAAY,EACV,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAG1C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAG5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4CAA4C,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AAC5F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,qDAAqD,CAAC;AAExG,YAAY,EACV,qBAAqB,EACrB,0BAA0B,EAC1B,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
package/cjs/index.js CHANGED
@@ -15,6 +15,18 @@ Object.defineProperty(exports, "InfoCardUI", {
15
15
  return _infoCard["default"];
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "InputButtonMultiSelect", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _InputButtonMultiSelect["default"];
22
+ }
23
+ });
24
+ Object.defineProperty(exports, "InputButtonSelect", {
25
+ enumerable: true,
26
+ get: function get() {
27
+ return _InputButtonSelect["default"];
28
+ }
29
+ });
18
30
  Object.defineProperty(exports, "InputCardSelect", {
19
31
  enumerable: true,
20
32
  get: function get() {
@@ -51,6 +63,12 @@ Object.defineProperty(exports, "InputSelectbox", {
51
63
  return _InputSelectbox["default"];
52
64
  }
53
65
  });
66
+ Object.defineProperty(exports, "RadioUI", {
67
+ enumerable: true,
68
+ get: function get() {
69
+ return _radio["default"];
70
+ }
71
+ });
54
72
  Object.defineProperty(exports, "TextareaUI", {
55
73
  enumerable: true,
56
74
  get: function get() {
@@ -64,6 +82,7 @@ Object.defineProperty(exports, "TextboxUI", {
64
82
  }
65
83
  });
66
84
  var _assets = require("./assets");
85
+ var _radio = _interopRequireDefault(require("./components/atoms/radio.ui"));
67
86
  var _textbox = _interopRequireDefault(require("./components/atoms/textbox.ui"));
68
87
  var _textarea = _interopRequireDefault(require("./components/atoms/textarea.ui"));
69
88
  var _infoCard = _interopRequireDefault(require("./components/atoms/info-card.ui"));
@@ -73,4 +92,6 @@ var _InputSelectbox = _interopRequireDefault(require("./components/Input/Selecta
73
92
  var _InputCheckbox = _interopRequireDefault(require("./components/Input/Selectable/InputCheckbox"));
74
93
  var _InputCardSelect = _interopRequireDefault(require("./components/Input/Selectable/InputCardSelect"));
75
94
  var _InputRadiobutton = _interopRequireDefault(require("./components/Input/Selectable/InputRadiobutton"));
95
+ var _InputButtonSelect = _interopRequireDefault(require("./components/Input/Selectable/InputButtonSelect"));
96
+ var _InputButtonMultiSelect = _interopRequireDefault(require("./components/Input/Selectable/InputButtonMultiSelect"));
76
97
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
package/dist/index.css CHANGED
@@ -1532,6 +1532,43 @@
1532
1532
  }
1533
1533
 
1534
1534
 
1535
+ /* === ./button-select.ui.css === */
1536
+ .flexmatch-button-select-container {
1537
+ display: flex;
1538
+ flex: 1;
1539
+ flex-direction: row;
1540
+ flex-wrap: wrap;
1541
+ gap: 24px;
1542
+ }
1543
+
1544
+ .flexmatch-button-select-button-container {
1545
+ display: flex;
1546
+ flex-direction: row;
1547
+ gap: 8px;
1548
+ align-items: center;
1549
+ width: fit-content;
1550
+ border-radius: 14px;
1551
+ cursor: pointer;
1552
+ border: 1px solid var(--color-gray-200);
1553
+ border-radius: 10px;
1554
+ }
1555
+
1556
+ .flexmatch-button-select-button-container.selected {
1557
+ background-color: var(--color-primary-100);
1558
+ border: 1px solid var(--color-primary-100);
1559
+ }
1560
+
1561
+ .flexmatch-button-select-button-container.small {
1562
+ min-height: 40px;
1563
+ padding: 10px 32px;
1564
+ }
1565
+
1566
+ .flexmatch-button-select-button-container.normal {
1567
+ min-height: 50px;
1568
+ padding: 10px 32px;
1569
+ }
1570
+
1571
+
1535
1572
  /* === ./card-select.ui.css === */
1536
1573
 
1537
1574
  .flexmatch-card-select-container {
@@ -1549,13 +1586,20 @@
1549
1586
  gap: 1rem;
1550
1587
  align-items: center;
1551
1588
  width: 100%;
1552
- min-height: 98px;
1553
- padding: 24px;
1554
1589
  border-radius: 14px;
1555
1590
  border: 2px solid var(--color-gray-200);
1556
1591
  cursor: pointer;
1557
1592
  }
1558
1593
 
1594
+ .flexmatch-card-select-button-container.small {
1595
+ min-height: 64px;
1596
+ padding: 16px;
1597
+ }
1598
+
1599
+ .flexmatch-card-select-button-container.normal {
1600
+ min-height: 98px;
1601
+ padding: 24px;
1602
+ }
1559
1603
  .flexmatch-card-select-button-container.selected {
1560
1604
  border: 2px solid var(--color-primary-100);
1561
1605
  background-color: var(--color-primary-10);
@@ -1568,7 +1612,6 @@
1568
1612
  width: 40px;
1569
1613
  height: 40px;
1570
1614
  border-radius: 10px;
1571
- background-color: var(--color-primary-100);
1572
1615
  }
1573
1616
 
1574
1617
  .flexmatch-card-select-button-content {
@@ -1602,6 +1645,7 @@
1602
1645
  }
1603
1646
 
1604
1647
 
1648
+
1605
1649
  /* === ./checkbox.ui.css === */
1606
1650
  .flexmatch-checkbox-container {
1607
1651
  display: flex;
@@ -1826,6 +1870,21 @@
1826
1870
  animation: flexmatch-modal-open 0.3s ease-out;
1827
1871
  }
1828
1872
 
1873
+ @keyframes flexmatch-right-sidebar-open {
1874
+ from {
1875
+ transform: translateX(100%);
1876
+ opacity: 0;
1877
+ }
1878
+ to {
1879
+ transform: translateX(0);
1880
+ opacity: 1;
1881
+ }
1882
+ }
1883
+
1884
+ .flexmatch-right-sidebar {
1885
+ animation: flexmatch-right-sidebar-open 0.3s ease-out;
1886
+ }
1887
+
1829
1888
 
1830
1889
  /* === ./textbox.ui.css === */
1831
1890
  .flexmatch-textbox-container {
@@ -1837,12 +1896,18 @@
1837
1896
  display: flex;
1838
1897
  align-items: center;
1839
1898
  justify-content: center;
1840
- top: 1px;
1841
- height: calc(100% - 2px);
1842
- right: 12px;
1899
+ top: 2px;
1900
+ height: calc(100% - 4px);
1843
1901
  color: var(--color-gray-600);
1844
1902
  background-color: rgba(255, 255, 255, 0.8);
1845
-
1903
+ }
1904
+ .flexmatch-textbox-label.left {
1905
+ left: 12px;
1906
+ right: auto;
1907
+ }
1908
+ .flexmatch-textbox-label.right {
1909
+ left: auto;
1910
+ right: 12px;
1846
1911
  }
1847
1912
  .flexmatch-textbox-label.disabled,
1848
1913
  .flexmatch-textbox-label.readonly {
@@ -2066,11 +2131,10 @@
2066
2131
  }
2067
2132
 
2068
2133
  .flexmatch-radiobutton-icon-checked {
2069
- width: 12px;
2070
- height: 12px;
2134
+ width: 11px;
2135
+ height: 11px;
2071
2136
  border-radius: 50%;
2072
2137
  background-color: var(--color-primary-200);
2073
- transform-origin: center;
2074
2138
  animation: flexmatch-radiobutton-checked-scale 0.2s ease-out;
2075
2139
  }
2076
2140
  .flexmatch-radiobutton-label {
@@ -0,0 +1,14 @@
1
+ import { InputMultiSelectableProps, InputSelectableExtraOption } from '@/context/Input';
2
+ export interface InputButtonMultiSelectProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, InputMultiSelectableProps<T> {
3
+ id?: string | undefined;
4
+ title?: string | undefined;
5
+ description?: string | undefined;
6
+ extraOptions: InputSelectableExtraOption<T>[];
7
+ size?: 'small' | 'normal';
8
+ }
9
+ declare const InputButtonMultiSelect: {
10
+ <T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputButtonMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
+ export default InputButtonMultiSelect;
14
+ //# sourceMappingURL=InputButtonMultiSelect.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputButtonMultiSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonMultiSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAIxF,MAAM,WAAW,2BAA2B,CAAC,CAAC,CAC5C,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAC5F,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,sBAAsB;KAAI,CAAC,iGAW9B,2BAA2B,CAAC,CAAC,CAAC;;CAqDhC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
@@ -0,0 +1,89 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
9
+ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
11
+ function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
12
+ function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
13
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
14
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
15
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
16
+ import clsx from 'clsx';
17
+ import { useCallback, useMemo } from 'react';
18
+ import InputButtonSelectButton from "./InputButtonSelectButton";
19
+ import { jsx as _jsx } from "react/jsx-runtime";
20
+ var InputButtonMultiSelect = function InputButtonMultiSelect(_ref) {
21
+ var id = _ref.id,
22
+ className = _ref.className,
23
+ options = _ref.options,
24
+ _ref$size = _ref.size,
25
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
26
+ value = _ref.value,
27
+ onChange = _ref.onChange,
28
+ title = _ref.title,
29
+ description = _ref.description,
30
+ extraOptions = _ref.extraOptions,
31
+ props = _objectWithoutProperties(_ref, _excluded);
32
+ var trueOptions = useMemo(function () {
33
+ return options.filter(function (option) {
34
+ return option.value !== '*';
35
+ }).map(function (_ref2) {
36
+ var value = _ref2.value;
37
+ return value;
38
+ });
39
+ }, [options]);
40
+ var handleSelect = useCallback(function (eventKey) {
41
+ if (eventKey !== null) {
42
+ var option = options.find(function (opt) {
43
+ return String(opt.value) === String(eventKey);
44
+ });
45
+ if (option && onChange) {
46
+ if (option.value === '*') {
47
+ if ((value === null || value === void 0 ? void 0 : value.length) === trueOptions.length) {
48
+ onChange([]);
49
+ } else {
50
+ onChange(trueOptions);
51
+ }
52
+ } else {
53
+ var isSelected = value === null || value === void 0 ? void 0 : value.includes(option.value);
54
+ if (isSelected) {
55
+ var _value$filter;
56
+ onChange((_value$filter = value === null || value === void 0 ? void 0 : value.filter(function (v) {
57
+ return v !== option.value;
58
+ })) !== null && _value$filter !== void 0 ? _value$filter : []);
59
+ } else {
60
+ onChange([].concat(_toConsumableArray(value !== null && value !== void 0 ? value : []), [option.value]));
61
+ }
62
+ }
63
+ }
64
+ }
65
+ }, [options, onChange, value, trueOptions]);
66
+ return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
67
+ id: id,
68
+ className: clsx(className, 'flexmatch-button-select-container')
69
+ }, props), {}, {
70
+ children: options.map(function (option) {
71
+ var extraOption = extraOptions.find(function (opt) {
72
+ return opt.value === option.value;
73
+ });
74
+ var isSelected = option.value === '*' ? (value === null || value === void 0 ? void 0 : value.length) === trueOptions.length : value === null || value === void 0 ? void 0 : value.includes(option.value);
75
+ return /*#__PURE__*/_jsx(InputButtonSelectButton, {
76
+ size: size,
77
+ disabled: option.disabled,
78
+ isSelected: isSelected,
79
+ eventKey: String(option.value),
80
+ onSelect: handleSelect,
81
+ title: option.label,
82
+ description: extraOption === null || extraOption === void 0 ? void 0 : extraOption.description,
83
+ icon: extraOption === null || extraOption === void 0 ? void 0 : extraOption.icon
84
+ }, String(option.value));
85
+ })
86
+ }));
87
+ };
88
+ InputButtonMultiSelect.displayName = 'InputButtonMultiSelect';
89
+ export default InputButtonMultiSelect;
@@ -0,0 +1,14 @@
1
+ import { InputSelectableExtraOption, InputSelectableProps } from '@/context/Input';
2
+ export interface InputButtonSelectProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, InputSelectableProps<T> {
3
+ id?: string | undefined;
4
+ title?: string | undefined;
5
+ description?: string | undefined;
6
+ extraOptions: InputSelectableExtraOption<T>[];
7
+ size?: 'small' | 'normal';
8
+ }
9
+ declare const InputButtonSelect: {
10
+ <T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputButtonSelectProps<T>): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
+ export default InputButtonSelect;
14
+ //# sourceMappingURL=InputButtonSelect.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputButtonSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,sBAAsB,CAAC,CAAC,CACvC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,iBAAiB;KAAI,CAAC,iGAWzB,sBAAsB,CAAC,CAAC,CAAC;;CAiC3B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -0,0 +1,58 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
9
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
10
+ import clsx from 'clsx';
11
+ import { useCallback } from 'react';
12
+ import InputButtonSelectButton from "./InputButtonSelectButton";
13
+ import { jsx as _jsx } from "react/jsx-runtime";
14
+ var InputButtonSelect = function InputButtonSelect(_ref) {
15
+ var id = _ref.id,
16
+ className = _ref.className,
17
+ options = _ref.options,
18
+ _ref$size = _ref.size,
19
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
20
+ value = _ref.value,
21
+ onChange = _ref.onChange,
22
+ title = _ref.title,
23
+ description = _ref.description,
24
+ extraOptions = _ref.extraOptions,
25
+ props = _objectWithoutProperties(_ref, _excluded);
26
+ var handleSelect = useCallback(function (eventKey) {
27
+ if (eventKey !== null) {
28
+ var option = options.find(function (opt) {
29
+ return String(opt.value) === String(eventKey);
30
+ });
31
+ if (option && onChange) {
32
+ onChange(option.value);
33
+ }
34
+ }
35
+ }, [options, onChange]);
36
+ return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
37
+ id: id,
38
+ className: clsx(className, 'flexmatch-button-select-container')
39
+ }, props), {}, {
40
+ children: options.map(function (option) {
41
+ var extraOption = extraOptions.find(function (opt) {
42
+ return opt.value === option.value;
43
+ });
44
+ return /*#__PURE__*/_jsx(InputButtonSelectButton, {
45
+ size: size,
46
+ disabled: option.disabled,
47
+ isSelected: option.value === value,
48
+ eventKey: String(option.value),
49
+ onSelect: handleSelect,
50
+ title: option.label,
51
+ description: extraOption === null || extraOption === void 0 ? void 0 : extraOption.description,
52
+ icon: extraOption === null || extraOption === void 0 ? void 0 : extraOption.icon
53
+ }, String(option.value));
54
+ })
55
+ }));
56
+ };
57
+ InputButtonSelect.displayName = 'InputButtonSelect';
58
+ export default InputButtonSelect;
@@ -0,0 +1,14 @@
1
+ interface InputButtonSelectButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'onSelect'> {
2
+ size?: 'small' | 'normal';
3
+ title?: string | undefined;
4
+ icon?: React.ReactNode | undefined;
5
+ description?: string | undefined;
6
+ disabled?: boolean | undefined;
7
+ isSelected?: boolean | undefined;
8
+ eventKey?: string | number | null | undefined;
9
+ onSelect?: ((eventKey: string | number | null, event: React.SyntheticEvent<HTMLButtonElement>) => void) | undefined;
10
+ onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
11
+ }
12
+ declare const InputButtonSelectButton: ({ title, size, icon, description, disabled, isSelected, eventKey, onSelect, onClick, children, className, ...props }: InputButtonSelectButtonProps) => import("react/jsx-runtime").JSX.Element;
13
+ export default InputButtonSelectButton;
14
+ //# sourceMappingURL=InputButtonSelectButton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"InputButtonSelectButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputButtonSelectButton.tsx"],"names":[],"mappings":"AAKA,UAAU,4BAA6B,SAAQ,IAAI,CACjD,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,UAAU,CACX;IACC,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE3B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAEnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAEjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAE/B,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEjC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAE9C,QAAQ,CAAC,EACL,CAAC,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAC5F,SAAS,CAAC;IAEd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;CAClE;AAED,QAAA,MAAM,uBAAuB,GAAI,sHAa9B,4BAA4B,4CAgE9B,CAAC;AACF,eAAe,uBAAuB,CAAC"}
@@ -0,0 +1,71 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["title", "size", "icon", "description", "disabled", "isSelected", "eventKey", "onSelect", "onClick", "children", "className"];
3
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
9
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
10
+ import clsx from 'clsx';
11
+ import { useCallback } from 'react';
12
+ import { ButtonUI } from "../../atoms";
13
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
+ var InputButtonSelectButton = function InputButtonSelectButton(_ref) {
15
+ var title = _ref.title,
16
+ _ref$size = _ref.size,
17
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
18
+ icon = _ref.icon,
19
+ description = _ref.description,
20
+ disabled = _ref.disabled,
21
+ isSelected = _ref.isSelected,
22
+ eventKey = _ref.eventKey,
23
+ onSelect = _ref.onSelect,
24
+ onClick = _ref.onClick,
25
+ children = _ref.children,
26
+ className = _ref.className,
27
+ props = _objectWithoutProperties(_ref, _excluded);
28
+ var handleClick = useCallback(function (e) {
29
+ if (disabled) {
30
+ e.preventDefault();
31
+ e.stopPropagation();
32
+ return;
33
+ }
34
+ if (onClick) {
35
+ onClick(e);
36
+ }
37
+ if (!e.defaultPrevented) {
38
+ if (onSelect) {
39
+ onSelect(eventKey !== null && eventKey !== void 0 ? eventKey : null, e);
40
+ }
41
+ }
42
+ }, [disabled, onClick, onSelect, eventKey]);
43
+ var handleKeyDown = useCallback(function (e) {
44
+ if (disabled) {
45
+ e.preventDefault();
46
+ e.stopPropagation();
47
+ return;
48
+ }
49
+ if (e.key === 'Enter' || e.key === ' ') {
50
+ e.preventDefault();
51
+ if (onClick) {
52
+ onClick(e);
53
+ }
54
+ if (!e.defaultPrevented) {
55
+ if (onSelect) {
56
+ onSelect(eventKey !== null && eventKey !== void 0 ? eventKey : null, e);
57
+ }
58
+ }
59
+ }
60
+ }, [disabled, onClick, onSelect, eventKey]);
61
+ return /*#__PURE__*/_jsxs(ButtonUI, _objectSpread(_objectSpread({
62
+ className: clsx('flexmatch-button-select-button-container', className, isSelected && 'selected', size === 'small' && 'small', size === 'normal' && 'normal'),
63
+ onClick: handleClick,
64
+ onKeyDown: handleKeyDown,
65
+ tabIndex: disabled ? -1 : 0,
66
+ "aria-disabled": disabled
67
+ }, props), {}, {
68
+ children: [icon, title]
69
+ }));
70
+ };
71
+ export default InputButtonSelectButton;
@@ -4,9 +4,10 @@ export interface InputCardSelectProps<T> extends Omit<React.HTMLAttributes<HTMLD
4
4
  title?: string | undefined;
5
5
  description?: string | undefined;
6
6
  extraOptions: InputSelectableExtraOption<T>[];
7
+ size?: 'small' | 'normal';
7
8
  }
8
9
  declare const InputCardSelect: {
9
- <T>({ id, className, options, value, onChange, title, description, extraOptions, ...props }: InputCardSelectProps<T>): import("react/jsx-runtime").JSX.Element;
10
+ <T>({ id, className, options, size, value, onChange, title, description, extraOptions, ...props }: InputCardSelectProps<T>): import("react/jsx-runtime").JSX.Element;
10
11
  displayName: string;
11
12
  };
12
13
  export default InputCardSelect;
@@ -1 +1 @@
1
- {"version":3,"file":"InputCardSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;CAC/C;AACD,QAAA,MAAM,eAAe;KAAI,CAAC,2FAUvB,oBAAoB,CAAC,CAAC,CAAC;;CAgCzB,CAAC;AAEF,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"InputCardSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelect.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAInF,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC;IACvF,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,EAAE,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AACD,QAAA,MAAM,eAAe;KAAI,CAAC,iGAWvB,oBAAoB,CAAC,CAAC,CAAC;;CAiCzB,CAAC;AAEF,eAAe,eAAe,CAAC"}
@@ -1,5 +1,5 @@
1
1
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["id", "className", "options", "value", "onChange", "title", "description", "extraOptions"];
2
+ var _excluded = ["id", "className", "options", "size", "value", "onChange", "title", "description", "extraOptions"];
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
5
  function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -15,6 +15,8 @@ var InputCardSelect = function InputCardSelect(_ref) {
15
15
  var id = _ref.id,
16
16
  className = _ref.className,
17
17
  options = _ref.options,
18
+ _ref$size = _ref.size,
19
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
18
20
  value = _ref.value,
19
21
  onChange = _ref.onChange,
20
22
  title = _ref.title,
@@ -40,6 +42,7 @@ var InputCardSelect = function InputCardSelect(_ref) {
40
42
  return opt.value === option.value;
41
43
  });
42
44
  return /*#__PURE__*/_jsx(InputCardSelectButton, {
45
+ size: size,
43
46
  disabled: option.disabled,
44
47
  isSelected: option.value === value,
45
48
  eventKey: String(option.value),
@@ -1,4 +1,5 @@
1
1
  interface InputCardSelectButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
2
+ size?: 'small' | 'normal';
2
3
  title?: string | undefined;
3
4
  icon?: React.ReactNode | undefined;
4
5
  description?: string | undefined;
@@ -8,6 +9,6 @@ interface InputCardSelectButtonProps extends Omit<React.HTMLAttributes<HTMLDivEl
8
9
  onSelect?: ((eventKey: string | number | null, event: React.SyntheticEvent<HTMLElement>) => void) | undefined;
9
10
  onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
10
11
  }
11
- declare const InputCardSelectButton: <T>({ title, icon, description, disabled, isSelected, eventKey, onSelect, onClick, children, className, ...props }: InputCardSelectButtonProps) => import("react/jsx-runtime").JSX.Element;
12
+ declare const InputCardSelectButton: ({ title, size, icon, description, disabled, isSelected, eventKey, onSelect, onClick, children, className, ...props }: InputCardSelectButtonProps) => import("react/jsx-runtime").JSX.Element;
12
13
  export default InputCardSelectButton;
13
14
  //# sourceMappingURL=InputCardSelectButton.d.ts.map