@homecode/ui 5.13.0 → 5.15.0

package/dist/esm/index.js

@@ -20,6 +20,8 @@ export { Draggable } from './src/components/Draggable/Draggable.js';
 export { DropZone } from './src/components/DropZone/DropZone.js';
 export { Expand } from './src/components/Expand/Expand.js';
 export { Flex } from './src/components/Flex/Flex.js';
+export { FoldedLine } from './src/components/FoldedLine/FoldedLine.js';
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister } from './src/components/FoldedLine/FoldedLineActionsContext.js';
 export { Form } from './src/components/Form/Form.js';
 export { FormattedText } from './src/components/FormattedText/FormattedText.js';
 export { Gap } from './src/components/Gap/Gap.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -49,10 +49,12 @@ import '../../tools/queryParams.js';
 import '../Draggable/Draggable.styl.js';
 import '../DropZone/DropZone.styl.js';
 import '../Flex/Flex.styl.js';
+import '../Gap/Gap.styl.js';
+import '../FoldedLine/FoldedLine.styl.js';
+import '../FoldedLine/FoldedLineActionsContext.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
-import '../Gap/Gap.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Slider/Slider.styl.js';
 import '../VideoPlayer/VideoPlayer.styl.js';

package/dist/esm/src/components/Dialogue/Dialogue.js

@@ -1,9 +1,9 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import { useState, useRef, useId, useEffect } from 'react';
-import { createPortal } from 'react-dom';
 import { Card, CardHeader, CardContent, CardFooter } from '../Card/Card.js';
 import { Icon } from '../Icon/Icon.js';
+import { Portal } from '../Portal/Portal.js';
 import { isBrowser } from '../../tools/env.js';
 import S from './Dialogue.styl.js';
 
@@ -99,11 +99,7 @@ function Dialogue({ open, onOpenChange, disabled, trigger, title, subtitle, icon
                         ? `min(${String(maxHeight)}, calc(100% - var(--p-5)))`
                         : undefined,
                 }, children: [(title || subtitle || icon) && (jsx(CardHeader, { icon: icon, title: title, description: subtitle, titleId: titleId, descriptionId: descriptionId })), jsx("button", { className: S.dialogClose, onClick: handleCloseClick, "aria-label": "Close dialog", type: "button", children: jsx(Icon, { type: "close", size: "m" }) }), content && (jsx(CardContent, { className: contentClassName, noScroll: noScroll, autoScrollBottom: autoScrollBottom, children: content })), footer && (jsx(CardFooter, { className: FOOTER_ALIGN_CLASS[footerAlignment], children: footer }))] })] }));
-    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open &&
-                !disabled &&
-                isMounted &&
-                isBrowser &&
-                createPortal(dialogueContent, document.body)] }));
+    return (jsxs(Fragment, { children: [trigger && jsx("div", { onClick: onTriggerClick, children: trigger }), open && !disabled && isMounted && isBrowser && (jsx(Portal, { children: dialogueContent }))] }));
 }
 
 export { Dialogue, S as DialogueStyles };

package/dist/esm/src/components/Dialogue/Dialogue.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:50}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:50}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_dialogContent__-Lxde:has(.Dialogue_dialogClose__5q12n) [data-slot=card-header]{padding-right:calc(2rem + var(--p-3))}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.3;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:focus-visible,.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
+var css_248z = ".Dialogue_dialogOverlay__jjBIa{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:var(--decent-color-alpha-900);inset:0;opacity:0;position:fixed;transition:opacity .2s ease-out;z-index:10}.Dialogue_dialogOverlay__jjBIa.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_fadeIn__RSEB2;animation-timing-function:ease-out;opacity:1}.Dialogue_dialogContent__-Lxde{border-radius:var(--border-radius-l);box-shadow:0 10px 20px rgba(0,0,0,.3),0 0 0 2px var(--decent-color-alpha-800);display:flex;flex-direction:column;left:50%;max-height:calc(100% - var(--p-5));opacity:0;position:fixed;top:50%;transform:translateX(-50%) translateY(-50%) scale(.95);transition:opacity .2s ease-out,transform .2s ease-out;width:-moz-fit-content;width:fit-content;z-index:10}.Dialogue_dialogContent__-Lxde.Dialogue_isOpen__gISMb{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueIn__M0tLL;animation-timing-function:ease-out;opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}.Dialogue_dialogContent__-Lxde.Dialogue_isClosed__lHYyZ{animation-duration:.2s;animation-fill-mode:forwards;animation-name:Dialogue_dialogueOut__6bLTY;animation-timing-function:ease-in;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-50%) scale(.95)}@media (max-width:700px){.Dialogue_dialogContent__-Lxde{max-width:calc(100% - var(--p-5));width:calc(100% - var(--p-5))}}.Dialogue_dialogContent__-Lxde:has(.Dialogue_dialogClose__5q12n) [data-slot=card-header]{padding-right:calc(2rem + var(--p-3))}.Dialogue_size-default__X1sdB{max-width:40rem}.Dialogue_size-login__GyixB{max-width:24rem}.Dialogue_size-wide__HQbiX{max-width:calc(100% - var(--p-5))}@media (min-width:700px){.Dialogue_size-wide__HQbiX{max-width:80rem}}.Dialogue_dialogClose__5q12n{align-items:center;background-color:transparent;border:none;border-radius:var(--border-radius-s);box-shadow:inset 0 0 0 2px none;color:var(--accent-color);cursor:pointer;display:flex;height:2rem;justify-content:center;opacity:.3;position:absolute;right:var(--p-3);top:var(--p-3);transform-origin:center;transition:opacity .2s ease,transform .2s ease;width:2rem;z-index:10}.Dialogue_dialogClose__5q12n:focus-visible,.Dialogue_dialogClose__5q12n:hover{opacity:1;transform:scale(1.1)}.Dialogue_dialogClose__5q12n:focus-visible{box-shadow:0 0 0 2px var(--active-color)}.Dialogue_dialogClose__5q12n:disabled{pointer-events:none}.Dialogue_footerAlignLeft__xQUD8{justify-content:flex-start}.Dialogue_footerAlignCenter__yq9Mu{justify-content:center}.Dialogue_footerAlignRight__Yo7hG{justify-content:flex-end}@keyframes Dialogue_fadeIn__RSEB2{0%{opacity:0}to{opacity:1}}@keyframes Dialogue_dialogueIn__M0tLL{0%{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}to{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}}@keyframes Dialogue_dialogueOut__6bLTY{0%{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1)}to{opacity:0;transform:translateX(-50%) translateY(-50%) scale(.95)}}";
 var S = {"dialogOverlay":"Dialogue_dialogOverlay__jjBIa","isOpen":"Dialogue_isOpen__gISMb","fadeIn":"Dialogue_fadeIn__RSEB2","dialogContent":"Dialogue_dialogContent__-Lxde","dialogueIn":"Dialogue_dialogueIn__M0tLL","isClosed":"Dialogue_isClosed__lHYyZ","dialogueOut":"Dialogue_dialogueOut__6bLTY","dialogClose":"Dialogue_dialogClose__5q12n","size-default":"Dialogue_size-default__X1sdB","size-login":"Dialogue_size-login__GyixB","size-wide":"Dialogue_size-wide__HQbiX","footerAlignLeft":"Dialogue_footerAlignLeft__xQUD8","footerAlignCenter":"Dialogue_footerAlignCenter__yq9Mu","footerAlignRight":"Dialogue_footerAlignRight__Yo7hG"};
 styleInject(css_248z);
 

package/dist/esm/src/components/FoldedLine/FoldedLine.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '../Button/Button.js';
+import { Gap } from '../Gap/Gap.js';
+import { Icon } from '../Icon/Icon.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import S from './FoldedLine.styl.js';
+import { FoldedLineActionsProvider } from './FoldedLineActionsContext.js';
+
+function FoldedLine({ trigger, children, defaultFolded = true, className, folded: foldedProp, onFoldedChange, onScrollInnerRef, hideFoldButton = false, showChevron = true, onScrollInner, contentScrolling = true, variant = 'default', }) {
+    const [uncontrolledFolded, setUncontrolledFolded] = useState(defaultFolded);
+    const isControlled = foldedProp !== undefined;
+    const isFolded = isControlled ? foldedProp : uncontrolledFolded;
+    const setFolded = (next) => {
+        if (isControlled)
+            onFoldedChange?.(next);
+        else
+            setUncontrolledFolded(next);
+    };
+    const [actions, setActions] = useState(new Map());
+    const triggerRef = useRef(null);
+    const isClear = variant === 'clear';
+    const registerAction = useCallback((id, node) => {
+        setActions(prev => {
+            const next = new Map(prev);
+            if (node == null)
+                next.delete(id);
+            else
+                next.set(id, node);
+            return next;
+        });
+    }, []);
+    useEffect(() => {
+        if (isFolded)
+            setActions(new Map());
+    }, [isFolded]);
+    const isInteractiveTarget = (target) => {
+        if (!(target instanceof Element))
+            return false;
+        return Boolean(target.closest('a[href], button, [role="button"], input, textarea, select, label'));
+    };
+    const handleClick = (e) => {
+        if (!children || isInteractiveTarget(e.target))
+            return;
+        if (isClear || isFolded) {
+            setFolded(!isFolded);
+            return;
+        }
+        if (triggerRef.current?.contains(e.target)) {
+            setFolded(true);
+        }
+    };
+    return (jsxs("div", { className: cn(S.root, isFolded && S.folded, Boolean(children) && S.hasChildren, isClear && S.clear, className), onClick: handleClick, children: [jsxs("div", { ref: triggerRef, className: cn(Boolean(children) && S.triggerInteractive), children: [typeof trigger === 'function' ? trigger(isFolded) : trigger, jsx(Gap, {}), showChevron && jsx(Icon, { type: "chevronDown", className: S.chevron })] }), !isFolded && children && (jsx("div", { className: S.content, children: jsxs(FoldedLineActionsProvider, { registerAction: registerAction, children: [contentScrolling ? (jsx(Scroll, { y: true, size: "s", autoHide: true, className: S.scroll, innerClassName: S.scrollInner, offset: { y: { before: 4, after: 14 } }, onInnerRef: onScrollInnerRef, onScroll: onScrollInner, children: children })) : (jsx("div", { className: S.scrollInner, children: children })), jsxs("div", { className: S.actions, children: [Array.from(actions.values()), !hideFoldButton && (jsxs(Button, { size: "xs", onClick: e => {
+                                        e.stopPropagation();
+                                        setFolded(true);
+                                    }, children: [jsx(Icon, { type: "chevronUp", size: "s" }), "Fold"] }))] })] }) }))] }));
+}
+
+export { FoldedLine };

package/dist/esm/src/components/FoldedLine/FoldedLine.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".FoldedLine_root__lhi-1{border-radius:12px;display:flex;flex-direction:column;min-height:1rem;padding-left:calc(4px + var(--p-2));position:relative;transition:.1s ease-out;transition-property:border-radius,margin,background-color}.FoldedLine_root__lhi-1:before{background:var(--accent-color);border-radius:2px;bottom:2px;content:\"\";height:calc(100% - 4px);left:6px;opacity:.1;pointer-events:none;position:absolute;top:2px;width:4px}.FoldedLine_root__lhi-1:hover:before,.FoldedLine_root__lhi-1:not(.FoldedLine_folded__6zX8d):before{opacity:.7}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d{border-radius:0;margin:0}.FoldedLine_root__lhi-1.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{height:1em}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA.FoldedLine_folded__6zX8d{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_hasChildren__8hCZA:not(.FoldedLine_folded__6zX8d) .FoldedLine_triggerInteractive__sCLnl{border-top-left-radius:inherit;border-top-right-radius:inherit}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA{border-radius:inherit;min-height:0;padding:0}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA:before{content:none}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_hasChildren__8hCZA{cursor:pointer}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA.FoldedLine_folded__6zX8d{-webkit-line-clamp:unset;-webkit-box-orient:unset;line-clamp:none;display:flex;overflow:visible;text-overflow:clip}.FoldedLine_root__lhi-1.FoldedLine_clear__t47RA .FoldedLine_triggerInteractive__sCLnl{opacity:1}.FoldedLine_chevron__zxu20{margin-right:var(--p-2);opacity:.3;transition:transform .1s ease-out,opacity .1s ease-out}.FoldedLine_root__lhi-1:hover .FoldedLine_chevron__zxu20{opacity:1}.FoldedLine_folded__6zX8d .FoldedLine_chevron__zxu20{transform:rotate(-90deg)}.FoldedLine_lineCompleted__sEfzm:before{background:var(--active-color)}.FoldedLine_lineInProgress__VcwjJ:before{animation:FoldedLine_foldedLinePulse__y-Dle 1.4s ease-in-out infinite}.FoldedLine_triggerInteractive__sCLnl{align-items:center;cursor:pointer;display:flex;gap:var(--p-1);opacity:.8;transition:background-color .1s ease-out}.FoldedLine_triggerInteractive__sCLnl:hover{opacity:1}.FoldedLine_triggerInteractive__sCLnl:hover:before{background-color:var(--accent-color-alpha-900)}.FoldedLine_header__gyQpI{cursor:pointer;height:100%;position:absolute;transition:opacity .1s ease-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%;z-index:1}.FoldedLine_folded__6zX8d{-webkit-line-clamp:1;-webkit-box-orient:vertical;line-clamp:1;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;transition:opacity .1s ease-out}.FoldedLine_folded__6zX8d:before{opacity:.4}.FoldedLine_folded__6zX8d .FoldedLine_scroll__X7T5v{max-height:1.5em}.FoldedLine_content__POIox{position:relative}.FoldedLine_scroll__X7T5v{max-height:50vh}.FoldedLine_scrollInner__1BGOP>div{-webkit-user-select:text;-moz-user-select:text;user-select:text}.FoldedLine_actions__SmF3b{align-items:center;bottom:0;display:flex;flex-shrink:0;flex-wrap:wrap;gap:var(--p-1);justify-content:flex-end;padding:0 var(--p-5) var(--p-3) var(--p-2);position:absolute;right:0}.FoldedLine_actions__SmF3b>button{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes FoldedLine_foldedLinePulse__y-Dle{0%,to{background-color:var(--accent-color-alpha-400)}50%{background-color:var(--active-color)}}";
+var S = {"root":"FoldedLine_root__lhi-1","folded":"FoldedLine_folded__6zX8d","scroll":"FoldedLine_scroll__X7T5v","hasChildren":"FoldedLine_hasChildren__8hCZA","triggerInteractive":"FoldedLine_triggerInteractive__sCLnl","clear":"FoldedLine_clear__t47RA","chevron":"FoldedLine_chevron__zxu20","lineCompleted":"FoldedLine_lineCompleted__sEfzm","lineInProgress":"FoldedLine_lineInProgress__VcwjJ","foldedLinePulse":"FoldedLine_foldedLinePulse__y-Dle","header":"FoldedLine_header__gyQpI","content":"FoldedLine_content__POIox","scrollInner":"FoldedLine_scrollInner__1BGOP","actions":"FoldedLine_actions__SmF3b"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/FoldedLine/FoldedLineActionsContext.js

@@ -0,0 +1,25 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, useId, useEffect } from 'react';
+
+const FoldedLineActionsContext = createContext(null);
+function useFoldedLineActionsRegister() {
+    return useContext(FoldedLineActionsContext);
+}
+function FoldedLineActionsProvider({ registerAction, children, }) {
+    return (jsx(FoldedLineActionsContext.Provider, { value: registerAction, children: children }));
+}
+function FoldedLineAction({ children }) {
+    const register = useFoldedLineActionsRegister();
+    const id = useId();
+    useEffect(() => {
+        if (!register)
+            return undefined;
+        register(id, children);
+        return () => register(id, null);
+    }, [register, id, children]);
+    if (!register)
+        return jsx(Fragment, { children: children });
+    return null;
+}
+
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister };

package/dist/esm/src/components/InputFile/InputFile.js

@@ -51,10 +51,12 @@ import '../Dialogue/Dialogue.js';
 import { Draggable } from '../Draggable/Draggable.js';
 import '../DropZone/DropZone.styl.js';
 import '../Flex/Flex.styl.js';
+import '../Gap/Gap.styl.js';
+import '../FoldedLine/FoldedLine.styl.js';
+import '../FoldedLine/FoldedLineActionsContext.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
-import '../Gap/Gap.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
 import '../Slider/Slider.styl.js';
 import '../VideoPlayer/VideoPlayer.styl.js';

package/dist/esm/src/components/Router/Router.js

@@ -1,6 +1,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useContext, useEffect, useMemo } from 'react';
 import { useStore } from 'justorm/react';
+import { parseQueryParams } from '../../tools/queryParams.js';
 import STORE from './store.js';
 import Context from './context.js';
 import { parsePath, replaceParamsInPath } from './Router.helpers.js';
@@ -17,7 +18,9 @@ const Router = (props) => {
     const fullPath = ctx.basePath + basePath;
     useEffect(() => {
         const onPopState = () => {
-            STORE.go(window.location.pathname, STORE.query, { replace: true });
+            STORE.go(window.location.pathname, parseQueryParams(), {
+                replace: true,
+            });
         };
         window.addEventListener('popstate', onPopState);
         return () => window.removeEventListener('popstate', onPopState);

package/dist/esm/src/components/Tabs/Tabs.js

@@ -1,14 +1,14 @@
 import { useState, useEffect, useCallback, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import cn from 'classnames';
-import { Scroll } from '../Scroll/Scroll.js';
 import { Button } from '../Button/Button.js';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
 import S from './Tabs.styl.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import cn from 'classnames';
 
 const isId = id => ['string', 'number'].includes(typeof id);
 function Tabs(props) {
-    const { size = 'm', className, tabsWrapperClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const { size = 'm', variant = 'default', className, tabsWrapperClassName, tabsInnerClassName, tabsClassName, contentClassName, items, hideTabsIfSingle = false, allowEmpty = false, onChange, renderAll, activeId: initialId, children, ...rest } = props;
     const [activeId, setActiveId] = useState(isId(initialId) ? initialId : allowEmpty ? null : items[0].id);
     useEffect(() => {
         if (isId(initialId)) {
@@ -35,9 +35,9 @@ function Tabs(props) {
         if (renderAll || forceRender || isActive) {
             tabsContent.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
         }
-        return (createElement(Button, { ...rest, className: cn(S.tab, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+        return (createElement(Button, { ...rest, className: cn(S.tab, isActive && S.active, rest.className), size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
     });
-    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`]), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: tabsClassName, ...rest, children: tabsButtons }) }));
+    const tabs = tabsButtons.length === 1 && hideTabsIfSingle ? null : (jsx(Scroll, { x: true, offset: { x: { before: 10, after: 10 } }, className: tabsWrapperClassName, innerClassName: cn(S.tabsScroll, S[`size-${size}`], tabsInnerClassName), autoHide: true, fadeSize: size, size: size, children: jsx(ButtonGroup, { className: cn(variant === 'links' && S['variant-links'], tabsClassName), ...rest, children: tabsButtons }) }));
     if (typeof children === 'function') {
         return children({
             tabs,

package/dist/esm/src/components/Tabs/Tabs.styl.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}";
-var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g"};
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-5)}.Tabs_size-xs__J0-xo.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-3)}.Tabs_size-s__bz7NO.Tabs_tabsScroll__7Dj0S{padding-bottom:var(--p-4)}.Tabs_size-l__emJzX.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.2)}.Tabs_size-xl__Kqzt-.Tabs_tabsScroll__7Dj0S{padding-bottom:calc(var(--p-5)*1.35)}.Tabs_tab__-oN-g{flex-shrink:0;white-space:nowrap}.Tabs_variant-links__-N1Ym>button:not(:first-child){border-radius:inherit;margin-left:0}.Tabs_variant-links__-N1Ym>button:not(:last-child){border-radius:inherit}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g{background-color:transparent!important;box-shadow:none;padding:var(--p-3) var(--p-5)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color-alpha-100)}.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:focus,.Tabs_variant-links__-N1Ym .Tabs_tab__-oN-g.Tabs_active__nOA5N:hover{background-color:transparent!important;box-shadow:0 2px 0 0 var(--active-color);color:inherit}";
+var S = {"inactive":"Tabs_inactive__H0mPh","tabsScroll":"Tabs_tabsScroll__7Dj0S","size-xs":"Tabs_size-xs__J0-xo","size-s":"Tabs_size-s__bz7NO","size-l":"Tabs_size-l__emJzX","size-xl":"Tabs_size-xl__Kqzt-","tab":"Tabs_tab__-oN-g","variant-links":"Tabs_variant-links__-N1Ym","active":"Tabs_active__nOA5N"};
 styleInject(css_248z);
 
 export { S as default };

package/dist/esm/types/src/components/FoldedLine/FoldedLine.d.ts

@@ -0,0 +1,3 @@
+import * as T from './FoldedLine.types';
+export type FoldedLineProps = T.Props;
+export declare function FoldedLine({ trigger, children, defaultFolded, className, folded: foldedProp, onFoldedChange, onScrollInnerRef, hideFoldButton, showChevron, onScrollInner, contentScrolling, variant, }: FoldedLineProps): import("react").JSX.Element;

package/dist/esm/types/src/components/FoldedLine/FoldedLine.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, UIEvent } from 'react';
+export type Props = {
+    trigger: ReactNode | ((isFolded: boolean) => ReactNode);
+    children?: ReactNode;
+    defaultFolded?: boolean;
+    className?: string;
+    folded?: boolean;
+    hideFoldButton?: boolean;
+    onFoldedChange?: (folded: boolean) => void;
+    onScrollInnerRef?: (el: HTMLDivElement | null) => void;
+    onScrollInner?: (e: UIEvent<HTMLDivElement>) => void;
+    contentScrolling?: boolean;
+    variant?: 'default' | 'clear';
+    showChevron?: boolean;
+};

package/dist/esm/types/src/components/FoldedLine/FoldedLineActionsContext.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type RegisterAction = (id: string, node: ReactNode | null) => void;
+export declare function useFoldedLineActionsRegister(): RegisterAction | null;
+export declare function FoldedLineActionsProvider({ registerAction, children, }: {
+    registerAction: RegisterAction;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function FoldedLineAction({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/esm/types/src/components/FoldedLine/index.d.ts

@@ -0,0 +1,3 @@
+export { FoldedLine } from './FoldedLine';
+export type { FoldedLineProps } from './FoldedLine';
+export { FoldedLineAction, FoldedLineActionsProvider, useFoldedLineActionsRegister, } from './FoldedLineActionsContext';

package/dist/esm/types/src/components/Tabs/Tabs.types.d.ts

@@ -1,6 +1,6 @@
-import { Size } from 'uilib/types';
 import { ButtonProps } from '../Button/Button';
 import { ReactNode } from 'react';
+import { Size } from 'uilib/types';
 type ID = string | number;
 export type Item = Omit<ButtonProps, 'children'> & {
     id: ID;
@@ -17,8 +17,10 @@ export type RenderProps = {
 };
 export type Props = {
     size?: Size;
+    variant?: 'default' | 'links';
     className?: string;
     tabsWrapperClassName?: string;
+    tabsInnerClassName?: string;
     tabsClassName?: string;
     contentClassName?: string;
     items: Item[];

package/dist/esm/types/src/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './Draggable/Draggable';
 export * from './DropZone/DropZone';
 export * from './Expand/Expand';
 export * from './Flex/Flex';
+export * from './FoldedLine';
 export * from './Form/Form';
 export * from './FormattedText';
 export * from './Gap/Gap';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",