@modul/mbui 0.0.16-beta-pv-53139-6c26fe1d → 0.0.16-beta-pv-53147-00d3e008
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/Alert/Alert.d.ts +15 -6
- package/dist/Alert/Alert.js +30 -19
- package/dist/Alert/Alert.js.map +1 -1
- package/dist/AlertDialog/AlertDialog.js +10 -10
- package/dist/AlertDialog/AlertDialog.js.map +1 -1
- package/dist/BottomNavigation/BottomNavigation.js +21 -3
- package/dist/BottomNavigation/BottomNavigation.js.map +1 -1
- package/dist/Button/Button.d.ts +2 -2
- package/dist/Button/Button.js +17 -119
- package/dist/Button/Button.js.map +1 -1
- package/dist/Button/index.js.map +1 -1
- package/dist/Calendar/Calendar.js +3 -3
- package/dist/Calendar/Calendar.js.map +1 -1
- package/dist/Chip/Chip.js +2 -3
- package/dist/Chip/Chip.js.map +1 -1
- package/dist/Collapsible/AccountCollapsible.js +18 -3
- package/dist/Collapsible/AccountCollapsible.js.map +1 -1
- package/dist/DatePicker/DatePicker.js +6 -6
- package/dist/DatePicker/DatePicker.js.map +1 -1
- package/dist/Drawer/Drawer.js +3 -3
- package/dist/Drawer/Drawer.js.map +1 -1
- package/dist/Form/Form.js +6 -6
- package/dist/Form/Form.js.map +1 -1
- package/dist/Icon/icons/InfoSolid.js +1 -1
- package/dist/Icon/icons/InfoSolid.js.map +1 -1
- package/dist/Input/Input.js +3 -3
- package/dist/Input/Input.js.map +1 -1
- package/dist/Input/InputMask.js +22 -1
- package/dist/Input/InputMask.js.map +1 -1
- package/dist/Input-OTP/Input.js +4 -5
- package/dist/Input-OTP/Input.js.map +1 -1
- package/dist/Label/Label.js +2 -2
- package/dist/Label/Label.js.map +1 -1
- package/dist/Page/Page.js +4 -4
- package/dist/Page/Page.js.map +1 -1
- package/dist/Popover/Popover.js +23 -2
- package/dist/Popover/Popover.js.map +1 -1
- package/dist/Progress/Progress.js +11 -3
- package/dist/Progress/Progress.js.map +1 -1
- package/dist/Select/SelectAccountCard.js +33 -7
- package/dist/Select/SelectAccountCard.js.map +1 -1
- package/dist/Select/SelectAsync.js +17 -6
- package/dist/Select/SelectAsync.js.map +1 -1
- package/dist/Select/SelectBase.js +17 -6
- package/dist/Select/SelectBase.js.map +1 -1
- package/dist/Slider/Slider.js +21 -5
- package/dist/Slider/Slider.js.map +1 -1
- package/dist/Switch/Switch.js +27 -13
- package/dist/Switch/Switch.js.map +1 -1
- package/dist/Tabs/Tabs.js +39 -9
- package/dist/Tabs/Tabs.js.map +1 -1
- package/dist/Textarea/Textarea.d.ts +1 -1
- package/dist/Textarea/Textarea.js +20 -3
- package/dist/Textarea/Textarea.js.map +1 -1
- package/dist/index.d.ts +3 -4
- package/dist/index.js +2 -6
- package/dist/index.js.map +1 -1
- package/package.json +1 -2
- package/src/@/config/index.ts +72 -72
- package/src/Alert/Alert.tsx +68 -25
- package/src/AlertDialog/AlertDialog.tsx +2 -3
- package/src/BottomNavigation/BottomNavigation.tsx +20 -2
- package/src/Button/Button.tsx +43 -140
- package/src/Button/index.ts +1 -1
- package/src/Calendar/Calendar.tsx +1 -1
- package/src/Chip/Chip.tsx +2 -3
- package/src/Collapsible/AccountCollapsible.tsx +19 -3
- package/src/DatePicker/DatePicker.tsx +5 -5
- package/src/Drawer/Drawer.tsx +2 -1
- package/src/Form/Form.tsx +5 -3
- package/src/Icon/icons/InfoSolid.tsx +1 -1
- package/src/Input/Input.tsx +1 -1
- package/src/Input/InputMask.tsx +22 -1
- package/src/Input-OTP/Input.tsx +1 -2
- package/src/Label/Label.tsx +1 -1
- package/src/Page/Page.tsx +1 -1
- package/src/Popover/Popover.tsx +24 -2
- package/src/Progress/Progress.tsx +11 -3
- package/src/Select/Select.tsx +1 -1
- package/src/Select/SelectAccountCard.tsx +32 -11
- package/src/Select/SelectAsync.tsx +16 -10
- package/src/Select/SelectBase.tsx +16 -6
- package/src/Slider/Slider.tsx +21 -4
- package/src/Switch/Switch.tsx +26 -13
- package/src/Tabs/Tabs.tsx +41 -9
- package/src/Textarea/Textarea.tsx +30 -19
- package/src/assets/css/global.css +11 -6
- package/src/index.ts +3 -7
- package/dist/Badge/Badge.d.ts +0 -10
- package/dist/Badge/Badge.js +0 -52
- package/dist/Badge/Badge.js.map +0 -1
- package/dist/Badge/index.d.ts +0 -1
- package/dist/Badge/index.js +0 -7
- package/dist/Badge/index.js.map +0 -1
- package/src/Badge/Badge.tsx +0 -58
- package/src/Badge/index.ts +0 -1
- package/src/Checkbox/Checkbox.tsx +0 -44
- package/src/Checkbox/index.ts +0 -1
package/dist/Switch/Switch.js
CHANGED
|
@@ -4,26 +4,40 @@ exports.Switch = void 0;
|
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
6
|
const SwitchPrimitives = (0, tslib_1.__importStar)(require("@radix-ui/react-switch"));
|
|
7
|
-
const
|
|
7
|
+
const _utils_1 = require("@utils");
|
|
8
8
|
const rootClasses = `
|
|
9
|
-
inline-flex
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
inline-flex
|
|
10
|
+
items-center
|
|
11
|
+
w-[32px]
|
|
12
|
+
h-[18px]
|
|
13
|
+
bg-light
|
|
14
|
+
shadow-sm
|
|
15
|
+
rounded-full
|
|
16
|
+
focus-visible:ring-2
|
|
17
|
+
focus-visible:ring-ring
|
|
18
|
+
focus-visible:ring-offset-2
|
|
16
19
|
focus-visible:outline-none
|
|
20
|
+
data-[state=checked]:bg-primary
|
|
21
|
+
data-[state=unchecked]:bg-input
|
|
22
|
+
disabled:cursor-not-allowed peer shrink-0
|
|
23
|
+
disabled:opacity-50
|
|
24
|
+
transition-colors cursor-pointer
|
|
17
25
|
`;
|
|
18
26
|
const ThumbClasses = `
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
size-[18px]
|
|
28
|
+
border-2
|
|
29
|
+
border-input
|
|
30
|
+
bg-page
|
|
31
|
+
shadow-md
|
|
32
|
+
rounded-full
|
|
33
|
+
ring-0
|
|
34
|
+
data-[state=checked]:border-primary
|
|
35
|
+
data-[state=checked]:translate-x-[14px]
|
|
36
|
+
data-[state=unchecked]:translate-x-0
|
|
22
37
|
transition-transform
|
|
23
|
-
data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-0
|
|
24
38
|
pointer-events-none
|
|
25
39
|
`;
|
|
26
|
-
const Switch = React.forwardRef(({ className, ...props }, ref) => (React.createElement(SwitchPrimitives.Root, { className: (0,
|
|
40
|
+
const Switch = React.forwardRef(({ className, ...props }, ref) => (React.createElement(SwitchPrimitives.Root, { className: (0, _utils_1.cn)(rootClasses, className), ...props, ref: ref },
|
|
27
41
|
React.createElement("span", { className: "" }),
|
|
28
42
|
React.createElement(SwitchPrimitives.Thumb, { className: ThumbClasses }))));
|
|
29
43
|
exports.Switch = Switch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;AACA,0DAA8B;AAC9B,sFAA0D;
|
|
1
|
+
{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;AACA,0DAA8B;AAC9B,sFAA0D;AAC1D,mCAA2B;AAE3B,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;CAiBnB,CAAA;AACD,MAAM,YAAY,GAAG;;;;;;;;;;;;;CAapB,CAAA;AAED,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAG7B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,gBAAgB,CAAC,IAAI,IACpB,SAAS,EAAE,IAAA,WAAE,EAChB,WAAW,EACN,SAAS,CACV,KACG,KAAK,EACT,GAAG,EAAE,GAAG;IAEX,8BAAM,SAAS,EAAC,EAAE,GAAQ;IACvB,oBAAC,gBAAgB,CAAC,KAAK,IACrB,SAAS,EAAE,YAAY,GACvB,CACoB,CACzB,CAAC,CAAA;AAIO,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAA"}
|
package/dist/Tabs/Tabs.js
CHANGED
|
@@ -7,22 +7,52 @@ const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
|
|
|
7
7
|
const TabsPrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-tabs"));
|
|
8
8
|
const Tabs = ({ ...props }) => react_1.default.createElement(TabsPrimitive.Root, { ...props });
|
|
9
9
|
exports.Tabs = Tabs;
|
|
10
|
-
const
|
|
10
|
+
const tabListClasses = `
|
|
11
|
+
inline-flex
|
|
12
|
+
bg-[--tabs-bg]
|
|
13
|
+
p-[1px]
|
|
14
|
+
rounded-[--tabs-round]
|
|
15
|
+
data-[orientation=horizontal]:h-[--tabs-height]
|
|
16
|
+
data-[orientation=vertical]:flex-col
|
|
17
|
+
`;
|
|
18
|
+
const TabsList = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.List, { ref: ref, className: (0, classnames_1.default)(tabListClasses, className), ...props })));
|
|
11
19
|
const triggerClasses = `
|
|
12
|
-
flex-1
|
|
20
|
+
flex-1
|
|
21
|
+
shrink-0
|
|
22
|
+
ring-offset-background
|
|
23
|
+
h-[--tab-height]
|
|
24
|
+
text-center
|
|
25
|
+
text-[12px]
|
|
26
|
+
leading-[1.16]
|
|
27
|
+
truncate
|
|
28
|
+
border
|
|
29
|
+
border-transparent
|
|
30
|
+
rounded-sm
|
|
31
|
+
motion-reduce:hover:transform-none
|
|
32
|
+
motion-reduce:transition-none
|
|
33
|
+
focus-visible:outline-none
|
|
34
|
+
focus-visible:ring-2
|
|
35
|
+
focus-visible:ring-ring
|
|
36
|
+
focus-visible:ring-offset-2
|
|
13
37
|
data-[state=active]:border-[--tab-border]
|
|
14
38
|
data-[state=active]:bg-[--tab-bg]
|
|
15
39
|
data-[state=active]:shadow-sm px-[8px]
|
|
16
40
|
data-[orientation=vertical]:basis-auto
|
|
17
41
|
data-[state=inactive]:text-dark
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
focus-visible:outline-none disabled:pointer-events-none`;
|
|
42
|
+
disabled:pointer-events-none
|
|
43
|
+
transition-all
|
|
44
|
+
overflow-hidden
|
|
45
|
+
whitespace-nowrap
|
|
46
|
+
`;
|
|
24
47
|
const TabsTrigger = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Trigger, { ref: ref, className: (0, classnames_1.default)(triggerClasses, className), ...props })));
|
|
25
|
-
const
|
|
48
|
+
const tabsContentClasses = `
|
|
49
|
+
ring-offset-background
|
|
50
|
+
focus-visible:outline-none
|
|
51
|
+
focus-visible:ring-2
|
|
52
|
+
focus-visible:ring-ring
|
|
53
|
+
focus-visible:ring-offset-2
|
|
54
|
+
`;
|
|
55
|
+
const TabsContent = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Content, { ref: ref, className: (0, classnames_1.default)(tabsContentClasses, className), ...props })));
|
|
26
56
|
Tabs.List = TabsList;
|
|
27
57
|
TabsList.displayName = 'TabsList';
|
|
28
58
|
Tabs.Trigger = TabsTrigger;
|
package/dist/Tabs/Tabs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,iFAAqD;AASrD,MAAM,IAAI,GAAyC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,8BAAC,aAAa,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;
|
|
1
|
+
{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,iFAAqD;AASrD,MAAM,IAAI,GAAyC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,8BAAC,aAAa,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AA8F7F,oBAAI;AA5Fb,MAAM,cAAc,GAAG;;;;;;;CAOtB,CAAA;AAED,MAAM,QAAQ,GAAG,eAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,cAAc,EACd,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BtB,CAAA;AAED,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EAAC,cAAc,EAAE,SAAS,CAAC,KACpC,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG;;;;;;CAM1B,CAAA;AAED,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,kBAAkB,EAClB,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;AACpB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AACjC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AACvC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as React from
|
|
1
|
+
import * as React from 'react';
|
|
2
2
|
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
3
3
|
}
|
|
4
4
|
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -3,10 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Textarea = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
|
-
const
|
|
6
|
+
const _utils_1 = require("@utils");
|
|
7
|
+
const textAreaClasses = `
|
|
8
|
+
flex
|
|
9
|
+
py-2
|
|
10
|
+
px-3
|
|
11
|
+
min-h-[60px]
|
|
12
|
+
w-full
|
|
13
|
+
border
|
|
14
|
+
border-input
|
|
15
|
+
rounded-md
|
|
16
|
+
bg-transparent
|
|
17
|
+
placeholder:text-light
|
|
18
|
+
focus-visible:outline-none
|
|
19
|
+
focus-visible:ring-1
|
|
20
|
+
focus-visible:ring-ring
|
|
21
|
+
disabled:cursor-not-allowed
|
|
22
|
+
disabled:opacity-50
|
|
23
|
+
`;
|
|
7
24
|
const Textarea = React.forwardRef(({ className, ...props }, ref) => {
|
|
8
|
-
return (React.createElement("textarea", { className: (0,
|
|
25
|
+
return (React.createElement("textarea", { className: (0, _utils_1.cn)(textAreaClasses, className), ref: ref, ...props }));
|
|
9
26
|
});
|
|
10
27
|
exports.Textarea = Textarea;
|
|
11
|
-
Textarea.displayName =
|
|
28
|
+
Textarea.displayName = 'Textarea';
|
|
12
29
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,mCAA2B;AAE3B,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;CAgBvB,CAAA;AAID,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAqC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtG,OAAO,CACN,kCACC,SAAS,EAAE,IAAA,WAAE,EAAC,eAAe,EAAE,SAAS,CAAC,EACzC,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAGO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ import { BottomNavigation, BottomNavigationList, BottomNavigationListItem, Botto
|
|
|
8
8
|
import * as Icon from './Icon';
|
|
9
9
|
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
|
|
10
10
|
import { AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem } from './Collapsible';
|
|
11
|
-
import { Button
|
|
11
|
+
import { Button } from './Button';
|
|
12
12
|
import { Audio } from './Audio';
|
|
13
13
|
import { cn } from './@/lib/utils';
|
|
14
14
|
import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer';
|
|
@@ -24,7 +24,6 @@ import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, For
|
|
|
24
24
|
import { Calendar } from './Calendar';
|
|
25
25
|
import { DatePicker } from './DatePicker';
|
|
26
26
|
import { Select } from './Select';
|
|
27
|
-
import { Progress } from
|
|
27
|
+
import { Progress } from "./Progress";
|
|
28
28
|
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './AlertDialog';
|
|
29
|
-
|
|
30
|
-
export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, buttonVariants, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, SelectAsync, InputMask, Select, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, Badge, badgeVariants, };
|
|
29
|
+
export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, SelectAsync, InputMask, Select, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DatePicker = exports.Calendar = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.
|
|
4
|
-
exports.
|
|
3
|
+
exports.SelectAsync = exports.DatePicker = exports.Calendar = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
|
|
4
|
+
exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.Select = exports.InputMask = void 0;
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const Tooltip_1 = require("./Tooltip");
|
|
7
7
|
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
|
|
@@ -37,7 +37,6 @@ Object.defineProperty(exports, "AccountCollapsibleContent", { enumerable: true,
|
|
|
37
37
|
Object.defineProperty(exports, "AccountCollapsibleContentItem", { enumerable: true, get: function () { return Collapsible_2.AccountCollapsibleContentItem; } });
|
|
38
38
|
const Button_1 = require("./Button");
|
|
39
39
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
40
|
-
Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return Button_1.buttonVariants; } });
|
|
41
40
|
const Audio_1 = require("./Audio");
|
|
42
41
|
Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
|
|
43
42
|
const utils_1 = require("./@/lib/utils");
|
|
@@ -93,7 +92,4 @@ Object.defineProperty(exports, "AlertDialogTitle", { enumerable: true, get: func
|
|
|
93
92
|
Object.defineProperty(exports, "AlertDialogDescription", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogDescription; } });
|
|
94
93
|
Object.defineProperty(exports, "AlertDialogAction", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogAction; } });
|
|
95
94
|
Object.defineProperty(exports, "AlertDialogCancel", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogCancel; } });
|
|
96
|
-
const Badge_1 = require("./Badge");
|
|
97
|
-
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
|
|
98
|
-
Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
|
|
99
95
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,uCAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,uCAAmC;AAmDlC,wFAnDQ,iBAAO,OAmDR;AAlDR,iCAA6B;AAmD5B,qFAnDQ,WAAI,OAmDR;AAlDL,qCAAiC;AAmDhC,uFAnDQ,eAAM,OAmDR;AAlDP,uCAAmC;AAmDlC,wFAnDQ,iBAAO,OAmDR;AAlDR,+DAAyB;AAmDxB,eAnDM,cAAI,CAmDN;AAlDL,2CAAsF;AAmDrF,yFAnDQ,oBAAQ,OAmDR;AACR,8FApDkB,yBAAa,OAoDlB;AACb,6FArDiC,wBAAY,OAqDjC;AACZ,kGAtD+C,6BAAiB,OAsD/C;AArDlB,yDAK2B;AAoE1B,iGAxEA,mCAAgB,OAwEA;AAChB,qGAxEA,uCAAoB,OAwEA;AACpB,yGAxEA,2CAAwB,OAwEA;AACxB,qGAxEA,uCAAoB,OAwEA;AAtErB,0DAA8B;AA6D7B,oBAAI;AA5DL,+CAAmF;AA+ClF,4FA/CQ,yBAAW,OA+CR;AACX,mGAhDqB,gCAAkB,OAgDrB;AAClB,mGAjDyC,gCAAkB,OAiDzC;AAhDnB,+CAMsB;AA2CrB,mGAhDA,gCAAkB,OAgDA;AAClB,yGAhDA,sCAAwB,OAgDA;AACxB,0GAhDA,uCAAyB,OAgDA;AACzB,0GAhDA,uCAAyB,OAgDA;AACzB,8GAhDA,2CAA6B,OAgDA;AA9C9B,qCAAiC;AA+ChC,uFA/CQ,eAAM,OA+CR;AA9CP,mCAA+B;AAiD9B,sFAjDQ,aAAK,OAiDR;AAhDN,yCAAkC;AAiDjC,mFAjDQ,UAAE,OAiDR;AAhDH,qCAAyF;AAkDxF,uFAlDQ,eAAM,OAkDR;AACN,8FAnDgB,sBAAa,OAmDhB;AACb,4FApD+B,oBAAW,OAoD/B;AACX,4FArD4C,oBAAW,OAqD5C;AACX,8FAtDyD,sBAAa,OAsDzD;AArDd,iCAA6B;AA0D5B,qFA1DQ,WAAI,OA0DR;AAzDL,iCAA6B;AA0D5B,qFA1DQ,WAAI,OA0DR;AAzDL,mCAA2D;AA0C1D,2FA1CQ,kBAAU,OA0CR;AACV,2FA3CoB,kBAAU,OA2CpB;AA+BV,0FA1EgC,iBAAS,OA0EhC;AAzEV,mCAA+B;AA0D9B,sFA1DQ,aAAK,OA0DR;AAzDN,qCAAiC;AA0DhC,uFA1DQ,eAAM,OA0DR;AAzDP,mCAA+B;AA0D9B,sFA1DQ,aAAK,OA0DR;AAzDN,yCAAqC;AA0DpC,yFA1DQ,mBAAQ,OA0DR;AAzDT,qCAAyD;AA0DxD,kGA1DQ,0BAAiB,OA0DR;AAUjB,4FApE2B,oBAAW,OAoE3B;AAnEZ,iCAAwG;AA0DvG,qFA1DQ,WAAI,OA0DR;AACJ,0FA3Dc,gBAAS,OA2Dd;AACT,0FA5DyB,gBAAS,OA4DzB;AACT,yFA7DoC,eAAQ,OA6DpC;AACR,4FA9D8C,kBAAW,OA8D9C;AACX,gGA/D2D,sBAAe,OA+D3D;AACf,4FAhE4E,kBAAW,OAgE5E;AA/DZ,yCAAqC;AAgEpC,yFAhEQ,mBAAQ,OAgER;AA/DT,6CAAyC;AAgExC,2FAhEQ,uBAAU,OAgER;AA/DX,qCAAiC;AAkEhC,uFAlEQ,eAAM,OAkER;AAjEP,yCAAqC;AAgDpC,yFAhDQ,mBAAQ,OAgDR;AA/CT,+CAUsB;AAuDrB,4FAhEA,yBAAW,OAgEA;AACX,mGAhEA,gCAAkB,OAgEA;AAClB,mGAhEA,gCAAkB,OAgEA;AAClB,kGAhEA,+BAAiB,OAgEA;AACjB,kGAhEA,+BAAiB,OAgEA;AACjB,iGAhEA,8BAAgB,OAgEA;AAChB,uGAhEA,oCAAsB,OAgEA;AACtB,kGAhEA,+BAAiB,OAgEA;AACjB,kGAhEA,+BAAiB,OAgEA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modul/mbui",
|
|
3
|
-
"version": "0.0.16-beta-pv-
|
|
3
|
+
"version": "0.0.16-beta-pv-53147-00d3e008",
|
|
4
4
|
"packageManager": "yarn@3.5.1",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
"@hookform/resolvers": "3.9.0",
|
|
25
25
|
"@radix-ui/react-accordion": "^1.2.0",
|
|
26
26
|
"@radix-ui/react-alert-dialog": "1.1.1",
|
|
27
|
-
"@radix-ui/react-checkbox": "1.1.1",
|
|
28
27
|
"@radix-ui/react-collapsible": "1.1.0",
|
|
29
28
|
"@radix-ui/react-dropdown-menu": "2.1.1",
|
|
30
29
|
"@radix-ui/react-label": "2.1.0",
|
package/src/@/config/index.ts
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
import button from
|
|
2
|
-
import label from
|
|
1
|
+
import button from './button'
|
|
2
|
+
import label from './label'
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
success: {
|
|
22
|
-
DEFAULT: 'var(--success)',
|
|
23
|
-
light: 'var(--success-light)',
|
|
24
|
-
},
|
|
25
|
-
secondary: {
|
|
26
|
-
DEFAULT: 'var(--secondary)',
|
|
27
|
-
},
|
|
28
|
-
warning: {
|
|
29
|
-
DEFAULT: 'var(--warning)',
|
|
30
|
-
light: 'var(--warning-light)'
|
|
5
|
+
container: {
|
|
6
|
+
center: true,
|
|
7
|
+
},
|
|
8
|
+
screens: {
|
|
9
|
+
sm: '375px',
|
|
10
|
+
},
|
|
11
|
+
extend: {
|
|
12
|
+
colors: {
|
|
13
|
+
light: 'var(--light)',
|
|
14
|
+
dark: 'var(--dark)',
|
|
15
|
+
primary: {
|
|
16
|
+
DEFAULT: 'var(--primary)',
|
|
17
|
+
light: {
|
|
18
|
+
DEFAULT: 'var(--primary-light)',
|
|
31
19
|
},
|
|
32
|
-
critical: {
|
|
33
|
-
DEFAULT: 'var(--critical)',
|
|
34
|
-
light: 'var(--critical-light)',
|
|
35
|
-
},
|
|
36
|
-
disabled: 'var(--disabled)',
|
|
37
|
-
transparent: 'transparent',
|
|
38
|
-
current: 'currentColor',
|
|
39
|
-
},
|
|
40
|
-
textColor: {
|
|
41
|
-
...button.textColor,
|
|
42
|
-
...label.textColor
|
|
43
20
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
light: 'var(--
|
|
47
|
-
dialog: 'var(--dialog-bg)',
|
|
48
|
-
...button.backgroundColor,
|
|
49
|
-
...label.backgroundColor
|
|
21
|
+
success: {
|
|
22
|
+
DEFAULT: 'var(--success)',
|
|
23
|
+
light: 'var(--success-light)',
|
|
50
24
|
},
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
'md': 'var(--shadow-md)',
|
|
25
|
+
secondary: {
|
|
26
|
+
DEFAULT: 'var(--secondary)',
|
|
54
27
|
},
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
28
|
+
warning: {
|
|
29
|
+
DEFAULT: 'var(--warning)',
|
|
30
|
+
light: 'var(--warning-light)',
|
|
58
31
|
},
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
},
|
|
63
|
-
...button.borderColor
|
|
32
|
+
critical: {
|
|
33
|
+
DEFAULT: 'var(--critical)',
|
|
34
|
+
light: 'var(--critical-light)',
|
|
64
35
|
},
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
36
|
+
disabled: 'var(--disabled)',
|
|
37
|
+
transparent: 'transparent',
|
|
38
|
+
current: 'currentColor',
|
|
39
|
+
},
|
|
40
|
+
textColor: {
|
|
41
|
+
...button.textColor,
|
|
42
|
+
...label.textColor,
|
|
43
|
+
},
|
|
44
|
+
backgroundColor: {
|
|
45
|
+
page: 'var(--page-bg)',
|
|
46
|
+
light: 'var(--bg-light)',
|
|
47
|
+
dialog: 'var(--dialog-bg)',
|
|
48
|
+
...button.backgroundColor,
|
|
49
|
+
...label.backgroundColor,
|
|
50
|
+
},
|
|
51
|
+
dropShadow: {
|
|
52
|
+
sm: 'var(--shadow-sm)',
|
|
53
|
+
md: 'var(--shadow-md)',
|
|
54
|
+
},
|
|
55
|
+
boxShadow: {
|
|
56
|
+
sm: 'var(--shadow-sm)',
|
|
57
|
+
md: 'var(--shadow-md)',
|
|
58
|
+
},
|
|
59
|
+
borderColor: {
|
|
60
|
+
input: {
|
|
61
|
+
DEFAULT: 'var(--border-color)',
|
|
68
62
|
},
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
},
|
|
63
|
+
...button.borderColor,
|
|
64
|
+
},
|
|
65
|
+
borderRadius: {
|
|
66
|
+
sm: 'var(--border-radius-sm)',
|
|
67
|
+
md: 'var(--border-radius-md)',
|
|
68
|
+
},
|
|
69
|
+
keyframes: {
|
|
70
|
+
'accordion-down': {
|
|
71
|
+
from: { height: '0' },
|
|
72
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
78
73
|
},
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
'accordion-up': {
|
|
75
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
76
|
+
to: { height: '0' },
|
|
82
77
|
},
|
|
83
78
|
},
|
|
84
|
-
|
|
79
|
+
animation: {
|
|
80
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
81
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
}
|
package/src/Alert/Alert.tsx
CHANGED
|
@@ -1,38 +1,81 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
2
|
+
import { cn } from '@utils'
|
|
3
|
+
import { CheckCircleSolid, InfoSolid, Warning } from '@/Icon'
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
const AleltIconClasses = '[&+div]:ml-[8px] shrink-0'
|
|
7
|
+
const AlertIcons = {
|
|
8
|
+
info: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-primary')} width={24} height={24} />,
|
|
9
|
+
warning: <Warning aria-hidden={true} className={cn(AleltIconClasses, 'text-warning')} width={24} height={24} />,
|
|
10
|
+
success: <CheckCircleSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-success')} width={24} height={24} />,
|
|
11
|
+
critical: <InfoSolid aria-hidden={true} className={cn(AleltIconClasses, 'text-critical')} width={24} height={24} />
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
const Title = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(({ className, ...props }, ref) => (
|
|
15
|
+
<div
|
|
16
|
+
role="heading"
|
|
17
|
+
ref={ref}
|
|
18
|
+
className={cn('text-[14px] font-medium', className)}
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
))
|
|
22
|
+
|
|
23
|
+
const Description = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => (
|
|
24
|
+
<p
|
|
25
|
+
ref={ref}
|
|
26
|
+
className={cn('text-[14px] [&>a]:text-primary [&>a]:underline', className)}
|
|
27
|
+
{...props}
|
|
28
|
+
/>
|
|
29
|
+
))
|
|
30
|
+
|
|
31
|
+
const getClass = (variant, type): string => {
|
|
32
|
+
const commonClasses = 'px-[8px] py-[16px] border rounded-md '
|
|
33
|
+
const variants = {
|
|
34
|
+
info: `${type !== 'text' ? `${commonClasses} bg-primary-light border-primary` : 'text-primary'}`,
|
|
35
|
+
warning: `${type !== 'text' ? `${commonClasses} bg-warning-light border-warning` : 'text-warning'}`,
|
|
36
|
+
success: `${type !== 'text' ? `${commonClasses} bg-success-light border-success` : 'text-success'}`,
|
|
37
|
+
critical: `${type !== 'text' ? `${commonClasses} bg-critical-light border-critical` : 'text-critical'}`,
|
|
38
|
+
}
|
|
39
|
+
return variants[variant]
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
interface TAlertComponents {
|
|
44
|
+
displayName: string;
|
|
45
|
+
Title: typeof Title;
|
|
46
|
+
Description: typeof Description;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
interface IAlertProps {
|
|
50
|
+
className?: string;
|
|
51
|
+
variant?: string;
|
|
52
|
+
type?: string;
|
|
53
|
+
children: ReactNode;
|
|
23
54
|
}
|
|
24
55
|
|
|
25
|
-
|
|
56
|
+
type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
|
|
57
|
+
|
|
58
|
+
const Alert: React.FC<TAlertProps> & TAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
|
|
26
59
|
return (
|
|
27
60
|
<div
|
|
28
|
-
className={cn(
|
|
61
|
+
className={cn('flex', getClass(variant, type))}
|
|
62
|
+
role='alert'
|
|
29
63
|
{...props}
|
|
30
64
|
>
|
|
31
|
-
{
|
|
65
|
+
{AlertIcons[variant]}
|
|
66
|
+
<div className='pt-[2px]'>
|
|
67
|
+
{children}
|
|
68
|
+
</div>
|
|
32
69
|
</div>
|
|
33
70
|
)
|
|
34
|
-
}
|
|
71
|
+
}
|
|
35
72
|
|
|
36
73
|
Alert.displayName = 'Alert'
|
|
37
74
|
|
|
75
|
+
Alert.Title = Title
|
|
76
|
+
Alert.Title.displayName = 'Alert.Title'
|
|
77
|
+
|
|
78
|
+
Alert.Description = Description
|
|
79
|
+
Alert.Description.displayName = "Alert.Description"
|
|
80
|
+
|
|
38
81
|
export { Alert }
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import * as React from "react"
|
|
2
2
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import { buttonVariants } from "../Button"
|
|
3
|
+
import { cn } from "@utils"
|
|
4
|
+
import { buttonVariants } from "@/Button"
|
|
6
5
|
|
|
7
6
|
const AlertDialog = AlertDialogPrimitive.Root
|
|
8
7
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import { Slot } from '@radix-ui/react-slot'
|
|
3
|
-
import { cn } from '
|
|
3
|
+
import { cn } from '@utils'
|
|
4
4
|
|
|
5
5
|
export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
6
|
asChild?: boolean
|
|
@@ -11,7 +11,25 @@ export type IProps = {
|
|
|
11
11
|
children: React.ReactNode
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
const btnClasses =
|
|
14
|
+
const btnClasses = `
|
|
15
|
+
inline-flex
|
|
16
|
+
flex-col
|
|
17
|
+
place-items-center
|
|
18
|
+
gap-y-[8px]
|
|
19
|
+
w-full
|
|
20
|
+
p-[8px]
|
|
21
|
+
text-[10px]
|
|
22
|
+
text-center
|
|
23
|
+
text-light
|
|
24
|
+
leading-[1.33]
|
|
25
|
+
transition
|
|
26
|
+
duration-300
|
|
27
|
+
hover:bg-btn-ghost-hover
|
|
28
|
+
hover:text-primary
|
|
29
|
+
focus:bg-btn-ghost-focus
|
|
30
|
+
active:bg-btn-ghost-active
|
|
31
|
+
data-[status=active]:text-primary
|
|
32
|
+
`
|
|
15
33
|
|
|
16
34
|
const BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
|
|
17
35
|
const Comp = asChild ? Slot : "button"
|