@driveflux/beam 2.0.11 → 2.0.13
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 +4 -5
- 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.stories.js +7 -39
- package/dist/carousel/CarouselButton.js +7 -68
- package/dist/center/Center.js +3 -63
- package/dist/center/Center.stories.js +7 -19
- package/dist/checkbox/Checkbox.js +4 -124
- package/dist/checkbox/Checkbox.stories.js +8 -10
- package/dist/chip/Chip.js +3 -104
- package/dist/chip/Chip.stories.js +7 -19
- package/dist/circular-progress/CircularProgress.js +11 -150
- package/dist/circular-progress/CircularProgress.stories.js +14 -54
- package/dist/command/command.js +13 -170
- package/dist/datepicker/DatePicker.js +27 -127
- 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/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.stories.js +7 -13
- package/dist/drawer/index.js +12 -157
- package/dist/dropdown/Dropdown.js +26 -212
- package/dist/dropdown/Dropdown.stories.js +22 -109
- package/dist/field-wrapper/FieldWrapper.js +3 -139
- package/dist/field-wrapper/FieldWrapper.stories.js +28 -124
- package/dist/flex/Flex.js +3 -63
- package/dist/flex/Flex.stories.js +7 -19
- package/dist/grid/Grid.js +3 -63
- package/dist/grid/Grid.stories.js +7 -28
- package/dist/hooks/use-breakpoint-value.js +14 -77
- package/dist/hooks/use-media-query.js +12 -61
- package/dist/hstack/HStack.js +3 -63
- package/dist/hstack/HStack.stories.js +7 -19
- package/dist/icons/FluxLogo.js +9 -213
- package/dist/icons/FluxLogoTable.js +5 -109
- package/dist/icons/Icon.js +7 -108
- package/dist/icons/Icon.stories.js +7 -12
- package/dist/icons/Icon24Hours.js +5 -83
- package/dist/icons/IconAcceleration.js +4 -72
- package/dist/icons/IconAccount.js +4 -72
- package/dist/icons/IconApplicant.js +5 -78
- package/dist/icons/IconArrow.js +6 -78
- package/dist/icons/IconArrowBack.js +4 -72
- package/dist/icons/IconArrowForward.js +4 -72
- package/dist/icons/IconArrowTopLeft.js +4 -70
- package/dist/icons/IconBluesharkProductGuide.js +5 -80
- package/dist/icons/IconBolt.js +4 -72
- package/dist/icons/IconBriefcase.js +4 -72
- package/dist/icons/IconBulb.js +4 -72
- package/dist/icons/IconCalendar.js +4 -72
- package/dist/icons/IconCalendarArrowBack.js +4 -72
- package/dist/icons/IconCalendarArrowForward.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowBack.js +4 -72
- package/dist/icons/IconCalendarDoubleArrowForward.js +4 -72
- package/dist/icons/IconCancel.js +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.d.ts.map +1 -1
- package/dist/icons/IconCircleOutline.js +5 -140
- package/dist/icons/IconCircleOutline.js.map +1 -1
- package/dist/icons/IconClock.js +5 -80
- package/dist/icons/IconClose.js +4 -72
- package/dist/icons/IconCollapseAll.d.ts +8 -0
- package/dist/icons/IconCollapseAll.d.ts.map +1 -0
- package/dist/icons/IconCollapseAll.js +8 -0
- package/dist/icons/IconCollapseAll.js.map +1 -0
- package/dist/icons/IconConcierge.js +5 -79
- package/dist/icons/IconConciergeService.js +5 -87
- package/dist/icons/IconCreditCard.js +5 -78
- package/dist/icons/IconDash.js +4 -72
- package/dist/icons/IconDeliver.js +4 -72
- package/dist/icons/IconDelivery.js +5 -87
- package/dist/icons/IconDetails.js +4 -72
- package/dist/icons/IconDot.js +6 -87
- package/dist/icons/IconDownload.d.ts +8 -0
- package/dist/icons/IconDownload.d.ts.map +1 -0
- package/dist/icons/IconDownload.js +8 -0
- package/dist/icons/IconDownload.js.map +1 -0
- package/dist/icons/IconEVCharging.js +5 -79
- package/dist/icons/IconElectricCarFuel.js +5 -80
- package/dist/icons/IconEllipsis.js +5 -78
- package/dist/icons/IconEnvelope.js +4 -72
- package/dist/icons/IconExpandAll.d.ts +8 -0
- package/dist/icons/IconExpandAll.d.ts.map +1 -0
- package/dist/icons/IconExpandAll.js +8 -0
- package/dist/icons/IconExpandAll.js.map +1 -0
- package/dist/icons/IconEye.js +5 -79
- package/dist/icons/IconFacebook.js +6 -94
- package/dist/icons/IconFilter.js +5 -83
- package/dist/icons/IconFlagMalaysia.js +5 -141
- package/dist/icons/IconGiveKey.js +5 -79
- package/dist/icons/IconGlobe.js +4 -70
- package/dist/icons/IconGoogle.js +5 -87
- package/dist/icons/IconHome.js +5 -78
- package/dist/icons/IconHostAdvertise.js +4 -72
- package/dist/icons/IconHostCar.js +4 -75
- package/dist/icons/IconHostCash.js +5 -91
- package/dist/icons/IconHostHandle.js +4 -70
- package/dist/icons/IconHostLocation.js +4 -70
- package/dist/icons/IconHostPayment.js +5 -91
- package/dist/icons/IconHostService.js +5 -79
- package/dist/icons/IconHotDeals.js +4 -72
- package/dist/icons/IconInfo.js +5 -77
- package/dist/icons/IconInstagram.js +4 -72
- package/dist/icons/IconInsurance.js +5 -99
- package/dist/icons/IconInternet.js +4 -73
- package/dist/icons/IconInventory.js +5 -78
- package/dist/icons/IconLaurel.js +5 -101
- package/dist/icons/IconLinkedIn.js +4 -72
- package/dist/icons/IconLoading.js +4 -78
- package/dist/icons/IconLocation.js +5 -80
- package/dist/icons/IconLock.js +4 -73
- package/dist/icons/IconLogistics.js +4 -72
- package/dist/icons/IconMail.js +5 -94
- package/dist/icons/IconMember.js +5 -78
- package/dist/icons/IconMobilePen.js +5 -83
- package/dist/icons/IconMotorcycleMoped.js +5 -78
- package/dist/icons/IconNoCost.js +5 -92
- package/dist/icons/IconPDF.js +5 -80
- package/dist/icons/IconPencil.js +4 -70
- package/dist/icons/IconPhone.js +4 -70
- package/dist/icons/IconPlus.js +4 -72
- package/dist/icons/IconPricing.js +4 -72
- package/dist/icons/IconProtected.js +4 -71
- package/dist/icons/IconPsychology.js +4 -72
- package/dist/icons/IconQuestionTooltip.js +4 -73
- package/dist/icons/IconQuote.js +4 -72
- package/dist/icons/IconRate.js +4 -71
- package/dist/icons/IconRegister.js +5 -99
- package/dist/icons/IconReport.d.ts +9 -0
- package/dist/icons/IconReport.d.ts.map +1 -0
- package/dist/icons/IconReport.js +9 -0
- package/dist/icons/IconReport.js.map +1 -0
- package/dist/icons/IconReturn.js +4 -72
- package/dist/icons/IconSearch.js +4 -70
- package/dist/icons/IconSecure.js +4 -71
- package/dist/icons/IconSecurity.js +4 -73
- package/dist/icons/IconSedanOutline.js +5 -159
- package/dist/icons/IconSelectArrow.js +6 -78
- package/dist/icons/IconSort.js +5 -79
- package/dist/icons/IconSortListed.js +5 -95
- package/dist/icons/IconSortPriceAscending.js +5 -83
- package/dist/icons/IconSortPriceDescending.js +5 -83
- package/dist/icons/IconSortYear.js +5 -79
- package/dist/icons/IconSpan.js +4 -71
- package/dist/icons/IconSpeaker.js +4 -79
- package/dist/icons/IconSpecialCar.js +5 -95
- package/dist/icons/IconStar.js +7 -92
- package/dist/icons/IconStockPhoto.js +5 -95
- package/dist/icons/IconSubscription.js +6 -113
- package/dist/icons/IconSubscriptions.js +6 -113
- package/dist/icons/IconSwap.js +5 -79
- package/dist/icons/IconTax.js +4 -72
- package/dist/icons/IconThinArrow.js +6 -78
- package/dist/icons/IconThumbsdown.js +5 -78
- package/dist/icons/IconThumbsup.js +5 -78
- package/dist/icons/IconTool.js +4 -72
- package/dist/icons/IconTooltip.js +4 -73
- package/dist/icons/IconTrash.js +4 -72
- package/dist/icons/IconTriangleExclamation.js +4 -72
- package/dist/icons/IconTyersBrakes.js +5 -83
- package/dist/icons/IconTyre.js +5 -83
- package/dist/icons/IconVacancy.js +5 -78
- package/dist/icons/IconVolunteer.js +4 -72
- package/dist/icons/IconWhatsapp.js +4 -73
- package/dist/icons/IconXPlatform.js +4 -72
- package/dist/icons/IconZeroEffort.js +5 -77
- package/dist/icons/Logo.js +3 -99
- package/dist/input/Input.js +11 -125
- package/dist/input/Input.stories.js +18 -17
- package/dist/input-mask/InputMask.js +11 -149
- package/dist/input-mask/InputMask.stories.js +6 -5
- package/dist/input-mask/mask-trackers.js +5 -4
- package/dist/input-select/InputSelect.js +68 -357
- package/dist/input-select/InputSelect.stories.js +25 -98
- package/dist/popover/popover.js +4 -72
- package/dist/progress/Progress.js +2 -96
- package/dist/progress/Progress.stories.js +14 -13
- package/dist/radio/Radio.js +4 -163
- package/dist/scroll-area/scroll-area.js +5 -113
- package/dist/search-input-select/SearchInputSelect.js +69 -346
- package/dist/select/Select.js +29 -315
- package/dist/select/Select.stories.js +19 -55
- package/dist/skeleton/Skeleton.js +3 -62
- package/dist/skeleton/Skeleton.stories.js +7 -8
- package/dist/slider/Slider.js +5 -106
- package/dist/slider/Slider.stories.js +11 -12
- package/dist/stack/Stack.js +3 -63
- package/dist/stack/Stack.stories.js +7 -19
- package/dist/styles.css +4 -5
- package/dist/table/Table.js +10 -131
- package/dist/table/Table.stories.js +8 -84
- package/dist/tabs/Tabs.js +9 -128
- package/dist/tabs/Tabs.stories.js +13 -46
- package/dist/text/Text.js +6 -88
- package/dist/text/Text.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/tabs/Tabs.js
CHANGED
|
@@ -1,141 +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 * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
83
4
|
import * as React from 'react';
|
|
84
5
|
import HStack from '../hstack/HStack';
|
|
85
6
|
import { cn } from '../utils';
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
]
|
|
90
|
-
|
|
91
|
-
var firstTabValue = (_React_Children_toArray_find = React.Children.toArray(props.children).find(function(child) {
|
|
92
|
-
var _child_type;
|
|
93
|
-
return(// @ts-expect-error
|
|
94
|
-
/*#__PURE__*/ React.isValidElement(child) && (child === null || child === void 0 ? void 0 : (_child_type = child.type) === null || _child_type === void 0 ? void 0 : _child_type.displayName) === 'TabsList');
|
|
95
|
-
})) === null || _React_Children_toArray_find === void 0 ? void 0 : (_React_Children_toArray_find_props = _React_Children_toArray_find.props) === null || _React_Children_toArray_find_props === void 0 ? void 0 : (_React_Children_toArray_find_props_children = _React_Children_toArray_find_props.children) === null || _React_Children_toArray_find_props_children === void 0 ? void 0 : (_React_Children_toArray_find_props_children_ = _React_Children_toArray_find_props_children[0]) === null || _React_Children_toArray_find_props_children_ === void 0 ? void 0 : _React_Children_toArray_find_props_children_.props.value;
|
|
96
|
-
return /*#__PURE__*/ _jsx(TabsPrimitive.Root, _object_spread({
|
|
97
|
-
defaultValue: defaultValue || firstTabValue
|
|
98
|
-
}, props));
|
|
7
|
+
const Tabs = ({ defaultValue, ...props }) => {
|
|
8
|
+
const firstTabValue = React.Children.toArray(props.children).find((child) =>
|
|
9
|
+
// @ts-expect-error
|
|
10
|
+
React.isValidElement(child) && child?.type?.displayName === 'TabsList')?.props?.children?.[0]?.props.value;
|
|
11
|
+
return (_jsx(TabsPrimitive.Root, { defaultValue: defaultValue || firstTabValue, ...props }));
|
|
99
12
|
};
|
|
100
|
-
|
|
101
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
102
|
-
"className"
|
|
103
|
-
]);
|
|
104
|
-
return /*#__PURE__*/ _jsx(TabsPrimitive.List, _object_spread({
|
|
105
|
-
ref: ref,
|
|
106
|
-
className: cn('inline-flex items-center w-full text-black text-[12px] border-b border-b-primary1', className)
|
|
107
|
-
}, props));
|
|
108
|
-
});
|
|
13
|
+
const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex items-center w-full text-black text-[12px] border-b border-b-primary1', className), ...props })));
|
|
109
14
|
TabsList.displayName = TabsPrimitive.List.displayName;
|
|
110
15
|
// name of tab list
|
|
111
|
-
|
|
112
|
-
var className = _param.className, icon = _param.icon, props = _object_without_properties(_param, [
|
|
113
|
-
"className",
|
|
114
|
-
"icon"
|
|
115
|
-
]);
|
|
116
|
-
return /*#__PURE__*/ _jsx(TabsPrimitive.Trigger, _object_spread_props(_object_spread({
|
|
117
|
-
ref: ref,
|
|
118
|
-
className: cn('inline-flex items-center uppercase tracking-wider h-[32px] px-[16px] font-normal whitespace-nowrap', 'border-b border-primary2 -mb-px', 'data-[state=active]:font-bold data-[state=active]:border-b-2 data-[state=active]:border-b-[#50c8e8]', className)
|
|
119
|
-
}, props), {
|
|
120
|
-
children: /*#__PURE__*/ _jsxs(HStack, {
|
|
121
|
-
className: 'gap-2',
|
|
122
|
-
children: [
|
|
123
|
-
icon,
|
|
124
|
-
props.children
|
|
125
|
-
]
|
|
126
|
-
})
|
|
127
|
-
}));
|
|
128
|
-
});
|
|
16
|
+
const Tab = React.forwardRef(({ className, icon, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center uppercase tracking-wider h-[32px] px-[16px] font-normal whitespace-nowrap', 'border-b border-primary2 -mb-px', 'data-[state=active]:font-bold data-[state=active]:border-b-2 data-[state=active]:border-b-[#50c8e8]', className), ...props, children: _jsxs(HStack, { className: 'gap-2', children: [icon, props.children] }) })));
|
|
129
17
|
Tab.displayName = TabsPrimitive.Trigger.displayName;
|
|
130
18
|
// the content for each tab
|
|
131
|
-
|
|
132
|
-
var className = _param.className, props = _object_without_properties(_param, [
|
|
133
|
-
"className"
|
|
134
|
-
]);
|
|
135
|
-
return /*#__PURE__*/ _jsx(TabsPrimitive.Content, _object_spread({
|
|
136
|
-
ref: ref,
|
|
137
|
-
className: cn('mt-2 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300', className)
|
|
138
|
-
}, props));
|
|
139
|
-
});
|
|
19
|
+
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2 dark:ring-offset-zinc-950 dark:focus-visible:ring-zinc-300', className), ...props })));
|
|
140
20
|
TabsContent.displayName = TabsPrimitive.Content.displayName;
|
|
141
21
|
export { Tab, Tabs, TabsContent, TabsList };
|
|
22
|
+
//# sourceMappingURL=Tabs.js.map
|
|
@@ -1,62 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import IconSort from '../icons/IconSort.js';
|
|
3
3
|
import Input from '../input/Input.js';
|
|
4
4
|
import Stack from '../stack/Stack.js';
|
|
5
5
|
import Text from '../text/Text.js';
|
|
6
6
|
import { Tab, Tabs, TabsContent, TabsList } from './Tabs.js';
|
|
7
|
-
|
|
8
|
-
component: Tabs
|
|
7
|
+
const meta = {
|
|
8
|
+
component: Tabs,
|
|
9
9
|
};
|
|
10
10
|
export default meta;
|
|
11
|
-
export
|
|
12
|
-
render:
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
/*#__PURE__*/ _jsx(TabsList, {
|
|
16
|
-
children: tabs.map(function(tab) {
|
|
17
|
-
return /*#__PURE__*/ _jsxs(Tab, {
|
|
18
|
-
value: tab.key,
|
|
19
|
-
children: [
|
|
20
|
-
tab.icon,
|
|
21
|
-
tab.label
|
|
22
|
-
]
|
|
23
|
-
}, tab.key);
|
|
24
|
-
})
|
|
25
|
-
}),
|
|
26
|
-
tabs.map(function(tab) {
|
|
27
|
-
return /*#__PURE__*/ _jsx(TabsContent, {
|
|
28
|
-
value: tab.key,
|
|
29
|
-
children: tab.content
|
|
30
|
-
}, tab.key);
|
|
31
|
-
})
|
|
32
|
-
]
|
|
33
|
-
});
|
|
34
|
-
}
|
|
11
|
+
export const TabsTest = {
|
|
12
|
+
render: () => {
|
|
13
|
+
return (_jsxs(Tabs, { children: [_jsx(TabsList, { children: tabs.map((tab) => (_jsxs(Tab, { value: tab.key, children: [tab.icon, tab.label] }, tab.key))) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.key, children: tab.content }, tab.key)))] }));
|
|
14
|
+
},
|
|
35
15
|
};
|
|
36
|
-
|
|
16
|
+
const tabs = [
|
|
37
17
|
{
|
|
38
|
-
icon:
|
|
39
|
-
size: 16
|
|
40
|
-
}),
|
|
18
|
+
icon: _jsx(IconSort, { size: 16 }),
|
|
41
19
|
key: 'tab1',
|
|
42
20
|
label: 'tab 1',
|
|
43
|
-
content:
|
|
44
|
-
children: [
|
|
45
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
46
|
-
children: "this is content of tab1"
|
|
47
|
-
}),
|
|
48
|
-
/*#__PURE__*/ _jsx(Input, {
|
|
49
|
-
htmlFor: "firstName",
|
|
50
|
-
label: "first name"
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
})
|
|
21
|
+
content: (_jsxs(Stack, { children: [_jsx(Text, { children: "this is content of tab1" }), _jsx(Input, { htmlFor: "firstName", label: "first name" })] })),
|
|
54
22
|
},
|
|
55
23
|
{
|
|
56
24
|
key: 'tab2',
|
|
57
25
|
label: 'tab 2',
|
|
58
|
-
content:
|
|
59
|
-
|
|
60
|
-
})
|
|
61
|
-
}
|
|
26
|
+
content: _jsx(Text, { children: "this is tab 2 content" }),
|
|
27
|
+
},
|
|
62
28
|
];
|
|
29
|
+
//# sourceMappingURL=Tabs.stories.js.map
|
package/dist/text/Text.js
CHANGED
|
@@ -1,94 +1,12 @@
|
|
|
1
|
-
function _define_property(obj, key, value) {
|
|
2
|
-
if (key in obj) {
|
|
3
|
-
Object.defineProperty(obj, key, {
|
|
4
|
-
value: value,
|
|
5
|
-
enumerable: true,
|
|
6
|
-
configurable: true,
|
|
7
|
-
writable: true
|
|
8
|
-
});
|
|
9
|
-
} else {
|
|
10
|
-
obj[key] = value;
|
|
11
|
-
}
|
|
12
|
-
return obj;
|
|
13
|
-
}
|
|
14
|
-
function _object_spread(target) {
|
|
15
|
-
for(var i = 1; i < arguments.length; i++){
|
|
16
|
-
var source = arguments[i] != null ? arguments[i] : {};
|
|
17
|
-
var ownKeys = Object.keys(source);
|
|
18
|
-
if (typeof Object.getOwnPropertySymbols === "function") {
|
|
19
|
-
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
20
|
-
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
21
|
-
}));
|
|
22
|
-
}
|
|
23
|
-
ownKeys.forEach(function(key) {
|
|
24
|
-
_define_property(target, key, source[key]);
|
|
25
|
-
});
|
|
26
|
-
}
|
|
27
|
-
return target;
|
|
28
|
-
}
|
|
29
|
-
function ownKeys(object, enumerableOnly) {
|
|
30
|
-
var keys = Object.keys(object);
|
|
31
|
-
if (Object.getOwnPropertySymbols) {
|
|
32
|
-
var symbols = Object.getOwnPropertySymbols(object);
|
|
33
|
-
if (enumerableOnly) {
|
|
34
|
-
symbols = symbols.filter(function(sym) {
|
|
35
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
keys.push.apply(keys, symbols);
|
|
39
|
-
}
|
|
40
|
-
return keys;
|
|
41
|
-
}
|
|
42
|
-
function _object_spread_props(target, source) {
|
|
43
|
-
source = source != null ? source : {};
|
|
44
|
-
if (Object.getOwnPropertyDescriptors) {
|
|
45
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
46
|
-
} else {
|
|
47
|
-
ownKeys(Object(source)).forEach(function(key) {
|
|
48
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
return target;
|
|
52
|
-
}
|
|
53
|
-
function _object_without_properties(source, excluded) {
|
|
54
|
-
if (source == null) return {};
|
|
55
|
-
var target = _object_without_properties_loose(source, excluded);
|
|
56
|
-
var key, i;
|
|
57
|
-
if (Object.getOwnPropertySymbols) {
|
|
58
|
-
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
|
|
59
|
-
for(i = 0; i < sourceSymbolKeys.length; i++){
|
|
60
|
-
key = sourceSymbolKeys[i];
|
|
61
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
62
|
-
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
63
|
-
target[key] = source[key];
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
return target;
|
|
67
|
-
}
|
|
68
|
-
function _object_without_properties_loose(source, excluded) {
|
|
69
|
-
if (source == null) return {};
|
|
70
|
-
var target = {};
|
|
71
|
-
var sourceKeys = Object.keys(source);
|
|
72
|
-
var key, i;
|
|
73
|
-
for(i = 0; i < sourceKeys.length; i++){
|
|
74
|
-
key = sourceKeys[i];
|
|
75
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
76
|
-
target[key] = source[key];
|
|
77
|
-
}
|
|
78
|
-
return target;
|
|
79
|
-
}
|
|
80
1
|
import * as React from 'react';
|
|
81
2
|
import { cn } from '../utils';
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
"className",
|
|
86
|
-
"children"
|
|
87
|
-
]);
|
|
88
|
-
return /*#__PURE__*/ React.createElement(as, _object_spread_props(_object_spread({}, props), {
|
|
3
|
+
const Text = React.forwardRef(({ as = 'p', className, children, ...props }, ref) => {
|
|
4
|
+
return React.createElement(as, {
|
|
5
|
+
...props,
|
|
89
6
|
className: cn('text-base leading-[19.6px]', as === 'h3' && 'text-xl tracking-wide', as === 'h2' && 'text-2xl tracking-wider', className),
|
|
90
|
-
ref
|
|
91
|
-
}
|
|
7
|
+
ref,
|
|
8
|
+
}, children);
|
|
92
9
|
});
|
|
93
10
|
Text.displayName = 'Text';
|
|
94
11
|
export default Text;
|
|
12
|
+
//# sourceMappingURL=Text.js.map
|
|
@@ -1,50 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import Stack from '../stack/Stack.js';
|
|
3
3
|
import Text from './Text.js';
|
|
4
|
-
|
|
5
|
-
component: Text
|
|
4
|
+
const meta = {
|
|
5
|
+
component: Text,
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
|
-
export
|
|
9
|
-
render:
|
|
10
|
-
return
|
|
11
|
-
|
|
12
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
13
|
-
as: 'h1',
|
|
14
|
-
className: "text-black text-5xl",
|
|
15
|
-
children: "This is heading 1"
|
|
16
|
-
}),
|
|
17
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
18
|
-
as: 'h2',
|
|
19
|
-
className: "text-primary4 text-4xl",
|
|
20
|
-
children: "This is heading 2"
|
|
21
|
-
}),
|
|
22
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
23
|
-
as: 'h3',
|
|
24
|
-
className: "text-primary3 text-3xl",
|
|
25
|
-
children: "This is heading 3"
|
|
26
|
-
}),
|
|
27
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
28
|
-
as: 'h4',
|
|
29
|
-
className: "text-primary2 text-2xl",
|
|
30
|
-
children: "This is heading 4"
|
|
31
|
-
}),
|
|
32
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
33
|
-
as: 'h5',
|
|
34
|
-
className: "text-primary1 text-xl",
|
|
35
|
-
children: "This is heading 5"
|
|
36
|
-
}),
|
|
37
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
38
|
-
as: 'strong',
|
|
39
|
-
className: "text-bold",
|
|
40
|
-
children: "This is strong"
|
|
41
|
-
}),
|
|
42
|
-
/*#__PURE__*/ _jsx(Text, {
|
|
43
|
-
as: 'i',
|
|
44
|
-
className: "text-medium italic",
|
|
45
|
-
children: "This is italic"
|
|
46
|
-
})
|
|
47
|
-
]
|
|
48
|
-
});
|
|
49
|
-
}
|
|
8
|
+
export const FirstStory = {
|
|
9
|
+
render: () => {
|
|
10
|
+
return (_jsxs(Stack, { children: [_jsx(Text, { as: 'h1', className: "text-black text-5xl", children: "This is heading 1" }), _jsx(Text, { as: 'h2', className: "text-primary4 text-4xl", children: "This is heading 2" }), _jsx(Text, { as: 'h3', className: "text-primary3 text-3xl", children: "This is heading 3" }), _jsx(Text, { as: 'h4', className: "text-primary2 text-2xl", children: "This is heading 4" }), _jsx(Text, { as: 'h5', className: "text-primary1 text-xl", children: "This is heading 5" }), _jsx(Text, { as: 'strong', className: "text-bold", children: "This is strong" }), _jsx(Text, { as: 'i', className: "text-medium italic", children: "This is italic" })] }));
|
|
11
|
+
},
|
|
50
12
|
};
|
|
13
|
+
//# sourceMappingURL=Text.stories.js.map
|
|
@@ -3,80 +3,28 @@ import Box from '../box/Box.js';
|
|
|
3
3
|
import Button from '../button/Button.js';
|
|
4
4
|
import VStack from '../vstack/VStack.js';
|
|
5
5
|
import { Toaster, toast } from './sonner.js';
|
|
6
|
-
|
|
7
|
-
component: Toaster
|
|
6
|
+
const meta = {
|
|
7
|
+
component: Toaster,
|
|
8
8
|
};
|
|
9
9
|
export default meta;
|
|
10
|
-
export
|
|
11
|
-
render:
|
|
12
|
-
return
|
|
13
|
-
|
|
14
|
-
children: [
|
|
15
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
16
|
-
title: "This is error toast",
|
|
17
|
-
description: "This is description of the error toast",
|
|
18
|
-
status: "error",
|
|
19
|
-
buttonColor: 'accent'
|
|
20
|
-
}),
|
|
21
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
22
|
-
title: "This is warning toast",
|
|
23
|
-
description: "This is description of the warning toast",
|
|
24
|
-
status: "warning",
|
|
25
|
-
buttonColor: "warning"
|
|
26
|
-
}),
|
|
27
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
28
|
-
title: "This is info toast",
|
|
29
|
-
description: "This is description of the info toast",
|
|
30
|
-
status: "info",
|
|
31
|
-
buttonColor: "link"
|
|
32
|
-
}),
|
|
33
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
34
|
-
title: "This is success toast",
|
|
35
|
-
description: "This is description of the success toast",
|
|
36
|
-
status: "success",
|
|
37
|
-
buttonColor: "success"
|
|
38
|
-
}),
|
|
39
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
40
|
-
title: "This is a long toast",
|
|
41
|
-
description: "A long toast message provides detailed information or instructions that require more space than usual. It's ideal for conveying extensive updates, lengthy explanations, or step-by-step guidance, ensuring users receive comprehensive information directly within the application's interface.",
|
|
42
|
-
status: "success",
|
|
43
|
-
buttonColor: "success"
|
|
44
|
-
}),
|
|
45
|
-
/*#__PURE__*/ _jsx(ToastButton, {
|
|
46
|
-
title: "This is a list toast",
|
|
47
|
-
description: 'Lists: \nItem 1. \nItem 2. \nItem 3.',
|
|
48
|
-
status: "success",
|
|
49
|
-
buttonColor: "success",
|
|
50
|
-
isClosable: false
|
|
51
|
-
})
|
|
52
|
-
]
|
|
53
|
-
})
|
|
54
|
-
});
|
|
55
|
-
}
|
|
10
|
+
export const FirstStory = {
|
|
11
|
+
render: () => {
|
|
12
|
+
return (_jsx(Outer, { children: _jsxs(VStack, { children: [_jsx(ToastButton, { title: "This is error toast", description: "This is description of the error toast", status: "error", buttonColor: 'accent' }), _jsx(ToastButton, { title: "This is warning toast", description: "This is description of the warning toast", status: "warning", buttonColor: "warning" }), _jsx(ToastButton, { title: "This is info toast", description: "This is description of the info toast", status: "info", buttonColor: "link" }), _jsx(ToastButton, { title: "This is success toast", description: "This is description of the success toast", status: "success", buttonColor: "success" }), _jsx(ToastButton, { title: "This is a long toast", description: "A long toast message provides detailed information or instructions that require more space than usual. It's ideal for conveying extensive updates, lengthy explanations, or step-by-step guidance, ensuring users receive comprehensive information directly within the application's interface.", status: "success", buttonColor: "success" }), _jsx(ToastButton, { title: "This is a list toast", description: 'Lists: \nItem 1. \nItem 2. \nItem 3.', status: "success", buttonColor: "success", isClosable: false })] }) }));
|
|
13
|
+
},
|
|
56
14
|
};
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
var showToast = function() {
|
|
15
|
+
const ToastButton = ({ title, description, status, buttonColor, isClosable = true }) => {
|
|
16
|
+
const showToast = () => {
|
|
60
17
|
toast({
|
|
61
18
|
title: title,
|
|
62
19
|
description: description,
|
|
63
20
|
status: status,
|
|
64
|
-
isClosable
|
|
65
|
-
isNumbered: true
|
|
21
|
+
isClosable,
|
|
22
|
+
isNumbered: true,
|
|
66
23
|
});
|
|
67
24
|
};
|
|
68
|
-
return
|
|
69
|
-
colorScheme: buttonColor,
|
|
70
|
-
onClick: showToast,
|
|
71
|
-
children: title
|
|
72
|
-
});
|
|
25
|
+
return (_jsx(Button, { colorScheme: buttonColor, onClick: showToast, children: title }));
|
|
73
26
|
};
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
return /*#__PURE__*/ _jsxs(Box, {
|
|
77
|
-
children: [
|
|
78
|
-
children,
|
|
79
|
-
/*#__PURE__*/ _jsx(Toaster, {})
|
|
80
|
-
]
|
|
81
|
-
});
|
|
27
|
+
const Outer = ({ children }) => {
|
|
28
|
+
return (_jsxs(Box, { children: [children, _jsx(Toaster, {})] }));
|
|
82
29
|
};
|
|
30
|
+
//# sourceMappingURL=Toast.stories.js.map
|
package/dist/toast/ToastBox.js
CHANGED
|
@@ -8,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