@driveflux/beam 3.0.9 → 3.0.10

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 (222) hide show
  1. package/dist/accordion/Accordion.js +7 -133
  2. package/dist/accordion/Accordion.stories.js +11 -31
  3. package/dist/alert/Alert.js +19 -120
  4. package/dist/alert/Alert.stories.js +15 -50
  5. package/dist/animations/LoadingAnimation.js +21 -34
  6. package/dist/badge/Badge.js +7 -96
  7. package/dist/badge/Badge.stories.js +7 -28
  8. package/dist/box/Box.js +3 -87
  9. package/dist/box/Box.stories.js +7 -8
  10. package/dist/breadcrumbs/Breadcrumbs.js +28 -288
  11. package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
  12. package/dist/button/Button.js +16 -128
  13. package/dist/button/Button.js.map +1 -1
  14. package/dist/button/Button.stories.js +7 -35
  15. package/dist/button/TextButton.js +11 -106
  16. package/dist/button/TextButton.js.map +1 -1
  17. package/dist/card/Card.js +7 -109
  18. package/dist/card/Card.stories.js +7 -10
  19. package/dist/carousel/Carousel.js +58 -281
  20. package/dist/carousel/Carousel.stories.js +7 -39
  21. package/dist/carousel/CarouselButton.js +7 -68
  22. package/dist/center/Center.js +3 -63
  23. package/dist/center/Center.stories.js +7 -19
  24. package/dist/checkbox/Checkbox.js +4 -124
  25. package/dist/checkbox/Checkbox.stories.js +8 -10
  26. package/dist/chip/Chip.js +3 -104
  27. package/dist/chip/Chip.stories.js +7 -19
  28. package/dist/circular-progress/CircularProgress.js +11 -150
  29. package/dist/circular-progress/CircularProgress.stories.js +14 -54
  30. package/dist/command/command.js +13 -170
  31. package/dist/datepicker/DatePicker.js +90 -234
  32. package/dist/datepicker/DatePicker.stories.js +58 -163
  33. package/dist/datepicker/DatePickerDrawer.js +17 -116
  34. package/dist/datepicker/DatePickerPopover.js +35 -208
  35. package/dist/datepicker/constants.js +4 -3
  36. package/dist/datepicker/utils.js +11 -4
  37. package/dist/dialog/index.js +33 -180
  38. package/dist/divider/Divider.js +3 -63
  39. package/dist/divider/Divider.stories.js +7 -13
  40. package/dist/drawer/index.js +12 -157
  41. package/dist/dropdown/Dropdown.js +26 -212
  42. package/dist/dropdown/Dropdown.stories.js +22 -109
  43. package/dist/field-wrapper/FieldWrapper.js +3 -139
  44. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  45. package/dist/flex/Flex.js +3 -63
  46. package/dist/flex/Flex.stories.js +7 -19
  47. package/dist/grid/Grid.js +3 -63
  48. package/dist/grid/Grid.stories.js +7 -28
  49. package/dist/hooks/use-breakpoint-value.js +14 -77
  50. package/dist/hooks/use-media-query.js +12 -61
  51. package/dist/hstack/HStack.js +3 -63
  52. package/dist/hstack/HStack.stories.js +7 -19
  53. package/dist/icons/FluxLogo.js +9 -213
  54. package/dist/icons/FluxLogoTable.js +5 -109
  55. package/dist/icons/Icon.js +7 -108
  56. package/dist/icons/Icon.stories.js +7 -12
  57. package/dist/icons/Icon24Hours.js +5 -83
  58. package/dist/icons/IconAcceleration.js +4 -72
  59. package/dist/icons/IconAccount.js +4 -72
  60. package/dist/icons/IconApplicant.js +5 -78
  61. package/dist/icons/IconArrow.js +6 -78
  62. package/dist/icons/IconArrowBack.js +4 -72
  63. package/dist/icons/IconArrowForward.js +4 -72
  64. package/dist/icons/IconArrowTopLeft.js +4 -70
  65. package/dist/icons/IconBluesharkProductGuide.js +5 -80
  66. package/dist/icons/IconBolt.js +4 -72
  67. package/dist/icons/IconBriefcase.js +4 -72
  68. package/dist/icons/IconBulb.js +4 -72
  69. package/dist/icons/IconCalendar.js +4 -72
  70. package/dist/icons/IconCalendarArrowBack.js +4 -72
  71. package/dist/icons/IconCalendarArrowForward.js +4 -72
  72. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
  73. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
  74. package/dist/icons/IconCancel.js +5 -77
  75. package/dist/icons/IconCancelMark.js +4 -72
  76. package/dist/icons/IconCarSUV.js +4 -72
  77. package/dist/icons/IconCarSedan.js +7 -147
  78. package/dist/icons/IconChain.js +5 -79
  79. package/dist/icons/IconCheckmark.js +4 -72
  80. package/dist/icons/IconChevronRight.js +4 -72
  81. package/dist/icons/IconCircle.js +11 -114
  82. package/dist/icons/IconCircleCheckmark.js +5 -77
  83. package/dist/icons/IconCircleError.js +4 -72
  84. package/dist/icons/IconCircleExclamation.js +6 -104
  85. package/dist/icons/IconCircleMark.js +5 -78
  86. package/dist/icons/IconCircleOutline.js +5 -139
  87. package/dist/icons/IconClock.js +5 -80
  88. package/dist/icons/IconClose.js +4 -72
  89. package/dist/icons/IconCollapseAll.js +5 -94
  90. package/dist/icons/IconConcierge.js +5 -79
  91. package/dist/icons/IconConciergeService.js +5 -87
  92. package/dist/icons/IconCreditCard.js +5 -78
  93. package/dist/icons/IconDash.js +4 -72
  94. package/dist/icons/IconDeliver.js +4 -72
  95. package/dist/icons/IconDelivery.js +5 -87
  96. package/dist/icons/IconDetails.js +4 -72
  97. package/dist/icons/IconDot.js +6 -87
  98. package/dist/icons/IconDownload.js +5 -79
  99. package/dist/icons/IconEVCharging.js +5 -79
  100. package/dist/icons/IconElectricCarFuel.js +5 -80
  101. package/dist/icons/IconEllipsis.js +5 -78
  102. package/dist/icons/IconEnvelope.js +4 -72
  103. package/dist/icons/IconExpandAll.js +5 -94
  104. package/dist/icons/IconEye.js +5 -79
  105. package/dist/icons/IconFacebook.js +6 -94
  106. package/dist/icons/IconFilter.js +5 -83
  107. package/dist/icons/IconFlagMalaysia.js +5 -141
  108. package/dist/icons/IconGiveKey.js +5 -79
  109. package/dist/icons/IconGlobe.js +4 -70
  110. package/dist/icons/IconGoogle.js +5 -87
  111. package/dist/icons/IconHome.js +5 -78
  112. package/dist/icons/IconHostAdvertise.js +4 -72
  113. package/dist/icons/IconHostCar.js +4 -75
  114. package/dist/icons/IconHostCash.js +5 -91
  115. package/dist/icons/IconHostHandle.js +4 -70
  116. package/dist/icons/IconHostLocation.js +4 -70
  117. package/dist/icons/IconHostPayment.js +5 -91
  118. package/dist/icons/IconHostService.js +5 -79
  119. package/dist/icons/IconHotDeals.js +4 -72
  120. package/dist/icons/IconInfo.js +5 -77
  121. package/dist/icons/IconInstagram.js +4 -72
  122. package/dist/icons/IconInsurance.js +5 -99
  123. package/dist/icons/IconInternet.js +4 -73
  124. package/dist/icons/IconInventory.js +5 -78
  125. package/dist/icons/IconLaurel.js +5 -101
  126. package/dist/icons/IconLinkedIn.js +4 -72
  127. package/dist/icons/IconLoading.js +4 -78
  128. package/dist/icons/IconLocation.js +5 -80
  129. package/dist/icons/IconLock.js +4 -73
  130. package/dist/icons/IconLogistics.js +4 -72
  131. package/dist/icons/IconMail.js +5 -94
  132. package/dist/icons/IconMember.js +5 -78
  133. package/dist/icons/IconMobilePen.js +5 -83
  134. package/dist/icons/IconMotorcycleMoped.js +5 -78
  135. package/dist/icons/IconNoCost.js +5 -92
  136. package/dist/icons/IconPDF.js +5 -80
  137. package/dist/icons/IconPencil.js +4 -70
  138. package/dist/icons/IconPhone.js +4 -70
  139. package/dist/icons/IconPlus.js +4 -72
  140. package/dist/icons/IconPricing.js +4 -72
  141. package/dist/icons/IconProtected.js +4 -71
  142. package/dist/icons/IconPsychology.js +4 -72
  143. package/dist/icons/IconQuestionTooltip.js +4 -73
  144. package/dist/icons/IconQuote.js +4 -72
  145. package/dist/icons/IconRate.js +4 -71
  146. package/dist/icons/IconRegister.js +5 -99
  147. package/dist/icons/IconReport.js +6 -89
  148. package/dist/icons/IconReturn.js +4 -72
  149. package/dist/icons/IconSearch.js +4 -70
  150. package/dist/icons/IconSecure.js +4 -71
  151. package/dist/icons/IconSecurity.js +4 -73
  152. package/dist/icons/IconSedanOutline.js +5 -159
  153. package/dist/icons/IconSelectArrow.js +6 -78
  154. package/dist/icons/IconSort.js +5 -79
  155. package/dist/icons/IconSortListed.js +5 -95
  156. package/dist/icons/IconSortPriceAscending.js +5 -83
  157. package/dist/icons/IconSortPriceDescending.js +5 -83
  158. package/dist/icons/IconSortYear.js +5 -79
  159. package/dist/icons/IconSpan.js +4 -71
  160. package/dist/icons/IconSpeaker.js +4 -79
  161. package/dist/icons/IconSpecialCar.js +5 -95
  162. package/dist/icons/IconStar.js +7 -92
  163. package/dist/icons/IconStockPhoto.js +5 -95
  164. package/dist/icons/IconSubscription.js +6 -113
  165. package/dist/icons/IconSubscriptions.js +6 -113
  166. package/dist/icons/IconSwap.js +5 -79
  167. package/dist/icons/IconTax.js +4 -72
  168. package/dist/icons/IconThinArrow.js +6 -78
  169. package/dist/icons/IconThumbsdown.js +5 -78
  170. package/dist/icons/IconThumbsup.js +5 -78
  171. package/dist/icons/IconTool.js +4 -72
  172. package/dist/icons/IconTooltip.js +4 -73
  173. package/dist/icons/IconTrash.js +4 -72
  174. package/dist/icons/IconTriangleExclamation.js +4 -72
  175. package/dist/icons/IconTyersBrakes.js +5 -83
  176. package/dist/icons/IconTyre.js +5 -83
  177. package/dist/icons/IconVacancy.js +5 -78
  178. package/dist/icons/IconVolunteer.js +4 -72
  179. package/dist/icons/IconWhatsapp.js +4 -73
  180. package/dist/icons/IconXPlatform.js +4 -72
  181. package/dist/icons/IconZeroEffort.js +5 -77
  182. package/dist/icons/Logo.js +3 -99
  183. package/dist/input/Input.js +11 -125
  184. package/dist/input/Input.stories.js +18 -17
  185. package/dist/input-mask/InputMask.js +11 -149
  186. package/dist/input-mask/InputMask.stories.js +6 -5
  187. package/dist/input-mask/mask-trackers.js +5 -4
  188. package/dist/input-select/InputSelect.js +68 -357
  189. package/dist/input-select/InputSelect.stories.js +25 -98
  190. package/dist/popover/popover.js +4 -72
  191. package/dist/progress/Progress.js +2 -96
  192. package/dist/progress/Progress.stories.js +14 -13
  193. package/dist/radio/Radio.js +4 -163
  194. package/dist/scroll-area/scroll-area.js +5 -113
  195. package/dist/search-input-select/SearchInputSelect.js +69 -346
  196. package/dist/select/Select.js +29 -315
  197. package/dist/select/Select.stories.js +19 -55
  198. package/dist/skeleton/Skeleton.js +3 -62
  199. package/dist/skeleton/Skeleton.stories.js +7 -8
  200. package/dist/slider/Slider.js +5 -106
  201. package/dist/slider/Slider.stories.js +11 -12
  202. package/dist/stack/Stack.js +3 -63
  203. package/dist/stack/Stack.stories.js +7 -19
  204. package/dist/table/Table.js +10 -131
  205. package/dist/table/Table.stories.js +8 -84
  206. package/dist/tabs/Tabs.js +9 -128
  207. package/dist/tabs/Tabs.stories.js +13 -46
  208. package/dist/text/Text.js +6 -88
  209. package/dist/text/Text.js.map +1 -1
  210. package/dist/text/Text.stories.js +7 -44
  211. package/dist/toast/Toast.stories.js +14 -66
  212. package/dist/toast/ToastBox.js +29 -77
  213. package/dist/toast/index.js +1 -0
  214. package/dist/toast/sonner.js +6 -66
  215. package/dist/toggle/Toggle.js +7 -116
  216. package/dist/toggle/Toggle.stories.js +8 -10
  217. package/dist/tooltip/Tooltip.js +12 -151
  218. package/dist/tooltip/Tooltip.stories.js +13 -71
  219. package/dist/utils.js +2 -4
  220. package/dist/vstack/VStack.js +3 -63
  221. package/dist/vstack/VStack.stories.js +7 -19
  222. package/package.json +1 -1
@@ -1,129 +1,4 @@
1
1
  'use client';
2
- function _array_like_to_array(arr, len) {
3
- if (len == null || len > arr.length) len = arr.length;
4
- for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
5
- return arr2;
6
- }
7
- function _array_with_holes(arr) {
8
- if (Array.isArray(arr)) return arr;
9
- }
10
- function _define_property(obj, key, value) {
11
- if (key in obj) {
12
- Object.defineProperty(obj, key, {
13
- value: value,
14
- enumerable: true,
15
- configurable: true,
16
- writable: true
17
- });
18
- } else {
19
- obj[key] = value;
20
- }
21
- return obj;
22
- }
23
- function _iterable_to_array_limit(arr, i) {
24
- var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
25
- if (_i == null) return;
26
- var _arr = [];
27
- var _n = true;
28
- var _d = false;
29
- var _s, _e;
30
- try {
31
- for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
32
- _arr.push(_s.value);
33
- if (i && _arr.length === i) break;
34
- }
35
- } catch (err) {
36
- _d = true;
37
- _e = err;
38
- } finally{
39
- try {
40
- if (!_n && _i["return"] != null) _i["return"]();
41
- } finally{
42
- if (_d) throw _e;
43
- }
44
- }
45
- return _arr;
46
- }
47
- function _non_iterable_rest() {
48
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
49
- }
50
- function _object_spread(target) {
51
- for(var i = 1; i < arguments.length; i++){
52
- var source = arguments[i] != null ? arguments[i] : {};
53
- var ownKeys = Object.keys(source);
54
- if (typeof Object.getOwnPropertySymbols === "function") {
55
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
56
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
57
- }));
58
- }
59
- ownKeys.forEach(function(key) {
60
- _define_property(target, key, source[key]);
61
- });
62
- }
63
- return target;
64
- }
65
- function ownKeys(object, enumerableOnly) {
66
- var keys = Object.keys(object);
67
- if (Object.getOwnPropertySymbols) {
68
- var symbols = Object.getOwnPropertySymbols(object);
69
- if (enumerableOnly) {
70
- symbols = symbols.filter(function(sym) {
71
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
72
- });
73
- }
74
- keys.push.apply(keys, symbols);
75
- }
76
- return keys;
77
- }
78
- function _object_spread_props(target, source) {
79
- source = source != null ? source : {};
80
- if (Object.getOwnPropertyDescriptors) {
81
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
82
- } else {
83
- ownKeys(Object(source)).forEach(function(key) {
84
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
85
- });
86
- }
87
- return target;
88
- }
89
- function _object_without_properties(source, excluded) {
90
- if (source == null) return {};
91
- var target = _object_without_properties_loose(source, excluded);
92
- var key, i;
93
- if (Object.getOwnPropertySymbols) {
94
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
95
- for(i = 0; i < sourceSymbolKeys.length; i++){
96
- key = sourceSymbolKeys[i];
97
- if (excluded.indexOf(key) >= 0) continue;
98
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
99
- target[key] = source[key];
100
- }
101
- }
102
- return target;
103
- }
104
- function _object_without_properties_loose(source, excluded) {
105
- if (source == null) return {};
106
- var target = {};
107
- var sourceKeys = Object.keys(source);
108
- var key, i;
109
- for(i = 0; i < sourceKeys.length; i++){
110
- key = sourceKeys[i];
111
- if (excluded.indexOf(key) >= 0) continue;
112
- target[key] = source[key];
113
- }
114
- return target;
115
- }
116
- function _sliced_to_array(arr, i) {
117
- return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
118
- }
119
- function _unsupported_iterable_to_array(o, minLen) {
120
- if (!o) return;
121
- if (typeof o === "string") return _array_like_to_array(o, minLen);
122
- var n = Object.prototype.toString.call(o).slice(8, -1);
123
- if (n === "Object" && o.constructor) n = o.constructor.name;
124
- if (n === "Map" || n === "Set") return Array.from(n);
125
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
126
- }
127
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
128
3
  import { Command as CommandPrimitive } from 'cmdk';
129
4
  import * as React from 'react';
@@ -132,215 +7,112 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
132
7
  import IconClose from '../icons/IconClose';
133
8
  import IconSelectArrow from '../icons/IconSelectArrow';
134
9
  import { cn } from '../utils';
135
- var Command = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
136
- var className = _param.className, props = _object_without_properties(_param, [
137
- "className"
138
- ]);
139
- return /*#__PURE__*/ _jsx(CommandPrimitive, _object_spread({
140
- ref: ref,
141
- className: cn('flex relative w-full', className)
142
- }, props));
143
- });
10
+ const Command = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive, { ref: ref, className: cn('flex relative w-full', className), ...props })));
144
11
  Command.displayName = CommandPrimitive.displayName;
145
- var CommandInput = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
146
- var className = _param.className, error = _param.error, prefix = _param.prefix, isFocused = _param.isFocused, isSelected = _param.isSelected, handleToggle = _param.handleToggle, handleClear = _param.handleClear, props = _object_without_properties(_param, [
147
- "className",
148
- "error",
149
- "prefix",
150
- "isFocused",
151
- "isSelected",
152
- "handleToggle",
153
- "handleClear"
154
- ]);
155
- return /*#__PURE__*/ _jsxs("div", {
156
- ref: ref,
157
- className: cn('flex items-center gap-2 h-10 w-full border border-primary2 bg-white text-sm cursor-pointer outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-none rounded-lg', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className),
158
- children: [
159
- prefix,
160
- /*#__PURE__*/ _jsx(CommandPrimitive.Input, _object_spread_props(_object_spread({
161
- className: cn('border-none h-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-normal w-full cursor-pointer disabled:cursor-not-allowed disabled:bg-primary1 disabled:text-primary3 rounded-lg'),
162
- disabled: props.disabled
163
- }, props), {
164
- onClick: function(_e) {
165
- if (isSelected) {
166
- isFocused = true;
167
- } else if (!isFocused) {
168
- handleToggle();
169
- }
12
+ const CommandInput = React.forwardRef(({ className, error, prefix, isFocused, isSelected, handleToggle, handleClear, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn('flex items-center gap-2 h-10 w-full border border-primary2 bg-white text-sm cursor-pointer outline-none file:border-0 file:bg-transparent file:text-sm file:font-medium hover:border-black focus-within:border-black focus-within:outline-none rounded-lg', error && 'border-alert4 hover:border-alert4 focus-within:border-alert4', className), children: [prefix, _jsx(CommandPrimitive.Input, { className: cn('border-none h-full px-3 outline-hidden text-ellipsis placeholder:text-primary2 placeholder:tracking-normal w-full cursor-pointer disabled:cursor-not-allowed disabled:bg-primary1 disabled:text-primary3 rounded-lg'), disabled: props.disabled, ...props, onClick: (_e) => {
13
+ if (isSelected) {
14
+ isFocused = true;
170
15
  }
171
- })),
172
- !props.disabled && /*#__PURE__*/ _jsx(Box, {
173
- className: "flex items-center justify-center w-8 h-8 mx-1",
174
- style: {
175
- pointerEvents: 'auto'
176
- },
177
- children: isSelected ? /*#__PURE__*/ _jsx(IconClose, {
178
- className: "text-black",
179
- onClick: function(e) {
180
- e.preventDefault();
181
- e.stopPropagation();
182
- handleClear(e);
183
- }
184
- }) : /*#__PURE__*/ _jsx(IconSelectArrow, {
185
- variant: isFocused ? 'up' : 'down',
186
- onClick: function() {
187
- return handleToggle();
188
- }
189
- })
190
- })
191
- ]
192
- });
193
- });
16
+ else if (!isFocused) {
17
+ handleToggle();
18
+ }
19
+ } }), !props.disabled && (_jsx(Box, { className: "flex items-center justify-center w-8 h-8 mx-1", style: { pointerEvents: 'auto' }, children: isSelected ? (_jsx(IconClose, { className: "text-black", onClick: (e) => {
20
+ e.preventDefault();
21
+ e.stopPropagation();
22
+ handleClear(e);
23
+ } })) : (_jsx(IconSelectArrow, { variant: isFocused ? 'up' : 'down', onClick: () => handleToggle() })) }))] })));
194
24
  CommandInput.displayName = CommandPrimitive.Input.displayName;
195
- var CommandList = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
196
- var className = _param.className, position = _param.position, props = _object_without_properties(_param, [
197
- "className",
198
- "position"
199
- ]);
200
- return /*#__PURE__*/ _jsx(CommandPrimitive.List, _object_spread({
201
- ref: ref,
202
- className: cn('max-h-80 absolute left-0 right-0 mt-1 shadow-md overflow-y-auto overflow-x-hidden z-50 bg-white rounded-lg', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className)
203
- }, props));
25
+ const CommandList = React.forwardRef(({ className, position, ...props }, ref) => {
26
+ return (_jsx(CommandPrimitive.List, { ref: ref, className: cn('max-h-80 absolute left-0 right-0 mt-1 shadow-md overflow-y-auto overflow-x-hidden z-50 bg-white rounded-lg', position === 'top' ? 'bottom-full mb-1' : 'top-full mt-1', className), ...props }));
204
27
  });
205
28
  CommandList.displayName = CommandPrimitive.List.displayName;
206
- var CommandEmpty = /*#__PURE__*/ React.forwardRef(function(props, ref) {
207
- return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, _object_spread({
208
- ref: ref,
209
- className: "p-4 text-center text-sm text-primary3"
210
- }, props));
211
- });
29
+ const CommandEmpty = React.forwardRef((props, ref) => (_jsx(CommandPrimitive.Empty, { ref: ref, className: "p-4 text-center text-sm text-primary3", ...props })));
212
30
  CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
213
- var CommandGroup = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
214
- var className = _param.className, props = _object_without_properties(_param, [
215
- "className"
216
- ]);
217
- return /*#__PURE__*/ _jsx(CommandPrimitive.Group, _object_spread({
218
- ref: ref,
219
- className: cn('overflow-hidden p-1 text-zinc-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500 dark:text-zinc-50 dark:[&_[cmdk-group-heading]]:text-zinc-400', className)
220
- }, props));
221
- });
31
+ const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Group, { ref: ref, className: cn('overflow-hidden p-1 text-zinc-950 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-zinc-500 dark:text-zinc-50 dark:[&_[cmdk-group-heading]]:text-zinc-400', className), ...props })));
222
32
  CommandGroup.displayName = CommandPrimitive.Group.displayName;
223
- var CommandSeparator = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
224
- var className = _param.className, props = _object_without_properties(_param, [
225
- "className"
226
- ]);
227
- return /*#__PURE__*/ _jsx(CommandPrimitive.Separator, _object_spread({
228
- ref: ref,
229
- className: cn('-mx-1 h-px bg-zinc-200 dark:bg-zinc-800', className)
230
- }, props));
231
- });
33
+ const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Separator, { ref: ref, className: cn('-mx-1 h-px bg-zinc-200 dark:bg-zinc-800', className), ...props })));
232
34
  CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
233
- var CommandItem = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
234
- var className = _param.className, props = _object_without_properties(_param, [
235
- "className"
236
- ]);
237
- return /*#__PURE__*/ _jsx(CommandPrimitive.Item, _object_spread({
238
- ref: ref,
239
- className: cn('relative flex cursor-pointer select-none items-center rounded-xs px-4 h-10 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-primary1 data-[disabled=true]:text-primary2 data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className)
240
- }, props));
241
- });
35
+ const CommandItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(CommandPrimitive.Item, { ref: ref, className: cn('relative flex cursor-pointer select-none items-center rounded-xs px-4 h-10 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-primary1 data-[disabled=true]:text-primary2 data-[selected=true]:bg-zinc-100 data-[selected=true]:text-zinc-900 dark:data-[selected=true]:bg-zinc-800 dark:data-[selected=true]:text-zinc-50', className), ...props })));
242
36
  CommandItem.displayName = CommandPrimitive.Item.displayName;
243
- var CommandShortcut = function(_param) {
244
- var className = _param.className, props = _object_without_properties(_param, [
245
- "className"
246
- ]);
247
- return /*#__PURE__*/ _jsx("span", _object_spread({
248
- className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className)
249
- }, props));
37
+ const CommandShortcut = ({ className, ...props }) => {
38
+ return (_jsx("span", { className: cn('ml-auto text-xs tracking-widest text-zinc-500 dark:text-zinc-400', className), ...props }));
250
39
  };
251
40
  CommandShortcut.displayName = 'CommandShortcut';
252
- var InputSelect = /*#__PURE__*/ React.forwardRef(function(props, _ref) {
253
- var _options_find;
254
- var // for wrapper
255
- wrapperProps = props.wrapperProps, htmlFor = props.htmlFor, label = props.label, showRequired = props.showRequired, showOptional = props.showOptional, outerPrefix = props.outerPrefix, outerSuffix = props.outerSuffix, error = props.error, // for Select
256
- providedValue = props.value, placeholder = props.placeholder, prefix = props.prefix, options = props.options, noOptionsText = props.noOptionsText, onChange = props.onChange, _props_isClearable = props.isClearable, isClearable = _props_isClearable === void 0 ? true : _props_isClearable, isDisabled = props.isDisabled, selectProps = _object_without_properties(props, [
257
- "wrapperProps",
258
- "htmlFor",
259
- "label",
260
- "showRequired",
261
- "showOptional",
262
- "outerPrefix",
263
- "outerSuffix",
264
- "error",
265
- "value",
266
- "placeholder",
267
- "prefix",
268
- "options",
269
- "noOptionsText",
270
- "onChange",
271
- "isClearable",
272
- "isDisabled"
273
- ]);
274
- var _React_useState = _sliced_to_array(React.useState(false), 2), isFocused = _React_useState[0], setIsFocused = _React_useState[1];
275
- var _React_useState1 = _sliced_to_array(React.useState(''), 2), search = _React_useState1[0], setSearch = _React_useState1[1];
276
- var _React_useState2 = _sliced_to_array(React.useState(providedValue), 2), value = _React_useState2[0], setValue = _React_useState2[1];
277
- var inputRef = React.useRef(null);
278
- var _listRef = React.useRef(null);
279
- var wrapperRef = React.useRef(null);
280
- var _React_useState3 = _sliced_to_array(React.useState('bottom'), 2), position = _React_useState3[0], setPosition = _React_useState3[1];
281
- var handleFocus = function() {
41
+ const InputSelect = React.forwardRef((props, _ref) => {
42
+ const {
43
+ // for wrapper
44
+ wrapperProps, htmlFor, label, showRequired, showOptional, outerPrefix, outerSuffix, error,
45
+ // for Select
46
+ value: providedValue, placeholder, prefix, options, noOptionsText, onChange, isClearable = true, isDisabled, ...selectProps } = props;
47
+ const [isFocused, setIsFocused] = React.useState(false);
48
+ const [search, setSearch] = React.useState('');
49
+ const [value, setValue] = React.useState(providedValue);
50
+ const inputRef = React.useRef(null);
51
+ const _listRef = React.useRef(null);
52
+ const wrapperRef = React.useRef(null);
53
+ const [position, setPosition] = React.useState('bottom');
54
+ const handleFocus = () => {
282
55
  if (!isDisabled) {
283
56
  setIsFocused(true);
284
57
  }
285
58
  };
286
- var handleBlur = function(e) {
59
+ const handleBlur = (e) => {
287
60
  if (e.relatedTarget === null) {
288
- var _inputRef_current;
289
61
  setIsFocused(false);
290
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur();
62
+ inputRef.current?.blur();
291
63
  }
292
64
  };
293
- var handleChange = function(value) {
65
+ const handleChange = (value) => {
294
66
  setSearch(value);
295
67
  };
296
- var handleSelect = function(option) {
297
- var _inputRef_current;
68
+ const handleSelect = (option) => {
298
69
  setSearch(option.label);
299
- onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
70
+ onChange?.(option.value);
300
71
  setValue(option.value);
301
72
  setIsFocused(false);
302
- (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
73
+ inputRef.current?.focus();
303
74
  };
304
- var handleToggle = function() {
75
+ const handleToggle = () => {
305
76
  if (!isDisabled) {
306
- setIsFocused(function(isFocused) {
307
- var _inputRef_current;
308
- isFocused && ((_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.blur());
77
+ setIsFocused((isFocused) => {
78
+ isFocused && inputRef.current?.blur();
309
79
  return !isFocused;
310
80
  });
311
81
  }
312
82
  };
313
- var handleClear = function(event) {
83
+ const handleClear = (event) => {
314
84
  if (!isDisabled) {
315
85
  event.preventDefault();
316
86
  event.stopPropagation();
317
87
  setSearch('');
318
88
  setIsFocused(false);
319
- onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
89
+ onChange?.(undefined);
320
90
  setValue(undefined);
321
91
  }
322
92
  };
323
- var handleClickOutside = function(event) {
324
- if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
93
+ const handleClickOutside = (event) => {
94
+ if (wrapperRef.current &&
95
+ !wrapperRef.current.contains(event.target)) {
325
96
  setIsFocused(false);
326
97
  }
327
98
  };
328
99
  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
329
- React.useEffect(function() {
100
+ React.useEffect(() => {
330
101
  document.addEventListener('mousedown', handleClickOutside);
331
- return function() {
102
+ return () => {
332
103
  document.removeEventListener('mousedown', handleClickOutside);
333
104
  };
334
105
  }, []);
335
- React.useEffect(function() {
336
- var handlePosition = function() {
106
+ React.useEffect(() => {
107
+ const handlePosition = () => {
337
108
  if (inputRef && 'current' in inputRef && inputRef.current) {
338
- var rect = inputRef.current.getBoundingClientRect();
339
- var spaceBelow = window.innerHeight - rect.bottom;
340
- var spaceAbove = rect.top;
109
+ const rect = inputRef.current.getBoundingClientRect();
110
+ const spaceBelow = window.innerHeight - rect.bottom;
111
+ const spaceAbove = rect.top;
341
112
  if (spaceAbove > spaceBelow) {
342
113
  setPosition('top');
343
- } else {
114
+ }
115
+ else {
344
116
  setPosition('bottom');
345
117
  }
346
118
  }
@@ -348,81 +120,20 @@ var InputSelect = /*#__PURE__*/ React.forwardRef(function(props, _ref) {
348
120
  handlePosition();
349
121
  window.addEventListener('resize', handlePosition);
350
122
  window.addEventListener('scroll', handlePosition);
351
- return function() {
123
+ return () => {
352
124
  window.removeEventListener('resize', handlePosition);
353
125
  window.removeEventListener('scroll', handlePosition);
354
126
  };
355
127
  }, []);
356
- return /*#__PURE__*/ _jsx(FieldWrapper, _object_spread_props(_object_spread({
357
- htmlFor: htmlFor,
358
- label: label,
359
- showOptional: showOptional,
360
- showRequired: showRequired,
361
- outerPrefix: outerPrefix,
362
- outerSuffix: outerSuffix,
363
- error: error
364
- }, wrapperProps), {
365
- children: /*#__PURE__*/ _jsx("div", {
366
- ref: wrapperRef,
367
- className: "relative w-full",
368
- children: /*#__PURE__*/ _jsxs(Command, {
369
- shouldFilter: false,
370
- onFocus: handleFocus,
371
- onBlur: handleBlur,
372
- children: [
373
- /*#__PURE__*/ _jsx(CommandInput, _object_spread_props(_object_spread({}, selectProps), {
374
- disabled: isDisabled,
375
- ref: inputRef,
376
- placeholder: placeholder,
377
- value: isFocused ? search : ((_options_find = options.find(function(option) {
378
- return option.value === value;
379
- })) === null || _options_find === void 0 ? void 0 : _options_find.label) || '',
380
- isFocused: isFocused,
381
- isSelected: !!value,
382
- prefix: prefix,
383
- error: !!error,
384
- onValueChange: handleChange,
385
- handleToggle: handleToggle,
386
- handleClear: handleClear
387
- })),
388
- /*#__PURE__*/ _jsx(CommandList, {
389
- position: position,
390
- children: isFocused && !isDisabled && /*#__PURE__*/ _jsxs(_Fragment, {
391
- children: [
392
- options.length > 0 && search ? options.filter(function(option) {
393
- return option.label.toLowerCase().includes(search.toLowerCase());
394
- }).map(function(option) {
395
- return /*#__PURE__*/ _jsx(CommandItem, {
396
- value: JSON.stringify(option.value),
397
- disabled: option.isDisabled,
398
- onSelect: function() {
399
- return handleSelect(option);
400
- },
401
- className: "tracking-normal text-primary3 w-full",
402
- children: option.label
403
- }, option.label);
404
- }) : options.map(function(option) {
405
- return /*#__PURE__*/ _jsx(CommandItem, {
406
- value: JSON.stringify(option.value),
407
- disabled: option.isDisabled,
408
- onSelect: function() {
409
- return handleSelect(option);
410
- },
411
- className: "tracking-normal text-primary3 w-full",
412
- children: option.label
413
- }, option.label);
414
- }),
415
- options.filter(function(option) {
416
- return option.label.toLowerCase().includes(search.toLowerCase());
417
- }).length === 0 && /*#__PURE__*/ _jsx(CommandEmpty, {
418
- children: noOptionsText || 'No options'
419
- })
420
- ]
421
- })
422
- })
423
- ]
424
- })
425
- })
426
- }));
128
+ return (_jsx(FieldWrapper, { htmlFor: htmlFor, label: label, showOptional: showOptional, showRequired: showRequired, outerPrefix: outerPrefix, outerSuffix: outerSuffix, error: error, ...wrapperProps, children: _jsx("div", { ref: wrapperRef, className: "relative w-full", children: _jsxs(Command, { shouldFilter: false, onFocus: handleFocus, onBlur: handleBlur, children: [_jsx(CommandInput, { ...selectProps, disabled: isDisabled, ref: inputRef, placeholder: placeholder, value: isFocused
129
+ ? search
130
+ : options.find((option) => option.value === value)?.label || '', isFocused: isFocused, isSelected: !!value, prefix: prefix, error: !!error, onValueChange: handleChange, handleToggle: handleToggle, handleClear: handleClear }), _jsx(CommandList, { position: position, children: isFocused && !isDisabled && (_jsxs(_Fragment, { children: [options.length > 0 && search
131
+ ? options
132
+ .filter((option) => option.label
133
+ .toLowerCase()
134
+ .includes(search.toLowerCase()))
135
+ .map((option) => (_jsx(CommandItem, { value: JSON.stringify(option.value), disabled: option.isDisabled, onSelect: () => handleSelect(option), className: "tracking-normal text-primary3 w-full", children: option.label }, option.label)))
136
+ : options.map((option) => (_jsx(CommandItem, { value: JSON.stringify(option.value), disabled: option.isDisabled, onSelect: () => handleSelect(option), className: "tracking-normal text-primary3 w-full", children: option.label }, option.label))), options.filter((option) => option.label.toLowerCase().includes(search.toLowerCase())).length === 0 && (_jsx(CommandEmpty, { children: noOptionsText || 'No options' }))] })) })] }) }) }));
427
137
  });
428
138
  export default InputSelect;
139
+ //# sourceMappingURL=InputSelect.js.map
@@ -1,120 +1,47 @@
1
- function _array_like_to_array(arr, len) {
2
- if (len == null || len > arr.length) len = arr.length;
3
- for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
4
- return arr2;
5
- }
6
- function _array_without_holes(arr) {
7
- if (Array.isArray(arr)) return _array_like_to_array(arr);
8
- }
9
- function _define_property(obj, key, value) {
10
- if (key in obj) {
11
- Object.defineProperty(obj, key, {
12
- value: value,
13
- enumerable: true,
14
- configurable: true,
15
- writable: true
16
- });
17
- } else {
18
- obj[key] = value;
19
- }
20
- return obj;
21
- }
22
- function _iterable_to_array(iter) {
23
- if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
24
- }
25
- function _non_iterable_spread() {
26
- throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
27
- }
28
- function _object_spread(target) {
29
- for(var i = 1; i < arguments.length; i++){
30
- var source = arguments[i] != null ? arguments[i] : {};
31
- var ownKeys = Object.keys(source);
32
- if (typeof Object.getOwnPropertySymbols === "function") {
33
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
34
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
35
- }));
36
- }
37
- ownKeys.forEach(function(key) {
38
- _define_property(target, key, source[key]);
39
- });
40
- }
41
- return target;
42
- }
43
- function _to_consumable_array(arr) {
44
- return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
45
- }
46
- function _unsupported_iterable_to_array(o, minLen) {
47
- if (!o) return;
48
- if (typeof o === "string") return _array_like_to_array(o, minLen);
49
- var n = Object.prototype.toString.call(o).slice(8, -1);
50
- if (n === "Object" && o.constructor) n = o.constructor.name;
51
- if (n === "Map" || n === "Set") return Array.from(n);
52
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
53
- }
54
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
55
2
  import InputSelect from './InputSelect.js';
56
- var meta = {
3
+ const meta = {
57
4
  title: 'Input Select',
58
- component: InputSelect
5
+ component: InputSelect,
59
6
  };
60
7
  export default meta;
61
- export var Demo = {
8
+ export const Demo = {
62
9
  args: {
63
10
  htmlFor: 'fruits',
64
11
  label: 'fruits',
65
12
  placeholder: 'Select Fruits',
66
13
  options: [
67
- {
68
- label: 'Apple',
69
- value: 'apple'
70
- },
71
- {
72
- label: 'Banana',
73
- value: 'banana'
74
- },
75
- {
76
- label: 'Citrus',
77
- value: 'citrus',
78
- isDisabled: true
79
- }
80
- ]
81
- }
14
+ { label: 'Apple', value: 'apple' },
15
+ { label: 'Banana', value: 'banana' },
16
+ { label: 'Citrus', value: 'citrus', isDisabled: true },
17
+ ],
18
+ },
82
19
  };
83
- export var Long = {
20
+ export const Long = {
84
21
  args: {
85
22
  htmlFor: 'year',
86
23
  label: 'favourite year',
87
24
  placeholder: 'Select Your Favourite Year',
88
- options: _to_consumable_array(Array(20)).map(function(_, i) {
89
- return {
90
- label: "".concat(2000 + i),
91
- value: 2000 + 1
92
- };
93
- })
94
- }
25
+ options: [...Array(20)].map((_, i) => ({
26
+ label: `${2000 + i}`,
27
+ value: 2000 + 1,
28
+ })),
29
+ },
95
30
  };
96
- export var Empty = {
31
+ export const Empty = {
97
32
  args: {
98
33
  htmlFor: 'fruits',
99
34
  label: 'fruits',
100
35
  placeholder: 'Select Fruits',
101
- options: []
102
- }
36
+ options: [],
37
+ },
103
38
  };
104
- export var FluidPosition = {
105
- args: _object_spread({}, Long.args),
106
- render: function(args) {
107
- return /*#__PURE__*/ _jsxs("div", {
108
- className: "flex flex-col gap-4",
109
- children: [
110
- /*#__PURE__*/ _jsx("div", {
111
- className: "bg-primary1 h-[1000px]"
112
- }),
113
- /*#__PURE__*/ _jsx(InputSelect, _object_spread({}, args)),
114
- /*#__PURE__*/ _jsx("div", {
115
- className: "bg-primary1 h-[1000px]"
116
- })
117
- ]
118
- });
119
- }
39
+ export const FluidPosition = {
40
+ args: {
41
+ ...Long.args,
42
+ },
43
+ render: (args) => {
44
+ return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "bg-primary1 h-[1000px]" }), _jsx(InputSelect, { ...args }), _jsx("div", { className: "bg-primary1 h-[1000px]" })] }));
45
+ },
120
46
  };
47
+ //# sourceMappingURL=InputSelect.stories.js.map