@driveflux/beam 1.9.14 → 1.9.16

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