@modul/mbui 0.0.5 → 0.0.6-beta-pv-52894-c39a8457

package/dist/BottomNavigation/BottomNavigation.d.ts

@@ -1,5 +1,13 @@
-import * as React from "react";
-declare const BottomNavigation: React.ForwardRefExoticComponent<{
-    className: string;
-} & React.RefAttributes<unknown>>;
-export { BottomNavigation };
+import * as React from 'react';
+export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+export declare type IProps = {
+    className?: string;
+    children: React.ReactNode;
+};
+declare const BottomNavigationLink: React.ForwardRefExoticComponent<BottomNavigationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+declare const BottomNavigationListItem: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
+declare const BottomNavigationList: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
+declare const BottomNavigation: React.ForwardRefExoticComponent<IProps & React.RefAttributes<unknown>>;
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink };

package/dist/BottomNavigation/BottomNavigation.js

@@ -1,35 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomNavigation = void 0;
+exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = void 0;
 const tslib_1 = require("tslib");
 const React = (0, tslib_1.__importStar)(require("react"));
-const Icon_1 = require("../Icon");
-const btnClasses = "block hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center hover:text-primary leading-[1.33] transition duration-300";
-const iconClasses = "block mx-auto mb-[8px]";
-const BottomNavigation = React.forwardRef(({ className, ...props }, ref) => {
-    return (React.createElement("nav", { className: "" },
-        React.createElement("ul", { role: "list", className: "grid grid-flow-col" },
-            React.createElement("li", { className: "" },
-                React.createElement("a", { className: btnClasses, href: "" },
-                    React.createElement(Icon_1.Home, { width: "24px", height: "24px", fill: "red", className: "block mx-auto mb-[8px]" }),
-                    "\u0413\u043B\u0430\u0432\u043D\u0430\u044F")),
-            React.createElement("li", { className: "" },
-                React.createElement("a", { className: btnClasses, href: "" },
-                    React.createElement(Icon_1.Payment, { width: "24px", height: "24px", className: iconClasses }),
-                    "\u041F\u043B\u0430\u0442\u0435\u0436\u0438")),
-            React.createElement("li", { className: "" },
-                React.createElement("a", { className: btnClasses, href: "" },
-                    React.createElement(Icon_1.Clock, { width: "24px", height: "24px", className: iconClasses }),
-                    "\u0418\u0441\u0442\u043E\u0440\u0438\u044F")),
-            React.createElement("li", { className: "" },
-                React.createElement("a", { className: btnClasses, href: "" },
-                    React.createElement(Icon_1.Services, { width: "24px", height: "24px", className: iconClasses }),
-                    "\u0421\u0435\u0440\u0432\u0438\u0441\u044B")),
-            React.createElement("li", { className: "" },
-                React.createElement("button", { className: btnClasses },
-                    React.createElement(Icon_1.ChatSolid, { width: "24px", height: "24px", className: iconClasses }),
-                    "\u0427\u0430\u0442")))));
+const react_slot_1 = require("@radix-ui/react-slot");
+const utils_1 = require("../@/lib/utils");
+const btnClasses = 'inline-flex flex-col gap-y-[8px] place-items-center hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center hover:text-primary leading-[1.33] transition duration-300';
+const BottomNavigationLink = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? react_slot_1.Slot : "button";
+    return (React.createElement(Comp, { className: (0, utils_1.cn)(btnClasses, className), ref: ref, ...props }));
+});
+exports.BottomNavigationLink = BottomNavigationLink;
+BottomNavigationLink.displayName = 'BottomNavigationLink';
+const BottomNavigationListItem = React.forwardRef(({ className, children }, ref) => (React.createElement("li", { className: className }, children)));
+exports.BottomNavigationListItem = BottomNavigationListItem;
+BottomNavigationListItem.displayName = 'BottomNavigationListItem';
+const BottomNavigationList = React.forwardRef(({ className, children }, ref) => (React.createElement("ul", { className: "grid grid-flow-col" }, children)));
+exports.BottomNavigationList = BottomNavigationList;
+BottomNavigationList.displayName = 'BottomNavigationList';
+const BottomNavigation = React.forwardRef(({ className, children }, ref) => {
+    return React.createElement("nav", { className: className }, children);
 });
 exports.BottomNavigation = BottomNavigation;
-BottomNavigation.displayName = "BottomNavigation";
+BottomNavigation.displayName = 'BottomNavigation';
 //# sourceMappingURL=BottomNavigation.js.map

package/dist/BottomNavigation/BottomNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../src/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,kCAAoE;AAEpE,MAAM,UAAU,GAAG,qLAAqL,CAAC;AACzM,MAAM,WAAW,GAAG,wBAAwB,CAAC;AAE7C,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwB,EAAE,GAAG,EAAE,EAAE;IAErD,OAAO,CACT,6BAAK,SAAS,EAAC,EAAE;QAChB,4BAAI,IAAI,EAAC,MAAM,EAAC,SAAS,EAAC,oBAAoB;YAC7C,4BAAI,SAAS,EAAC,EAAE;gBACf,2BAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,EAAE;oBAChC,oBAAC,WAAI,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,wBAAwB,GAAE;iEAE7E,CACA;YACL,4BAAI,SAAS,EAAC,EAAE;gBACf,2BAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,EAAE;oBAChC,oBAAC,cAAO,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,WAAW,GAAG;iEAE1D,CACA;YACL,4BAAI,SAAS,EAAC,EAAE;gBACf,2BAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,EAAE;oBAChC,oBAAC,YAAK,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,WAAW,GAAG;iEAExD,CACA;YACL,4BAAI,SAAS,EAAC,EAAE;gBACf,2BAAG,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,EAAE;oBAChC,oBAAC,eAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,WAAW,GAAG;iEAE3D,CACA;YACL,4BAAI,SAAS,EAAC,EAAE;gBACf,gCAAQ,SAAS,EAAE,UAAU;oBAC5B,oBAAC,gBAAS,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,SAAS,EAAE,WAAW,GAAG;yCAEvD,CACL,CACD,CACA,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAIQ,4CAAgB;AAFzB,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA"}
+{"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../src/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,qDAA2C;AAC3C,0CAAmC;AAWnC,MAAM,UAAU,GACf,mOAAmO,CAAA;AAEpO,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAA+C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrI,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IACtC,OAAO,CACN,oBAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EAAC,UAAU,EAAE,SAAS,CAAC,EACpC,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAmByE,oDAAoB;AAjB/F,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAU,EAAE,GAAG,EAAE,EAAE,CAAC,CAC3F,4BAAI,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAM,CACzC,CAAC,CAAA;AAa+C,4DAAwB;AAZzE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AAEjE,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAU,EAAE,GAAG,EAAE,EAAE,CAAC,CACvF,4BAAI,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAM,CAClD,CAAC,CAAA;AAQyB,oDAAoB;AAP/C,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAEzD,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAU,EAAE,GAAG,EAAE,EAAE;IAClF,OAAO,6BAAK,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAO,CAAA;AACnD,CAAC,CAAC,CAAA;AAGO,4CAAgB;AAFzB,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA"}

package/dist/BottomNavigation/index.d.ts

@@ -1,3 +1 @@
-import { BottomNavigation } from './BottomNavigation';
-export { BottomNavigation };
-export default BottomNavigation;
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink } from './BottomNavigation';

package/dist/BottomNavigation/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomNavigation = void 0;
-const BottomNavigation_1 = require("./BottomNavigation");
+exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = void 0;
+var BottomNavigation_1 = require("./BottomNavigation");
 Object.defineProperty(exports, "BottomNavigation", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigation; } });
-exports.default = BottomNavigation_1.BottomNavigation;
+Object.defineProperty(exports, "BottomNavigationList", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationList; } });
+Object.defineProperty(exports, "BottomNavigationListItem", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationListItem; } });
+Object.defineProperty(exports, "BottomNavigationLink", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationLink; } });
 //# sourceMappingURL=index.js.map

package/dist/BottomNavigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BottomNavigation/index.ts"],"names":[],"mappings":";;;AAAA,yDAAqD;AAE5C,iGAFA,mCAAgB,OAEA;AAEzB,kBAAe,mCAAgB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/BottomNavigation/index.ts"],"names":[],"mappings":";;;AAAA,uDAA2H;AAAlH,oHAAA,gBAAgB,OAAA;AAAE,wHAAA,oBAAoB,OAAA;AAAE,4HAAA,wBAAwB,OAAA;AAAE,wHAAA,oBAAoB,OAAA"}

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { Slider } from "./Slider";
 import { Popover } from "./Popover";
 import Logo from "./Logo";
 import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./Input-OTP";
-import { BottomNavigation } from "./BottomNavigation";
+import { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink } from "./BottomNavigation";
 import * as Icon from "./Icon";
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./Collapsible";
 import { AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem } from "./Collapsible";
@@ -13,4 +13,4 @@ import { Input } from "./Base/Input";
 import { Audio } from "./Audio";
 import { cn } from "./@/lib/utils";
 import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem } from './DasboardDrawer';
-export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, Audio, cn, BottomNavigation, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem };
+export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.BottomNavigation = exports.cn = exports.Audio = exports.Input = 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;
+exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.Input = 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;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -19,6 +19,9 @@ Object.defineProperty(exports, "InputOTPSlot", { enumerable: true, get: function
 Object.defineProperty(exports, "InputOTPSeparator", { enumerable: true, get: function () { return Input_OTP_1.InputOTPSeparator; } });
 const BottomNavigation_1 = require("./BottomNavigation");
 Object.defineProperty(exports, "BottomNavigation", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigation; } });
+Object.defineProperty(exports, "BottomNavigationList", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationList; } });
+Object.defineProperty(exports, "BottomNavigationListItem", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationListItem; } });
+Object.defineProperty(exports, "BottomNavigationLink", { enumerable: true, get: function () { return BottomNavigation_1.BottomNavigationLink; } });
 const Icon = (0, tslib_1.__importStar)(require("./Icon"));
 exports.Icon = Icon;
 const Collapsible_1 = require("./Collapsible");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AAkCnC,wFAlCQ,iBAAO,OAkCR;AAjCR,iCAA8B;AAkC7B,qFAlCQ,WAAI,OAkCR;AAjCL,qCAAkC;AAkCjC,uFAlCQ,eAAM,OAkCR;AAjCP,uCAAoC;AAkCnC,wFAlCQ,iBAAO,OAkCR;AAjCR,+DAA0B;AAkCzB,eAlCM,cAAI,CAkCN;AAjCL,2CAAuF;AAkCtF,yFAlCQ,oBAAQ,OAkCR;AACR,8FAnCkB,yBAAa,OAmClB;AACb,6FApCiC,wBAAY,OAoCjC;AACZ,kGArC+C,6BAAiB,OAqC/C;AApClB,yDAAsD;AAiDrD,iGAjDQ,mCAAgB,OAiDR;AAhDjB,0DAA+B;AAiD9B,oBAAI;AAhDL,+CAIuB;AA+BtB,4FAlCA,yBAAW,OAkCA;AACX,mGAlCA,gCAAkB,OAkCA;AAClB,mGAlCA,gCAAkB,OAkCA;AAhCnB,+CAMuB;AA2BtB,mGAhCA,gCAAkB,OAgCA;AAClB,yGAhCA,sCAAwB,OAgCA;AACxB,0GAhCA,uCAAyB,OAgCA;AACzB,0GAhCA,uCAAyB,OAgCA;AACzB,8GAhCA,2CAA6B,OAgCA;AA9B9B,qCAAkC;AA+BjC,uFA/BQ,eAAM,OA+BR;AA9BP,wCAAqC;AA+BpC,sFA/BQ,aAAK,OA+BR;AA9BN,mCAAgC;AA+B/B,sFA/BQ,aAAK,OA+BR;AA9BN,yCAAmC;AA+BlC,mFA/BQ,UAAE,OA+BR;AA9BH,qDAOyB;AA0BxB,uFAhCA,uBAAM,OAgCA;AACN,8FAhCA,8BAAa,OAgCA;AACb,4FAhCA,4BAAW,OAgCA;AACX,8FAhCA,8BAAa,OAgCA;AACb,2FAhCA,2BAAU,OAgCA;AACV,+FAhCA,+BAAc,OAgCA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AA2CnC,wFA3CQ,iBAAO,OA2CR;AA1CR,iCAA8B;AA2C7B,qFA3CQ,WAAI,OA2CR;AA1CL,qCAAkC;AA2CjC,uFA3CQ,eAAM,OA2CR;AA1CP,uCAAoC;AA2CnC,wFA3CQ,iBAAO,OA2CR;AA1CR,+DAA0B;AA2CzB,eA3CM,cAAI,CA2CN;AA1CL,2CAIqB;AAuCpB,yFA3CQ,oBAAQ,OA2CR;AACR,8FA3CA,yBAAa,OA2CA;AACb,6FA3CA,wBAAY,OA2CA;AACZ,kGA3CA,6BAAiB,OA2CA;AAzClB,yDAK4B;AAwD3B,iGA5DA,mCAAgB,OA4DA;AAAE,qGA3DlB,uCAAoB,OA2DkB;AAAE,yGA1DxC,2CAAwB,OA0DwC;AAAE,qGAzDlE,uCAAoB,OAyDkE;AAvDvF,0DAA+B;AAgD9B,oBAAI;AA/CL,+CAIuB;AA+BtB,4FAlCA,yBAAW,OAkCA;AACX,mGAlCA,gCAAkB,OAkCA;AAClB,mGAlCA,gCAAkB,OAkCA;AAhCnB,+CAMuB;AA2BtB,mGAhCA,gCAAkB,OAgCA;AAClB,yGAhCA,sCAAwB,OAgCA;AACxB,0GAhCA,uCAAyB,OAgCA;AACzB,0GAhCA,uCAAyB,OAgCA;AACzB,8GAhCA,2CAA6B,OAgCA;AA9B9B,qCAAkC;AA+BjC,uFA/BQ,eAAM,OA+BR;AA9BP,wCAAqC;AA+BpC,sFA/BQ,aAAK,OA+BR;AA9BN,mCAAgC;AA+B/B,sFA/BQ,aAAK,OA+BR;AA9BN,yCAAmC;AA+BlC,mFA/BQ,UAAE,OA+BR;AA9BH,qDAOyB;AAyBxB,uFA/BA,uBAAM,OA+BA;AACN,8FA/BA,8BAAa,OA+BA;AACb,4FA/BA,4BAAW,OA+BA;AACX,8FA/BA,8BAAa,OA+BA;AACb,2FA/BA,2BAAU,OA+BA;AACV,+FA/BA,+BAAc,OA+BA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.5",
+  "version": "0.0.6-beta-pv-52894-c39a8457",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/BottomNavigation/BottomNavigation.tsx

@@ -1,51 +1,45 @@
-import * as React from "react"
-import { Home, Services, ChatSolid, Clock, Payment } from "../Icon";
-
-const btnClasses = "block hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center hover:text-primary leading-[1.33] transition duration-300";
-const iconClasses = "block mx-auto mb-[8px]";
-
-const BottomNavigation = React.forwardRef(
-  ({ className, ...props } : {className: string}, ref) => {
-
-    return (
-		<nav className="">
-			<ul role="list" className="grid grid-flow-col">
-				<li className="">
-					<a className={btnClasses} href="">
-						<Home width="24px" height="24px" fill="red" className="block mx-auto mb-[8px]"/>
-						Главная
-					</a>
-				</li>
-				<li className="">
-					<a className={btnClasses} href="">
-						<Payment width="24px" height="24px" className={iconClasses}/>
-						Платежи
-					</a>
-				</li>
-				<li className="">
-					<a className={btnClasses} href="">
-						<Clock width="24px" height="24px" className={iconClasses}/>
-						История
-					</a>
-				</li>
-				<li className="">
-					<a className={btnClasses} href="">
-						<Services width="24px" height="24px" className={iconClasses}/>
-						Сервисы
-					</a>
-				</li>
-				<li className="">
-					<button className={btnClasses}>
-						<ChatSolid width="24px" height="24px" className={iconClasses}/>
-						Чат
-					</button>
-				</li>
-			</ul>
-		</nav>
-    )
-  }
-)
-
-BottomNavigation.displayName = "BottomNavigation"
-
-export { BottomNavigation }
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '../@/lib/utils'
+
+export interface BottomNavigationLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	asChild?: boolean
+}
+
+export type IProps = {
+	className?: string
+	children: React.ReactNode
+}
+
+const btnClasses =
+	'inline-flex flex-col gap-y-[8px] place-items-center hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active p-[8px] w-full text-[10px] text-center hover:text-primary leading-[1.33] transition duration-300'
+
+const BottomNavigationLink = React.forwardRef<HTMLButtonElement, BottomNavigationLinkProps>(({ className, asChild, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button"
+	return (
+		<Comp
+			className={cn(btnClasses, className)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+
+BottomNavigationLink.displayName = 'BottomNavigationLink'
+
+const BottomNavigationListItem = React.forwardRef(({ className, children }: IProps, ref) => (
+	<li className={className}>{children}</li>
+))
+BottomNavigationListItem.displayName = 'BottomNavigationListItem'
+
+const BottomNavigationList = React.forwardRef(({ className, children }: IProps, ref) => (
+	<ul className="grid grid-flow-col">{children}</ul>
+))
+BottomNavigationList.displayName = 'BottomNavigationList'
+
+const BottomNavigation = React.forwardRef(({ className, children }: IProps, ref) => {
+	return <nav className={className}>{children}</nav>
+})
+BottomNavigation.displayName = 'BottomNavigation'
+
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink }

package/src/BottomNavigation/index.ts

@@ -1,6 +1 @@
-import { BottomNavigation } from './BottomNavigation'
-
-export { BottomNavigation }
-
-export default BottomNavigation
-
+export { BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink } from './BottomNavigation'

package/src/index.ts

@@ -3,8 +3,17 @@ import { Tabs } from "./Tabs";
 import { Slider } from "./Slider";
 import { Popover } from "./Popover";
 import Logo from "./Logo";
-import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./Input-OTP";
-import { BottomNavigation } from "./BottomNavigation";
+import { InputOTP, 
+	InputOTPGroup, 
+	InputOTPSlot, 
+	InputOTPSeparator 
+} from "./Input-OTP";
+import {
+	BottomNavigation, 
+	BottomNavigationList, 
+	BottomNavigationListItem, 
+	BottomNavigationLink
+} from "./BottomNavigation";
 import * as Icon from "./Icon";
 import {
 	Collapsible,
@@ -53,12 +62,12 @@ export {
 	Input,
 	Audio,
 	cn,
-	BottomNavigation,
 	Icon,
 	Drawer,
 	DrawerTrigger,
 	DrawerClose,
 	DrawerContent,
 	DrawerList,
-	DrawerListItem
+	DrawerListItem,
+	BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink,
 };