@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
@@ -1 +1 @@
1
- {"version":3,"file":"InputCardSelectButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelectButton.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA2B,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,CACX;IACC,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,WAAW,CAAC,KAAK,IAAI,CAAC,GACtF,SAAS,CAAC;IAEd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;CAC/D;AAED,QAAA,MAAM,qBAAqB,GAAI,CAAC,EAAG,gHAYhC,0BAA0B,4CA2D5B,CAAC;AACF,eAAe,qBAAqB,CAAC"}
1
+ {"version":3,"file":"InputCardSelectButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputCardSelectButton.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA2B,SAAQ,IAAI,CAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,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,WAAW,CAAC,KAAK,IAAI,CAAC,GACtF,SAAS,CAAC;IAEd,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,GAAG,SAAS,CAAC;CAC/D;AAED,QAAA,MAAM,qBAAqB,GAAI,sHAa5B,0BAA0B,4CAgE5B,CAAC;AACF,eAAe,qBAAqB,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 = ["title", "icon", "description", "disabled", "isSelected", "eventKey", "onSelect", "onClick", "children", "className"];
2
+ var _excluded = ["title", "size", "icon", "description", "disabled", "isSelected", "eventKey", "onSelect", "onClick", "children", "className"];
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; }
@@ -13,6 +13,8 @@ import { CardSelectContainerUI, CardSelectIconUI, CardSelectContentUI, CardSelec
13
13
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
14
14
  var InputCardSelectButton = function InputCardSelectButton(_ref) {
15
15
  var title = _ref.title,
16
+ _ref$size = _ref.size,
17
+ size = _ref$size === void 0 ? 'normal' : _ref$size,
16
18
  icon = _ref.icon,
17
19
  description = _ref.description,
18
20
  disabled = _ref.disabled,
@@ -57,7 +59,7 @@ var InputCardSelectButton = function InputCardSelectButton(_ref) {
57
59
  }
58
60
  }, [disabled, onClick, onSelect, eventKey]);
59
61
  return /*#__PURE__*/_jsxs(CardSelectContainerUI, _objectSpread(_objectSpread({
60
- className: clsx(className, isSelected && 'selected'),
62
+ className: clsx(className, isSelected && 'selected', size === 'small' && 'small', size === 'normal' && 'normal'),
61
63
  onClick: handleClick,
62
64
  onKeyDown: handleKeyDown,
63
65
  tabIndex: disabled ? -1 : 0,
@@ -1 +1 @@
1
- {"version":3,"file":"InputRadiobutton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputRadiobutton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGvD,MAAM,WAAW,qBAAqB,CAAC,CAAC,CACtC,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;CACzB;AAED,QAAA,MAAM,gBAAgB;KAAI,CAAC,gDAMxB,qBAAqB,CAAC,CAAC,CAAC;;CA8C1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1
+ {"version":3,"file":"InputRadiobutton.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Selectable/InputRadiobutton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,qBAAqB,CAAC,CAAC,CACtC,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;CACzB;AAED,QAAA,MAAM,gBAAgB;KAAI,CAAC,gDAMxB,qBAAqB,CAAC,CAAC,CAAC;;CA2B1B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -1,22 +1,13 @@
1
- import { useCallback } from 'react';
2
1
  import clsx from 'clsx';
3
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useCallback } from 'react';
3
+ import { RadioUI } from "../../atoms";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
4
5
  var InputRadiobutton = function InputRadiobutton(_ref) {
5
6
  var id = _ref.id,
6
7
  className = _ref.className,
7
8
  options = _ref.options,
8
9
  value = _ref.value,
9
10
  onChange = _ref.onChange;
10
- var handleSelect = useCallback(function (eventKey) {
11
- if (eventKey !== null) {
12
- var option = options.find(function (opt) {
13
- return String(opt.value) === String(eventKey);
14
- });
15
- if (option && onChange) {
16
- onChange(option.value);
17
- }
18
- }
19
- }, [options, onChange]);
20
11
  var handleClick = useCallback(function (eventKey) {
21
12
  if (eventKey !== null) {
22
13
  var option = options.find(function (opt) {
@@ -31,29 +22,14 @@ var InputRadiobutton = function InputRadiobutton(_ref) {
31
22
  id: id,
32
23
  className: clsx(className, 'flexmatch-radiobutton-container'),
33
24
  children: options.map(function (option) {
34
- return /*#__PURE__*/_jsxs("div", {
25
+ return /*#__PURE__*/_jsx(RadioUI, {
35
26
  className: 'flexmatch-radiobutton-item',
36
27
  onClick: function onClick() {
37
28
  return !option.disabled && handleClick(String(option.value));
38
29
  },
39
- children: [/*#__PURE__*/_jsx("input", {
40
- type: "radio",
41
- name: id,
42
- checked: option.value === value,
43
- disabled: !!option.disabled,
44
- onChange: function onChange() {
45
- return handleSelect(String(option.value));
46
- },
47
- className: 'flexmatch-radiobutton-input'
48
- }), /*#__PURE__*/_jsx("span", {
49
- className: clsx('flexmatch-radiobutton-icon', option.value === value && 'checked'),
50
- children: option.value === value && /*#__PURE__*/_jsx("div", {
51
- className: 'flexmatch-radiobutton-icon-checked'
52
- })
53
- }), /*#__PURE__*/_jsx("span", {
54
- className: clsx('text-b2 flexmatch-radiobutton-label', option.disabled && 'disabled'),
55
- children: option.label
56
- })]
30
+ checked: option.value === value,
31
+ disabled: !!option.disabled,
32
+ children: option.label
57
33
  }, String(option.value));
58
34
  })
59
35
  });
@@ -1 +1 @@
1
- {"version":3,"file":"card-select.ui.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/card-select.ui.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAInD,eAAO,MAAM,qBAAqB,GAAI,mCAInC,cAAc,CAAC,cAAc,CAAC,4CAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,mCAI9B,cAAc,CAAC,cAAc,CAAC,4CAMhC,CAAC;AACF,UAAU,wBAAyB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AACD,eAAO,MAAM,mBAAmB,GAAI,6CAKjC,wBAAwB,4CAW1B,CAAC;AACF,UAAU,8BAA+B,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,eAAO,MAAM,yBAAyB,GAAI,qCAIvC,8BAA8B,4CAShC,CAAC"}
1
+ {"version":3,"file":"card-select.ui.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/card-select.ui.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,eAAO,MAAM,qBAAqB,GAAI,mCAInC,cAAc,CAAC,cAAc,CAAC,4CAMhC,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,mCAI9B,cAAc,CAAC,cAAc,CAAC,4CAMhC,CAAC;AACF,UAAU,wBAAyB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AACD,eAAO,MAAM,mBAAmB,GAAI,6CAKjC,wBAAwB,4CAW1B,CAAC;AACF,UAAU,8BAA+B,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7E,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,eAAO,MAAM,yBAAyB,GAAI,qCAIvC,8BAA8B,4CAShC,CAAC"}
@@ -5,4 +5,5 @@ export { default as TextboxUI } from './textbox.ui';
5
5
  export { default as TextareaUI } from './textarea.ui';
6
6
  export { default as InfoCardUI } from './info-card.ui';
7
7
  export { default as SelectBoxUI } from './select.ui';
8
+ export { default as RadioUI } from './radio.ui';
8
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,WAAW,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,aAAa,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC"}
@@ -4,4 +4,5 @@ export { default as CheckboxUI } from "./checkbox.ui";
4
4
  export { default as TextboxUI } from "./textbox.ui";
5
5
  export { default as TextareaUI } from "./textarea.ui";
6
6
  export { default as InfoCardUI } from "./info-card.ui";
7
- export { default as SelectBoxUI } from "./select.ui";
7
+ export { default as SelectBoxUI } from "./select.ui";
8
+ export { default as RadioUI } from "./radio.ui";
@@ -0,0 +1,14 @@
1
+ import { HTMLAttributes } from 'react';
2
+ interface RadioItemUIProps extends HTMLAttributes<HTMLInputElement> {
3
+ id?: string | undefined;
4
+ value?: string | number | undefined;
5
+ disabled?: boolean | undefined;
6
+ checked?: boolean | undefined;
7
+ onClick?: () => void;
8
+ }
9
+ declare const RadioUI: {
10
+ ({ id, value, disabled, checked, onClick, children, className, ...props }: RadioItemUIProps): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
+ export default RadioUI;
14
+ //# sourceMappingURL=radio.ui.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio.ui.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/radio.ui.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACjE,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,QAAA,MAAM,OAAO;+EASV,gBAAgB;;CAuBlB,CAAC;AAEF,eAAe,OAAO,CAAC"}
@@ -0,0 +1,45 @@
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", "value", "disabled", "checked", "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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
12
+ var RadioUI = function RadioUI(_ref) {
13
+ var id = _ref.id,
14
+ value = _ref.value,
15
+ disabled = _ref.disabled,
16
+ checked = _ref.checked,
17
+ _onClick = _ref.onClick,
18
+ children = _ref.children,
19
+ className = _ref.className,
20
+ props = _objectWithoutProperties(_ref, _excluded);
21
+ return /*#__PURE__*/_jsxs("div", {
22
+ className: clsx('flexmatch-radiobutton-item', className),
23
+ onClick: function onClick() {
24
+ return !disabled && (_onClick === null || _onClick === void 0 ? void 0 : _onClick());
25
+ },
26
+ children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({}, props), {}, {
27
+ type: "radio",
28
+ name: id,
29
+ readOnly: true,
30
+ checked: checked,
31
+ disabled: !!disabled,
32
+ className: 'flexmatch-radiobutton-input'
33
+ })), /*#__PURE__*/_jsx("span", {
34
+ className: clsx('flexmatch-radiobutton-icon', checked && 'checked'),
35
+ children: checked && /*#__PURE__*/_jsx("div", {
36
+ className: 'flexmatch-radiobutton-icon-checked'
37
+ })
38
+ }), /*#__PURE__*/_jsx("span", {
39
+ className: clsx('text-b2 flexmatch-radiobutton-label', disabled && 'disabled'),
40
+ children: children
41
+ })]
42
+ });
43
+ };
44
+ RadioUI.displayName = 'RadioContainerUI';
45
+ export default RadioUI;
@@ -1,7 +1,8 @@
1
1
  interface TextboxUIProps extends React.InputHTMLAttributes<HTMLInputElement> {
2
- label?: string;
2
+ label?: string | React.ReactNode | undefined;
3
3
  error?: boolean;
4
4
  height?: string | number | undefined;
5
+ labelSide?: 'left' | 'right';
5
6
  }
6
7
  declare const TextboxUI: import("react").ForwardRefExoticComponent<TextboxUIProps & import("react").RefAttributes<HTMLInputElement>>;
7
8
  export default TextboxUI;
@@ -1 +1 @@
1
- {"version":3,"file":"textbox.ui.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/textbox.ui.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACtC;AACD,QAAA,MAAM,SAAS,6GAgDd,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"textbox.ui.d.ts","sourceRoot":"","sources":["../../../src/components/atoms/textbox.ui.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAe,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AACD,QAAA,MAAM,SAAS,6GAsDd,CAAC;AAEF,eAAe,SAAS,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 = ["className", "label", "readOnly", "disabled", "error", "height"];
2
+ var _excluded = ["className", "label", "readOnly", "disabled", "error", "height", "labelSide"];
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; }
@@ -18,11 +18,13 @@ import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
18
18
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
19
19
  var TextboxUI = /*#__PURE__*/forwardRef(function (_ref, ref) {
20
20
  var className = _ref.className,
21
- label = _ref.label,
21
+ Label = _ref.label,
22
22
  readOnly = _ref.readOnly,
23
23
  disabled = _ref.disabled,
24
24
  error = _ref.error,
25
25
  height = _ref.height,
26
+ _ref$labelSide = _ref.labelSide,
27
+ labelSide = _ref$labelSide === void 0 ? 'right' : _ref$labelSide,
26
28
  props = _objectWithoutProperties(_ref, _excluded);
27
29
  var _useState = useState(0),
28
30
  _useState2 = _slicedToArray(_useState, 2),
@@ -30,10 +32,10 @@ var TextboxUI = /*#__PURE__*/forwardRef(function (_ref, ref) {
30
32
  setLabelWidth = _useState2[1];
31
33
  var labelRef = useRef(null);
32
34
  useEffect(function () {
33
- if (label && labelRef.current) {
35
+ if (Label && labelRef.current) {
34
36
  setLabelWidth(labelRef.current.offsetWidth);
35
37
  }
36
- }, [label]);
38
+ }, [Label]);
37
39
  var heightStyle = useMemo(function () {
38
40
  if (typeof height === 'number') {
39
41
  return "".concat(height, "px");
@@ -47,7 +49,8 @@ var TextboxUI = /*#__PURE__*/forwardRef(function (_ref, ref) {
47
49
  className: clsx('flexmatch-textbox-container', className),
48
50
  children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
49
51
  style: {
50
- paddingRight: "".concat(labelWidth + 14, "px"),
52
+ paddingRight: labelSide === 'right' ? "".concat(labelWidth + 16, "px") : '12px',
53
+ paddingLeft: labelSide === 'left' ? "".concat(labelWidth + 16, "px") : '12px',
51
54
  height: heightStyle
52
55
  },
53
56
  ref: ref
@@ -56,11 +59,11 @@ var TextboxUI = /*#__PURE__*/forwardRef(function (_ref, ref) {
56
59
  readOnly: readOnly,
57
60
  disabled: disabled,
58
61
  className: clsx(className, 'flexmatch-textbox', error && 'error')
59
- })), (label === null || label === void 0 ? void 0 : label.length) && /*#__PURE__*/_jsx("label", {
62
+ })), Label && /*#__PURE__*/_jsx("label", {
60
63
  htmlFor: props.id,
61
64
  ref: labelRef,
62
- className: clsx('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly'),
63
- children: label
65
+ className: clsx('flexmatch-textbox-label text-b3', disabled && 'disabled', readOnly && 'readonly', labelSide === 'left' ? 'left' : 'right'),
66
+ children: Label
64
67
  })]
65
68
  });
66
69
  });
@@ -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/lib/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/lib/index.js CHANGED
@@ -2,6 +2,7 @@
2
2
  export { IconCheck } from "./assets";
3
3
 
4
4
  // * atoms
5
+ export { default as RadioUI } from "./components/atoms/radio.ui";
5
6
  export { default as TextboxUI } from "./components/atoms/textbox.ui";
6
7
  export { default as TextareaUI } from "./components/atoms/textarea.ui";
7
8
  export { default as InfoCardUI } from "./components/atoms/info-card.ui";
@@ -12,4 +13,6 @@ export { default as InputOptionSwitch } from "./components/Input/Selectable/Inpu
12
13
  export { default as InputSelectbox } from "./components/Input/Selectable/InputSelectbox";
13
14
  export { default as InputCheckbox } from "./components/Input/Selectable/InputCheckbox";
14
15
  export { default as InputCardSelect } from "./components/Input/Selectable/InputCardSelect";
15
- export { default as InputRadiobutton } from "./components/Input/Selectable/InputRadiobutton";
16
+ export { default as InputRadiobutton } from "./components/Input/Selectable/InputRadiobutton";
17
+ export { default as InputButtonSelect } from "./components/Input/Selectable/InputButtonSelect";
18
+ export { default as InputButtonMultiSelect } from "./components/Input/Selectable/InputButtonMultiSelect";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flexmatch-dev/react-ui",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "React UI component library by FlexMatch",
5
5
  "repository": {
6
6
  "type": "git",