@driveflux/beam 2.0.9 → 2.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/Accordion.js +7 -133
- package/dist/accordion/Accordion.stories.js +11 -31
- package/dist/alert/Alert.js +14 -110
- 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/base-styles.css +264 -96
- package/dist/box/Box.d.ts.map +1 -1
- 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 +12 -124
- package/dist/button/Button.stories.js +7 -35
- 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.js.map +1 -1
- 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/command/command.js.map +1 -1
- package/dist/datepicker/DatePicker.d.ts +2 -2
- package/dist/datepicker/DatePicker.d.ts.map +1 -1
- package/dist/datepicker/DatePicker.js +27 -127
- package/dist/datepicker/DatePicker.js.map +1 -1
- package/dist/datepicker/DatePicker.stories.js +58 -163
- package/dist/datepicker/DatePickerDrawer.js +14 -110
- package/dist/datepicker/DatePickerPopover.js +35 -207
- package/dist/datepicker/DatePickerPopover.js.map +1 -1
- package/dist/datepicker/constants.js +4 -3
- package/dist/datepicker/root-calendar.css +58 -58
- package/dist/datepicker/utils.js +11 -4
- package/dist/dialog/index.js +12 -144
- package/dist/divider/Divider.js +3 -63
- package/dist/divider/Divider.js.map +1 -1
- package/dist/divider/Divider.stories.js +7 -13
- package/dist/drawer/index.js +12 -157
- package/dist/drawer/index.js.map +1 -1
- package/dist/dropdown/Dropdown.js +26 -212
- package/dist/dropdown/Dropdown.js.map +1 -1
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -139
- package/dist/field-wrapper/FieldWrapper.js.map +1 -1
- 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 +6 -85
- 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 -140
- package/dist/icons/IconClock.js +5 -80
- package/dist/icons/IconClose.js +4 -72
- 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/IconDot.js.map +1 -1
- 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/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/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.js.map +1 -1
- package/dist/input-select/InputSelect.stories.d.ts.map +1 -1
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -72
- package/dist/popover/popover.js.map +1 -1
- 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/scroll-area/scroll-area.js.map +1 -1
- package/dist/search-input-select/SearchInputSelect.js +69 -346
- package/dist/search-input-select/SearchInputSelect.js.map +1 -1
- package/dist/select/Select.js +29 -315
- package/dist/select/Select.js.map +1 -1
- package/dist/select/Select.stories.d.ts.map +1 -1
- 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/styles.css +2787 -3282
- 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.js.map +1 -1
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.d.ts.map +1 -1
- package/dist/text/Text.js +6 -88
- package/dist/text/Text.stories.js +7 -44
- package/dist/toast/Toast.stories.js +14 -66
- package/dist/toast/ToastBox.js +24 -71
- package/dist/toast/index.js +1 -0
- package/dist/toast/sonner.js +11 -70
- 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 +4 -4
- package/dist/icons/IconCollapseAll.d.ts +0 -8
- package/dist/icons/IconCollapseAll.d.ts.map +0 -1
- package/dist/icons/IconCollapseAll.js +0 -97
- package/dist/icons/IconCollapseAll.js.map +0 -1
- package/dist/icons/IconDownload.d.ts +0 -8
- package/dist/icons/IconDownload.d.ts.map +0 -1
- package/dist/icons/IconDownload.js +0 -82
- package/dist/icons/IconExpandAll.d.ts +0 -8
- package/dist/icons/IconExpandAll.d.ts.map +0 -1
- package/dist/icons/IconExpandAll.js +0 -97
- package/dist/icons/IconExpandAll.js.map +0 -1
- package/dist/icons/IconReport.d.ts +0 -9
- package/dist/icons/IconReport.d.ts.map +0 -1
- package/dist/icons/IconReport.js +0 -92
- package/dist/icons/IconReport.js.map +0 -1
|
@@ -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,106 +8,59 @@ import IconClose from '../icons/IconClose';
|
|
|
8
8
|
import IconInfo from '../icons/IconInfo';
|
|
9
9
|
import IconTriangleExclamation from '../icons/IconTriangleExclamation';
|
|
10
10
|
import Text from '../text/Text';
|
|
11
|
-
|
|
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 items-start ${textColor} ${bgColor} border-l-8 ${borderColor} p-3 space-y-3 w-full`, children: [_jsxs(HStack, { className: 'space-y-1 w-full', children: [_jsx(Box, { className: titleColor, children: icon }), _jsxs(Box, { className: "w-full", children: [title && _jsx(Text, { className: "font-bold text-base", children: title }), description && (_jsx(Box, { className: `${textColor} text-base`, children: typeof description === 'string'
|
|
17
|
+
? splitText(description, isNumbered)
|
|
18
|
+
: description }))] })] }), options?.isClosable && (_jsx(Box, { as: "button", onClick: () => {
|
|
44
19
|
toast.dismiss(options.id);
|
|
45
|
-
},
|
|
46
|
-
children: /*#__PURE__*/ _jsx(IconClose, {
|
|
47
|
-
size: '24px'
|
|
48
|
-
})
|
|
49
|
-
})
|
|
50
|
-
]
|
|
51
|
-
});
|
|
20
|
+
}, children: _jsx(IconClose, { size: '24px' }) }))] }));
|
|
52
21
|
};
|
|
53
|
-
|
|
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
|
-
switch(status){
|
|
29
|
+
const getStyles = (status) => {
|
|
30
|
+
switch (status) {
|
|
70
31
|
case 'error':
|
|
71
32
|
return {
|
|
72
|
-
icon:
|
|
73
|
-
size: '24px'
|
|
74
|
-
}),
|
|
33
|
+
icon: _jsx(IconTriangleExclamation, { size: '24px' }),
|
|
75
34
|
bgColor: 'bg-accent-50',
|
|
76
35
|
titleColor: 'text-accent-300',
|
|
77
36
|
textColor: 'text-accent-600',
|
|
78
|
-
borderColor: 'border-accent-300'
|
|
37
|
+
borderColor: 'border-accent-300',
|
|
79
38
|
};
|
|
80
39
|
case 'success':
|
|
81
40
|
return {
|
|
82
|
-
icon:
|
|
83
|
-
variant: "on",
|
|
84
|
-
size: '24px'
|
|
85
|
-
}),
|
|
41
|
+
icon: _jsx(IconCircleMark, { variant: "on", size: '24px' }),
|
|
86
42
|
bgColor: 'bg-success-50',
|
|
87
43
|
titleColor: 'text-success-300',
|
|
88
44
|
textColor: 'text-success-600',
|
|
89
|
-
borderColor: 'border-success-300'
|
|
45
|
+
borderColor: 'border-success-300',
|
|
90
46
|
};
|
|
91
47
|
case 'warning':
|
|
92
48
|
return {
|
|
93
|
-
icon:
|
|
94
|
-
size: '24px'
|
|
95
|
-
}),
|
|
49
|
+
icon: _jsx(IconCircleExclamation, { size: '24px' }),
|
|
96
50
|
bgColor: 'bg-warning-50',
|
|
97
51
|
titleColor: 'text-warning-300',
|
|
98
52
|
textColor: 'text-warning-600',
|
|
99
|
-
borderColor: 'border-warning-300'
|
|
53
|
+
borderColor: 'border-warning-300',
|
|
100
54
|
};
|
|
101
55
|
default:
|
|
102
56
|
return {
|
|
103
|
-
icon:
|
|
104
|
-
size: '24px'
|
|
105
|
-
}),
|
|
57
|
+
icon: _jsx(IconInfo, { size: '24px' }),
|
|
106
58
|
bgColor: 'bg-info-50',
|
|
107
59
|
titleColor: 'text-info-300',
|
|
108
60
|
textColor: 'text-info-600',
|
|
109
|
-
borderColor: 'border-info-300'
|
|
61
|
+
borderColor: 'border-info-300',
|
|
110
62
|
};
|
|
111
63
|
}
|
|
112
64
|
};
|
|
113
65
|
export default ToastBox;
|
|
66
|
+
//# sourceMappingURL=ToastBox.js.map
|
package/dist/toast/index.js
CHANGED
package/dist/toast/sonner.js
CHANGED
|
@@ -1,81 +1,22 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
function _define_property(obj, key, value) {
|
|
3
|
-
if (key in obj) {
|
|
4
|
-
Object.defineProperty(obj, key, {
|
|
5
|
-
value: value,
|
|
6
|
-
enumerable: true,
|
|
7
|
-
configurable: true,
|
|
8
|
-
writable: true
|
|
9
|
-
});
|
|
10
|
-
} else {
|
|
11
|
-
obj[key] = value;
|
|
12
|
-
}
|
|
13
|
-
return obj;
|
|
14
|
-
}
|
|
15
|
-
function _extends() {
|
|
16
|
-
_extends = Object.assign || function(target) {
|
|
17
|
-
for(var i = 1; i < arguments.length; i++){
|
|
18
|
-
var source = arguments[i];
|
|
19
|
-
for(var key in source){
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
21
|
-
target[key] = source[key];
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
return target;
|
|
26
|
-
};
|
|
27
|
-
return _extends.apply(this, arguments);
|
|
28
|
-
}
|
|
29
|
-
function _object_destructuring_empty(o) {
|
|
30
|
-
if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
|
|
31
|
-
return o;
|
|
32
|
-
}
|
|
33
|
-
function _object_spread(target) {
|
|
34
|
-
for(var i = 1; i < arguments.length; i++){
|
|
35
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
36
|
-
var ownKeys = Object.keys(source);
|
|
37
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
38
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
39
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
40
|
-
}));
|
|
41
|
-
}
|
|
42
|
-
ownKeys.forEach(function(key) {
|
|
43
|
-
_define_property(target, key, source[key]);
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
return target;
|
|
47
|
-
}
|
|
48
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
49
3
|
import { useTheme } from 'next-themes';
|
|
50
4
|
import { Toaster as Sonner, toast as sonnerToast } from 'sonner';
|
|
51
5
|
import ToastBox from './ToastBox';
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
return /*#__PURE__*/ _jsx(Sonner, _object_spread({
|
|
56
|
-
theme: theme,
|
|
57
|
-
className: "toaster group",
|
|
58
|
-
position: "bottom-center",
|
|
59
|
-
toastOptions: {
|
|
6
|
+
const Toaster = ({ ...props }) => {
|
|
7
|
+
const { theme = 'system' } = useTheme();
|
|
8
|
+
return (_jsx(Sonner, { theme: theme, className: "toaster group", position: "bottom-center", toastOptions: {
|
|
60
9
|
classNames: {
|
|
61
|
-
toast: 'p-0'
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}, props));
|
|
10
|
+
toast: 'p-0',
|
|
11
|
+
},
|
|
12
|
+
}, ...props }));
|
|
65
13
|
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
sonnerToast(/*#__PURE__*/ _jsx(ToastBox, {
|
|
14
|
+
const toast = ({ title, description, status, isClosable = true, isNumbered, }) => {
|
|
15
|
+
const toastId = sonnerToast('');
|
|
16
|
+
sonnerToast(_jsx(ToastBox, { id: toastId, title: title, description: description, status: status, isClosable: isClosable, isNumbered: isNumbered }), {
|
|
70
17
|
id: toastId,
|
|
71
|
-
|
|
72
|
-
description: description,
|
|
73
|
-
status: status,
|
|
74
|
-
isClosable: isClosable,
|
|
75
|
-
isNumbered: isNumbered
|
|
76
|
-
}), {
|
|
77
|
-
id: toastId,
|
|
78
|
-
className: 'rounded-none p-0 border-0'
|
|
18
|
+
className: 'rounded-none p-0 border-0',
|
|
79
19
|
});
|
|
80
20
|
};
|
|
81
21
|
export { Toaster, toast };
|
|
22
|
+
//# sourceMappingURL=sonner.js.map
|
package/dist/toggle/Toggle.js
CHANGED
|
@@ -1,131 +1,22 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
function _define_property(obj, key, value) {
|
|
3
|
-
if (key in obj) {
|
|
4
|
-
Object.defineProperty(obj, key, {
|
|
5
|
-
value: value,
|
|
6
|
-
enumerable: true,
|
|
7
|
-
configurable: true,
|
|
8
|
-
writable: true
|
|
9
|
-
});
|
|
10
|
-
} else {
|
|
11
|
-
obj[key] = value;
|
|
12
|
-
}
|
|
13
|
-
return obj;
|
|
14
|
-
}
|
|
15
|
-
function _object_spread(target) {
|
|
16
|
-
for(var i = 1; i < arguments.length; i++){
|
|
17
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
18
|
-
var ownKeys = Object.keys(source);
|
|
19
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
20
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
21
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
22
|
-
}));
|
|
23
|
-
}
|
|
24
|
-
ownKeys.forEach(function(key) {
|
|
25
|
-
_define_property(target, key, source[key]);
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
return target;
|
|
29
|
-
}
|
|
30
|
-
function ownKeys(object, enumerableOnly) {
|
|
31
|
-
var keys = Object.keys(object);
|
|
32
|
-
if (Object.getOwnPropertySymbols) {
|
|
33
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
34
|
-
if (enumerableOnly) {
|
|
35
|
-
symbols = symbols.filter(function(sym) {
|
|
36
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
keys.push.apply(keys, symbols);
|
|
40
|
-
}
|
|
41
|
-
return keys;
|
|
42
|
-
}
|
|
43
|
-
function _object_spread_props(target, source) {
|
|
44
|
-
source = source != null ? source : {};
|
|
45
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
46
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
47
|
-
} else {
|
|
48
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
49
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
return target;
|
|
53
|
-
}
|
|
54
|
-
function _object_without_properties(source, excluded) {
|
|
55
|
-
if (source == null) return {};
|
|
56
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
57
|
-
var key, i;
|
|
58
|
-
if (Object.getOwnPropertySymbols) {
|
|
59
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
60
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
61
|
-
key = sourceSymbolKeys[i];
|
|
62
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
63
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
64
|
-
target[key] = source[key];
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
return target;
|
|
68
|
-
}
|
|
69
|
-
function _object_without_properties_loose(source, excluded) {
|
|
70
|
-
if (source == null) return {};
|
|
71
|
-
var target = {};
|
|
72
|
-
var sourceKeys = Object.keys(source);
|
|
73
|
-
var key, i;
|
|
74
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
75
|
-
key = sourceKeys[i];
|
|
76
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
77
|
-
target[key] = source[key];
|
|
78
|
-
}
|
|
79
|
-
return target;
|
|
80
|
-
}
|
|
81
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
82
3
|
import Button from '@driveflux/beam/button';
|
|
83
4
|
import { cn } from '@driveflux/beam/utils';
|
|
84
5
|
import * as React from 'react';
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"className",
|
|
88
|
-
"checked",
|
|
89
|
-
"onCheckedChange",
|
|
90
|
-
"disabled"
|
|
91
|
-
]);
|
|
92
|
-
var handleClick = function() {
|
|
6
|
+
const ToggleRoot = React.forwardRef(({ className, checked = false, onCheckedChange, disabled, ...props }, ref) => {
|
|
7
|
+
const handleClick = () => {
|
|
93
8
|
if (!disabled && onCheckedChange) {
|
|
94
9
|
onCheckedChange(!checked);
|
|
95
10
|
}
|
|
96
11
|
};
|
|
97
|
-
return
|
|
98
|
-
ref: ref,
|
|
99
|
-
onClick: handleClick,
|
|
100
|
-
isDisabled: disabled,
|
|
101
|
-
role: "switch",
|
|
102
|
-
"aria-checked": checked,
|
|
103
|
-
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)
|
|
104
|
-
}, props), {
|
|
105
|
-
children: /*#__PURE__*/ _jsx("span", {
|
|
106
|
-
className: cn('inline-block h-5 w-5 transform rounded-full bg-white transition-transform duration-300', checked ? 'translate-x-6' : 'translate-x-[2px]')
|
|
107
|
-
})
|
|
108
|
-
}));
|
|
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]') }) }));
|
|
109
13
|
});
|
|
110
14
|
ToggleRoot.displayName = 'ToggleRoot';
|
|
111
|
-
|
|
112
|
-
var children = _param.children, htmlFor = _param.htmlFor, props = _object_without_properties(_param, [
|
|
113
|
-
"children",
|
|
114
|
-
"htmlFor"
|
|
115
|
-
]);
|
|
15
|
+
const Toggle = ({ children, htmlFor, ...props }) => {
|
|
116
16
|
if (children && htmlFor) {
|
|
117
|
-
return
|
|
118
|
-
className: "flex items-center gap-2",
|
|
119
|
-
children: [
|
|
120
|
-
/*#__PURE__*/ _jsx(ToggleRoot, _object_spread({}, props)),
|
|
121
|
-
/*#__PURE__*/ _jsx("label", {
|
|
122
|
-
htmlFor: htmlFor,
|
|
123
|
-
className: "flex-1",
|
|
124
|
-
children: children
|
|
125
|
-
})
|
|
126
|
-
]
|
|
127
|
-
});
|
|
17
|
+
return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ToggleRoot, { ...props }), _jsx("label", { htmlFor: htmlFor, className: "flex-1", children: children })] }));
|
|
128
18
|
}
|
|
129
|
-
return
|
|
19
|
+
return _jsx(ToggleRoot, { ...props });
|
|
130
20
|
};
|
|
131
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
|