musae 0.2.5 → 0.2.6

package/dist/components/waterfall/waterfall.js

@@ -1,10 +1,12 @@
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React from 'react';
 import { useRepaint } from './hooks.js';
 import clsx from 'clsx';
 import { useGutters } from '../../hooks/use-gutters.js';
 import { useUpdateEffect, useMounted } from '@aiszlab/relax';
 import Sequential from './sequential.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, WaterfallClassToken } from '../../utils/class-name.js';
 
 const styles = {
   waterfall: props => [{
@@ -62,6 +64,7 @@ const Waterfall = ({
     columns,
     rowGap
   });
+  const classNames = useClassNames(ComponentToken.Waterfall);
   const styled = props(styles.waterfall({
     rowGap,
     columnGap
@@ -96,7 +99,7 @@ const Waterfall = ({
       columns: columns,
       children: children,
       rowGap: rowGap,
-      className: clsx(className, styled.className),
+      className: clsx(classNames[WaterfallClassToken.Sequential], className, styled.className),
       style: {
         ...styled.style,
         ...style
@@ -104,7 +107,7 @@ const Waterfall = ({
     });
   }
   return React.createElement("div", {
-    className: clsx(className, styled.className),
+    className: clsx(classNames[WaterfallClassToken.Waterfall], className, styled.className),
     style: {
       ...styled.style,
       ...style

package/dist/hooks/use-class-names.d.ts

@@ -108,6 +108,7 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         2: string;
         3: string;
         4: string;
+        5: string;
     };
     21: {
         0: string;
@@ -126,6 +127,11 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         0: string;
         1: string;
         2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
     };
     24: {
         0: string;
@@ -207,4 +213,8 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         5: string;
         6: string;
     };
+    38: {
+        0: string;
+        1: string;
+    };
 }[T];

package/dist/stylex.css

@@ -18,14 +18,10 @@
 .musae-xwd7sb:not(#\#){grid-area:label}
 .musae-1kxrqrs:not(#\#){grid-area:leading}
 .musae-nyuz70:not(#\#){grid-area:title}
-.musae-p00dg7:not(#\#){grid:'description leading label'}
-.musae-u00h3a:not(#\#){grid:'description leading'}
-.musae-tbzffp:not(#\#){grid:'label leading description'}
 .musae-1t1eshv:not(#\#){grid:'leading description closer'}
-.musae-1pk7hnv:not(#\#){grid:'leading description'}
 .musae-1js343y:not(#\#){grid:'leading title closer' 'leading description description'}
 .musae-1l2suiq:not(#\#){grid:'leading title' '. description'}
-.musae-ezip7x:not(#\#){inset:0px}
+.musae-10a8y8t:not(#\#){inset:0}
 .musae-1ug7cio:not(#\#){margin:var(--musae-15cw4i4)}
 .musae-ieb5ut:not(#\#){margin:var(--musae-1wblvyz)}
 .musae-1eddoca:not(#\#){margin:var(--musae-68a8pz)}
@@ -37,8 +33,6 @@
 .musae-12ldsqu:not(#\#){padding:var(--musae-oohzsl)}
 .musae-8kignx:not(#\#){padding:var(--musae-qk2ac7)}
 .musae-wygk8u:not(#\#){padding:var(--musae-vk5id6) var(--musae-1tzp6vk)}
-.musae-dv7uk4:nth-of-type(2n):not(#\#){grid:'description leading label'}
-.musae-33een3:nth-of-type(2n):not(#\#){grid:'description leading'}
 .musae-1eubc7e:hover:not(#\#){border:var(--1n3s2ii,revert)}
 .musae-9r1u3d:not(#\#):not(#\#){border-color:transparent}
 .musae-eqt46j:not(#\#):not(#\#){border-color:var(--borderColor,revert)}
@@ -61,7 +55,11 @@
 .musae-1vkuzbb:not(#\#):not(#\#){gap:var(--musae-oohzsl)}
 .musae-29tp26:not(#\#):not(#\#){gap:var(--musae-qk2ac7)}
 .musae-vbka3v:not(#\#):not(#\#){gap:var(--musae-vk5id6)}
-.musae-l33w4x:not(#\#):not(#\#){inset-inline:0px}
+.musae-hurxv4:not(#\#):not(#\#){grid-template-areas:'description leading label'}
+.musae-196jfb2:not(#\#):not(#\#){grid-template-areas:'description leading'}
+.musae-1y7mvjm:not(#\#):not(#\#){grid-template-areas:'label leading description'}
+.musae-znaemz:not(#\#):not(#\#){grid-template-areas:'leading description'}
+.musae-17y0mx6:not(#\#):not(#\#){inset-inline:0}
 .musae-e8uvvx:not(#\#):not(#\#){list-style:none}
 .musae-nweklb:not(#\#):not(#\#){margin-block:var(--musae-15cw4i4)}
 .musae-dbe9a9:not(#\#):not(#\#){margin-block:var(--musae-qk2ac7)}
@@ -94,6 +92,7 @@
 .musae-1cy8zhl:not(#\#):not(#\#):not(#\#){align-items:flex-start}
 .musae-1bdtpbn:not(#\#):not(#\#):not(#\#){align-items:var(--alignItems,revert)}
 .musae-amitd3:not(#\#):not(#\#):not(#\#){align-self:center}
+.musae-qcrz7y:not(#\#):not(#\#):not(#\#){align-self:flex-start}
 .musae-1c74tu6:not(#\#):not(#\#):not(#\#){animation-duration:2s}
 .musae-a4qsjk:not(#\#):not(#\#):not(#\#){animation-iteration-count:infinite}
 .musae-17fodkt:not(#\#):not(#\#):not(#\#){animation-name:musae-60a50w-B}
@@ -114,6 +113,8 @@
 .musae-jdr3co:not(#\#):not(#\#):not(#\#){box-shadow:var(--musae-15zostt)}
 .musae-ezd0au:not(#\#):not(#\#):not(#\#){box-shadow:var(--musae-1trg6py)}
 .musae-9f619:not(#\#):not(#\#):not(#\#){box-sizing:border-box}
+.musae-ntwwlm:not(#\#):not(#\#):not(#\#){color-scheme:dark}
+.musae-19aimcq:not(#\#):not(#\#):not(#\#){color-scheme:light}
 .musae-1heor9g:not(#\#):not(#\#):not(#\#){color:inherit}
 .musae-19dipnz:not(#\#):not(#\#):not(#\#){color:var(--color,revert)}
 .musae-4rvf3u:not(#\#):not(#\#):not(#\#){column-gap:var(--columnGap,revert)}
@@ -134,6 +135,7 @@
 .musae-bh8q5q:not(#\#):not(#\#):not(#\#){fill:none}
 .musae-dt5ytf:not(#\#):not(#\#):not(#\#){flex-direction:column}
 .musae-1q0g3np:not(#\#):not(#\#):not(#\#){flex-direction:row}
+.musae-2lah0s:not(#\#):not(#\#):not(#\#){flex-shrink:0}
 .musae-1a02dak:not(#\#):not(#\#):not(#\#){flex-wrap:wrap}
 .musae-1j6dyjg:not(#\#):not(#\#):not(#\#){font-size:11px}
 .musae-fifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
@@ -150,9 +152,12 @@
 .musae-k50ysn:not(#\#):not(#\#):not(#\#){font-weight:500}
 .musae-4qzwkw:not(#\#):not(#\#):not(#\#){grid-column-end:var(--gridColumnEnd,revert)}
 .musae-8a1x49:not(#\#):not(#\#):not(#\#){grid-column-start:auto}
+.musae-134kloy:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto 1fr}
+.musae-52fmzj:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto}
+.musae-1pmbctz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto 1fr}
 .musae-1aeqsfb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(24,minmax(0,1fr))}
-.musae-hw0b42:not(#\#):not(#\#):not(#\#){inset-inline-end:0px}
-.musae-1at4hj2:not(#\#):not(#\#):not(#\#){inset-inline-start:0px}
+.musae-tijo5x:not(#\#):not(#\#):not(#\#){inset-inline-end:0}
+.musae-1o0tod:not(#\#):not(#\#):not(#\#){inset-inline-start:0}
 .musae-budbmw:not(#\#):not(#\#):not(#\#){inset-inline-start:50%}
 .musae-ncxdh4:not(#\#):not(#\#):not(#\#){inset-inline-start:calc(100% - var(--musae-rlgvtq) - var(--musae-1h5s2h0))}
 .musae-1auf0oo:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--musae-1h5s2h0)}
@@ -162,6 +167,7 @@
 .musae-1qughib:not(#\#):not(#\#):not(#\#){justify-content:space-between}
 .musae-167rj3e:not(#\#):not(#\#):not(#\#){justify-items:var(--justifyItems,revert)}
 .musae-15bdqvn:not(#\#):not(#\#):not(#\#){justify-self:flex-end}
+.musae-wldb3t:not(#\#):not(#\#):not(#\#){justify-self:flex-start}
 .musae-1i9hxzh:not(#\#):not(#\#):not(#\#){letter-spacing:var(--musae-1fsxyg9)}
 .musae-1xv967o:not(#\#):not(#\#):not(#\#){letter-spacing:var(--musae-1odcd6w)}
 .musae-1kag4p5:not(#\#):not(#\#):not(#\#){letter-spacing:var(--musae-1ry795)}
@@ -179,10 +185,10 @@
 .musae-5agonf:not(#\#):not(#\#):not(#\#){line-height:52px}
 .musae-1kke7aa:not(#\#):not(#\#):not(#\#){line-height:64px}
 .musae-3ct3a4:not(#\#):not(#\#):not(#\#){list-style-type:none}
-.musae-fbia9g:not(#\#):not(#\#):not(#\#){margin-inline-end:0px}
+.musae-14z9mp:not(#\#):not(#\#):not(#\#){margin-inline-end:0}
 .musae-10qwhln:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(-100% - var(--musae-rlgvtq) - var(--musae-jdzqnm) * 4 - var(--musae-jdzqnm))}
 .musae-16ph6eo:not(#\#):not(#\#):not(#\#){margin-inline-end:calc(100% + var(--musae-rlgvtq) + var(--musae-jdzqnm) * 4 + var(--musae-jdzqnm))}
-.musae-1tt3wx9:not(#\#):not(#\#):not(#\#){margin-inline-start:0px}
+.musae-1lziwak:not(#\#):not(#\#):not(#\#){margin-inline-start:0}
 .musae-1fns2s7:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(-100% - var(--musae-rlgvtq) - var(--musae-jdzqnm) * 4 - var(--musae-jdzqnm))}
 .musae-5bta6d:not(#\#):not(#\#):not(#\#){margin-inline-start:calc(100% + var(--musae-rlgvtq) + var(--musae-jdzqnm) * 4 + var(--musae-jdzqnm))}
 .musae-1tmxnmp:not(#\#):not(#\#):not(#\#){margin-inline-start:var(--musae-68a8pz)}
@@ -259,7 +265,7 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-x7gz8e:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{content:""}
 .musae-13amitz:hover > span:last-child:not(#\#):not(#\#):not(#\#){display:inline-flex}
 .musae-1pqvcko:hover > span:first-child:not(#\#):not(#\#):not(#\#){display:none}
-.musae-1sd0t5p:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0px}
+.musae-192i3sz:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
 .musae-1i5rff9:not(:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:calc(var(--musae-vk5id6) * -1)}
 .musae-no41pc:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{position:absolute}
 .musae-1kmnipp:not(:last-of-type):not(#\#):not(#\#):not(#\#)::after{transform:translateY(-50%)}
@@ -271,7 +277,7 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-43481e:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--borderBottomColor,revert)}
 .musae-1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
 .musae-lntmim:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:var(--musae-1ax7z96)}
-.musae-1sh2tzk:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0px}
+.musae-1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
 .musae-1ii70tt:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--musae-15cw4i4)}
 .musae-8wmlod:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--musae-1wblvyz)}
 .musae-1dr59a3:not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}
@@ -295,20 +301,20 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1gfonl1:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-oohzsl)}
 .musae-lry4nc:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-rlgvtq)}
 .musae-b4kbli:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--musae-xrqq76)}
-.musae-1tjciyl:not(#\#):not(#\#):not(#\#):not(#\#){left:0px}
+.musae-u96u03:not(#\#):not(#\#):not(#\#):not(#\#){left:0}
 .musae-101gtxs:not(#\#):not(#\#):not(#\#):not(#\#){left:var(--left,revert)}
 .musae-hq7bbv:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-15cw4i4)}
 .musae-a4cli4:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-1tzp6vk)}
 .musae-rsi211:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:var(--musae-qk2ac7)}
 .musae-1vc729f:not(#\#):not(#\#):not(#\#):not(#\#){margin-right:var(--musae-qk2ac7)}
-.musae-ncydc0:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:-100%}
-.musae-1q12cbh:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0px}
+.musae-dj266r:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:0}
+.musae-lpx92y:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:calc(-1 * var(--musae-1qsoxbc))}
+.musae-u5ntsc:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-1ncxh3n)}
 .musae-3yben5:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-1wblvyz)}
 .musae-1lpmo0s:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-vk5id6)}
 .musae-edbcy2:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100% - var(--musae-15cw4i4) * 2)}
 .musae-kfv0gj:not(#\#):not(#\#):not(#\#):not(#\#){max-width:var(--musae-1qj6wod)}
 .musae-1v3fk47:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-16n5srz)}
-.musae-jk1msx:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-1qj6wod)}
 .musae-oexrxm:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-1spnrok)}
 .musae-1infgec:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-cftog7)}
 .musae-1ee7i9g:not(#\#):not(#\#):not(#\#):not(#\#){min-height:var(--musae-laggmb)}
@@ -335,10 +341,10 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-522f2k:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-oohzsl)}
 .musae-1p848mt:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-qk2ac7)}
 .musae-utp9vd:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--musae-vk5id6)}
-.musae-15gpytn:not(#\#):not(#\#):not(#\#):not(#\#){right:0px}
+.musae-3m8u43:not(#\#):not(#\#):not(#\#):not(#\#){right:0}
 .musae-14l26ut:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-15cw4i4)}
 .musae-6al1c1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--musae-oohzsl)}
-.musae-9oc6z4:not(#\#):not(#\#):not(#\#):not(#\#){top:0px}
+.musae-13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0}
 .musae-wa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%}
 .musae-kwake1:not(#\#):not(#\#):not(#\#):not(#\#){top:calc(var(--musae-xrqq76) + var(--musae-15cw4i4))}
 .musae-1qtgrog:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--musae-15cw4i4)}
@@ -364,11 +370,11 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1o8gf8:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:50%}
 .musae-vpkyr8:not(:last-of-type):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--musae-1ax7z96)}
 .musae-cu8lob:first-child:not(#\#):not(#\#):not(#\#):not(#\#){margin-top:var(--musae-qk2ac7)}
-.musae-zm6erk:last-of-type:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0px}
+.musae-xt7lk8:last-of-type:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0}
 .musae-r8ctv5:hover:not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:auto}
 .musae-ynce87:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){animation:none}
 .musae-goest1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){animation:none}
-.musae-1799ia1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0px}
+.musae-arstr8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset:0}
 .musae-123gkgz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-color:var(--1il6zln,revert)}
 .musae-3yd8hb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-color:var(--joftei,revert)}
 .musae-11y6kk5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb{border-radius:4px}
@@ -381,12 +387,18 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-1lou4sy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{border-width:var(--musae-1ax7z96)}
 .musae-15z8w9c:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-width:var(--musae-1h5s2h0)}
 .musae-ilzmfn:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-width:var(--musae-1hydgie)}
+.musae-1nc033x:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-block:0}
+.musae-d54j2p:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-block:0}
 .musae-t448kv:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{transition:all .2s}
 .musae-1uowca5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar{background-color:transparent}
 .musae-27d4w3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{background-color:var(--15iyedw,revert)}
 .musae-rr6jkh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{background-color:var(--1lrm08k,revert)}
 .musae-1cj4lvr:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb{background-color:var(--b44ld2,revert)}
 .musae-1dn9wut:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{border-top-width:var(--musae-1aj7t22)}
+html:not([dir='rtl']) .musae-15cyge6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.08)}
+html[dir='rtl'] .musae-15cyge6:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-shadow:inset 10px 0 8px -8px rgba(0,0,0,.08)}
+html:not([dir='rtl']) .musae-91zhsk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{box-shadow:inset 10px 0 8px -8px rgba(0,0,0,.08)}
+html[dir='rtl'] .musae-91zhsk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.08)}
 .musae-x38sju:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{box-sizing:border-box}
 .musae-tql2tq:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{box-sizing:border-box}
 .musae-16q0lx9:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder{color:var(--163tekb,revert)}
@@ -397,14 +409,17 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-hkezso:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{display:block}
 .musae-1fgarty:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{display:block}
 .musae-15ozc13:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{display:none}
-.musae-1x8jx26:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0px}
+.musae-1unh1gc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-end:0}
+.musae-typ5od:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:0}
 .musae-1gkks1t:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-end:50%}
-.musae-1kfboi8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0px}
+.musae-1682cnc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:0}
 .musae-fbisj7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{inset-inline-start:50%}
 .musae-xsadbs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{inset-inline-start:calc((100% - var(--musae-1ax7z96)) / 2)}
 .musae-2utku0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{margin-inline-start:var(--musae-vk5id6)}
 .musae-15342hd:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-old(root){mix-blend-mode:normal}
 .musae-1sgbmat:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::view-transition-new(root){mix-blend-mode:normal}
+.musae-kk1bqk:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{pointer-events:none}
+.musae-2q1x1w:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{pointer-events:none}
 .musae-1j6awrg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{position:absolute}
 .musae-1hmns74:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{position:absolute}
 .musae-q1m6zb:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{transform:translate(100%,-160%) rotate(45deg)}
@@ -430,12 +445,13 @@ html[dir='rtl'] .musae-1yc453h:not(#\#):not(#\#):not(#\#){text-align:right}
 .musae-2wrall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--musae-cftog7)}
 .musae-1e9cniy:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{height:var(--musae-fwu7zn)}
 .musae-1tvttw7:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{margin-right:var(--musae-qk2ac7)}
-.musae-dulvvp:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{margin-top:var(--musae-h30iw9)}
 .musae-4ys0c4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{margin-top:var(--musae-vk5id6)}
 .musae-1srwf7z:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:100%}
 .musae-5a73hh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{top:calc((100% - var(--musae-1ax7z96)) / 2)}
 .musae-11yodxc:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:calc(var(--musae-1l9c3uf) / 3)}
 .musae-33jx72:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--11aojeo,revert)}
+.musae-bk3rzz:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--musae-16n5srz)}
+.musae-g1t9zo:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--musae-16n5srz)}
 .musae-9l6l1u:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--musae-1ax7z96)}
 .musae-etvar1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::after{width:var(--musae-1ax7z96)}
 .musae-1el3b87:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::before{width:var(--musae-1l9c3uf)}

package/dist/utils/class-name.d.ts

@@ -46,7 +46,8 @@ export declare enum ComponentToken {
     Tooltip = 34,
     Popover = 35,
     Loading = 36,
-    Collapse = 37
+    Collapse = 37,
+    Waterfall = 38
 }
 /**
  * @description
@@ -152,10 +153,11 @@ export declare enum ClockClassToken {
 }
 export declare enum MenuClassToken {
     Menu = 0,
-    Group = 1,
-    GroupHidden = 2,
-    Collapser = 3,
-    Item = 4
+    MenuHorizontal = 1,
+    Group = 2,
+    GroupHidden = 3,
+    Collapser = 4,
+    Item = 5
 }
 export declare enum CheckboxClassToken {
     Checkbox = 0
@@ -172,8 +174,13 @@ export declare enum TreeClassToken {
 }
 export declare enum TabsClassToken {
     Tabs = 0,
-    Item = 1,
-    Indicator = 2
+    TabsNavigation = 1,
+    TabsNavigator = 2,
+    TabList = 3,
+    Tab = 4,
+    Indicator = 5,
+    Panels = 6,
+    Panel = 7
 }
 export declare enum PaginationClassToken {
     Pagination = 0
@@ -257,6 +264,10 @@ export declare enum CollapseClassToken {
     Content = 6,
     Collapser = 7
 }
+export declare enum WaterfallClassToken {
+    Waterfall = 0,
+    Sequential = 1
+}
 /**
  * @description
  * class name collection
@@ -369,6 +380,7 @@ export declare const CLASS_NAMES: {
         2: string;
         3: string;
         4: string;
+        5: string;
     };
     21: {
         0: string;
@@ -387,6 +399,11 @@ export declare const CLASS_NAMES: {
         0: string;
         1: string;
         2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
     };
     24: {
         0: string;
@@ -468,6 +485,10 @@ export declare const CLASS_NAMES: {
         5: string;
         6: string;
     };
+    38: {
+        0: string;
+        1: string;
+    };
 };
 /**
  * @description
@@ -583,6 +604,7 @@ export declare const DEFAULT_CLASS_NAMES: {
         2: string;
         3: string;
         4: string;
+        5: string;
     };
     21: {
         0: string;
@@ -601,6 +623,11 @@ export declare const DEFAULT_CLASS_NAMES: {
         0: string;
         1: string;
         2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
     };
     24: {
         0: string;
@@ -682,4 +709,8 @@ export declare const DEFAULT_CLASS_NAMES: {
         5: string;
         6: string;
     };
+    38: {
+        0: string;
+        1: string;
+    };
 };

package/dist/utils/class-name.js

@@ -56,6 +56,7 @@ var ComponentToken;
     ComponentToken[ComponentToken["Popover"] = 35] = "Popover";
     ComponentToken[ComponentToken["Loading"] = 36] = "Loading";
     ComponentToken[ComponentToken["Collapse"] = 37] = "Collapse";
+    ComponentToken[ComponentToken["Waterfall"] = 38] = "Waterfall";
 })(ComponentToken || (ComponentToken = {}));
 /**
  * @description
@@ -182,10 +183,11 @@ var ClockClassToken;
 var MenuClassToken;
 (function (MenuClassToken) {
     MenuClassToken[MenuClassToken["Menu"] = 0] = "Menu";
-    MenuClassToken[MenuClassToken["Group"] = 1] = "Group";
-    MenuClassToken[MenuClassToken["GroupHidden"] = 2] = "GroupHidden";
-    MenuClassToken[MenuClassToken["Collapser"] = 3] = "Collapser";
-    MenuClassToken[MenuClassToken["Item"] = 4] = "Item";
+    MenuClassToken[MenuClassToken["MenuHorizontal"] = 1] = "MenuHorizontal";
+    MenuClassToken[MenuClassToken["Group"] = 2] = "Group";
+    MenuClassToken[MenuClassToken["GroupHidden"] = 3] = "GroupHidden";
+    MenuClassToken[MenuClassToken["Collapser"] = 4] = "Collapser";
+    MenuClassToken[MenuClassToken["Item"] = 5] = "Item";
 })(MenuClassToken || (MenuClassToken = {}));
 var CheckboxClassToken;
 (function (CheckboxClassToken) {
@@ -205,8 +207,13 @@ var TreeClassToken;
 var TabsClassToken;
 (function (TabsClassToken) {
     TabsClassToken[TabsClassToken["Tabs"] = 0] = "Tabs";
-    TabsClassToken[TabsClassToken["Item"] = 1] = "Item";
-    TabsClassToken[TabsClassToken["Indicator"] = 2] = "Indicator";
+    TabsClassToken[TabsClassToken["TabsNavigation"] = 1] = "TabsNavigation";
+    TabsClassToken[TabsClassToken["TabsNavigator"] = 2] = "TabsNavigator";
+    TabsClassToken[TabsClassToken["TabList"] = 3] = "TabList";
+    TabsClassToken[TabsClassToken["Tab"] = 4] = "Tab";
+    TabsClassToken[TabsClassToken["Indicator"] = 5] = "Indicator";
+    TabsClassToken[TabsClassToken["Panels"] = 6] = "Panels";
+    TabsClassToken[TabsClassToken["Panel"] = 7] = "Panel";
 })(TabsClassToken || (TabsClassToken = {}));
 var PaginationClassToken;
 (function (PaginationClassToken) {
@@ -304,6 +311,11 @@ var CollapseClassToken;
     CollapseClassToken[CollapseClassToken["Content"] = 6] = "Content";
     CollapseClassToken[CollapseClassToken["Collapser"] = 7] = "Collapser";
 })(CollapseClassToken || (CollapseClassToken = {}));
+var WaterfallClassToken;
+(function (WaterfallClassToken) {
+    WaterfallClassToken[WaterfallClassToken["Waterfall"] = 0] = "Waterfall";
+    WaterfallClassToken[WaterfallClassToken["Sequential"] = 1] = "Sequential";
+})(WaterfallClassToken || (WaterfallClassToken = {}));
 /**
  * @description
  * class name collection
@@ -412,6 +424,7 @@ const CLASS_NAMES = {
     },
     [ComponentToken.Menu]: {
         [MenuClassToken.Menu]: "menu",
+        [MenuClassToken.MenuHorizontal]: "menu--horizontal",
         [MenuClassToken.Group]: "menu__group",
         [MenuClassToken.GroupHidden]: "menu__group--hidden",
         [MenuClassToken.Collapser]: "menu__collapser",
@@ -432,8 +445,13 @@ const CLASS_NAMES = {
     },
     [ComponentToken.Tabs]: {
         [TabsClassToken.Tabs]: "tabs",
-        [TabsClassToken.Item]: "tabs__item",
+        [TabsClassToken.TabsNavigation]: "tabs__navigation",
+        [TabsClassToken.TabsNavigator]: "tabs__navigator",
+        [TabsClassToken.TabList]: "tabs__tab-list",
+        [TabsClassToken.Tab]: "tabs__item",
         [TabsClassToken.Indicator]: "tabs__indicator",
+        [TabsClassToken.Panels]: "tabs__panels",
+        [TabsClassToken.Panel]: "tabs__panel",
     },
     [ComponentToken.Pagination]: {
         [PaginationClassToken.Pagination]: "pagination",
@@ -515,6 +533,10 @@ const CLASS_NAMES = {
         [CollapseClassToken.PanelActive]: "collapse__item-panel--active",
         [CollapseClassToken.Content]: "collapse__item-content",
     },
+    [ComponentToken.Waterfall]: {
+        [WaterfallClassToken.Waterfall]: "waterfall",
+        [WaterfallClassToken.Sequential]: "waterfall--sequential",
+    },
 };
 /**
  * @description
@@ -533,4 +555,4 @@ const addPrefix = (classNames, prefix) => {
  */
 const DEFAULT_CLASS_NAMES = addPrefix(CLASS_NAMES, Token.Prefix);
 
-export { AvatarClassToken, BreadcrumbClassToken, ButtonClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, CheckboxClassToken, ClockClassToken, CollapseClassToken, ComponentToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FormClassToken, GridClassToken, IconClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, RadioClassToken, RateClassToken, SelectClassToken, StepsClassToken, SwitchClassToken, TabsClassToken, TagClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TourClassToken, TreeClassToken, addPrefix, withPrefix };
+export { AvatarClassToken, BreadcrumbClassToken, ButtonClassToken, CLASS_NAMES, CalendarClassToken, CascaderClassToken, CheckboxClassToken, ClockClassToken, CollapseClassToken, ComponentToken, DEFAULT_CLASS_NAMES, DatePickerClassToken, DateRangePickerClassToken, DialogClassToken, DividerClassToken, DrawerClassToken, EmptyClassToken, FormClassToken, GridClassToken, IconClassToken, InputClassToken, LoadingClassToken, MenuClassToken, NotificationClassToken, PaginationClassToken, PickerClassToken, PopoverClassToken, PopperClassToken, ProgressClassToken, RadioClassToken, RateClassToken, SelectClassToken, StepsClassToken, SwitchClassToken, TabsClassToken, TagClassToken, TimePickerClassToken, TimelineClassToken, TooltipClassToken, TourClassToken, TreeClassToken, WaterfallClassToken, addPrefix, withPrefix };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musae",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "musae-ui",
   "author": "tutu@fantufantu.com",
   "license": "MIT",
@@ -23,7 +23,7 @@
     }
   },
   "dependencies": {
-    "@aiszlab/relax": "^1.2.55",
+    "@aiszlab/relax": "^1.2.56",
     "@floating-ui/dom": "^1.6.5",
     "@tanstack/react-table": "^8.16.0",
     "clsx": "^2.1.1",
@@ -35,16 +35,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@changesets/cli": "^2.27.6",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@stylexjs/babel-plugin": "^0.6.1",
-    "@stylexjs/rollup-plugin": "^0.6.1",
-    "@stylexjs/stylex": "^0.6.1",
+    "@stylexjs/babel-plugin": "^0.7.4",
+    "@stylexjs/rollup-plugin": "^0.7.4",
+    "@stylexjs/stylex": "^0.7.4",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -52,6 +52,8 @@
     "@types/jest": "^29.5.12",
     "@types/react": "18",
     "@types/react-dom": "18",
+    "babel-jest": "^29.7.0",
+    "babel-preset-react-app": "^10.0.1",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
     "jest": "^29.7.0",

package/dist/components/tabs/item.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import type { TabItemProps } from "./types";
-declare const Item: ({ value, onClick, ...props }: TabItemProps) => React.JSX.Element;
-export default Item;

package/dist/components/tabs/item.js

@@ -1,22 +0,0 @@
-import React, { useContext, useCallback } from 'react';
-import Button from '../button/button.js';
-import Context from './context.js';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { ComponentToken, TabsClassToken } from '../../utils/class-name.js';
-
-const Item = ({ value, onClick, ...props }) => {
-    const contextValue = useContext(Context);
-    const isActive = contextValue?.activeKey === value;
-    const classNames = useClassNames(ComponentToken.Tabs);
-    const setItem = useCallback((itemRef) => {
-        contextValue?.setItem(value, itemRef);
-    }, [contextValue, value]);
-    const click = useCallback(() => {
-        onClick(value);
-    }, [onClick, value]);
-    return (React.createElement(Button, { variant: "text", color: isActive ? "primary" : "secondary", ref: setItem, onClick: click, className: classNames[TabsClassToken.Item], ripple: false, style: {
-            borderRadius: "10% 10% 0 0",
-        } }, props.label));
-};
-
-export { Item as default };