@driveflux/beam 3.0.10 → 3.0.11

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