bianic-ui 1.0.0-beta.21 → 1.0.0-beta.23
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/cjs/index.js +39 -11
- package/dist/cjs/lib.css +1 -1
- package/dist/esm/index.js +39 -11
- package/dist/esm/lib.css +1 -1
- package/package.json +1 -1
- package/src/style/scrollbar.css +10 -1
package/dist/cjs/index.js
CHANGED
|
@@ -2526,9 +2526,28 @@ var TagLabel = function (_a) {
|
|
|
2526
2526
|
var validatedColor = validUnion(color, colorUnion);
|
|
2527
2527
|
var validatedSize = validUnion(size, sizeUnion);
|
|
2528
2528
|
var validatedVariant = validUnion(variant, variantUnion);
|
|
2529
|
+
var containerRef = React.useRef(null);
|
|
2530
|
+
var _c = React.useState(null), sizeCount = _c[0], setSizeCount = _c[1];
|
|
2531
|
+
React.useEffect(function () {
|
|
2532
|
+
if (variant === 'icon') {
|
|
2533
|
+
// Get the size of the icon
|
|
2534
|
+
// and set the size of the container
|
|
2535
|
+
// to the one with the biggest size (width or height icon)
|
|
2536
|
+
// in order to make the container square
|
|
2537
|
+
var rect = containerRef.current.getBoundingClientRect();
|
|
2538
|
+
var width = rect.width;
|
|
2539
|
+
var height = rect.height;
|
|
2540
|
+
if (width > height)
|
|
2541
|
+
setSizeCount(width);
|
|
2542
|
+
else
|
|
2543
|
+
setSizeCount(height);
|
|
2544
|
+
}
|
|
2545
|
+
}, []);
|
|
2529
2546
|
var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
|
|
2530
2547
|
var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
|
|
2531
|
-
var sizeClass = validatedVariant === 'icon'
|
|
2548
|
+
var sizeClass = validatedVariant === 'icon'
|
|
2549
|
+
? iconOnlySizeConfig[validatedSize]
|
|
2550
|
+
: sizeConfig[validatedSize];
|
|
2532
2551
|
var isCloseableClass = validatedVariant === 'closeable' && rightPaddingConfig[validatedSize];
|
|
2533
2552
|
var colorClass = validatedColor === 'custom'
|
|
2534
2553
|
? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor)
|
|
@@ -2538,15 +2557,20 @@ var TagLabel = function (_a) {
|
|
|
2538
2557
|
var textClass = isBlock ? 'text-center' : 'text-left';
|
|
2539
2558
|
var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
|
|
2540
2559
|
var closeClass = validatedColor === 'custom'
|
|
2541
|
-
? isDark
|
|
2560
|
+
? isDark
|
|
2561
|
+
? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
|
|
2562
|
+
: "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
|
|
2542
2563
|
: closeConfig[validatedColor];
|
|
2543
|
-
return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
" "
|
|
2564
|
+
return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
|
|
2565
|
+
maxWidth: maxWidthStyle,
|
|
2566
|
+
} }, props),
|
|
2567
|
+
React.createElement("div", { style: {
|
|
2568
|
+
width: sizeCount + 'px',
|
|
2569
|
+
height: sizeCount + 'px',
|
|
2570
|
+
}, className: "flex items-center justify-center" },
|
|
2571
|
+
React.createElement("div", { ref: containerRef }, leftIcon ||
|
|
2572
|
+
(validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
|
|
2573
|
+
validatedVariant !== 'icon' && (React.createElement("span", { className: "pb-[2px] truncate w-full ".concat(textClass) }, text)),
|
|
2550
2574
|
validatedVariant !== 'icon' && rightIcon,
|
|
2551
2575
|
validatedVariant === 'closeable' && (React.createElement("button", { type: "button", onClick: closeHandler, className: "aspect-square w-[18px] flex justify-center items-center rounded-full mt-[1px] ".concat(closeClass) },
|
|
2552
2576
|
React.createElement(TbX, { className: "text-[18px]" }))))));
|
|
@@ -2618,11 +2642,15 @@ Tooltip.defaultProps = {
|
|
|
2618
2642
|
Tooltip.defaultProps = {};
|
|
2619
2643
|
|
|
2620
2644
|
function ScrollbarSimulation() {
|
|
2621
|
-
return (React.createElement("div", { className: "
|
|
2645
|
+
return (React.createElement("div", { className: "flex gap-5" },
|
|
2646
|
+
React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
|
|
2647
|
+
React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus.")));
|
|
2622
2648
|
}
|
|
2623
2649
|
|
|
2624
2650
|
function HiddenScrollbarSimulation() {
|
|
2625
|
-
return (React.createElement("div", { className: "
|
|
2651
|
+
return (React.createElement("div", { className: "flex gap-5" },
|
|
2652
|
+
React.createElement("div", { className: "w-64 aspect-square overflow-y-auto p-5 scrollbar-hidden text-justify" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porta ac augue ac porta. Nunc ac pretium odio. Integer auctor viverra malesuada. Nullam id consectetur orci. Praesent lobortis enim fermentum lacus convallis, vitae vestibulum lorem accumsan. Donec ac magna tristique, fermentum nulla at, faucibus magna. Nulla facilisi. Ut vehicula pulvinar nulla vitae suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus pulvinar, dolor a fringilla eleifend, metus arcu condimentum nisl, ut ultricies massa elit nec urna. Nam aliquam vestibulum ullamcorper. Aliquam ac ex sapien. Nam in interdum metus. Cras fringilla est nisl, ut pharetra sapien placerat non. Sed finibus elementum ipsum id interdum. Proin condimentum consequat tortor, ac aliquam urna. Donec tincidunt nunc eu est tristique aliquam. In a enim sit amet turpis sodales cursus. Donec in hendrerit odio. Vestibulum pretium, lectus nec vehicula iaculis, velit nisl laoreet enim, eget iaculis nibh neque et risus. Morbi aliquam malesuada mi in rhoncus."),
|
|
2653
|
+
React.createElement("div", { className: "h-64 aspect-square overflow-x-auto overflow-y-clip p-5 scrollbar-hidden text-justify" }, "Loremipsumdolorsitamet,consecteturadipiscingelit.Proinportaac augueacporta.Nuncacpretiumodio.Integerauctorviverramalesuada. Nullamidconsecteturorci.Praesentlobortisenimfermentumlacus convallis,vitaevestibulumloremaccumsan.Donecacmagnatristique, fermentumnullaat,faucibusmagna.Nullafacilisi.Utvehiculapulvinar nullavitaesuscipit.Vestibulumanteipsumprimisinfaucibusorci luctusetultricesposuerecubiliacurae;Vivamuspulvinar,dolora fringillaeleifend,metusarcucondimentumnisl,utultriciesmassaelit necurna.Namaliquamvestibulumullamcorper.Aliquamacexsapien.Nam ininterdummetus.Crasfringillaestnisl,utpharetrasapienplaceratnon. Sedfinibuselementumipsumidinterdum.Proincondimentumconsequat tortor,acaliquamurna.Donectinciduntnunceuesttristiquealiquam. Inaenimsitametturpissodalescursus.Donecinhendreritodio. Vestibulumpretium,lectusnecvehiculaiaculis,velitnisllaoreet enim,egetiaculisnibhnequeetrisus.Morbialiquammalesuadamiin rhoncus.")));
|
|
2626
2654
|
}
|
|
2627
2655
|
|
|
2628
2656
|
exports.Accordions = Accordions;
|