@driveflux/beam 3.0.18 → 3.0.19
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 -203
- package/dist/accordion/Accordion.stories.js +11 -31
- package/dist/alert/Alert.js +19 -193
- package/dist/alert/Alert.stories.js +15 -50
- package/dist/animations/LoadingAnimation.js +21 -34
- package/dist/badge/Badge.js +7 -105
- package/dist/badge/Badge.stories.js +7 -28
- package/dist/box/Box.js +3 -151
- package/dist/box/Box.stories.js +7 -8
- package/dist/breadcrumbs/Breadcrumbs.js +26 -351
- package/dist/breadcrumbs/Breadcrumbs.stories.js +27 -51
- package/dist/button/Button.js +12 -190
- package/dist/button/Button.stories.js +7 -35
- package/dist/button/TextButton.js +9 -168
- package/dist/card/Card.js +7 -188
- package/dist/card/Card.stories.js +7 -10
- package/dist/carousel/Carousel.js +58 -308
- package/dist/carousel/Carousel.stories.js +7 -39
- package/dist/carousel/CarouselButton.js +7 -132
- package/dist/center/Center.js +3 -127
- package/dist/center/Center.stories.js +7 -19
- package/dist/checkbox/Checkbox.js +4 -188
- package/dist/checkbox/Checkbox.stories.js +8 -10
- package/dist/chip/Chip.js +3 -168
- package/dist/chip/Chip.stories.js +7 -19
- package/dist/circular-progress/CircularProgress.js +11 -159
- package/dist/circular-progress/CircularProgress.stories.js +14 -54
- package/dist/command/command.js +13 -249
- package/dist/datepicker/DatePicker.js +90 -245
- package/dist/datepicker/DatePicker.stories.js +58 -162
- package/dist/datepicker/DatePickerDrawer.js +17 -115
- 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 +12 -253
- package/dist/divider/Divider.js +3 -127
- package/dist/divider/Divider.stories.js +7 -13
- package/dist/drawer/index.js +12 -230
- package/dist/dropdown/Dropdown.js +26 -297
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -203
- package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
- package/dist/flex/Flex.js +3 -127
- package/dist/flex/Flex.stories.js +7 -19
- package/dist/grid/Grid.js +3 -127
- 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 -127
- package/dist/hstack/HStack.stories.js +7 -19
- package/dist/icons/FluxLogo.js +9 -222
- package/dist/icons/FluxLogoTable.js +5 -118
- package/dist/icons/Icon.js +7 -117
- package/dist/icons/Icon.stories.js +7 -12
- package/dist/icons/Icon24Hours.js +5 -92
- package/dist/icons/IconAcceleration.js +4 -81
- package/dist/icons/IconAccount.js +4 -81
- package/dist/icons/IconApplicant.js +5 -87
- package/dist/icons/IconArrow.js +6 -87
- package/dist/icons/IconArrowBack.js +4 -81
- package/dist/icons/IconArrowForward.js +4 -81
- package/dist/icons/IconArrowTopLeft.js +4 -79
- package/dist/icons/IconBluesharkProductGuide.js +5 -89
- package/dist/icons/IconBolt.js +4 -81
- package/dist/icons/IconBriefcase.js +4 -81
- package/dist/icons/IconBulb.js +4 -81
- package/dist/icons/IconCalendar.js +4 -81
- package/dist/icons/IconCalendarArrowBack.js +4 -81
- package/dist/icons/IconCalendarArrowForward.js +4 -81
- package/dist/icons/IconCalendarDoubleArrowBack.js +4 -81
- package/dist/icons/IconCalendarDoubleArrowForward.js +4 -81
- package/dist/icons/IconCancel.js +5 -86
- package/dist/icons/IconCancelMark.js +4 -81
- package/dist/icons/IconCarSUV.js +4 -81
- package/dist/icons/IconCarSedan.js +7 -156
- package/dist/icons/IconChain.js +5 -88
- package/dist/icons/IconCheckmark.js +4 -81
- package/dist/icons/IconChevronRight.js +4 -81
- package/dist/icons/IconCircle.js +11 -123
- package/dist/icons/IconCircleCheckmark.js +5 -86
- package/dist/icons/IconCircleError.js +4 -81
- package/dist/icons/IconCircleExclamation.js +6 -113
- package/dist/icons/IconCircleMark.js +5 -87
- package/dist/icons/IconCircleOutline.js +5 -148
- package/dist/icons/IconClock.js +5 -89
- package/dist/icons/IconClose.js +4 -81
- package/dist/icons/IconCollapseAll.js +5 -103
- package/dist/icons/IconConcierge.js +5 -88
- package/dist/icons/IconConciergeService.js +5 -96
- package/dist/icons/IconCreditCard.js +5 -87
- package/dist/icons/IconDash.js +4 -81
- package/dist/icons/IconDeliver.js +4 -81
- package/dist/icons/IconDelivery.js +5 -96
- package/dist/icons/IconDetails.js +4 -81
- package/dist/icons/IconDot.js +6 -96
- package/dist/icons/IconDownload.js +5 -88
- package/dist/icons/IconEVCharging.js +5 -88
- package/dist/icons/IconElectricCarFuel.js +5 -89
- package/dist/icons/IconEllipsis.js +5 -87
- package/dist/icons/IconEnvelope.js +4 -81
- package/dist/icons/IconExpandAll.js +5 -103
- package/dist/icons/IconEye.js +5 -88
- package/dist/icons/IconFacebook.js +6 -103
- package/dist/icons/IconFilter.js +5 -92
- package/dist/icons/IconFlagMalaysia.js +5 -150
- package/dist/icons/IconGiveKey.js +5 -88
- package/dist/icons/IconGlobe.js +4 -79
- package/dist/icons/IconGoogle.js +5 -96
- package/dist/icons/IconHome.js +5 -87
- package/dist/icons/IconHostAdvertise.js +4 -81
- package/dist/icons/IconHostCar.js +4 -84
- package/dist/icons/IconHostCash.js +5 -100
- package/dist/icons/IconHostHandle.js +4 -79
- package/dist/icons/IconHostLocation.js +4 -79
- package/dist/icons/IconHostPayment.js +5 -100
- package/dist/icons/IconHostService.js +5 -88
- package/dist/icons/IconHotDeals.js +4 -81
- package/dist/icons/IconInfo.js +5 -86
- package/dist/icons/IconInstagram.js +4 -81
- package/dist/icons/IconInsurance.js +5 -108
- package/dist/icons/IconInternet.js +4 -82
- package/dist/icons/IconInventory.js +5 -87
- package/dist/icons/IconLaurel.js +5 -110
- package/dist/icons/IconLinkedIn.js +4 -81
- package/dist/icons/IconLoading.js +4 -87
- package/dist/icons/IconLocation.js +5 -89
- package/dist/icons/IconLock.js +4 -82
- package/dist/icons/IconLogistics.js +4 -81
- package/dist/icons/IconMail.js +5 -103
- package/dist/icons/IconMember.js +5 -87
- package/dist/icons/IconMobilePen.js +5 -92
- package/dist/icons/IconMotorcycleMoped.js +5 -87
- package/dist/icons/IconNoCost.js +5 -101
- package/dist/icons/IconPDF.js +5 -89
- package/dist/icons/IconPencil.js +4 -79
- package/dist/icons/IconPhone.js +4 -79
- package/dist/icons/IconPlus.js +4 -81
- package/dist/icons/IconPricing.js +4 -81
- package/dist/icons/IconProtected.js +4 -80
- package/dist/icons/IconPsychology.js +4 -81
- package/dist/icons/IconQuestionTooltip.js +4 -137
- package/dist/icons/IconQuote.js +4 -81
- package/dist/icons/IconRate.js +4 -80
- package/dist/icons/IconRegister.js +5 -108
- package/dist/icons/IconReport.js +6 -98
- package/dist/icons/IconReturn.js +4 -81
- package/dist/icons/IconSearch.js +4 -79
- package/dist/icons/IconSecure.js +4 -80
- package/dist/icons/IconSecurity.js +4 -82
- package/dist/icons/IconSedanOutline.js +5 -168
- package/dist/icons/IconSelectArrow.js +6 -87
- package/dist/icons/IconSort.js +5 -88
- package/dist/icons/IconSortListed.js +5 -104
- package/dist/icons/IconSortPriceAscending.js +5 -92
- package/dist/icons/IconSortPriceDescending.js +5 -92
- package/dist/icons/IconSortYear.js +5 -88
- package/dist/icons/IconSpan.js +4 -80
- package/dist/icons/IconSpeaker.js +4 -88
- package/dist/icons/IconSpecialCar.js +5 -104
- package/dist/icons/IconStar.js +7 -101
- package/dist/icons/IconStockPhoto.js +5 -104
- package/dist/icons/IconSubscription.js +6 -122
- package/dist/icons/IconSubscriptions.js +6 -122
- package/dist/icons/IconSwap.js +5 -88
- package/dist/icons/IconTax.js +4 -81
- package/dist/icons/IconThinArrow.js +6 -87
- package/dist/icons/IconThumbsdown.js +5 -87
- package/dist/icons/IconThumbsup.js +5 -87
- package/dist/icons/IconTool.js +4 -81
- package/dist/icons/IconTooltip.js +4 -137
- package/dist/icons/IconTrash.js +4 -81
- package/dist/icons/IconTriangleExclamation.js +4 -81
- package/dist/icons/IconTyersBrakes.js +5 -92
- package/dist/icons/IconTyre.js +5 -92
- package/dist/icons/IconVacancy.js +5 -87
- package/dist/icons/IconVolunteer.js +4 -81
- package/dist/icons/IconWhatsapp.js +4 -82
- package/dist/icons/IconXPlatform.js +4 -81
- package/dist/icons/IconZeroEffort.js +5 -86
- package/dist/icons/Logo.js +3 -108
- package/dist/input/Input.js +11 -134
- package/dist/input/Input.stories.js +18 -17
- package/dist/input-mask/InputMask.js +11 -158
- 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 -390
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -136
- package/dist/progress/Progress.js +2 -160
- package/dist/progress/Progress.stories.js +14 -13
- package/dist/radio/Radio.js +4 -227
- package/dist/scroll-area/scroll-area.js +5 -180
- package/dist/search-input-select/SearchInputSelect.js +69 -379
- package/dist/select/Select.js +29 -354
- package/dist/select/Select.stories.js +19 -55
- package/dist/skeleton/Skeleton.js +3 -71
- package/dist/skeleton/Skeleton.stories.js +7 -8
- package/dist/slider/Slider.js +5 -170
- package/dist/slider/Slider.stories.js +11 -12
- package/dist/stack/Stack.js +3 -127
- package/dist/stack/Stack.stories.js +7 -19
- package/dist/table/Table.js +10 -216
- package/dist/table/Table.stories.js +8 -84
- package/dist/tabs/Tabs.js +9 -198
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.js +6 -152
- 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 -180
- package/dist/toggle/Toggle.stories.js +8 -10
- package/dist/tooltip/Tooltip.js +12 -169
- package/dist/tooltip/Tooltip.stories.js +13 -71
- package/dist/utils.js +2 -4
- package/dist/vstack/VStack.js +3 -127
- package/dist/vstack/VStack.stories.js +7 -19
- package/package.json +16 -16
|
@@ -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 showToast() {
|
|
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 onClick() {
|
|
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
|
package/dist/toggle/Toggle.js
CHANGED
|
@@ -1,195 +1,22 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
function _array_like_to_array(arr, len) {
|
|
3
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
4
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
5
|
-
return arr2;
|
|
6
|
-
}
|
|
7
|
-
function _array_with_holes(arr) {
|
|
8
|
-
if (Array.isArray(arr)) return arr;
|
|
9
|
-
}
|
|
10
|
-
function _define_property(obj, key, value) {
|
|
11
|
-
if (key in obj) {
|
|
12
|
-
Object.defineProperty(obj, key, {
|
|
13
|
-
value: value,
|
|
14
|
-
enumerable: true,
|
|
15
|
-
configurable: true,
|
|
16
|
-
writable: true
|
|
17
|
-
});
|
|
18
|
-
} else {
|
|
19
|
-
obj[key] = value;
|
|
20
|
-
}
|
|
21
|
-
return obj;
|
|
22
|
-
}
|
|
23
|
-
function _iterable_to_array(iter) {
|
|
24
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
25
|
-
}
|
|
26
|
-
function _iterable_to_array_limit(arr, i) {
|
|
27
|
-
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
|
|
28
|
-
if (_i == null) return;
|
|
29
|
-
var _arr = [];
|
|
30
|
-
var _n = true;
|
|
31
|
-
var _d = false;
|
|
32
|
-
var _s, _e;
|
|
33
|
-
try {
|
|
34
|
-
for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
|
|
35
|
-
_arr.push(_s.value);
|
|
36
|
-
if (i && _arr.length === i) break;
|
|
37
|
-
}
|
|
38
|
-
} catch (err) {
|
|
39
|
-
_d = true;
|
|
40
|
-
_e = err;
|
|
41
|
-
} finally{
|
|
42
|
-
try {
|
|
43
|
-
if (!_n && _i["return"] != null) _i["return"]();
|
|
44
|
-
} finally{
|
|
45
|
-
if (_d) throw _e;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
return _arr;
|
|
49
|
-
}
|
|
50
|
-
function _non_iterable_rest() {
|
|
51
|
-
throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
52
|
-
}
|
|
53
|
-
function _object_spread(target) {
|
|
54
|
-
for(var i = 1; i < arguments.length; i++){
|
|
55
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
56
|
-
var ownKeys = Object.keys(source);
|
|
57
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
58
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
59
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
60
|
-
}));
|
|
61
|
-
}
|
|
62
|
-
ownKeys.forEach(function(key) {
|
|
63
|
-
_define_property(target, key, source[key]);
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
return target;
|
|
67
|
-
}
|
|
68
|
-
function ownKeys(object, enumerableOnly) {
|
|
69
|
-
var keys = Object.keys(object);
|
|
70
|
-
if (Object.getOwnPropertySymbols) {
|
|
71
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
72
|
-
if (enumerableOnly) {
|
|
73
|
-
symbols = symbols.filter(function(sym) {
|
|
74
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
keys.push.apply(keys, symbols);
|
|
78
|
-
}
|
|
79
|
-
return keys;
|
|
80
|
-
}
|
|
81
|
-
function _object_spread_props(target, source) {
|
|
82
|
-
source = source != null ? source : {};
|
|
83
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
84
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
85
|
-
} else {
|
|
86
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
87
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
return target;
|
|
91
|
-
}
|
|
92
|
-
function _object_without_properties(source, excluded) {
|
|
93
|
-
if (source == null) return {};
|
|
94
|
-
var target = {}, sourceKeys, key, i;
|
|
95
|
-
if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
|
|
96
|
-
sourceKeys = Reflect.ownKeys(Object(source));
|
|
97
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
98
|
-
key = sourceKeys[i];
|
|
99
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
100
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
101
|
-
target[key] = source[key];
|
|
102
|
-
}
|
|
103
|
-
return target;
|
|
104
|
-
}
|
|
105
|
-
target = _object_without_properties_loose(source, excluded);
|
|
106
|
-
if (Object.getOwnPropertySymbols) {
|
|
107
|
-
sourceKeys = Object.getOwnPropertySymbols(source);
|
|
108
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
109
|
-
key = sourceKeys[i];
|
|
110
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
111
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
112
|
-
target[key] = source[key];
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
return target;
|
|
116
|
-
}
|
|
117
|
-
function _object_without_properties_loose(source, excluded) {
|
|
118
|
-
if (source == null) return {};
|
|
119
|
-
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
120
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
121
|
-
key = sourceKeys[i];
|
|
122
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
123
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
124
|
-
target[key] = source[key];
|
|
125
|
-
}
|
|
126
|
-
return target;
|
|
127
|
-
}
|
|
128
|
-
function _sliced_to_array(arr, i) {
|
|
129
|
-
return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
|
|
130
|
-
}
|
|
131
|
-
function _to_array(arr) {
|
|
132
|
-
return _array_with_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_rest();
|
|
133
|
-
}
|
|
134
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
135
|
-
if (!o) return;
|
|
136
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
137
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
138
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
139
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
140
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
141
|
-
}
|
|
142
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
143
3
|
import Button from '@driveflux/beam/button';
|
|
144
4
|
import { cn } from '@driveflux/beam/utils';
|
|
145
5
|
import * as React from 'react';
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
_0,
|
|
149
|
-
_1
|
|
150
|
-
], _ref1 = _to_array(_ref), _ref2 = _ref1[0], _rest = _ref1.slice(1), className = _ref2.className, _ref_checked = _ref2.checked, checked = _ref_checked === void 0 ? false : _ref_checked, onCheckedChange = _ref2.onCheckedChange, disabled = _ref2.disabled, props = _object_without_properties(_ref2, [
|
|
151
|
-
"className",
|
|
152
|
-
"checked",
|
|
153
|
-
"onCheckedChange",
|
|
154
|
-
"disabled"
|
|
155
|
-
]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
|
|
156
|
-
var handleClick = function handleClick() {
|
|
6
|
+
const ToggleRoot = React.forwardRef(({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
|
|
7
|
+
const handleClick = () => {
|
|
157
8
|
if (!disabled && onCheckedChange) {
|
|
158
9
|
onCheckedChange(!checked);
|
|
159
10
|
}
|
|
160
11
|
};
|
|
161
|
-
return
|
|
162
|
-
ref: ref,
|
|
163
|
-
onClick: handleClick,
|
|
164
|
-
isDisabled: disabled,
|
|
165
|
-
role: "switch",
|
|
166
|
-
"aria-checked": checked,
|
|
167
|
-
className: cn('relative h-6 w-[46px] rounded-full p-0 min-w-0 block items-start justify-start bg-primary2', checked ? 'bg-black hover:bg-black' : 'bg-primary2 hover:bg-primary2', className)
|
|
168
|
-
}, props), {
|
|
169
|
-
children: /*#__PURE__*/ _jsx("span", {
|
|
170
|
-
className: cn('inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300', checked ? 'translate-x-6' : 'translate-x-[2px]')
|
|
171
|
-
})
|
|
172
|
-
}));
|
|
12
|
+
return (_jsx(Button, { ref: ref, onClick: handleClick, isDisabled: disabled, role: "switch", "aria-checked": checked, className: cn('relative h-6 w-[46px] rounded-full p-0 min-w-0 block items-start justify-start bg-primary2', checked ? 'bg-black hover:bg-black' : 'bg-primary2 hover:bg-primary2', className), ...props, children: _jsx("span", { className: cn('inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300', checked ? 'translate-x-6' : 'translate-x-[2px]') }) }));
|
|
173
13
|
});
|
|
174
14
|
ToggleRoot.displayName = 'ToggleRoot';
|
|
175
|
-
|
|
176
|
-
var children = _0.children, htmlFor = _0.htmlFor, props = _object_without_properties(_0, [
|
|
177
|
-
"children",
|
|
178
|
-
"htmlFor"
|
|
179
|
-
]);
|
|
15
|
+
const Toggle = ({ children, htmlFor, ...props }) => {
|
|
180
16
|
if (children && htmlFor) {
|
|
181
|
-
return
|
|
182
|
-
className: "flex items-center gap-2",
|
|
183
|
-
children: [
|
|
184
|
-
/*#__PURE__*/ _jsx(ToggleRoot, _object_spread({}, props)),
|
|
185
|
-
/*#__PURE__*/ _jsx("label", {
|
|
186
|
-
htmlFor: htmlFor,
|
|
187
|
-
className: "flex-1",
|
|
188
|
-
children: children
|
|
189
|
-
})
|
|
190
|
-
]
|
|
191
|
-
});
|
|
17
|
+
return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ToggleRoot, { ...props }), _jsx("label", { htmlFor: htmlFor, className: "flex-1", children: children })] }));
|
|
192
18
|
}
|
|
193
|
-
return
|
|
19
|
+
return _jsx(ToggleRoot, { ...props });
|
|
194
20
|
};
|
|
195
21
|
export default Toggle;
|
|
22
|
+
//# sourceMappingURL=Toggle.js.map
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import Toggle from './Toggle';
|
|
3
|
-
|
|
3
|
+
const meta = {
|
|
4
4
|
component: Toggle,
|
|
5
5
|
args: {
|
|
6
|
-
htmlFor: ''
|
|
7
|
-
}
|
|
6
|
+
htmlFor: '',
|
|
7
|
+
},
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
|
-
export
|
|
11
|
-
render:
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
children: "I accept the terms and conditions."
|
|
15
|
-
});
|
|
16
|
-
}
|
|
10
|
+
export const FirstStory = {
|
|
11
|
+
render: () => {
|
|
12
|
+
return _jsx(Toggle, { htmlFor: "tnc", children: "I accept the terms and conditions." });
|
|
13
|
+
},
|
|
17
14
|
};
|
|
15
|
+
//# sourceMappingURL=Toggle.stories.js.map
|