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/esm/index.js
CHANGED
|
@@ -2524,9 +2524,28 @@ var TagLabel = function (_a) {
|
|
|
2524
2524
|
var validatedColor = validUnion(color, colorUnion);
|
|
2525
2525
|
var validatedSize = validUnion(size, sizeUnion);
|
|
2526
2526
|
var validatedVariant = validUnion(variant, variantUnion);
|
|
2527
|
+
var containerRef = useRef(null);
|
|
2528
|
+
var _c = useState(null), sizeCount = _c[0], setSizeCount = _c[1];
|
|
2529
|
+
useEffect(function () {
|
|
2530
|
+
if (variant === 'icon') {
|
|
2531
|
+
// Get the size of the icon
|
|
2532
|
+
// and set the size of the container
|
|
2533
|
+
// to the one with the biggest size (width or height icon)
|
|
2534
|
+
// in order to make the container square
|
|
2535
|
+
var rect = containerRef.current.getBoundingClientRect();
|
|
2536
|
+
var width = rect.width;
|
|
2537
|
+
var height = rect.height;
|
|
2538
|
+
if (width > height)
|
|
2539
|
+
setSizeCount(width);
|
|
2540
|
+
else
|
|
2541
|
+
setSizeCount(height);
|
|
2542
|
+
}
|
|
2543
|
+
}, []);
|
|
2527
2544
|
var defaultIconSize = validatedSize === 'md' ? 'text-xl' : 'text-sm';
|
|
2528
2545
|
var roundedClass = validatedVariant === 'icon' ? 'rounded-full' : 'rounded-[50px]';
|
|
2529
|
-
var sizeClass = validatedVariant === 'icon'
|
|
2546
|
+
var sizeClass = validatedVariant === 'icon'
|
|
2547
|
+
? iconOnlySizeConfig[validatedSize]
|
|
2548
|
+
: sizeConfig[validatedSize];
|
|
2530
2549
|
var isCloseableClass = validatedVariant === 'closeable' && rightPaddingConfig[validatedSize];
|
|
2531
2550
|
var colorClass = validatedColor === 'custom'
|
|
2532
2551
|
? "bg-bia-".concat(bgColor, " text-bia-").concat(textColor)
|
|
@@ -2536,15 +2555,20 @@ var TagLabel = function (_a) {
|
|
|
2536
2555
|
var textClass = isBlock ? 'text-center' : 'text-left';
|
|
2537
2556
|
var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
|
|
2538
2557
|
var closeClass = validatedColor === 'custom'
|
|
2539
|
-
? isDark
|
|
2558
|
+
? isDark
|
|
2559
|
+
? "bg-bia-white-transparent-50 text-bia-".concat(bgColor)
|
|
2560
|
+
: "bg-bia-grey-dark-30 text-bia-".concat(bgColor)
|
|
2540
2561
|
: closeConfig[validatedColor];
|
|
2541
|
-
return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
" "
|
|
2562
|
+
return (open && (React.createElement("div", __assign({ className: "tag-label flex items-center gap-x-[5px] text-size-base ".concat(containerClass), style: {
|
|
2563
|
+
maxWidth: maxWidthStyle,
|
|
2564
|
+
} }, props),
|
|
2565
|
+
React.createElement("div", { style: {
|
|
2566
|
+
width: sizeCount + 'px',
|
|
2567
|
+
height: sizeCount + 'px',
|
|
2568
|
+
}, className: "flex items-center justify-center" },
|
|
2569
|
+
React.createElement("div", { ref: containerRef }, leftIcon ||
|
|
2570
|
+
(validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
|
|
2571
|
+
validatedVariant !== 'icon' && (React.createElement("span", { className: "pb-[2px] truncate w-full ".concat(textClass) }, text)),
|
|
2548
2572
|
validatedVariant !== 'icon' && rightIcon,
|
|
2549
2573
|
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) },
|
|
2550
2574
|
React.createElement(TbX, { className: "text-[18px]" }))))));
|
|
@@ -2616,11 +2640,15 @@ Tooltip.defaultProps = {
|
|
|
2616
2640
|
Tooltip.defaultProps = {};
|
|
2617
2641
|
|
|
2618
2642
|
function ScrollbarSimulation() {
|
|
2619
|
-
return (React.createElement("div", { className: "
|
|
2643
|
+
return (React.createElement("div", { className: "flex gap-5" },
|
|
2644
|
+
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."),
|
|
2645
|
+
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.")));
|
|
2620
2646
|
}
|
|
2621
2647
|
|
|
2622
2648
|
function HiddenScrollbarSimulation() {
|
|
2623
|
-
return (React.createElement("div", { className: "
|
|
2649
|
+
return (React.createElement("div", { className: "flex gap-5" },
|
|
2650
|
+
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."),
|
|
2651
|
+
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.")));
|
|
2624
2652
|
}
|
|
2625
2653
|
|
|
2626
2654
|
export { Accordions, Alert, Avatar, Badge, Banner, Brand, Breadcrumb, Button, Checkbox, CheckboxSimulation, Color, Display, Divider, Heading, HiddenScrollbarSimulation, LiveSearch, Modal, P, PaginationBar, Piils as Pills, Popover, ProgressCircle, Radio, ResizeableDiv, ResizeableDivSimulation, ScrollbarSimulation, SegmentButtonGroup, SegmentButtonItem, SegmentButtonSimulation, SelectInput, SelectInputSimulation, Slider, Spinner, Tab, Table, TableBody, TableCol, TableDemo, TableHead, TableRow, TagLabel, Text, TextArea, TextInput, TextInputSimulation, Toggle, Tooltip };
|