@driveflux/beam 2.0.8 → 2.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 (215) 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 +14 -110
  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.d.ts +1 -1
  13. package/dist/button/Button.js +12 -124
  14. package/dist/button/Button.stories.js +7 -35
  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 +27 -127
  30. package/dist/datepicker/DatePicker.stories.js +58 -163
  31. package/dist/datepicker/DatePickerDrawer.js +14 -110
  32. package/dist/datepicker/DatePickerPopover.js +35 -207
  33. package/dist/datepicker/constants.js +4 -3
  34. package/dist/datepicker/utils.js +11 -4
  35. package/dist/dialog/index.js +12 -144
  36. package/dist/divider/Divider.js +3 -63
  37. package/dist/divider/Divider.stories.js +7 -13
  38. package/dist/drawer/index.js +12 -157
  39. package/dist/dropdown/Dropdown.js +26 -212
  40. package/dist/dropdown/Dropdown.stories.js +22 -109
  41. package/dist/field-wrapper/FieldWrapper.js +3 -139
  42. package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
  43. package/dist/flex/Flex.js +3 -63
  44. package/dist/flex/Flex.stories.js +7 -19
  45. package/dist/grid/Grid.js +3 -63
  46. package/dist/grid/Grid.stories.js +7 -28
  47. package/dist/hooks/use-breakpoint-value.js +14 -77
  48. package/dist/hooks/use-media-query.js +12 -61
  49. package/dist/hstack/HStack.js +3 -63
  50. package/dist/hstack/HStack.stories.js +7 -19
  51. package/dist/icons/FluxLogo.js +9 -213
  52. package/dist/icons/FluxLogoTable.js +5 -109
  53. package/dist/icons/Icon.js +7 -108
  54. package/dist/icons/Icon.stories.js +7 -12
  55. package/dist/icons/Icon24Hours.js +5 -83
  56. package/dist/icons/IconAcceleration.js +4 -72
  57. package/dist/icons/IconAccount.js +4 -72
  58. package/dist/icons/IconApplicant.js +5 -78
  59. package/dist/icons/IconArrow.js +6 -78
  60. package/dist/icons/IconArrowBack.js +4 -72
  61. package/dist/icons/IconArrowForward.js +4 -72
  62. package/dist/icons/IconArrowTopLeft.js +4 -70
  63. package/dist/icons/IconBluesharkProductGuide.js +5 -80
  64. package/dist/icons/IconBolt.js +4 -72
  65. package/dist/icons/IconBriefcase.js +4 -72
  66. package/dist/icons/IconBulb.js +4 -72
  67. package/dist/icons/IconCalendar.js +4 -72
  68. package/dist/icons/IconCalendarArrowBack.js +4 -72
  69. package/dist/icons/IconCalendarArrowForward.js +4 -72
  70. package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
  71. package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
  72. package/dist/icons/IconCancel.js +6 -85
  73. package/dist/icons/IconCancelMark.js +4 -72
  74. package/dist/icons/IconCarSUV.js +4 -72
  75. package/dist/icons/IconCarSedan.js +7 -147
  76. package/dist/icons/IconChain.js +5 -79
  77. package/dist/icons/IconCheckmark.js +4 -72
  78. package/dist/icons/IconChevronRight.js +4 -72
  79. package/dist/icons/IconCircle.js +11 -114
  80. package/dist/icons/IconCircleCheckmark.js +5 -77
  81. package/dist/icons/IconCircleError.js +4 -72
  82. package/dist/icons/IconCircleExclamation.js +6 -104
  83. package/dist/icons/IconCircleMark.js +5 -78
  84. package/dist/icons/IconCircleOutline.js +5 -140
  85. package/dist/icons/IconClock.js +5 -80
  86. package/dist/icons/IconClose.js +4 -72
  87. package/dist/icons/IconConcierge.js +5 -79
  88. package/dist/icons/IconConciergeService.js +5 -87
  89. package/dist/icons/IconCreditCard.js +5 -78
  90. package/dist/icons/IconDash.js +4 -72
  91. package/dist/icons/IconDeliver.js +4 -72
  92. package/dist/icons/IconDelivery.js +5 -87
  93. package/dist/icons/IconDetails.js +4 -72
  94. package/dist/icons/IconDot.js +6 -87
  95. package/dist/icons/IconEVCharging.js +5 -79
  96. package/dist/icons/IconElectricCarFuel.js +5 -80
  97. package/dist/icons/IconEllipsis.js +5 -78
  98. package/dist/icons/IconEnvelope.js +4 -72
  99. package/dist/icons/IconEye.js +5 -79
  100. package/dist/icons/IconFacebook.js +6 -94
  101. package/dist/icons/IconFilter.js +5 -83
  102. package/dist/icons/IconFlagMalaysia.js +5 -141
  103. package/dist/icons/IconGiveKey.js +5 -79
  104. package/dist/icons/IconGlobe.js +4 -70
  105. package/dist/icons/IconGoogle.js +5 -87
  106. package/dist/icons/IconHome.js +5 -78
  107. package/dist/icons/IconHostAdvertise.js +4 -72
  108. package/dist/icons/IconHostCar.js +4 -75
  109. package/dist/icons/IconHostCash.js +5 -91
  110. package/dist/icons/IconHostHandle.js +4 -70
  111. package/dist/icons/IconHostLocation.js +4 -70
  112. package/dist/icons/IconHostPayment.js +5 -91
  113. package/dist/icons/IconHostService.js +5 -79
  114. package/dist/icons/IconHotDeals.js +4 -72
  115. package/dist/icons/IconInfo.js +5 -77
  116. package/dist/icons/IconInstagram.js +4 -72
  117. package/dist/icons/IconInsurance.js +5 -99
  118. package/dist/icons/IconInternet.js +4 -73
  119. package/dist/icons/IconInventory.js +5 -78
  120. package/dist/icons/IconLaurel.js +5 -101
  121. package/dist/icons/IconLinkedIn.js +4 -72
  122. package/dist/icons/IconLoading.js +4 -78
  123. package/dist/icons/IconLocation.js +5 -80
  124. package/dist/icons/IconLock.js +4 -73
  125. package/dist/icons/IconLogistics.js +4 -72
  126. package/dist/icons/IconMail.js +5 -94
  127. package/dist/icons/IconMember.js +5 -78
  128. package/dist/icons/IconMobilePen.js +5 -83
  129. package/dist/icons/IconMotorcycleMoped.js +5 -78
  130. package/dist/icons/IconNoCost.js +5 -92
  131. package/dist/icons/IconPDF.js +5 -80
  132. package/dist/icons/IconPencil.js +4 -70
  133. package/dist/icons/IconPhone.js +4 -70
  134. package/dist/icons/IconPlus.js +4 -72
  135. package/dist/icons/IconPricing.js +4 -72
  136. package/dist/icons/IconProtected.js +4 -71
  137. package/dist/icons/IconPsychology.js +4 -72
  138. package/dist/icons/IconQuestionTooltip.js +4 -73
  139. package/dist/icons/IconQuote.js +4 -72
  140. package/dist/icons/IconRate.js +4 -71
  141. package/dist/icons/IconRegister.js +5 -99
  142. package/dist/icons/IconReturn.js +4 -72
  143. package/dist/icons/IconSearch.js +4 -70
  144. package/dist/icons/IconSecure.js +4 -71
  145. package/dist/icons/IconSecurity.js +4 -73
  146. package/dist/icons/IconSedanOutline.js +5 -159
  147. package/dist/icons/IconSelectArrow.js +6 -78
  148. package/dist/icons/IconSort.js +5 -79
  149. package/dist/icons/IconSortListed.js +5 -95
  150. package/dist/icons/IconSortPriceAscending.js +5 -83
  151. package/dist/icons/IconSortPriceDescending.js +5 -83
  152. package/dist/icons/IconSortYear.js +5 -79
  153. package/dist/icons/IconSpan.js +4 -71
  154. package/dist/icons/IconSpeaker.js +4 -79
  155. package/dist/icons/IconSpecialCar.js +5 -95
  156. package/dist/icons/IconStar.js +7 -92
  157. package/dist/icons/IconStockPhoto.js +5 -95
  158. package/dist/icons/IconSubscription.js +6 -113
  159. package/dist/icons/IconSubscriptions.js +6 -113
  160. package/dist/icons/IconSwap.js +5 -79
  161. package/dist/icons/IconTax.js +4 -72
  162. package/dist/icons/IconThinArrow.js +6 -78
  163. package/dist/icons/IconThumbsdown.js +5 -78
  164. package/dist/icons/IconThumbsup.js +5 -78
  165. package/dist/icons/IconTool.js +4 -72
  166. package/dist/icons/IconTooltip.js +4 -73
  167. package/dist/icons/IconTrash.js +4 -72
  168. package/dist/icons/IconTriangleExclamation.js +4 -72
  169. package/dist/icons/IconTyersBrakes.js +5 -83
  170. package/dist/icons/IconTyre.js +5 -83
  171. package/dist/icons/IconVacancy.js +5 -78
  172. package/dist/icons/IconVolunteer.js +4 -72
  173. package/dist/icons/IconWhatsapp.js +4 -73
  174. package/dist/icons/IconXPlatform.js +4 -72
  175. package/dist/icons/IconZeroEffort.js +5 -77
  176. package/dist/icons/Logo.js +3 -99
  177. package/dist/input/Input.js +11 -125
  178. package/dist/input/Input.stories.js +18 -17
  179. package/dist/input-mask/InputMask.js +11 -149
  180. package/dist/input-mask/InputMask.stories.js +6 -5
  181. package/dist/input-mask/mask-trackers.js +5 -4
  182. package/dist/input-select/InputSelect.js +68 -357
  183. package/dist/input-select/InputSelect.stories.js +25 -98
  184. package/dist/popover/popover.js +4 -72
  185. package/dist/progress/Progress.js +2 -96
  186. package/dist/progress/Progress.stories.js +14 -13
  187. package/dist/radio/Radio.js +4 -163
  188. package/dist/scroll-area/scroll-area.js +5 -113
  189. package/dist/search-input-select/SearchInputSelect.js +69 -346
  190. package/dist/select/Select.js +29 -315
  191. package/dist/select/Select.stories.js +19 -55
  192. package/dist/skeleton/Skeleton.js +3 -62
  193. package/dist/skeleton/Skeleton.stories.js +7 -8
  194. package/dist/slider/Slider.js +5 -106
  195. package/dist/slider/Slider.stories.js +11 -12
  196. package/dist/stack/Stack.js +3 -63
  197. package/dist/stack/Stack.stories.js +7 -19
  198. package/dist/table/Table.js +10 -131
  199. package/dist/table/Table.stories.js +8 -84
  200. package/dist/tabs/Tabs.js +9 -128
  201. package/dist/tabs/Tabs.stories.js +13 -46
  202. package/dist/text/Text.js +6 -88
  203. package/dist/text/Text.stories.js +7 -44
  204. package/dist/toast/Toast.stories.js +14 -66
  205. package/dist/toast/ToastBox.js +24 -71
  206. package/dist/toast/index.js +1 -0
  207. package/dist/toast/sonner.js +11 -70
  208. package/dist/toggle/Toggle.js +7 -116
  209. package/dist/toggle/Toggle.stories.js +8 -10
  210. package/dist/tooltip/Tooltip.js +12 -151
  211. package/dist/tooltip/Tooltip.stories.js +13 -71
  212. package/dist/utils.js +2 -4
  213. package/dist/vstack/VStack.js +3 -63
  214. package/dist/vstack/VStack.stories.js +7 -19
  215. package/package.json +4 -4
@@ -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';
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,106 +8,59 @@ 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 items-start ".concat(textColor, " ").concat(bgColor, " border-l-8 ").concat(borderColor, " p-3 space-y-3 w-full"),
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 items-start ${textColor} ${bgColor} border-l-8 ${borderColor} p-3 space-y-3 w-full`, 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
- switch(status){
29
+ const getStyles = (status) => {
30
+ switch (status) {
70
31
  case 'error':
71
32
  return {
72
- icon: /*#__PURE__*/ _jsx(IconTriangleExclamation, {
73
- size: '24px'
74
- }),
33
+ icon: _jsx(IconTriangleExclamation, { size: '24px' }),
75
34
  bgColor: 'bg-accent-50',
76
35
  titleColor: 'text-accent-300',
77
36
  textColor: 'text-accent-600',
78
- borderColor: 'border-accent-300'
37
+ borderColor: 'border-accent-300',
79
38
  };
80
39
  case 'success':
81
40
  return {
82
- icon: /*#__PURE__*/ _jsx(IconCircleMark, {
83
- variant: "on",
84
- size: '24px'
85
- }),
41
+ icon: _jsx(IconCircleMark, { variant: "on", size: '24px' }),
86
42
  bgColor: 'bg-success-50',
87
43
  titleColor: 'text-success-300',
88
44
  textColor: 'text-success-600',
89
- borderColor: 'border-success-300'
45
+ borderColor: 'border-success-300',
90
46
  };
91
47
  case 'warning':
92
48
  return {
93
- icon: /*#__PURE__*/ _jsx(IconCircleExclamation, {
94
- size: '24px'
95
- }),
49
+ icon: _jsx(IconCircleExclamation, { size: '24px' }),
96
50
  bgColor: 'bg-warning-50',
97
51
  titleColor: 'text-warning-300',
98
52
  textColor: 'text-warning-600',
99
- borderColor: 'border-warning-300'
53
+ borderColor: 'border-warning-300',
100
54
  };
101
55
  default:
102
56
  return {
103
- icon: /*#__PURE__*/ _jsx(IconInfo, {
104
- size: '24px'
105
- }),
57
+ icon: _jsx(IconInfo, { size: '24px' }),
106
58
  bgColor: 'bg-info-50',
107
59
  titleColor: 'text-info-300',
108
60
  textColor: 'text-info-600',
109
- borderColor: 'border-info-300'
61
+ borderColor: 'border-info-300',
110
62
  };
111
63
  }
112
64
  };
113
65
  export default ToastBox;
66
+ //# sourceMappingURL=ToastBox.js.map
@@ -1 +1,2 @@
1
1
  export { Toaster, toast } from './sonner';
2
+ //# sourceMappingURL=index.js.map
@@ -1,81 +1,22 @@
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: "toaster group",
58
- position: "bottom-center",
59
- toastOptions: {
6
+ const Toaster = ({ ...props }) => {
7
+ const { theme = 'system' } = useTheme();
8
+ return (_jsx(Sonner, { theme: theme, className: "toaster group", position: "bottom-center", toastOptions: {
60
9
  classNames: {
61
- toast: 'p-0'
62
- }
63
- }
64
- }, props));
10
+ toast: 'p-0',
11
+ },
12
+ }, ...props }));
65
13
  };
66
- var toast = function(param) {
67
- 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;
68
- var toastId = sonnerToast('');
69
- sonnerToast(/*#__PURE__*/ _jsx(ToastBox, {
14
+ const toast = ({ title, description, status, isClosable = true, isNumbered, }) => {
15
+ const toastId = sonnerToast('');
16
+ sonnerToast(_jsx(ToastBox, { id: toastId, title: title, description: description, status: status, isClosable: isClosable, isNumbered: isNumbered }), {
70
17
  id: toastId,
71
- title: title,
72
- description: description,
73
- status: status,
74
- isClosable: isClosable,
75
- isNumbered: isNumbered
76
- }), {
77
- id: toastId,
78
- className: 'rounded-none p-0 border-0'
18
+ className: 'rounded-none p-0 border-0',
79
19
  });
80
20
  };
81
21
  export { Toaster, toast };
22
+ //# sourceMappingURL=sonner.js.map