@driveflux/beam 3.0.16 → 3.0.17

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 (220) 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 +12 -126
  13. package/dist/button/Button.stories.js +7 -35
  14. package/dist/button/TextButton.js +9 -104
  15. package/dist/card/Card.js +7 -109
  16. package/dist/card/Card.stories.js +7 -10
  17. package/dist/carousel/Carousel.js +58 -281
  18. package/dist/carousel/Carousel.stories.js +7 -39
  19. package/dist/carousel/CarouselButton.js +7 -68
  20. package/dist/center/Center.js +3 -63
  21. package/dist/center/Center.stories.js +7 -19
  22. package/dist/checkbox/Checkbox.js +4 -124
  23. package/dist/checkbox/Checkbox.stories.js +8 -10
  24. package/dist/chip/Chip.js +3 -104
  25. package/dist/chip/Chip.stories.js +7 -19
  26. package/dist/circular-progress/CircularProgress.js +11 -150
  27. package/dist/circular-progress/CircularProgress.stories.js +14 -54
  28. package/dist/command/command.js +13 -170
  29. package/dist/datepicker/DatePicker.js +90 -235
  30. package/dist/datepicker/DatePicker.stories.js +58 -163
  31. package/dist/datepicker/DatePicker.stories.js.map +1 -1
  32. package/dist/datepicker/DatePickerDrawer.js +17 -115
  33. package/dist/datepicker/DatePickerPopover.js +35 -208
  34. package/dist/datepicker/constants.js +4 -3
  35. package/dist/datepicker/utils.js +11 -4
  36. package/dist/dialog/index.js +33 -180
  37. package/dist/divider/Divider.js +3 -63
  38. package/dist/divider/Divider.stories.js +7 -13
  39. package/dist/drawer/index.js +12 -157
  40. package/dist/dropdown/Dropdown.js +26 -212
  41. package/dist/dropdown/Dropdown.stories.js +22 -109
  42. package/dist/field-wrapper/FieldWrapper.js +3 -139
  43. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  44. package/dist/flex/Flex.js +3 -63
  45. package/dist/flex/Flex.stories.js +7 -19
  46. package/dist/grid/Grid.js +3 -63
  47. package/dist/grid/Grid.stories.js +7 -28
  48. package/dist/hooks/use-breakpoint-value.js +14 -77
  49. package/dist/hooks/use-media-query.js +12 -61
  50. package/dist/hstack/HStack.js +3 -63
  51. package/dist/hstack/HStack.stories.js +7 -19
  52. package/dist/icons/FluxLogo.js +9 -213
  53. package/dist/icons/FluxLogoTable.js +5 -109
  54. package/dist/icons/Icon.js +7 -108
  55. package/dist/icons/Icon.stories.js +7 -12
  56. package/dist/icons/Icon24Hours.js +5 -83
  57. package/dist/icons/IconAcceleration.js +4 -72
  58. package/dist/icons/IconAccount.js +4 -72
  59. package/dist/icons/IconApplicant.js +5 -78
  60. package/dist/icons/IconArrow.js +6 -78
  61. package/dist/icons/IconArrowBack.js +4 -72
  62. package/dist/icons/IconArrowForward.js +4 -72
  63. package/dist/icons/IconArrowTopLeft.js +4 -70
  64. package/dist/icons/IconBluesharkProductGuide.js +5 -80
  65. package/dist/icons/IconBolt.js +4 -72
  66. package/dist/icons/IconBriefcase.js +4 -72
  67. package/dist/icons/IconBulb.js +4 -72
  68. package/dist/icons/IconCalendar.js +4 -72
  69. package/dist/icons/IconCalendarArrowBack.js +4 -72
  70. package/dist/icons/IconCalendarArrowForward.js +4 -72
  71. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
  72. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
  73. package/dist/icons/IconCancel.js +5 -77
  74. package/dist/icons/IconCancelMark.js +4 -72
  75. package/dist/icons/IconCarSUV.js +4 -72
  76. package/dist/icons/IconCarSedan.js +7 -147
  77. package/dist/icons/IconChain.js +5 -79
  78. package/dist/icons/IconCheckmark.js +4 -72
  79. package/dist/icons/IconChevronRight.js +4 -72
  80. package/dist/icons/IconCircle.js +11 -114
  81. package/dist/icons/IconCircleCheckmark.js +5 -77
  82. package/dist/icons/IconCircleError.js +4 -72
  83. package/dist/icons/IconCircleExclamation.js +6 -104
  84. package/dist/icons/IconCircleMark.js +5 -78
  85. package/dist/icons/IconCircleOutline.js +5 -139
  86. package/dist/icons/IconClock.js +5 -80
  87. package/dist/icons/IconClose.js +4 -72
  88. package/dist/icons/IconCollapseAll.js +5 -94
  89. package/dist/icons/IconConcierge.js +5 -79
  90. package/dist/icons/IconConciergeService.js +5 -87
  91. package/dist/icons/IconCreditCard.js +5 -78
  92. package/dist/icons/IconDash.js +4 -72
  93. package/dist/icons/IconDeliver.js +4 -72
  94. package/dist/icons/IconDelivery.js +5 -87
  95. package/dist/icons/IconDetails.js +4 -72
  96. package/dist/icons/IconDot.js +6 -87
  97. package/dist/icons/IconDownload.js +5 -79
  98. package/dist/icons/IconEVCharging.js +5 -79
  99. package/dist/icons/IconElectricCarFuel.js +5 -80
  100. package/dist/icons/IconEllipsis.js +5 -78
  101. package/dist/icons/IconEnvelope.js +4 -72
  102. package/dist/icons/IconExpandAll.js +5 -94
  103. package/dist/icons/IconEye.js +5 -79
  104. package/dist/icons/IconFacebook.js +6 -94
  105. package/dist/icons/IconFilter.js +5 -83
  106. package/dist/icons/IconFlagMalaysia.js +5 -141
  107. package/dist/icons/IconGiveKey.js +5 -79
  108. package/dist/icons/IconGlobe.js +4 -70
  109. package/dist/icons/IconGoogle.js +5 -87
  110. package/dist/icons/IconHome.js +5 -78
  111. package/dist/icons/IconHostAdvertise.js +4 -72
  112. package/dist/icons/IconHostCar.js +4 -75
  113. package/dist/icons/IconHostCash.js +5 -91
  114. package/dist/icons/IconHostHandle.js +4 -70
  115. package/dist/icons/IconHostLocation.js +4 -70
  116. package/dist/icons/IconHostPayment.js +5 -91
  117. package/dist/icons/IconHostService.js +5 -79
  118. package/dist/icons/IconHotDeals.js +4 -72
  119. package/dist/icons/IconInfo.js +5 -77
  120. package/dist/icons/IconInstagram.js +4 -72
  121. package/dist/icons/IconInsurance.js +5 -99
  122. package/dist/icons/IconInternet.js +4 -73
  123. package/dist/icons/IconInventory.js +5 -78
  124. package/dist/icons/IconLaurel.js +5 -101
  125. package/dist/icons/IconLinkedIn.js +4 -72
  126. package/dist/icons/IconLoading.js +4 -78
  127. package/dist/icons/IconLocation.js +5 -80
  128. package/dist/icons/IconLock.js +4 -73
  129. package/dist/icons/IconLogistics.js +4 -72
  130. package/dist/icons/IconMail.js +5 -94
  131. package/dist/icons/IconMember.js +5 -78
  132. package/dist/icons/IconMobilePen.js +5 -83
  133. package/dist/icons/IconMotorcycleMoped.js +5 -78
  134. package/dist/icons/IconNoCost.js +5 -92
  135. package/dist/icons/IconPDF.js +5 -80
  136. package/dist/icons/IconPencil.js +4 -70
  137. package/dist/icons/IconPhone.js +4 -70
  138. package/dist/icons/IconPlus.js +4 -72
  139. package/dist/icons/IconPricing.js +4 -72
  140. package/dist/icons/IconProtected.js +4 -71
  141. package/dist/icons/IconPsychology.js +4 -72
  142. package/dist/icons/IconQuestionTooltip.js +4 -73
  143. package/dist/icons/IconQuote.js +4 -72
  144. package/dist/icons/IconRate.js +4 -71
  145. package/dist/icons/IconRegister.js +5 -99
  146. package/dist/icons/IconReport.js +6 -89
  147. package/dist/icons/IconReturn.js +4 -72
  148. package/dist/icons/IconSearch.js +4 -70
  149. package/dist/icons/IconSecure.js +4 -71
  150. package/dist/icons/IconSecurity.js +4 -73
  151. package/dist/icons/IconSedanOutline.js +5 -159
  152. package/dist/icons/IconSelectArrow.js +6 -78
  153. package/dist/icons/IconSort.js +5 -79
  154. package/dist/icons/IconSortListed.js +5 -95
  155. package/dist/icons/IconSortPriceAscending.js +5 -83
  156. package/dist/icons/IconSortPriceDescending.js +5 -83
  157. package/dist/icons/IconSortYear.js +5 -79
  158. package/dist/icons/IconSpan.js +4 -71
  159. package/dist/icons/IconSpeaker.js +4 -79
  160. package/dist/icons/IconSpecialCar.js +5 -95
  161. package/dist/icons/IconStar.js +7 -92
  162. package/dist/icons/IconStockPhoto.js +5 -95
  163. package/dist/icons/IconSubscription.js +6 -113
  164. package/dist/icons/IconSubscriptions.js +6 -113
  165. package/dist/icons/IconSwap.js +5 -79
  166. package/dist/icons/IconTax.js +4 -72
  167. package/dist/icons/IconThinArrow.js +6 -78
  168. package/dist/icons/IconThumbsdown.js +5 -78
  169. package/dist/icons/IconThumbsup.js +5 -78
  170. package/dist/icons/IconTool.js +4 -72
  171. package/dist/icons/IconTooltip.js +4 -73
  172. package/dist/icons/IconTrash.js +4 -72
  173. package/dist/icons/IconTriangleExclamation.js +4 -72
  174. package/dist/icons/IconTyersBrakes.js +5 -83
  175. package/dist/icons/IconTyre.js +5 -83
  176. package/dist/icons/IconVacancy.js +5 -78
  177. package/dist/icons/IconVolunteer.js +4 -72
  178. package/dist/icons/IconWhatsapp.js +4 -73
  179. package/dist/icons/IconXPlatform.js +4 -72
  180. package/dist/icons/IconZeroEffort.js +5 -77
  181. package/dist/icons/Logo.js +3 -99
  182. package/dist/input/Input.js +11 -125
  183. package/dist/input/Input.stories.js +18 -17
  184. package/dist/input-mask/InputMask.js +11 -149
  185. package/dist/input-mask/InputMask.stories.js +6 -5
  186. package/dist/input-mask/mask-trackers.js +5 -4
  187. package/dist/input-select/InputSelect.js +68 -357
  188. package/dist/input-select/InputSelect.stories.js +25 -98
  189. package/dist/popover/popover.js +4 -72
  190. package/dist/progress/Progress.js +2 -96
  191. package/dist/progress/Progress.stories.js +14 -13
  192. package/dist/radio/Radio.js +4 -163
  193. package/dist/scroll-area/scroll-area.js +5 -113
  194. package/dist/search-input-select/SearchInputSelect.js +69 -346
  195. package/dist/select/Select.js +29 -315
  196. package/dist/select/Select.stories.js +19 -55
  197. package/dist/skeleton/Skeleton.js +3 -62
  198. package/dist/skeleton/Skeleton.stories.js +7 -8
  199. package/dist/slider/Slider.js +5 -106
  200. package/dist/slider/Slider.stories.js +11 -12
  201. package/dist/stack/Stack.js +3 -63
  202. package/dist/stack/Stack.stories.js +7 -19
  203. package/dist/table/Table.js +10 -131
  204. package/dist/table/Table.stories.js +8 -84
  205. package/dist/tabs/Tabs.js +9 -128
  206. package/dist/tabs/Tabs.stories.js +13 -46
  207. package/dist/text/Text.js +6 -88
  208. package/dist/text/Text.stories.js +7 -44
  209. package/dist/toast/Toast.stories.js +14 -66
  210. package/dist/toast/ToastBox.js +29 -77
  211. package/dist/toast/index.js +1 -0
  212. package/dist/toast/sonner.js +6 -66
  213. package/dist/toggle/Toggle.js +7 -116
  214. package/dist/toggle/Toggle.stories.js +8 -10
  215. package/dist/tooltip/Tooltip.js +12 -151
  216. package/dist/tooltip/Tooltip.stories.js +13 -71
  217. package/dist/utils.js +2 -4
  218. package/dist/vstack/VStack.js +3 -63
  219. package/dist/vstack/VStack.stories.js +7 -19
  220. package/package.json +1 -1
@@ -1,62 +1,29 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
2
  import IconSort from '../icons/IconSort.js';
3
3
  import Input from '../input/Input.js';
4
4
  import Stack from '../stack/Stack.js';
5
5
  import Text from '../text/Text.js';
6
6
  import { Tab, Tabs, TabsContent, TabsList } from './Tabs.js';
7
- var meta = {
8
- component: Tabs
7
+ const meta = {
8
+ component: Tabs,
9
9
  };
10
10
  export default meta;
11
- export var TabsTest = {
12
- render: function() {
13
- return /*#__PURE__*/ _jsxs(Tabs, {
14
- children: [
15
- /*#__PURE__*/ _jsx(TabsList, {
16
- children: tabs.map(function(tab) {
17
- return /*#__PURE__*/ _jsxs(Tab, {
18
- value: tab.key,
19
- children: [
20
- tab.icon,
21
- tab.label
22
- ]
23
- }, tab.key);
24
- })
25
- }),
26
- tabs.map(function(tab) {
27
- return /*#__PURE__*/ _jsx(TabsContent, {
28
- value: tab.key,
29
- children: tab.content
30
- }, tab.key);
31
- })
32
- ]
33
- });
34
- }
11
+ export const TabsTest = {
12
+ render: () => {
13
+ return (_jsxs(Tabs, { children: [_jsx(TabsList, { children: tabs.map((tab) => (_jsxs(Tab, { value: tab.key, children: [tab.icon, tab.label] }, tab.key))) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.key, children: tab.content }, tab.key)))] }));
14
+ },
35
15
  };
36
- var tabs = [
16
+ const tabs = [
37
17
  {
38
- icon: /*#__PURE__*/ _jsx(IconSort, {
39
- size: 16
40
- }),
18
+ icon: _jsx(IconSort, { size: 16 }),
41
19
  key: 'tab1',
42
20
  label: 'tab 1',
43
- content: /*#__PURE__*/ _jsxs(Stack, {
44
- children: [
45
- /*#__PURE__*/ _jsx(Text, {
46
- children: "this is content of tab1"
47
- }),
48
- /*#__PURE__*/ _jsx(Input, {
49
- htmlFor: "firstName",
50
- label: "first name"
51
- })
52
- ]
53
- })
21
+ content: (_jsxs(Stack, { children: [_jsx(Text, { children: "this is content of tab1" }), _jsx(Input, { htmlFor: "firstName", label: "first name" })] })),
54
22
  },
55
23
  {
56
24
  key: 'tab2',
57
25
  label: 'tab 2',
58
- content: /*#__PURE__*/ _jsx(Text, {
59
- children: "this is tab 2 content"
60
- })
61
- }
26
+ content: _jsx(Text, { children: "this is tab 2 content" }),
27
+ },
62
28
  ];
29
+ //# sourceMappingURL=Tabs.stories.js.map
package/dist/text/Text.js CHANGED
@@ -1,94 +1,12 @@
1
- function _define_property(obj, key, value) {
2
- if (key in obj) {
3
- Object.defineProperty(obj, key, {
4
- value: value,
5
- enumerable: true,
6
- configurable: true,
7
- writable: true
8
- });
9
- } else {
10
- obj[key] = value;
11
- }
12
- return obj;
13
- }
14
- function _object_spread(target) {
15
- for(var i = 1; i < arguments.length; i++){
16
- var source = arguments[i] != null ? arguments[i] : {};
17
- var ownKeys = Object.keys(source);
18
- if (typeof Object.getOwnPropertySymbols === "function") {
19
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
20
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
21
- }));
22
- }
23
- ownKeys.forEach(function(key) {
24
- _define_property(target, key, source[key]);
25
- });
26
- }
27
- return target;
28
- }
29
- function ownKeys(object, enumerableOnly) {
30
- var keys = Object.keys(object);
31
- if (Object.getOwnPropertySymbols) {
32
- var symbols = Object.getOwnPropertySymbols(object);
33
- if (enumerableOnly) {
34
- symbols = symbols.filter(function(sym) {
35
- return Object.getOwnPropertyDescriptor(object, sym).enumerable;
36
- });
37
- }
38
- keys.push.apply(keys, symbols);
39
- }
40
- return keys;
41
- }
42
- function _object_spread_props(target, source) {
43
- source = source != null ? source : {};
44
- if (Object.getOwnPropertyDescriptors) {
45
- Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
46
- } else {
47
- ownKeys(Object(source)).forEach(function(key) {
48
- Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
49
- });
50
- }
51
- return target;
52
- }
53
- function _object_without_properties(source, excluded) {
54
- if (source == null) return {};
55
- var target = _object_without_properties_loose(source, excluded);
56
- var key, i;
57
- if (Object.getOwnPropertySymbols) {
58
- var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
59
- for(i = 0; i < sourceSymbolKeys.length; i++){
60
- key = sourceSymbolKeys[i];
61
- if (excluded.indexOf(key) >= 0) continue;
62
- if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
63
- target[key] = source[key];
64
- }
65
- }
66
- return target;
67
- }
68
- function _object_without_properties_loose(source, excluded) {
69
- if (source == null) return {};
70
- var target = {};
71
- var sourceKeys = Object.keys(source);
72
- var key, i;
73
- for(i = 0; i < sourceKeys.length; i++){
74
- key = sourceKeys[i];
75
- if (excluded.indexOf(key) >= 0) continue;
76
- target[key] = source[key];
77
- }
78
- return target;
79
- }
80
1
  import * as React from 'react';
81
2
  import { cn } from '../utils.js';
82
- var Text = /*#__PURE__*/ React.forwardRef(function(_param, ref) {
83
- var _param_as = _param.as, as = _param_as === void 0 ? 'p' : _param_as, className = _param.className, children = _param.children, props = _object_without_properties(_param, [
84
- "as",
85
- "className",
86
- "children"
87
- ]);
88
- return /*#__PURE__*/ React.createElement(as, _object_spread_props(_object_spread({}, props), {
3
+ const Text = React.forwardRef(({ as = 'p', className, children, ...props }, ref) => {
4
+ return React.createElement(as, {
5
+ ...props,
89
6
  className: cn('text-base leading-[19.6px]', as === 'h3' && 'text-xl tracking-wide', as === 'h2' && 'text-2xl tracking-wider', className),
90
- ref: ref
91
- }), children);
7
+ ref,
8
+ }, children);
92
9
  });
93
10
  Text.displayName = 'Text';
94
11
  export default Text;
12
+ //# sourceMappingURL=Text.js.map
@@ -1,50 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import Stack from '../stack/Stack.js';
3
3
  import Text from './Text.js';
4
- var meta = {
5
- component: Text
4
+ const meta = {
5
+ component: Text,
6
6
  };
7
7
  export default meta;
8
- export var FirstStory = {
9
- render: function() {
10
- return /*#__PURE__*/ _jsxs(Stack, {
11
- children: [
12
- /*#__PURE__*/ _jsx(Text, {
13
- as: 'h1',
14
- className: "text-black text-5xl",
15
- children: "This is heading 1"
16
- }),
17
- /*#__PURE__*/ _jsx(Text, {
18
- as: 'h2',
19
- className: "text-primary4 text-4xl",
20
- children: "This is heading 2"
21
- }),
22
- /*#__PURE__*/ _jsx(Text, {
23
- as: 'h3',
24
- className: "text-primary3 text-3xl",
25
- children: "This is heading 3"
26
- }),
27
- /*#__PURE__*/ _jsx(Text, {
28
- as: 'h4',
29
- className: "text-primary2 text-2xl",
30
- children: "This is heading 4"
31
- }),
32
- /*#__PURE__*/ _jsx(Text, {
33
- as: 'h5',
34
- className: "text-primary1 text-xl",
35
- children: "This is heading 5"
36
- }),
37
- /*#__PURE__*/ _jsx(Text, {
38
- as: 'strong',
39
- className: "text-bold",
40
- children: "This is strong"
41
- }),
42
- /*#__PURE__*/ _jsx(Text, {
43
- as: 'i',
44
- className: "text-medium italic",
45
- children: "This is italic"
46
- })
47
- ]
48
- });
49
- }
8
+ export const FirstStory = {
9
+ render: () => {
10
+ return (_jsxs(Stack, { children: [_jsx(Text, { as: 'h1', className: "text-black text-5xl", children: "This is heading 1" }), _jsx(Text, { as: 'h2', className: "text-primary4 text-4xl", children: "This is heading 2" }), _jsx(Text, { as: 'h3', className: "text-primary3 text-3xl", children: "This is heading 3" }), _jsx(Text, { as: 'h4', className: "text-primary2 text-2xl", children: "This is heading 4" }), _jsx(Text, { as: 'h5', className: "text-primary1 text-xl", children: "This is heading 5" }), _jsx(Text, { as: 'strong', className: "text-bold", children: "This is strong" }), _jsx(Text, { as: 'i', className: "text-medium italic", children: "This is italic" })] }));
11
+ },
50
12
  };
13
+ //# sourceMappingURL=Text.stories.js.map
@@ -3,80 +3,28 @@ import Box from '../box/Box.js';
3
3
  import Button from '../button/Button.js';
4
4
  import VStack from '../vstack/VStack.js';
5
5
  import { Toaster, toast } from './sonner.js';
6
- var meta = {
7
- component: Toaster
6
+ const meta = {
7
+ component: Toaster,
8
8
  };
9
9
  export default meta;
10
- export var FirstStory = {
11
- render: function() {
12
- return /*#__PURE__*/ _jsx(Outer, {
13
- children: /*#__PURE__*/ _jsxs(VStack, {
14
- children: [
15
- /*#__PURE__*/ _jsx(ToastButton, {
16
- title: "This is error toast",
17
- description: "This is description of the error toast",
18
- status: "error",
19
- buttonColor: 'accent'
20
- }),
21
- /*#__PURE__*/ _jsx(ToastButton, {
22
- title: "This is warning toast",
23
- description: "This is description of the warning toast",
24
- status: "warning",
25
- buttonColor: "warning"
26
- }),
27
- /*#__PURE__*/ _jsx(ToastButton, {
28
- title: "This is info toast",
29
- description: "This is description of the info toast",
30
- status: "info",
31
- buttonColor: "link"
32
- }),
33
- /*#__PURE__*/ _jsx(ToastButton, {
34
- title: "This is success toast",
35
- description: "This is description of the success toast",
36
- status: "success",
37
- buttonColor: "success"
38
- }),
39
- /*#__PURE__*/ _jsx(ToastButton, {
40
- title: "This is a long toast",
41
- description: "A long toast message provides detailed information or instructions that require more space than usual. It's ideal for conveying extensive updates, lengthy explanations, or step-by-step guidance, ensuring users receive comprehensive information directly within the application's interface.",
42
- status: "success",
43
- buttonColor: "success"
44
- }),
45
- /*#__PURE__*/ _jsx(ToastButton, {
46
- title: "This is a list toast",
47
- description: 'Lists: \nItem 1. \nItem 2. \nItem 3.',
48
- status: "success",
49
- buttonColor: "success",
50
- isClosable: false
51
- })
52
- ]
53
- })
54
- });
55
- }
10
+ export const FirstStory = {
11
+ render: () => {
12
+ return (_jsx(Outer, { children: _jsxs(VStack, { children: [_jsx(ToastButton, { title: "This is error toast", description: "This is description of the error toast", status: "error", buttonColor: 'accent' }), _jsx(ToastButton, { title: "This is warning toast", description: "This is description of the warning toast", status: "warning", buttonColor: "warning" }), _jsx(ToastButton, { title: "This is info toast", description: "This is description of the info toast", status: "info", buttonColor: "link" }), _jsx(ToastButton, { title: "This is success toast", description: "This is description of the success toast", status: "success", buttonColor: "success" }), _jsx(ToastButton, { title: "This is a long toast", description: "A long toast message provides detailed information or instructions that require more space than usual. It's ideal for conveying extensive updates, lengthy explanations, or step-by-step guidance, ensuring users receive comprehensive information directly within the application's interface.", status: "success", buttonColor: "success" }), _jsx(ToastButton, { title: "This is a list toast", description: 'Lists: \nItem 1. \nItem 2. \nItem 3.', status: "success", buttonColor: "success", isClosable: false })] }) }));
13
+ },
56
14
  };
57
- var ToastButton = function(param) {
58
- var title = param.title, description = param.description, status = param.status, buttonColor = param.buttonColor, _param_isClosable = param.isClosable, isClosable = _param_isClosable === void 0 ? true : _param_isClosable;
59
- var showToast = function() {
15
+ const ToastButton = ({ title, description, status, buttonColor, isClosable = true }) => {
16
+ const showToast = () => {
60
17
  toast({
61
18
  title: title,
62
19
  description: description,
63
20
  status: status,
64
- isClosable: isClosable,
65
- isNumbered: true
21
+ isClosable,
22
+ isNumbered: true,
66
23
  });
67
24
  };
68
- return /*#__PURE__*/ _jsx(Button, {
69
- colorScheme: buttonColor,
70
- onClick: showToast,
71
- children: title
72
- });
25
+ return (_jsx(Button, { colorScheme: buttonColor, onClick: showToast, children: title }));
73
26
  };
74
- var Outer = function(param) {
75
- var children = param.children;
76
- return /*#__PURE__*/ _jsxs(Box, {
77
- children: [
78
- children,
79
- /*#__PURE__*/ _jsx(Toaster, {})
80
- ]
81
- });
27
+ const Outer = ({ children }) => {
28
+ return (_jsxs(Box, { children: [children, _jsx(Toaster, {})] }));
82
29
  };
30
+ //# sourceMappingURL=Toast.stories.js.map
@@ -8,115 +8,67 @@ import IconClose from '../icons/IconClose';
8
8
  import IconInfo from '../icons/IconInfo';
9
9
  import IconTriangleExclamation from '../icons/IconTriangleExclamation';
10
10
  import Text from '../text/Text';
11
- var ToastBox = function(options) {
12
- var title = options === null || options === void 0 ? void 0 : options.title;
13
- var description = options === null || options === void 0 ? void 0 : options.description;
14
- var isNumbered = options === null || options === void 0 ? void 0 : options.isNumbered;
15
- var _getStyles = getStyles(options === null || options === void 0 ? void 0 : options.status), icon = _getStyles.icon, titleColor = _getStyles.titleColor, borderColor = _getStyles.borderColor, textColor = _getStyles.textColor, bgColor = _getStyles.bgColor;
16
- return /*#__PURE__*/ _jsxs(HStack, {
17
- className: "flex w-full items-start ".concat(textColor, " ").concat(bgColor, " border-l-8 ").concat(borderColor, " p-3 space-y-3 rounded-lg"),
18
- children: [
19
- /*#__PURE__*/ _jsxs(HStack, {
20
- className: 'space-y-1 w-full',
21
- children: [
22
- /*#__PURE__*/ _jsx(Box, {
23
- className: titleColor,
24
- children: icon
25
- }),
26
- /*#__PURE__*/ _jsxs(Box, {
27
- className: "w-full",
28
- children: [
29
- title && /*#__PURE__*/ _jsx(Text, {
30
- className: "font-bold text-base",
31
- children: title
32
- }),
33
- description && /*#__PURE__*/ _jsx(Box, {
34
- className: "".concat(textColor, " text-base"),
35
- children: typeof description === 'string' ? splitText(description, isNumbered) : description
36
- })
37
- ]
38
- })
39
- ]
40
- }),
41
- (options === null || options === void 0 ? void 0 : options.isClosable) && /*#__PURE__*/ _jsx(Box, {
42
- as: "button",
43
- onClick: function() {
11
+ const ToastBox = (options) => {
12
+ const title = options?.title;
13
+ const description = options?.description;
14
+ const isNumbered = options?.isNumbered;
15
+ const { icon, titleColor, borderColor, textColor, bgColor } = getStyles(options?.status);
16
+ return (_jsxs(HStack, { className: `flex w-full items-start ${textColor} ${bgColor} border-l-8 ${borderColor} p-3 space-y-3 rounded-lg`, children: [_jsxs(HStack, { className: 'space-y-1 w-full', children: [_jsx(Box, { className: titleColor, children: icon }), _jsxs(Box, { className: "w-full", children: [title && _jsx(Text, { className: "font-bold text-base", children: title }), description && (_jsx(Box, { className: `${textColor} text-base`, children: typeof description === 'string'
17
+ ? splitText(description, isNumbered)
18
+ : description }))] })] }), options?.isClosable && (_jsx(Box, { as: "button", onClick: () => {
44
19
  toast.dismiss(options.id);
45
- },
46
- children: /*#__PURE__*/ _jsx(IconClose, {
47
- size: '24px'
48
- })
49
- })
50
- ]
51
- });
20
+ }, children: _jsx(IconClose, { size: '24px' }) }))] }));
52
21
  };
53
- var splitText = function(text, isNumbered) {
54
- var listItems = text.split('\n').map(function(line) {
55
- return /*#__PURE__*/ _jsx("li", {
56
- children: line
57
- }, line);
58
- });
22
+ const splitText = (text, isNumbered) => {
23
+ const listItems = text.split('\n').map((line) => _jsx("li", { children: line }, line));
59
24
  if (isNumbered) {
60
- return /*#__PURE__*/ _jsx("ol", {
61
- children: listItems
62
- });
25
+ return _jsx("ol", { children: listItems });
63
26
  }
64
- return /*#__PURE__*/ _jsx("ul", {
65
- children: listItems
66
- });
27
+ return _jsx("ul", { children: listItems });
67
28
  };
68
- var getStyles = function(status) {
69
- var defaultStyles = {
70
- icon: /*#__PURE__*/ _jsx(IconInfo, {
71
- size: '24px'
72
- }),
29
+ const getStyles = (status) => {
30
+ const defaultStyles = {
31
+ icon: _jsx(IconInfo, { size: '24px' }),
73
32
  bgColor: 'bg-info-50',
74
33
  titleColor: 'text-info-300',
75
34
  textColor: 'text-info-600',
76
- borderColor: 'border-info-300'
35
+ borderColor: 'border-info-300',
77
36
  };
78
37
  if (!status) {
79
38
  return defaultStyles;
80
39
  }
81
- switch(status){
40
+ switch (status) {
82
41
  case 'error':
83
42
  return {
84
- icon: /*#__PURE__*/ _jsx(IconTriangleExclamation, {
85
- size: '24px'
86
- }),
43
+ icon: _jsx(IconTriangleExclamation, { size: '24px' }),
87
44
  bgColor: 'bg-accent-50',
88
45
  titleColor: 'text-accent-300',
89
46
  textColor: 'text-accent-600',
90
- borderColor: 'border-accent-300'
47
+ borderColor: 'border-accent-300',
91
48
  };
92
49
  case 'success':
93
50
  return {
94
- icon: /*#__PURE__*/ _jsx(IconCircleMark, {
95
- variant: "on",
96
- size: '24px'
97
- }),
51
+ icon: _jsx(IconCircleMark, { variant: "on", size: '24px' }),
98
52
  bgColor: 'bg-success-50',
99
53
  titleColor: 'text-success-300',
100
54
  textColor: 'text-success-600',
101
- borderColor: 'border-success-300'
55
+ borderColor: 'border-success-300',
102
56
  };
103
57
  case 'warning':
104
58
  return {
105
- icon: /*#__PURE__*/ _jsx(IconCircleExclamation, {
106
- size: '24px'
107
- }),
59
+ icon: _jsx(IconCircleExclamation, { size: '24px' }),
108
60
  bgColor: 'bg-warning-50',
109
61
  titleColor: 'text-warning-300',
110
62
  textColor: 'text-warning-600',
111
- borderColor: 'border-warning-300'
63
+ borderColor: 'border-warning-300',
112
64
  };
113
65
  case 'info':
114
66
  return defaultStyles;
115
- default:
116
- {
117
- var _exhaustiveCheck = status;
118
- return defaultStyles;
119
- }
67
+ default: {
68
+ const _exhaustiveCheck = status;
69
+ return defaultStyles;
70
+ }
120
71
  }
121
72
  };
122
73
  export default ToastBox;
74
+ //# sourceMappingURL=ToastBox.js.map
@@ -1 +1,2 @@
1
1
  export { Toaster, toast } from './sonner';
2
+ //# sourceMappingURL=index.js.map
@@ -1,74 +1,14 @@
1
1
  'use client';
2
- function _define_property(obj, key, value) {
3
- if (key in obj) {
4
- Object.defineProperty(obj, key, {
5
- value: value,
6
- enumerable: true,
7
- configurable: true,
8
- writable: true
9
- });
10
- } else {
11
- obj[key] = value;
12
- }
13
- return obj;
14
- }
15
- function _extends() {
16
- _extends = Object.assign || function(target) {
17
- for(var i = 1; i < arguments.length; i++){
18
- var source = arguments[i];
19
- for(var key in source){
20
- if (Object.prototype.hasOwnProperty.call(source, key)) {
21
- target[key] = source[key];
22
- }
23
- }
24
- }
25
- return target;
26
- };
27
- return _extends.apply(this, arguments);
28
- }
29
- function _object_destructuring_empty(o) {
30
- if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
31
- return o;
32
- }
33
- function _object_spread(target) {
34
- for(var i = 1; i < arguments.length; i++){
35
- var source = arguments[i] != null ? arguments[i] : {};
36
- var ownKeys = Object.keys(source);
37
- if (typeof Object.getOwnPropertySymbols === "function") {
38
- ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
39
- return Object.getOwnPropertyDescriptor(source, sym).enumerable;
40
- }));
41
- }
42
- ownKeys.forEach(function(key) {
43
- _define_property(target, key, source[key]);
44
- });
45
- }
46
- return target;
47
- }
48
2
  import { jsx as _jsx } from "react/jsx-runtime";
49
3
  import { useTheme } from 'next-themes';
50
4
  import { Toaster as Sonner, toast as sonnerToast } from 'sonner';
51
5
  import ToastBox from './ToastBox';
52
- var Toaster = function(_param) {
53
- var props = _extends({}, _object_destructuring_empty(_param));
54
- var _useTheme = useTheme(), _useTheme_theme = _useTheme.theme, theme = _useTheme_theme === void 0 ? 'system' : _useTheme_theme;
55
- return /*#__PURE__*/ _jsx(Sonner, _object_spread({
56
- theme: theme,
57
- className: "group",
58
- position: "bottom-center"
59
- }, props));
6
+ const Toaster = ({ ...props }) => {
7
+ const { theme = 'system' } = useTheme();
8
+ return (_jsx(Sonner, { theme: theme, className: "group", position: "bottom-center", ...props }));
60
9
  };
61
- var toast = function(param) {
62
- var title = param.title, description = param.description, status = param.status, _param_isClosable = param.isClosable, isClosable = _param_isClosable === void 0 ? true : _param_isClosable, isNumbered = param.isNumbered;
63
- sonnerToast.custom(function(toastId) {
64
- return /*#__PURE__*/ _jsx(ToastBox, {
65
- id: toastId,
66
- title: title,
67
- description: description,
68
- status: status,
69
- isClosable: isClosable,
70
- isNumbered: isNumbered
71
- });
72
- });
10
+ const toast = ({ title, description, status, isClosable = true, isNumbered, }) => {
11
+ sonnerToast.custom((toastId) => (_jsx(ToastBox, { id: toastId, title: title, description: description, status: status, isClosable: isClosable, isNumbered: isNumbered })));
73
12
  };
74
13
  export { Toaster, toast };
14
+ //# sourceMappingURL=sonner.js.map