@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
|
@@ -1,304 +1,44 @@
|
|
|
1
|
-
function _array_like_to_array(arr, len) {
|
|
2
|
-
if (len == null || len > arr.length) len = arr.length;
|
|
3
|
-
for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
|
|
4
|
-
return arr2;
|
|
5
|
-
}
|
|
6
|
-
function _array_without_holes(arr) {
|
|
7
|
-
if (Array.isArray(arr)) return _array_like_to_array(arr);
|
|
8
|
-
}
|
|
9
|
-
function _define_property(obj, key, value) {
|
|
10
|
-
if (key in obj) {
|
|
11
|
-
Object.defineProperty(obj, key, {
|
|
12
|
-
value: value,
|
|
13
|
-
enumerable: true,
|
|
14
|
-
configurable: true,
|
|
15
|
-
writable: true
|
|
16
|
-
});
|
|
17
|
-
} else {
|
|
18
|
-
obj[key] = value;
|
|
19
|
-
}
|
|
20
|
-
return obj;
|
|
21
|
-
}
|
|
22
|
-
function _extends() {
|
|
23
|
-
_extends = Object.assign || function(target) {
|
|
24
|
-
for(var i = 1; i < arguments.length; i++){
|
|
25
|
-
var source = arguments[i];
|
|
26
|
-
for(var key in source){
|
|
27
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
28
|
-
target[key] = source[key];
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return target;
|
|
33
|
-
};
|
|
34
|
-
return _extends.apply(this, arguments);
|
|
35
|
-
}
|
|
36
|
-
function _iterable_to_array(iter) {
|
|
37
|
-
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
|
|
38
|
-
}
|
|
39
|
-
function _non_iterable_spread() {
|
|
40
|
-
throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
41
|
-
}
|
|
42
|
-
function _object_destructuring_empty(o) {
|
|
43
|
-
if (o === null || o === void 0) throw new TypeError("Cannot destructure " + o);
|
|
44
|
-
return o;
|
|
45
|
-
}
|
|
46
|
-
function _object_spread(target) {
|
|
47
|
-
for(var i = 1; i < arguments.length; i++){
|
|
48
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
49
|
-
var ownKeys = Object.keys(source);
|
|
50
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
51
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
52
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
53
|
-
}));
|
|
54
|
-
}
|
|
55
|
-
ownKeys.forEach(function(key) {
|
|
56
|
-
_define_property(target, key, source[key]);
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
return target;
|
|
60
|
-
}
|
|
61
|
-
function ownKeys(object, enumerableOnly) {
|
|
62
|
-
var keys = Object.keys(object);
|
|
63
|
-
if (Object.getOwnPropertySymbols) {
|
|
64
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
65
|
-
if (enumerableOnly) {
|
|
66
|
-
symbols = symbols.filter(function(sym) {
|
|
67
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
keys.push.apply(keys, symbols);
|
|
71
|
-
}
|
|
72
|
-
return keys;
|
|
73
|
-
}
|
|
74
|
-
function _object_spread_props(target, source) {
|
|
75
|
-
source = source != null ? source : {};
|
|
76
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
77
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
78
|
-
} else {
|
|
79
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
80
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
81
|
-
});
|
|
82
|
-
}
|
|
83
|
-
return target;
|
|
84
|
-
}
|
|
85
|
-
function _object_without_properties(source, excluded) {
|
|
86
|
-
if (source == null) return {};
|
|
87
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
88
|
-
var key, i;
|
|
89
|
-
if (Object.getOwnPropertySymbols) {
|
|
90
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
91
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
92
|
-
key = sourceSymbolKeys[i];
|
|
93
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
94
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
95
|
-
target[key] = source[key];
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
return target;
|
|
99
|
-
}
|
|
100
|
-
function _object_without_properties_loose(source, excluded) {
|
|
101
|
-
if (source == null) return {};
|
|
102
|
-
var target = {};
|
|
103
|
-
var sourceKeys = Object.keys(source);
|
|
104
|
-
var key, i;
|
|
105
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
106
|
-
key = sourceKeys[i];
|
|
107
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
108
|
-
target[key] = source[key];
|
|
109
|
-
}
|
|
110
|
-
return target;
|
|
111
|
-
}
|
|
112
|
-
function _to_consumable_array(arr) {
|
|
113
|
-
return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
|
|
114
|
-
}
|
|
115
|
-
function _unsupported_iterable_to_array(o, minLen) {
|
|
116
|
-
if (!o) return;
|
|
117
|
-
if (typeof o === "string") return _array_like_to_array(o, minLen);
|
|
118
|
-
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
119
|
-
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
120
|
-
if (n === "Map" || n === "Set") return Array.from(n);
|
|
121
|
-
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
|
|
122
|
-
}
|
|
123
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
124
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
125
3
|
import * as React from 'react';
|
|
126
|
-
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../dropdown/Dropdown';
|
|
4
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../dropdown/Dropdown';
|
|
127
5
|
import IconEllipsis from '../icons/IconEllipsis';
|
|
128
6
|
import IconThinArrow from '../icons/IconThinArrow';
|
|
129
7
|
import { cn } from '../utils';
|
|
130
|
-
|
|
131
|
-
var props = _extends({}, _object_destructuring_empty(_param));
|
|
132
|
-
return /*#__PURE__*/ _jsx("nav", _object_spread({
|
|
133
|
-
ref: ref,
|
|
134
|
-
"aria-label": "breadcrumb"
|
|
135
|
-
}, props));
|
|
136
|
-
});
|
|
8
|
+
const BreadcrumbRoot = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
|
|
137
9
|
BreadcrumbRoot.displayName = 'BreadcrumbRoot';
|
|
138
|
-
|
|
139
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
140
|
-
"className"
|
|
141
|
-
]);
|
|
142
|
-
return /*#__PURE__*/ _jsx("ol", _object_spread({
|
|
143
|
-
ref: ref,
|
|
144
|
-
className: cn('flex flex-wrap items-center gap-2 break-words text-sm tracking-wide uppercase text-primary3 sm:gap-2.5 dark:text-zinc-400', className)
|
|
145
|
-
}, props));
|
|
146
|
-
});
|
|
10
|
+
const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn('flex flex-wrap items-center gap-2 break-words text-sm tracking-wide uppercase text-primary3 sm:gap-2.5 dark:text-zinc-400', className), ...props })));
|
|
147
11
|
BreadcrumbList.displayName = 'BreadcrumbList';
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
]);
|
|
152
|
-
return /*#__PURE__*/ _jsx("li", _object_spread({
|
|
153
|
-
ref: ref,
|
|
154
|
-
//* ml-0 is to avoid padding left getting amended by global
|
|
155
|
-
className: cn('inline-flex items-center gap-2 ml-0', className)
|
|
156
|
-
}, props));
|
|
157
|
-
});
|
|
12
|
+
const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref,
|
|
13
|
+
//* ml-0 is to avoid padding left getting amended by global
|
|
14
|
+
className: cn('inline-flex items-center gap-2 ml-0', className), ...props })));
|
|
158
15
|
BreadcrumbItem.displayName = 'BreadcrumbItem';
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
"asChild"
|
|
163
|
-
]);
|
|
164
|
-
var Comp = asChild ? Slot : 'a';
|
|
165
|
-
return /*#__PURE__*/ _jsx(Comp, _object_spread({
|
|
166
|
-
ref: ref,
|
|
167
|
-
className: cn('text-primary3 hover:text-black dark:hover:text-zinc-50', className)
|
|
168
|
-
}, props));
|
|
16
|
+
const BreadcrumbLink = React.forwardRef(({ className, asChild, ...props }, ref) => {
|
|
17
|
+
const Comp = asChild ? Slot : 'a';
|
|
18
|
+
return (_jsx(Comp, { ref: ref, className: cn('text-primary3 hover:text-black dark:hover:text-zinc-50', className), ...props }));
|
|
169
19
|
});
|
|
170
20
|
BreadcrumbLink.displayName = 'BreadcrumbLink';
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
]);
|
|
175
|
-
return(// biome-ignore lint/a11y/useFocusableInteractive: Element is intentionally not focusable
|
|
176
|
-
/*#__PURE__*/ _jsx("span", _object_spread({
|
|
177
|
-
ref: ref,
|
|
178
|
-
role: "link",
|
|
179
|
-
"aria-disabled": "true",
|
|
180
|
-
"aria-current": "page",
|
|
181
|
-
className: cn('font-bold dark:text-zinc-50', className)
|
|
182
|
-
}, props)));
|
|
183
|
-
});
|
|
21
|
+
const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
|
|
22
|
+
// biome-ignore lint/a11y/useFocusableInteractive: Element is intentionally not focusable
|
|
23
|
+
_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('font-bold dark:text-zinc-50', className), ...props })));
|
|
184
24
|
BreadcrumbPage.displayName = 'BreadcrumbPage';
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
"className"
|
|
189
|
-
]);
|
|
190
|
-
return /*#__PURE__*/ _jsx("li", _object_spread_props(_object_spread({
|
|
191
|
-
role: "presentation",
|
|
192
|
-
"aria-hidden": "true",
|
|
193
|
-
//* ml-0 is to avoid padding left getting amended by global
|
|
194
|
-
className: cn('[&>svg]:w-3.5 [&>svg]:h-3.5 ml-0 text-black', className)
|
|
195
|
-
}, props), {
|
|
196
|
-
children: children !== null && children !== void 0 ? children : /*#__PURE__*/ _jsx(IconThinArrow, {
|
|
197
|
-
variant: "right",
|
|
198
|
-
size: "16px"
|
|
199
|
-
})
|
|
200
|
-
}));
|
|
201
|
-
};
|
|
25
|
+
const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true",
|
|
26
|
+
//* ml-0 is to avoid padding left getting amended by global
|
|
27
|
+
className: cn('[&>svg]:w-3.5 [&>svg]:h-3.5 ml-0 text-black', className), ...props, children: children ?? _jsx(IconThinArrow, { variant: "right", size: "16px" }) }));
|
|
202
28
|
BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
|
|
203
|
-
|
|
204
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
205
|
-
"className"
|
|
206
|
-
]);
|
|
207
|
-
return /*#__PURE__*/ _jsxs("span", _object_spread_props(_object_spread({
|
|
208
|
-
role: "presentation",
|
|
209
|
-
"aria-hidden": "true",
|
|
210
|
-
className: cn('flex h-9 w-9 items-center justify-center', className)
|
|
211
|
-
}, props), {
|
|
212
|
-
children: [
|
|
213
|
-
/*#__PURE__*/ _jsx(IconEllipsis, {
|
|
214
|
-
size: "16px",
|
|
215
|
-
className: "rotate-90"
|
|
216
|
-
}),
|
|
217
|
-
/*#__PURE__*/ _jsx("span", {
|
|
218
|
-
className: "sr-only",
|
|
219
|
-
children: "More"
|
|
220
|
-
})
|
|
221
|
-
]
|
|
222
|
-
}));
|
|
223
|
-
};
|
|
29
|
+
const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", className: cn('flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(IconEllipsis, { size: "16px", className: "rotate-90" }), _jsx("span", { className: "sr-only", children: "More" })] }));
|
|
224
30
|
BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
].concat(_to_consumable_array(crumbs.slice(-(defaultCrumbsLength - 1)))) : crumbs;
|
|
236
|
-
var FinalLinkComponent = LinkComponent !== null && LinkComponent !== void 0 ? LinkComponent : 'a';
|
|
237
|
-
return /*#__PURE__*/ _jsx(BreadcrumbRoot, _object_spread_props(_object_spread({
|
|
238
|
-
ref: ref
|
|
239
|
-
}, props), {
|
|
240
|
-
children: /*#__PURE__*/ _jsx(BreadcrumbList, {
|
|
241
|
-
children: trimmedCrumbs.map(function(crumb, i, trimmedCrumbs) {
|
|
242
|
-
var _crumb_label;
|
|
243
|
-
return /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
244
|
-
children: [
|
|
245
|
-
/*#__PURE__*/ _jsx(BreadcrumbItem, {
|
|
246
|
-
children: crumb.href ? /*#__PURE__*/ _jsx(BreadcrumbLink, {
|
|
247
|
-
href: crumb.href,
|
|
248
|
-
className: cn(i === trimmedCrumbs.length - 1 && 'text-black font-bold'),
|
|
249
|
-
asChild: !!LinkComponent,
|
|
250
|
-
children: LinkComponent ? /*#__PURE__*/ _jsx(LinkComponent, {
|
|
251
|
-
href: crumb.href,
|
|
252
|
-
children: crumb.label
|
|
253
|
-
}) : crumb.label
|
|
254
|
-
}) : /*#__PURE__*/ _jsx(BreadcrumbPage, {
|
|
255
|
-
className: cn(i === trimmedCrumbs.length - 1 && 'text-black font-bold'),
|
|
256
|
-
children: crumb.label
|
|
257
|
-
})
|
|
258
|
-
}),
|
|
259
|
-
i < trimmedCrumbs.length - 1 && /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
|
|
260
|
-
tooManyCrumbs && i === 0 && /*#__PURE__*/ _jsxs(React.Fragment, {
|
|
261
|
-
children: [
|
|
262
|
-
/*#__PURE__*/ _jsxs(DropdownMenu, {
|
|
263
|
-
children: [
|
|
264
|
-
/*#__PURE__*/ _jsxs(DropdownMenuTrigger, {
|
|
265
|
-
className: "flex items-center gap-1 rounded-full hover:bg-primary1",
|
|
266
|
-
children: [
|
|
267
|
-
/*#__PURE__*/ _jsx(BreadcrumbEllipsis, {
|
|
268
|
-
className: "hover:text-black cursor-pointer"
|
|
269
|
-
}),
|
|
270
|
-
/*#__PURE__*/ _jsx("span", {
|
|
271
|
-
className: "sr-only",
|
|
272
|
-
children: "Toggle menu"
|
|
273
|
-
})
|
|
274
|
-
]
|
|
275
|
-
}),
|
|
276
|
-
/*#__PURE__*/ _jsx(DropdownMenuContent, {
|
|
277
|
-
align: "start",
|
|
278
|
-
className: "tracking-wide uppercase text-sm text-primary3",
|
|
279
|
-
children: crumbs.slice(1, -(defaultCrumbsLength - 1)).map(function(leftoverCrumb) {
|
|
280
|
-
var _leftoverCrumb_label, _leftoverCrumb_label1;
|
|
281
|
-
return leftoverCrumb.href ? /*#__PURE__*/ _jsx(FinalLinkComponent, {
|
|
282
|
-
href: leftoverCrumb.href,
|
|
283
|
-
children: /*#__PURE__*/ _jsx(DropdownMenuItem, {
|
|
284
|
-
className: "text-primary3 cursor-pointer",
|
|
285
|
-
children: leftoverCrumb.label
|
|
286
|
-
})
|
|
287
|
-
}, (_leftoverCrumb_label = leftoverCrumb.label) === null || _leftoverCrumb_label === void 0 ? void 0 : _leftoverCrumb_label.toString()) : /*#__PURE__*/ _jsx(DropdownMenuItem, {
|
|
288
|
-
children: leftoverCrumb.label
|
|
289
|
-
}, (_leftoverCrumb_label1 = leftoverCrumb.label) === null || _leftoverCrumb_label1 === void 0 ? void 0 : _leftoverCrumb_label1.toString());
|
|
290
|
-
})
|
|
291
|
-
})
|
|
292
|
-
]
|
|
293
|
-
}),
|
|
294
|
-
/*#__PURE__*/ _jsx(BreadcrumbSeparator, {})
|
|
295
|
-
]
|
|
296
|
-
})
|
|
297
|
-
]
|
|
298
|
-
}, (_crumb_label = crumb.label) === null || _crumb_label === void 0 ? void 0 : _crumb_label.toString());
|
|
299
|
-
})
|
|
300
|
-
})
|
|
301
|
-
}));
|
|
31
|
+
const Breadcrumbs = React.forwardRef(({ crumbs, LinkComponent, defaultCrumbsLength: providedCrumbsLength = 3, ...props }, ref) => {
|
|
32
|
+
const defaultCrumbsLength = Math.max(2, providedCrumbsLength);
|
|
33
|
+
const tooManyCrumbs = crumbs.length > defaultCrumbsLength;
|
|
34
|
+
const trimmedCrumbs = tooManyCrumbs
|
|
35
|
+
? [crumbs[0], ...crumbs.slice(-(defaultCrumbsLength - 1))]
|
|
36
|
+
: crumbs;
|
|
37
|
+
const FinalLinkComponent = LinkComponent ?? 'a';
|
|
38
|
+
return (_jsx(BreadcrumbRoot, { ref: ref, ...props, children: _jsx(BreadcrumbList, { children: trimmedCrumbs.map((crumb, i, trimmedCrumbs) => (_jsxs(React.Fragment, { children: [_jsx(BreadcrumbItem, { children: crumb.href ? (_jsx(BreadcrumbLink, { href: crumb.href, className: cn(i === trimmedCrumbs.length - 1 && 'text-black font-bold'), asChild: !!LinkComponent, children: LinkComponent ? (_jsx(LinkComponent, { href: crumb.href, children: crumb.label })) : (crumb.label) })) : (_jsx(BreadcrumbPage, { className: cn(i === trimmedCrumbs.length - 1 && 'text-black font-bold'), children: crumb.label })) }), i < trimmedCrumbs.length - 1 && _jsx(BreadcrumbSeparator, {}), tooManyCrumbs && i === 0 && (_jsxs(React.Fragment, { children: [_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "flex items-center gap-1 rounded-full hover:bg-primary1", children: [_jsx(BreadcrumbEllipsis, { className: "hover:text-black cursor-pointer" }), _jsx("span", { className: "sr-only", children: "Toggle menu" })] }), _jsx(DropdownMenuContent, { align: "start", className: "tracking-wide uppercase text-sm text-primary3", children: crumbs
|
|
39
|
+
.slice(1, -(defaultCrumbsLength - 1))
|
|
40
|
+
.map((leftoverCrumb) => leftoverCrumb.href ? (_jsx(FinalLinkComponent, { href: leftoverCrumb.href, children: _jsx(DropdownMenuItem, { className: "text-primary3 cursor-pointer", children: leftoverCrumb.label }) }, leftoverCrumb.label?.toString())) : (_jsx(DropdownMenuItem, { children: leftoverCrumb.label }, leftoverCrumb.label?.toString()))) })] }), _jsx(BreadcrumbSeparator, {})] }))] }, crumb.label?.toString()))) }) }));
|
|
302
41
|
});
|
|
303
42
|
export default Breadcrumbs;
|
|
304
|
-
export { BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis,
|
|
43
|
+
export { BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
|
|
44
|
+
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1,65 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import Breadcrumbs from './Breadcrumbs.js';
|
|
3
|
-
|
|
3
|
+
const meta = {
|
|
4
4
|
component: Breadcrumbs,
|
|
5
5
|
args: {
|
|
6
|
-
crumbs: []
|
|
7
|
-
}
|
|
6
|
+
crumbs: [],
|
|
7
|
+
},
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
|
-
export
|
|
11
|
-
render:
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
href: '/account',
|
|
20
|
-
label: 'Account'
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
label: 'Settings'
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
});
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
var longCrumbs = [
|
|
30
|
-
{
|
|
31
|
-
href: '/',
|
|
32
|
-
label: 'Home'
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
href: '/cars/malaysia',
|
|
36
|
-
label: 'Browse Car Page'
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
href: '/cars/malaysia/proton-saga',
|
|
40
|
-
label: 'Proton Saga'
|
|
10
|
+
export const FirstStory = {
|
|
11
|
+
render: () => {
|
|
12
|
+
return (_jsx(Breadcrumbs, { crumbs: [
|
|
13
|
+
{ href: '/', label: 'Home' },
|
|
14
|
+
{ href: '/account', label: 'Account' },
|
|
15
|
+
{ label: 'Settings' },
|
|
16
|
+
] }));
|
|
41
17
|
},
|
|
18
|
+
};
|
|
19
|
+
const longCrumbs = [
|
|
20
|
+
{ href: '/', label: 'Home' },
|
|
21
|
+
{ href: '/cars/malaysia', label: 'Browse Car Page' },
|
|
22
|
+
{ href: '/cars/malaysia/proton-saga', label: 'Proton Saga' },
|
|
42
23
|
{
|
|
43
24
|
href: '/cars/malaysia/proton-saga/checkout',
|
|
44
|
-
label: 'Checkout Proton Saga'
|
|
25
|
+
label: 'Checkout Proton Saga',
|
|
45
26
|
},
|
|
46
27
|
{
|
|
47
|
-
label: 'Checkout Proton Saga Supplementary Documents'
|
|
48
|
-
}
|
|
28
|
+
label: 'Checkout Proton Saga Supplementary Documents',
|
|
29
|
+
},
|
|
49
30
|
];
|
|
50
|
-
export
|
|
51
|
-
render:
|
|
52
|
-
return
|
|
53
|
-
|
|
54
|
-
defaultCrumbsLength: 4
|
|
55
|
-
});
|
|
56
|
-
}
|
|
31
|
+
export const LongStory = {
|
|
32
|
+
render: () => {
|
|
33
|
+
return _jsx(Breadcrumbs, { crumbs: longCrumbs, defaultCrumbsLength: 4 });
|
|
34
|
+
},
|
|
57
35
|
};
|
|
58
|
-
export
|
|
59
|
-
render:
|
|
60
|
-
return
|
|
61
|
-
|
|
62
|
-
defaultCrumbsLength: -20
|
|
63
|
-
});
|
|
64
|
-
}
|
|
36
|
+
export const MischievousStory = {
|
|
37
|
+
render: () => {
|
|
38
|
+
return _jsx(Breadcrumbs, { crumbs: longCrumbs, defaultCrumbsLength: -20 });
|
|
39
|
+
},
|
|
65
40
|
};
|
|
41
|
+
//# sourceMappingURL=Breadcrumbs.stories.js.map
|
package/dist/button/Button.js
CHANGED
|
@@ -1,83 +1,4 @@
|
|
|
1
|
-
|
|
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
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
81
2
|
import { Slot } from '@radix-ui/react-slot';
|
|
82
3
|
import { cva } from 'class-variance-authority';
|
|
83
4
|
import * as React from 'react';
|
|
@@ -85,60 +6,27 @@ import LoadingAnimation from '../animations/LoadingAnimation.js';
|
|
|
85
6
|
import Box from '../box/Box.js';
|
|
86
7
|
import HStack from '../hstack/HStack.js';
|
|
87
8
|
import { cn } from '../utils.js';
|
|
88
|
-
|
|
9
|
+
const buttonVariants = cva('inline-flex items-center justify-center whitespace-nowrap text-xs px-4 py-6 h-12 bg-black hover:bg-primary4 text-white font-bold uppercase tracking-wider disabled:pointer-events-none disabled:opacity-30 ', {
|
|
89
10
|
variants: {
|
|
90
11
|
variant: {
|
|
91
12
|
outline: 'border border-black bg-white text-black hover:text-white hover:bg-black',
|
|
92
|
-
'outline-white': 'border border-white bg-transparent text-white hover:text-black hover:bg-white'
|
|
13
|
+
'outline-white': 'border border-white bg-transparent text-white hover:text-black hover:bg-white',
|
|
93
14
|
},
|
|
94
15
|
colorScheme: {
|
|
95
16
|
default: 'bg-black',
|
|
96
17
|
accent: 'bg-accent-500 hover:bg-accent4',
|
|
97
18
|
link: 'bg-links hover:bg-links2',
|
|
98
19
|
warning: 'bg-warning4 hover:bg-warning-500',
|
|
99
|
-
success: 'bg-success-200 hover:bg-success4'
|
|
100
|
-
}
|
|
101
|
-
}
|
|
20
|
+
success: 'bg-success-200 hover:bg-success4',
|
|
21
|
+
},
|
|
22
|
+
},
|
|
102
23
|
});
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
"asChild",
|
|
109
|
-
"leftIcon",
|
|
110
|
-
"rightIcon",
|
|
111
|
-
"isDisabled",
|
|
112
|
-
"isLoading",
|
|
113
|
-
"children"
|
|
114
|
-
]);
|
|
115
|
-
var Comp = asChild ? Slot : 'button';
|
|
116
|
-
return /*#__PURE__*/ _jsx(Comp, _object_spread_props(_object_spread({
|
|
117
|
-
className: cn('min-w-32', buttonVariants({
|
|
118
|
-
variant: variant,
|
|
119
|
-
colorScheme: colorScheme,
|
|
120
|
-
className: className
|
|
121
|
-
}), isLoading ? 'disabled:opacity-100!' : ''),
|
|
122
|
-
ref: ref,
|
|
123
|
-
disabled: isDisabled || isLoading
|
|
124
|
-
}, props), {
|
|
125
|
-
children: /*#__PURE__*/ _jsx(HStack, {
|
|
126
|
-
className: 'gap-2 items-center',
|
|
127
|
-
children: isLoading ? /*#__PURE__*/ _jsx(LoadingAnimation, {
|
|
128
|
-
colorScheme: colorScheme === 'default' || colorScheme === undefined ? 'default' : 'white'
|
|
129
|
-
}) : /*#__PURE__*/ _jsxs(_Fragment, {
|
|
130
|
-
children: [
|
|
131
|
-
leftIcon && /*#__PURE__*/ _jsx(Box, {
|
|
132
|
-
children: leftIcon
|
|
133
|
-
}),
|
|
134
|
-
children,
|
|
135
|
-
rightIcon && /*#__PURE__*/ _jsx(Box, {
|
|
136
|
-
children: rightIcon
|
|
137
|
-
})
|
|
138
|
-
]
|
|
139
|
-
})
|
|
140
|
-
})
|
|
141
|
-
}));
|
|
24
|
+
const Button = React.forwardRef(({ className, variant, colorScheme, asChild = false, leftIcon, rightIcon, isDisabled, isLoading, children, ...props }, ref) => {
|
|
25
|
+
const Comp = asChild ? Slot : 'button';
|
|
26
|
+
return (_jsx(Comp, { className: cn('min-w-32', buttonVariants({ variant, colorScheme, className }), isLoading ? 'disabled:opacity-100!' : ''), ref: ref, disabled: isDisabled || isLoading, ...props, children: _jsx(HStack, { className: 'gap-2 items-center', children: isLoading ? (_jsx(LoadingAnimation, { colorScheme: colorScheme === 'default' || colorScheme === undefined
|
|
27
|
+
? 'default'
|
|
28
|
+
: 'white' })) : (_jsxs(_Fragment, { children: [leftIcon && _jsx(Box, { children: leftIcon }), children, rightIcon && _jsx(Box, { children: rightIcon })] })) }) }));
|
|
142
29
|
});
|
|
143
30
|
Button.displayName = 'Button';
|
|
144
31
|
export default Button;
|
|
32
|
+
//# sourceMappingURL=Button.js.map
|
|
@@ -2,41 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import HStack from '../hstack/HStack.js';
|
|
3
3
|
import IconPlus from '../icons/IconPlus.js';
|
|
4
4
|
import Button from './Button.js';
|
|
5
|
-
|
|
6
|
-
component: Button
|
|
5
|
+
const meta = {
|
|
6
|
+
component: Button,
|
|
7
7
|
};
|
|
8
8
|
export default meta;
|
|
9
|
-
export
|
|
10
|
-
render:
|
|
11
|
-
return
|
|
12
|
-
|
|
13
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
14
|
-
variant: "outline",
|
|
15
|
-
leftIcon: /*#__PURE__*/ _jsx(IconPlus, {
|
|
16
|
-
size: 16
|
|
17
|
-
}),
|
|
18
|
-
children: "add payment method"
|
|
19
|
-
}),
|
|
20
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
21
|
-
colorScheme: 'link',
|
|
22
|
-
children: "add"
|
|
23
|
-
}),
|
|
24
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
25
|
-
colorScheme: 'warning',
|
|
26
|
-
children: "add"
|
|
27
|
-
}),
|
|
28
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
29
|
-
colorScheme: 'accent',
|
|
30
|
-
children: "add"
|
|
31
|
-
}),
|
|
32
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
33
|
-
colorScheme: 'success',
|
|
34
|
-
children: "add"
|
|
35
|
-
}),
|
|
36
|
-
/*#__PURE__*/ _jsx(Button, {
|
|
37
|
-
children: "dd"
|
|
38
|
-
})
|
|
39
|
-
]
|
|
40
|
-
});
|
|
41
|
-
}
|
|
9
|
+
export const ButtonTest = {
|
|
10
|
+
render: () => {
|
|
11
|
+
return (_jsxs(HStack, { children: [_jsx(Button, { variant: "outline", leftIcon: _jsx(IconPlus, { size: 16 }), children: "add payment method" }), _jsx(Button, { colorScheme: 'link', children: "add" }), _jsx(Button, { colorScheme: 'warning', children: "add" }), _jsx(Button, { colorScheme: 'accent', children: "add" }), _jsx(Button, { colorScheme: 'success', children: "add" }), _jsx(Button, { children: "dd" })] }));
|
|
12
|
+
},
|
|
42
13
|
};
|
|
14
|
+
//# sourceMappingURL=Button.stories.js.map
|