@arcblock/ux 2.12.0 → 2.12.1

package/lib/NavMenu/images/did-name-service.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M255.755 462.967C299.832 442.833 336.333 409.027 359.852 366.983C327.934 353.201 292.741 345.565 255.755 345.565C247.188 345.565 238.717 345.975 230.361 346.776L167.308 360.816C162.011 362.708 156.792 364.766 151.658 366.983C175.177 409.027 211.678 442.833 255.755 462.967ZM255.755 153.973C290.371 153.973 323.417 147.285 353.676 135.129C330.169 97.9025 296.143 67.9742 255.755 49.5256C215.367 67.9743 181.341 97.9025 157.834 135.129C188.092 147.285 221.137 153.973 255.755 153.973ZM307.765 54.5489C334.213 73.7632 356.736 98.0527 373.902 125.987C383.969 120.912 393.665 115.208 402.939 108.928C377.033 83.0455 344.343 63.9534 307.765 54.5489ZM256.835 26.0038C256.476 25.8547 256.116 25.7064 255.755 25.559C255.394 25.7064 255.034 25.8547 254.675 26.0038C128.011 26.5856 25.5098 129.446 25.5098 256.246C25.5098 383.047 128.011 485.907 254.675 486.489C255.034 486.638 255.394 486.786 255.755 486.934C256.115 486.786 256.476 486.638 256.835 486.489C383.499 485.907 486 383.047 486 256.246C486 129.446 383.499 26.5858 256.835 26.0038ZM307.765 457.944C347.911 447.622 383.375 425.63 410.324 395.799C400.599 388.715 390.369 382.282 379.699 376.565C361.946 408.694 337.304 436.484 307.765 457.944ZM424.211 378.699C449.236 344.332 464 302.013 464 256.246C464 206.69 446.69 161.177 417.786 125.423C407.218 132.746 396.13 139.372 384.588 145.235C401.252 178.661 410.626 216.359 410.626 256.246C410.626 292.046 403.075 326.082 389.48 356.848C401.606 363.308 413.21 370.618 424.211 378.699ZM203.745 457.944C174.206 436.484 149.564 408.694 131.811 376.565C121.141 382.282 110.911 388.715 101.185 395.799C128.135 425.63 163.599 447.622 203.745 457.944ZM87.299 378.7C98.3002 370.618 109.904 363.308 122.03 356.848C108.435 326.081 100.884 292.046 100.884 256.246C100.884 216.359 110.258 178.661 126.922 145.235C115.38 139.372 104.292 132.746 93.7235 125.423C64.8199 161.177 47.5098 206.69 47.5098 256.246C47.5098 302.013 62.2738 344.332 87.299 378.7ZM108.571 108.927C134.477 83.0454 167.167 63.9532 203.745 54.5488C177.297 73.7632 154.774 98.0527 137.608 125.987C127.541 120.912 117.845 115.208 108.571 108.927ZM269.649 193.786L282.837 186.172H330.843V327.034H283.105C282.929 327.034 282.757 326.988 282.605 326.9L231.235 297.242V215.965L237.351 212.434L248.118 218.651L242.003 222.181V291.025L285.722 316.266H320.075V196.94H285.722L280.417 200.003L269.649 193.786ZM275.698 222.181V291.025L269.599 294.546L280.367 300.763L286.466 297.242V215.965L234.864 186.172H186.858V327.034H234.864L248.068 319.411L237.3 313.194L231.979 316.266H197.626V196.94H231.979L275.698 222.181Z" fill="#3773F2"></path>
+</svg>

package/lib/NavMenu/images/did-wallet.svg

@@ -0,0 +1,33 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="url(#paint0_linear_3301_9425)"></rect>
+<mask id="mask0_3301_9425" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="9" y="9" width="102" height="102">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="white"></rect>
+</mask>
+<g mask="url(#mask0_3301_9425)">
+<rect x="9" y="9" width="102" height="102" rx="12" fill="url(#paint1_linear_3301_9425)"></rect>
+<path d="M20.22 32.2688C20.22 27.8678 23.7877 24.3 28.1887 24.3H91.8112C96.2122 24.3 99.78 27.8678 99.78 32.2688V71.4113C99.78 75.8123 96.2122 79.3801 91.8112 79.3801H28.1887C23.7877 79.3801 20.22 75.8123 20.22 71.4113V32.2688Z" fill="#9FCBFF"></path>
+<path d="M17.16 38.3888C17.16 33.9878 20.7278 30.42 25.1288 30.42H94.8713C99.2723 30.42 102.84 33.9878 102.84 38.3888V82.1213C102.84 86.5223 99.2723 90.09 94.8713 90.09H25.1288C20.7278 90.09 17.16 86.5223 17.16 82.1213V38.3888Z" fill="url(#paint2_linear_3301_9425)"></path>
+<path d="M9 80.145L111 60.51V99C111 105.627 105.627 111 99 111H21C14.3726 111 9 105.627 9 99V80.145Z" fill="url(#paint3_linear_3301_9425)"></path>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.8401 54.1526V39.4412H29.6212C31.6012 39.577 33.1488 41.2274 33.1488 43.2234V50.3614C33.1488 52.4552 31.4515 54.1526 29.3576 54.1526H21.8401ZM38.0412 39.4412H36.0209V54.175H38.0412V39.4412ZM23.8604 52.1323V41.4524H29.3576C30.3356 41.4524 31.1285 42.2453 31.1285 43.2233V50.3613C31.1285 51.3394 30.3356 52.1323 29.3576 52.1323H23.8604ZM40.8792 39.4412V54.1526H48.3967C50.4906 54.1526 52.188 52.4552 52.188 50.3614V43.2234C52.188 41.2274 50.6404 39.577 48.6603 39.4412H40.8792ZM54.759 42.8551H57.0177V45.1138H54.759V42.8551ZM57.0177 48.5023H54.759V50.761H57.0177V48.5023ZM42.8995 41.4524V52.1323H48.3967C49.3748 52.1323 50.1676 51.3394 50.1676 50.3613V43.2233C50.1676 42.2453 49.3748 41.4524 48.3967 41.4524H42.8995Z" fill="#4598FA"></path>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.6519 87.2083V96.4742L91.8311 96.9482L93.2804 97.7849L94.1012 97.311V86.3716L87.1559 82.3617H80.6946V101.321H87.1559L88.9331 100.295L87.4838 99.458L86.7676 99.8716H82.1439V83.811H86.7676L92.6519 87.2083ZM93.6127 82.3617L91.8377 83.3865L93.287 84.2232L94.001 83.811H98.6248V99.8716H94.001L88.1167 96.4742V87.2083L88.9398 86.7331L87.4905 85.8964L86.6674 86.3716V97.311L93.3737 101.183C93.5303 101.273 93.7079 101.321 93.8887 101.321H100.074V82.3617H93.6127Z" fill="white"></path>
+<defs>
+<linearGradient id="paint0_linear_3301_9425" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#0A79F8"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3301_9425" x1="9" y1="9" x2="9" y2="111" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#0A79F8"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3301_9425" x1="17.16" y1="30.42" x2="17.16" y2="90.09" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"></stop>
+<stop offset="1" stop-color="#ECEFFF"></stop>
+</linearGradient>
+<linearGradient id="paint3_linear_3301_9425" x1="20.1562" y1="77.5313" x2="26.7305" y2="110.104" gradientUnits="userSpaceOnUse">
+<stop offset="0.00694981" stop-color="#77B2F6"></stop>
+<stop offset="0.206385" stop-color="#4F9DF6"></stop>
+<stop offset="1" stop-color="#4598FA"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/did.svg

@@ -0,0 +1,3 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.32886 15.6177C5.22429 15.6177 4.32886 16.5131 4.32886 17.6177V20.7634H0.328857V17.6177C0.328857 14.304 3.01515 11.6177 6.32886 11.6177H69.2574C72.5711 11.6177 75.2574 14.304 75.2574 17.6177V59.4747C75.2574 62.7884 72.5712 65.4747 69.2574 65.4747H6.32887C3.01516 65.4747 0.328857 62.7884 0.328857 59.4747V56.5595H4.32886V59.4747C4.32886 60.5792 5.22429 61.4747 6.32887 61.4747H69.2574C70.362 61.4747 71.2574 60.5793 71.2574 59.4747V17.6177C71.2574 16.5131 70.362 15.6177 69.2574 15.6177H6.32886ZM40.4578 27.3455C42.8218 27.3455 44.8692 27.8372 46.6 28.8205C48.3519 29.7815 49.7133 31.1448 50.6842 32.9104C51.6552 34.6759 52.1407 36.7544 52.1407 39.1457C52.1407 41.5147 51.6552 43.5708 50.6842 45.314C49.7133 47.0572 48.3519 48.4093 46.6 49.3703C44.8692 50.3313 42.8218 50.8118 40.4578 50.8118H32.1943V27.3455H40.4578ZM40.3311 47.0237C42.7162 47.0237 44.5526 46.3309 45.8401 44.9452C47.1277 43.5373 47.7714 41.6041 47.7714 39.1457C47.7714 36.665 47.1277 34.7095 45.8401 33.2791C44.5526 31.8488 42.7162 31.1336 40.3311 31.1336H36.4685V47.0237H40.3311ZM27.501 27.3455H23.9811V50.8118H27.501V27.3455ZM8.77824 27.3455C11.1423 27.3455 13.1897 27.8372 14.9205 28.8205C16.6724 29.7815 18.0338 31.1448 19.0047 32.9104C19.9757 34.6759 20.4611 36.7544 20.4611 39.1457C20.4611 41.5147 19.9757 43.5708 19.0047 45.314C18.0338 47.0572 16.6724 48.4093 14.9205 49.3703C13.1897 50.3313 11.1423 50.8118 8.77824 50.8118H0.514743V27.3455H8.77824ZM8.6516 47.0237C11.0367 47.0237 12.8731 46.3309 14.1606 44.9452C15.4481 43.5373 16.0919 41.6041 16.0919 39.1457C16.0919 36.665 15.4481 34.7095 14.1606 33.2791C12.8731 31.8488 11.0367 31.1336 8.6516 31.1336H4.78897V47.0237H8.6516ZM62.2973 30.6486C62.2973 32.1114 61.1115 33.2972 59.6487 33.2972C58.186 33.2972 57.0001 32.1114 57.0001 30.6486C57.0001 29.1858 58.186 28 59.6487 28C61.1115 28 62.2973 29.1858 62.2973 30.6486ZM62.2972 46.5402C62.2972 48.003 61.1114 49.1888 59.6486 49.1888C58.1858 49.1888 57 48.003 57 46.5402C57 45.0774 58.1858 43.8916 59.6486 43.8916C61.1114 43.8916 62.2972 45.0774 62.2972 46.5402Z" fill="#4598FA"></path>
+</svg>

package/lib/NavMenu/images/nft-studio.svg

@@ -0,0 +1,19 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.8" d="M14.2915 102.867C14.2915 106.298 17.8809 108.047 20.0301 105.663L74.8921 44.8061L59.56 13.3167L14.2915 13.3167L14.2915 102.867Z" fill="url(#paint0_linear_3296_9308)"></path>
+<path opacity="0.8" d="M105.709 17.8485C105.709 14.4202 102.124 12.6709 99.9734 15.0499L45.1025 75.758L60.4403 107.247H105.709V17.8485Z" fill="url(#paint1_linear_3296_9308)"></path>
+<path opacity="0.8" d="M105.709 107.247L59.8421 13.3167L14.2915 13.3167L60.4403 107.247H105.709Z" fill="url(#paint2_linear_3296_9308)"></path>
+<defs>
+<linearGradient id="paint0_linear_3296_9308" x1="58.9505" y1="13.5628" x2="1.14816" y2="99.881" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF44B4"></stop>
+<stop offset="1" stop-color="#FFAB48"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9308" x1="105.788" y1="13.5629" x2="48.8613" y2="100.72" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44B3FF"></stop>
+<stop offset="1" stop-color="#A448FF"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3296_9308" x1="38.6355" y1="11.2955" x2="95.5184" y2="102.845" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF44A9"></stop>
+<stop offset="1" stop-color="#7452FA"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/images/vc.svg

@@ -0,0 +1,7 @@
+<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 15C4.89543 15 4 15.8954 4 17V20.1761H0V17C0 13.6863 2.68629 11 6 11H69.23C72.5437 11 75.23 13.6863 75.23 17V59.0689C75.23 62.3826 72.5437 65.0689 69.23 65.0689H6C2.6863 65.0689 0 62.3826 0 59.0689V56.1243H4V59.0689C4 60.1735 4.89543 61.0689 6 61.0689H69.23C70.3346 61.0689 71.23 60.1735 71.23 59.0689V17C71.23 15.8954 70.3346 15 69.23 15H6Z" fill="#4598FA"></path>
+<circle cx="32" cy="31" r="10" stroke="#4598FA" stroke-width="4"></circle>
+<path d="M40.6875 48.384L46.29 53.9864L56.633 43.6434" stroke="#4598FA" stroke-width="4"></path>
+<path d="M49.6667 38.5692C52.9205 38.5692 55.5583 35.4039 55.5583 31.4994C55.5583 27.5948 52.9205 24.4295 49.6667 24.4295" stroke="#4598FA" stroke-width="4"></path>
+<path d="M32 41L24.8527 41C20.9867 41 17.8527 44.134 17.8527 48L17.8527 55.0654" stroke="#4598FA" stroke-width="4"></path>
+</svg>

package/lib/NavMenu/images/web3-kit.svg

@@ -0,0 +1,56 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3296_9286" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="120" height="120">
+<rect width="119.883" height="119.883" fill="white"></rect>
+</mask>
+<g mask="url(#mask0_3296_9286)">
+<path d="M62.0254 14.05C62.0254 11.261 64.2864 9 67.0754 9H91.0629C93.8519 9 96.1129 11.261 96.1129 14.05V74.65C96.1129 77.439 93.8519 79.7 91.0629 79.7H67.0754C64.2864 79.7 62.0254 77.439 62.0254 74.65V14.05Z" fill="url(#paint0_linear_3296_9286)"></path>
+<path d="M24.1504 32.9875C24.1504 30.1985 26.4114 27.9375 29.2004 27.9375H69.6004C72.3894 27.9375 74.6504 30.1985 74.6504 32.9875V74.65C74.6504 77.439 72.3894 79.7 69.6004 79.7H29.2004C26.4114 79.7 24.1504 77.439 24.1504 74.65V32.9875Z" fill="url(#paint1_linear_3296_9286)"></path>
+<g filter="url(#filter0_i_3296_9286)">
+<path d="M16.5752 64.55C16.5752 58.9719 21.0971 54.45 26.6752 54.45H91.0627C96.6408 54.45 101.163 58.9719 101.163 64.55V99.8999C101.163 105.478 96.6408 110 91.0627 110H26.6752C21.0971 110 16.5752 105.478 16.5752 99.8999V64.55Z" fill="url(#paint2_linear_3296_9286)"></path>
+</g>
+<g filter="url(#filter1_i_3296_9286)">
+<path d="M10.2627 55.7125C10.2627 51.5289 13.6541 48.1375 17.8377 48.1375H99.9002C104.084 48.1375 107.475 51.5289 107.475 55.7125V65.8124C107.475 69.996 104.084 73.3874 99.9002 73.3874H17.8377C13.6541 73.3874 10.2627 69.996 10.2627 65.8124V55.7125Z" fill="url(#paint3_linear_3296_9286)"></path>
+</g>
+<circle cx="58.869" cy="87.9063" r="6.94375" fill="#6BADFF"></circle>
+</g>
+<defs>
+<filter id="filter0_i_3296_9286" x="16.5752" y="54.45" width="86.5874" height="57.55" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<filter id="filter1_i_3296_9286" x="10.2627" y="48.1375" width="99.2124" height="27.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
+<feMorphology radius="4" operator="erode" in="SourceAlpha" result="effect1_innerShadow_3296_9286"></feMorphology>
+<feOffset dx="2" dy="2"></feOffset>
+<feGaussianBlur stdDeviation="3"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_3296_9286"></feBlend>
+</filter>
+<linearGradient id="paint0_linear_3296_9286" x1="86.0129" y1="9" x2="86.6441" y2="46.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7575"></stop>
+<stop offset="1" stop-color="#C91C1C"></stop>
+</linearGradient>
+<linearGradient id="paint1_linear_3296_9286" x1="49.4004" y1="56.975" x2="49.4004" y2="27.9375" gradientUnits="userSpaceOnUse">
+<stop stop-color="#ED7F1A"></stop>
+<stop offset="1" stop-color="#FFE074"></stop>
+</linearGradient>
+<linearGradient id="paint2_linear_3296_9286" x1="16.5752" y1="75.2812" x2="101.163" y2="114.419" gradientUnits="userSpaceOnUse">
+<stop stop-color="#54A0FD"></stop>
+<stop offset="1" stop-color="#136EDE"></stop>
+</linearGradient>
+<linearGradient id="paint3_linear_3296_9286" x1="16.5752" y1="55.7124" x2="58.7889" y2="111.945" gradientUnits="userSpaceOnUse">
+<stop stop-color="#83BAFF"></stop>
+<stop offset="1" stop-color="#2482F6"></stop>
+</linearGradient>
+</defs>
+</svg>

package/lib/NavMenu/index.d.ts

@@ -1 +1,2 @@
 export { default } from './nav-menu';
+export { default as Products } from './products';

package/lib/NavMenu/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line no-restricted-exports
-export { default } from './nav-menu';
+export { default } from './nav-menu';
+export { default as Products } from './products';

package/lib/NavMenu/nav-menu-context.d.ts

@@ -0,0 +1,17 @@
+export type NavMenuContextValue = {
+    activeId: string | null;
+    openedIds: string[];
+    hiddenItemCount: number;
+    mode: 'horizontal' | 'vertical' | 'inline';
+    textColor: string;
+    activeTextColor: string;
+    bgColor: string;
+    activate: (id: string) => void;
+    open: (id: string) => void;
+    close: (id: string) => void;
+};
+export declare function NavMenuProvider({ value, children }: {
+    value: NavMenuContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useNavMenuContext(): NavMenuContextValue;

package/lib/NavMenu/nav-menu-context.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const NavMenuContext = /*#__PURE__*/createContext(null);
+export function NavMenuProvider({
+  value,
+  children
+}) {
+  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useNavMenuContext() {
+  const context = useContext(NavMenuContext);
+  if (!context) {
+    throw new Error('NavMenuContext is not found');
+  }
+  return context;
+}

package/lib/NavMenu/nav-menu.d.ts

@@ -3,7 +3,9 @@ export type ItemOptions = {
     id?: string;
     icon?: React.ReactNode;
     label?: React.ReactNode;
+    description?: React.ReactNode;
     active?: boolean;
+    variant?: 'default' | 'panel';
     children?: ItemOptions[];
 };
 export interface NavMenuProps extends React.HTMLAttributes<HTMLElement> {
@@ -29,16 +31,19 @@ export interface ItemProps extends React.HTMLAttributes<HTMLLIElement> {
     id?: string;
     icon?: React.ReactNode;
     label?: React.ReactNode;
+    description?: React.ReactNode;
     active?: boolean;
+    variant?: 'default' | 'panel';
     onClick?: () => void;
 }
-export interface SubProps extends React.HTMLAttributes<HTMLLIElement> {
-    id?: string;
-    icon?: React.ReactNode;
-    label?: React.ReactNode;
-    children?: Array<React.ReactElement>;
+export declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLLIElement>>;
+export interface SubProps extends Omit<ItemProps, 'children' | 'active'> {
+    children?: Array<React.ReactElement> | ((props: {
+        isOpen: boolean;
+    }) => React.ReactElement | null);
     expandIcon?: React.ReactNode | ((props: {
         isOpen: boolean;
     }) => React.ReactNode);
 }
+export declare const Sub: import("react").ForwardRefExoticComponent<SubProps & import("react").RefAttributes<HTMLLIElement>>;
 export default NavMenu;

package/lib/NavMenu/nav-menu.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, cloneElement, useEffect, createContext, useContext, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
+import { Children, cloneElement, useEffect, useRef, forwardRef, useLayoutEffect, isValidElement } from 'react';
 import clsx from 'clsx';
 import { MoreHoriz as MoreHorizIcon, ExpandMore as ExpandMoreIcon, Menu as MenuIcon } from '@mui/icons-material';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useCreation, useMemoizedFn, useReactive, useSize, useThrottleFn } from 'ahooks';
-import { HorizontalStyle, InlineStyle } from './style';
-const NavMenuContext = /*#__PURE__*/createContext(null);
+import { NavMenuProvider, useNavMenuContext } from './nav-menu-context';
+import { NavMenuRoot, NavMenuList, NavMenuItem, NavMenuSub, NavMenuSubList } from './style';
 
 // 过滤 children 中的 Item/Sub, 忽略其它类型的 element
 function filterItems(children) {
@@ -61,11 +62,14 @@ function NavMenu({
     return {
       ...currentState,
       mode,
+      textColor,
+      activeTextColor,
+      bgColor,
       activate,
       open,
       close
     };
-  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, activate, open, close]);
+  }, [currentState.activeId, currentState.hiddenItemCount, currentState.openedIds, mode, textColor, activeTextColor, bgColor, activate, open, close]);
   const navMenuRef = useRef(null);
   const itemRefs = useRef([]);
   const moreIconRef = useRef(null);
@@ -147,10 +151,14 @@ function NavMenu({
         id: item.id,
         icon: item.icon,
         label: item.label,
+        variant: isTopLevel ? 'default' : 'panel',
         ref: isTopLevel ? el => {
           itemRefs.current[index] = el;
         } : undefined,
-        children: item.children.map((childItem, childIndex) => renderItem(childItem, childIndex, false))
+        children: typeof item.children === 'function' ? item.children : item.children.map((childItem, childIndex) => renderItem({
+          ...childItem,
+          variant: 'panel'
+        }, childIndex, false))
       }, item.id);
     }
 
@@ -159,24 +167,24 @@ function NavMenu({
       id: item.id,
       icon: item.icon,
       label: item.label,
+      description: item.description,
       active: item.active,
+      variant: item.variant,
       ref: isTopLevel ? el => {
         itemRefs.current[index] = el;
       } : undefined
     }, item.id);
   };
   const content = items ? items?.slice(-currentState.hiddenItemCount).map((item, index) => renderItem(item, index)) : children?.slice(-currentState.hiddenItemCount);
-  const StyledRoot = mode === 'inline' ? InlineStyle : HorizontalStyle;
-  return /*#__PURE__*/_jsx(NavMenuContext.Provider, {
+  return /*#__PURE__*/_jsx(NavMenuProvider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StyledRoot, {
+    children: /*#__PURE__*/_jsx(NavMenuRoot, {
       ...rest,
       className: classes,
       $textColor: textColor,
-      $activeTextColor: activeTextColor,
       $bgColor: bgColor,
-      children: /*#__PURE__*/_jsxs("ul", {
-        className: "navmenu-root",
+      children: /*#__PURE__*/_jsxs(NavMenuList, {
+        className: clsx('navmenu-list', `navmenu-list--${mode}`),
         ref: navMenuRef,
         children: [items ? items.map((item, index) => renderItem(item, index, true)) : renderChildrenWithRef(children || []), currentState.hiddenItemCount > 0 && /*#__PURE__*/_jsx(Sub, {
           expandIcon: false,
@@ -190,22 +198,26 @@ function NavMenu({
     })
   });
 }
-const Item = /*#__PURE__*/forwardRef(({
+export const Item = /*#__PURE__*/forwardRef(({
   id: _id = '',
   icon = null,
   label = '',
+  description,
   active = false,
+  variant = 'default',
   onClick = null,
   ...rest
 }, ref) => {
   const id = useUniqueId(_id);
   const {
+    mode,
     activeId,
-    activate
-  } = useContext(NavMenuContext) || {};
+    activate,
+    activeTextColor
+  } = useNavMenuContext();
   const classes = clsx('navmenu-item', {
     'navmenu-item--active': activeId === id
-  }, rest.className);
+  }, `navmenu-item--${mode}`, `navmenu-item--${variant}`, rest.className);
   useEffect(() => {
     if (active) {
       activate?.(id);
@@ -219,25 +231,37 @@ const Item = /*#__PURE__*/forwardRef(({
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    _jsxs("li", {
+    _jsxs(NavMenuItem, {
       ...rest,
       className: classes,
-      onClick: handleClick,
       ref: ref,
+      $activeTextColor: activeTextColor,
+      onClick: handleClick,
       children: [icon && /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item-icon",
+        className: "navmenu-item__icon",
         children: icon
-      }), /*#__PURE__*/_jsx("span", {
-        className: "navmenu-item-label",
-        children: label
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "navmenu-item__content",
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "navmenu-item__label",
+          children: [label, " ", /*#__PURE__*/_jsx(ArrowForwardIcon, {
+            className: "navmenu-item__label-arrow"
+          })]
+        }), description && /*#__PURE__*/_jsx("span", {
+          className: "navmenu-item__desc",
+          children: description
+        })]
       })]
     })
   );
 });
-const Sub = /*#__PURE__*/forwardRef(({
+Item.displayName = 'NavMenu.Item';
+export const Sub = /*#__PURE__*/forwardRef(({
   id: _id = '',
   icon = null,
   label = null,
+  description,
+  variant = 'default',
   children,
   expandIcon = ({
     isOpen
@@ -253,13 +277,18 @@ const Sub = /*#__PURE__*/forwardRef(({
     openedIds,
     open,
     close,
-    mode
-  } = useContext(NavMenuContext) || {};
+    mode,
+    activeTextColor
+  } = useNavMenuContext();
   const isOpen = openedIds?.includes(id) ?? false;
-  const classes = clsx('navmenu-sub', {
-    'navmenu-sub--opened': isOpen
-  }, rest.className);
   const isInlineMode = mode === 'inline';
+  const classes = clsx('navmenu-sub', 'navmenu-item', {
+    'navmenu-item--panel': variant === 'panel'
+  }, {
+    'navmenu-sub--opened': isOpen,
+    'navmenu-item--inline': isInlineMode
+  }, rest.className);
+
   // inline mode 时使用 click 事件控制收缩/伸展子菜单
   const props = isInlineMode ? {
     onClick: () => {
@@ -277,32 +306,43 @@ const Sub = /*#__PURE__*/forwardRef(({
   const containerProps = isInlineMode ? {
     onClick: e => e.stopPropagation()
   } : {};
-  return /*#__PURE__*/_jsxs("li", {
+  return /*#__PURE__*/_jsxs(NavMenuSub, {
     ...rest,
     className: classes,
     ...props,
     ref: ref,
+    $activeTextColor: activeTextColor,
     children: [icon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-icon",
+      className: "navmenu-item__icon",
       children: icon
-    }), /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-label",
-      children: label
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "navmenu-item__content",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "navmenu-item__label",
+        children: label
+      }), description && /*#__PURE__*/_jsx("span", {
+        className: "navmenu-item__desc",
+        children: description
+      })]
     }), expandIcon && /*#__PURE__*/_jsx("span", {
-      className: "navmenu-sub-expand-icon",
+      className: "navmenu-sub__expand-icon",
       children: typeof expandIcon === 'function' ? expandIcon({
         isOpen
       }) : expandIcon
     }), /*#__PURE__*/_jsx("div", {
-      className: "navmenu-sub-container",
+      className: "navmenu-sub__container",
       ...containerProps,
-      children: /*#__PURE__*/_jsx("ul", {
-        className: "navmenu-sub-list",
+      children: typeof children === 'function' ? children({
+        isOpen
+      }) // 自定义渲染
+      : /*#__PURE__*/_jsx(NavMenuSubList, {
+        className: "navmenu-sub__list",
         children: filterItems(children)
       })
     })]
   });
 });
+Sub.displayName = 'NavMenu.Sub';
 NavMenu.Item = Item;
 NavMenu.Sub = Sub;
 export default NavMenu;

package/lib/NavMenu/products.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material';
+export interface ProductsProps extends BoxProps {
+    isOpen?: boolean;
+}
+export default function Products({ className, isOpen, ...rest }: ProductsProps): import("react/jsx-runtime").JSX.Element;