@driveflux/beam 3.0.9 → 3.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/Accordion.js +7 -133
- package/dist/accordion/Accordion.stories.js +11 -31
- package/dist/alert/Alert.js +19 -120
- package/dist/alert/Alert.stories.js +15 -50
- package/dist/animations/LoadingAnimation.js +21 -34
- package/dist/badge/Badge.js +7 -96
- package/dist/badge/Badge.stories.js +7 -28
- package/dist/box/Box.js +3 -87
- package/dist/box/Box.stories.js +7 -8
- package/dist/breadcrumbs/Breadcrumbs.js +28 -288
- package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
- package/dist/button/Button.js +16 -128
- package/dist/button/Button.js.map +1 -1
- package/dist/button/Button.stories.js +7 -35
- package/dist/button/TextButton.js +11 -106
- package/dist/button/TextButton.js.map +1 -1
- package/dist/card/Card.js +7 -109
- package/dist/card/Card.stories.js +7 -10
- package/dist/carousel/Carousel.js +58 -281
- package/dist/carousel/Carousel.stories.js +7 -39
- package/dist/carousel/CarouselButton.js +7 -68
- package/dist/center/Center.js +3 -63
- package/dist/center/Center.stories.js +7 -19
- package/dist/checkbox/Checkbox.js +4 -124
- package/dist/checkbox/Checkbox.stories.js +8 -10
- package/dist/chip/Chip.js +3 -104
- package/dist/chip/Chip.stories.js +7 -19
- package/dist/circular-progress/CircularProgress.js +11 -150
- package/dist/circular-progress/CircularProgress.stories.js +14 -54
- package/dist/command/command.js +13 -170
- package/dist/datepicker/DatePicker.js +90 -234
- package/dist/datepicker/DatePicker.stories.js +58 -163
- package/dist/datepicker/DatePickerDrawer.js +17 -116
- package/dist/datepicker/DatePickerPopover.js +35 -208
- package/dist/datepicker/constants.js +4 -3
- package/dist/datepicker/utils.js +11 -4
- package/dist/dialog/index.js +33 -180
- package/dist/divider/Divider.js +3 -63
- package/dist/divider/Divider.stories.js +7 -13
- package/dist/drawer/index.js +12 -157
- package/dist/dropdown/Dropdown.js +26 -212
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -139
- package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
- package/dist/flex/Flex.js +3 -63
- package/dist/flex/Flex.stories.js +7 -19
- package/dist/grid/Grid.js +3 -63
- package/dist/grid/Grid.stories.js +7 -28
- package/dist/hooks/use-breakpoint-value.js +14 -77
- package/dist/hooks/use-media-query.js +12 -61
- package/dist/hstack/HStack.js +3 -63
- package/dist/hstack/HStack.stories.js +7 -19
- package/dist/icons/FluxLogo.js +9 -213
- package/dist/icons/FluxLogoTable.js +5 -109
- package/dist/icons/Icon.js +7 -108
- package/dist/icons/Icon.stories.js +7 -12
- package/dist/icons/Icon24Hours.js +5 -83
- package/dist/icons/IconAcceleration.js +4 -72
- package/dist/icons/IconAccount.js +4 -72
- package/dist/icons/IconApplicant.js +5 -78
- package/dist/icons/IconArrow.js +6 -78
- package/dist/icons/IconArrowBack.js +4 -72
- package/dist/icons/IconArrowForward.js +4 -72
- package/dist/icons/IconArrowTopLeft.js +4 -70
- package/dist/icons/IconBluesharkProductGuide.js +5 -80
- package/dist/icons/IconBolt.js +4 -72
- package/dist/icons/IconBriefcase.js +4 -72
- package/dist/icons/IconBulb.js +4 -72
- package/dist/icons/IconCalendar.js +4 -72
- package/dist/icons/IconCalendarArrowBack.js +4 -72
- package/dist/icons/IconCalendarArrowForward.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
- package/dist/icons/IconCancel.js +5 -77
- package/dist/icons/IconCancelMark.js +4 -72
- package/dist/icons/IconCarSUV.js +4 -72
- package/dist/icons/IconCarSedan.js +7 -147
- package/dist/icons/IconChain.js +5 -79
- package/dist/icons/IconCheckmark.js +4 -72
- package/dist/icons/IconChevronRight.js +4 -72
- package/dist/icons/IconCircle.js +11 -114
- package/dist/icons/IconCircleCheckmark.js +5 -77
- package/dist/icons/IconCircleError.js +4 -72
- package/dist/icons/IconCircleExclamation.js +6 -104
- package/dist/icons/IconCircleMark.js +5 -78
- package/dist/icons/IconCircleOutline.js +5 -139
- package/dist/icons/IconClock.js +5 -80
- package/dist/icons/IconClose.js +4 -72
- package/dist/icons/IconCollapseAll.js +5 -94
- package/dist/icons/IconConcierge.js +5 -79
- package/dist/icons/IconConciergeService.js +5 -87
- package/dist/icons/IconCreditCard.js +5 -78
- package/dist/icons/IconDash.js +4 -72
- package/dist/icons/IconDeliver.js +4 -72
- package/dist/icons/IconDelivery.js +5 -87
- package/dist/icons/IconDetails.js +4 -72
- package/dist/icons/IconDot.js +6 -87
- package/dist/icons/IconDownload.js +5 -79
- package/dist/icons/IconEVCharging.js +5 -79
- package/dist/icons/IconElectricCarFuel.js +5 -80
- package/dist/icons/IconEllipsis.js +5 -78
- package/dist/icons/IconEnvelope.js +4 -72
- package/dist/icons/IconExpandAll.js +5 -94
- package/dist/icons/IconEye.js +5 -79
- package/dist/icons/IconFacebook.js +6 -94
- package/dist/icons/IconFilter.js +5 -83
- package/dist/icons/IconFlagMalaysia.js +5 -141
- package/dist/icons/IconGiveKey.js +5 -79
- package/dist/icons/IconGlobe.js +4 -70
- package/dist/icons/IconGoogle.js +5 -87
- package/dist/icons/IconHome.js +5 -78
- package/dist/icons/IconHostAdvertise.js +4 -72
- package/dist/icons/IconHostCar.js +4 -75
- package/dist/icons/IconHostCash.js +5 -91
- package/dist/icons/IconHostHandle.js +4 -70
- package/dist/icons/IconHostLocation.js +4 -70
- package/dist/icons/IconHostPayment.js +5 -91
- package/dist/icons/IconHostService.js +5 -79
- package/dist/icons/IconHotDeals.js +4 -72
- package/dist/icons/IconInfo.js +5 -77
- package/dist/icons/IconInstagram.js +4 -72
- package/dist/icons/IconInsurance.js +5 -99
- package/dist/icons/IconInternet.js +4 -73
- package/dist/icons/IconInventory.js +5 -78
- package/dist/icons/IconLaurel.js +5 -101
- package/dist/icons/IconLinkedIn.js +4 -72
- package/dist/icons/IconLoading.js +4 -78
- package/dist/icons/IconLocation.js +5 -80
- package/dist/icons/IconLock.js +4 -73
- package/dist/icons/IconLogistics.js +4 -72
- package/dist/icons/IconMail.js +5 -94
- package/dist/icons/IconMember.js +5 -78
- package/dist/icons/IconMobilePen.js +5 -83
- package/dist/icons/IconMotorcycleMoped.js +5 -78
- package/dist/icons/IconNoCost.js +5 -92
- package/dist/icons/IconPDF.js +5 -80
- package/dist/icons/IconPencil.js +4 -70
- package/dist/icons/IconPhone.js +4 -70
- package/dist/icons/IconPlus.js +4 -72
- package/dist/icons/IconPricing.js +4 -72
- package/dist/icons/IconProtected.js +4 -71
- package/dist/icons/IconPsychology.js +4 -72
- package/dist/icons/IconQuestionTooltip.js +4 -73
- package/dist/icons/IconQuote.js +4 -72
- package/dist/icons/IconRate.js +4 -71
- package/dist/icons/IconRegister.js +5 -99
- package/dist/icons/IconReport.js +6 -89
- package/dist/icons/IconReturn.js +4 -72
- package/dist/icons/IconSearch.js +4 -70
- package/dist/icons/IconSecure.js +4 -71
- package/dist/icons/IconSecurity.js +4 -73
- package/dist/icons/IconSedanOutline.js +5 -159
- package/dist/icons/IconSelectArrow.js +6 -78
- package/dist/icons/IconSort.js +5 -79
- package/dist/icons/IconSortListed.js +5 -95
- package/dist/icons/IconSortPriceAscending.js +5 -83
- package/dist/icons/IconSortPriceDescending.js +5 -83
- package/dist/icons/IconSortYear.js +5 -79
- package/dist/icons/IconSpan.js +4 -71
- package/dist/icons/IconSpeaker.js +4 -79
- package/dist/icons/IconSpecialCar.js +5 -95
- package/dist/icons/IconStar.js +7 -92
- package/dist/icons/IconStockPhoto.js +5 -95
- package/dist/icons/IconSubscription.js +6 -113
- package/dist/icons/IconSubscriptions.js +6 -113
- package/dist/icons/IconSwap.js +5 -79
- package/dist/icons/IconTax.js +4 -72
- package/dist/icons/IconThinArrow.js +6 -78
- package/dist/icons/IconThumbsdown.js +5 -78
- package/dist/icons/IconThumbsup.js +5 -78
- package/dist/icons/IconTool.js +4 -72
- package/dist/icons/IconTooltip.js +4 -73
- package/dist/icons/IconTrash.js +4 -72
- package/dist/icons/IconTriangleExclamation.js +4 -72
- package/dist/icons/IconTyersBrakes.js +5 -83
- package/dist/icons/IconTyre.js +5 -83
- package/dist/icons/IconVacancy.js +5 -78
- package/dist/icons/IconVolunteer.js +4 -72
- package/dist/icons/IconWhatsapp.js +4 -73
- package/dist/icons/IconXPlatform.js +4 -72
- package/dist/icons/IconZeroEffort.js +5 -77
- package/dist/icons/Logo.js +3 -99
- package/dist/input/Input.js +11 -125
- package/dist/input/Input.stories.js +18 -17
- package/dist/input-mask/InputMask.js +11 -149
- package/dist/input-mask/InputMask.stories.js +6 -5
- package/dist/input-mask/mask-trackers.js +5 -4
- package/dist/input-select/InputSelect.js +68 -357
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -72
- package/dist/progress/Progress.js +2 -96
- package/dist/progress/Progress.stories.js +14 -13
- package/dist/radio/Radio.js +4 -163
- package/dist/scroll-area/scroll-area.js +5 -113
- package/dist/search-input-select/SearchInputSelect.js +69 -346
- package/dist/select/Select.js +29 -315
- package/dist/select/Select.stories.js +19 -55
- package/dist/skeleton/Skeleton.js +3 -62
- package/dist/skeleton/Skeleton.stories.js +7 -8
- package/dist/slider/Slider.js +5 -106
- package/dist/slider/Slider.stories.js +11 -12
- package/dist/stack/Stack.js +3 -63
- package/dist/stack/Stack.stories.js +7 -19
- package/dist/table/Table.js +10 -131
- package/dist/table/Table.stories.js +8 -84
- package/dist/tabs/Tabs.js +9 -128
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.js +6 -88
- package/dist/text/Text.js.map +1 -1
- package/dist/text/Text.stories.js +7 -44
- package/dist/toast/Toast.stories.js +14 -66
- package/dist/toast/ToastBox.js +29 -77
- package/dist/toast/index.js +1 -0
- package/dist/toast/sonner.js +6 -66
- package/dist/toggle/Toggle.js +7 -116
- package/dist/toggle/Toggle.stories.js +8 -10
- package/dist/tooltip/Tooltip.js +12 -151
- package/dist/tooltip/Tooltip.stories.js +13 -71
- package/dist/utils.js +2 -4
- package/dist/vstack/VStack.js +3 -63
- package/dist/vstack/VStack.stories.js +7 -19
- package/package.json +1 -1
|
@@ -1,62 +1,29 @@
|
|
|
1
|
-
import {
|
|
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
|
-
|
|
8
|
-
component: Tabs
|
|
7
|
+
const meta = {
|
|
8
|
+
component: Tabs,
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
|
-
export
|
|
12
|
-
render:
|
|
13
|
-
return
|
|
14
|
-
|
|
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
|
-
|
|
16
|
+
const tabs = [
|
|
37
17
|
{
|
|
38
|
-
icon:
|
|
39
|
-
size: 16
|
|
40
|
-
}),
|
|
18
|
+
icon: _jsx(IconSort, { size: 16 }),
|
|
41
19
|
key: 'tab1',
|
|
42
20
|
label: 'tab 1',
|
|
43
|
-
content:
|
|
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:
|
|
59
|
-
|
|
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
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
|
91
|
-
}
|
|
7
|
+
ref,
|
|
8
|
+
}, children);
|
|
92
9
|
});
|
|
93
10
|
Text.displayName = 'Text';
|
|
94
11
|
export default Text;
|
|
12
|
+
//# sourceMappingURL=Text.js.map
|
package/dist/text/Text.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAA;AAUhC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAE,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpD,OAAO,KAAK,CAAC,aAAa,CACzB,EAAE,EACF;QACC,GAAG,KAAK;QACR,SAAS,EAAE,EAAE,CACZ,4BAA4B,EAC5B,EAAE,KAAK,IAAI,IAAI,uBAAuB,EACtC,EAAE,KAAK,IAAI,IAAI,yBAAyB,EACxC,SAAS,CACT;QACD,GAAG;KACH,EACD,QAAQ,CACR,CAAA;AACF,CAAC,CACD,CAAA;AACD,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,eAAe,IAAI,CAAA"}
|
|
@@ -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
|
-
|
|
5
|
-
component: Text
|
|
4
|
+
const meta = {
|
|
5
|
+
component: Text,
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
|
-
export
|
|
9
|
-
render:
|
|
10
|
-
return
|
|
11
|
-
|
|
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
|
-
|
|
7
|
-
component: Toaster
|
|
6
|
+
const meta = {
|
|
7
|
+
component: Toaster,
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
|
-
export
|
|
11
|
-
render:
|
|
12
|
-
return
|
|
13
|
-
|
|
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
|
-
|
|
58
|
-
|
|
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
|
|
65
|
-
isNumbered: true
|
|
21
|
+
isClosable,
|
|
22
|
+
isNumbered: true,
|
|
66
23
|
});
|
|
67
24
|
};
|
|
68
|
-
return
|
|
69
|
-
colorScheme: buttonColor,
|
|
70
|
-
onClick: showToast,
|
|
71
|
-
children: title
|
|
72
|
-
});
|
|
25
|
+
return (_jsx(Button, { colorScheme: buttonColor, onClick: showToast, children: title }));
|
|
73
26
|
};
|
|
74
|
-
|
|
75
|
-
|
|
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
|
package/dist/toast/ToastBox.js
CHANGED
|
@@ -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
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
return
|
|
17
|
-
|
|
18
|
-
|
|
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
|
-
|
|
54
|
-
|
|
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
|
|
61
|
-
children: listItems
|
|
62
|
-
});
|
|
25
|
+
return _jsx("ol", { children: listItems });
|
|
63
26
|
}
|
|
64
|
-
return
|
|
65
|
-
children: listItems
|
|
66
|
-
});
|
|
27
|
+
return _jsx("ul", { children: listItems });
|
|
67
28
|
};
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
icon:
|
|
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:
|
|
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:
|
|
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:
|
|
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
|
-
|
|
118
|
-
|
|
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
|
package/dist/toast/index.js
CHANGED
package/dist/toast/sonner.js
CHANGED
|
@@ -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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
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
|
-
|
|
62
|
-
|
|
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
|