@homecode/ui 5.20.24 → 5.21.1

package/dist/esm/index.js

@@ -60,6 +60,7 @@ export { Scroll } from './src/components/Scroll/Scroll.js';
 export { Slider } from './src/components/Slider/Slider.js';
 export { Shimmer } from './src/components/Shimmer/Shimmer.js';
 export { Spinner } from './src/components/Spinner/Spinner.js';
+export { Stepper } from './src/components/Stepper/Stepper.js';
 export { Table } from './src/components/Table/Table.js';
 export { Tabs } from './src/components/Tabs/Tabs.js';
 export { TextShimmer } from './src/components/TextShimmer/TextShimmer.js';

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

@@ -90,6 +90,8 @@ import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Resizer/Resizer.styl.js';
+import '../Gallery/Dots/Dots.styl.js';
+import '../Stepper/Stepper.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';

package/dist/esm/src/components/Gallery/Dots/Dots.js

@@ -2,8 +2,13 @@ import { jsx } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './Dots.styl.js';
 
-function Dots({ index, count }) {
-    return (jsx("div", { className: S.root, children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => (jsx("div", { className: cn(S.item, i === index && S.active) }, i))) }) }));
+function Dots({ index, count, className, onSelect, getLabel, }) {
+    return (jsx("div", { className: cn(S.root, onSelect && S.interactive, className), children: jsx("div", { className: S.inner, children: Array.from({ length: count }).map((_, i) => {
+                const classes = cn(S.item, i === index && S.active);
+                if (!onSelect)
+                    return jsx("div", { className: classes }, i);
+                return (jsx("button", { type: "button", className: classes, "aria-label": getLabel?.(i) ?? String(i + 1), "aria-current": i === index ? 'step' : undefined, onClick: () => onSelect(i) }, i));
+            }) }) }));
 }
 
 export { Dots as default };

package/dist/esm/src/components/Gallery/Dots/Dots.styl.js

@@ -1,5 +1,5 @@
-var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}";
-var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj"};
+var css_248z = ".Dots_root__dTavT{bottom:1%;display:flex;justify-content:center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);overflow:hidden;padding:0 10%;pointer-events:none;position:absolute;width:100%}.Dots_inner__0Nqa9{align-items:center;display:flex}.Dots_item__gEVuS{background-color:var(--accent-color-alpha-200);border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-500);flex-shrink:0;height:8px;margin:3px;transition:.1s ease-out;transition-property:background-color,transform;width:8px}.Dots_item__gEVuS.Dots_active__gAUAj{background-color:var(--accent-color-alpha-500);transform:scale(1.2)}.Dots_interactive__wQylw{pointer-events:auto}.Dots_interactive__wQylw .Dots_item__gEVuS{border:none;cursor:pointer;padding:0}.Dots_interactive__wQylw .Dots_item__gEVuS:hover:not(.Dots_active__gAUAj){background-color:var(--accent-color-alpha-400)}.Dots_interactive__wQylw .Dots_item__gEVuS:focus-visible{outline:2px solid var(--active-color);outline-offset:2px}";
+var S = {"root":"Dots_root__dTavT","inner":"Dots_inner__0Nqa9","item":"Dots_item__gEVuS","active":"Dots_active__gAUAj","interactive":"Dots_interactive__wQylw"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

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

@@ -90,6 +90,8 @@ import '../RadioButton/RadioButton.styl.js';
 import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Resizer/Resizer.styl.js';
+import '../Gallery/Dots/Dots.styl.js';
+import '../Stepper/Stepper.styl.js';
 import '../Tabs/Tabs.styl.js';
 import '../TextWithDeferTooltip/TextWithDeferTooltip.styl.js';
 import '../Text/Text.js';

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

@@ -1,5 +1,5 @@
-var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;opacity:.3;transition:.2s ease-out;transition-property:opacity,transform}.Select_root__mjOjv:hover .Select_triggerArrow__1LEop{opacity:1}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_variant-clear__3Htb5 .Select_triggerButton__lErtt{background-color:transparent}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad{padding-right:0}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-xs__2lZQY .Select_option__iJkfJ{border-radius:6px;font-size:14px;height:22px;padding:0 8px}.Select_size-s__qBK9t .Select_option__iJkfJ{border-radius:6px;font-size:16px;height:26px;padding:0 12px}.Select_size-m__jp7n- .Select_option__iJkfJ{border-radius:9px;font-size:18px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{border-radius:12px;font-size:22px;height:42px;padding:0 20px}.Select_size-xl__0OerX .Select_option__iJkfJ{border-radius:15px;font-size:26px;height:50px;padding:0 24px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-xs__2lZQY .Select_expandButton__UTwlR{margin-left:-34px}.Select_size-s__qBK9t .Select_expandButton__UTwlR{margin-left:-37px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_size-xl__0OerX .Select_expandButton__UTwlR{margin-left:-52px}.Select_expandIcon__gWAIB{backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-xs__2lZQY .Select_chipsContainer__JruCi{max-height:90px}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_size-xl__0OerX .Select_chipsContainer__JruCi{max-height:260px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
-var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","variant-clear":"Select_variant-clear__3Htb5","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-xs":"Select_size-xs__2lZQY","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","fadeIn":"Select_fadeIn__QpAwZ"};
+var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:.3em;margin-right:.7em;opacity:.3;transition:.2s ease-out;transition-property:opacity,transform}.Select_root__mjOjv:hover .Select_triggerArrow__1LEop{opacity:1}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_variant-clear__3Htb5 .Select_triggerButton__lErtt{background-color:transparent}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad{padding-right:0}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{line-height:1.2em;opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;cursor:pointer;display:flex;overflow:hidden;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-xs__2lZQY .Select_option__iJkfJ{border-radius:6px;font-size:14px;height:22px;padding:0 8px}.Select_size-s__qBK9t .Select_option__iJkfJ{border-radius:6px;font-size:16px;height:26px;padding:0 12px}.Select_size-m__jp7n- .Select_option__iJkfJ{border-radius:9px;font-size:18px;height:34px;padding:0 16px}.Select_size-l__b4EEy .Select_option__iJkfJ{border-radius:12px;font-size:22px;height:42px;padding:0 20px}.Select_size-xl__0OerX .Select_option__iJkfJ{border-radius:15px;font-size:26px;height:50px;padding:0 24px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-xs__2lZQY .Select_expandButton__UTwlR{margin-left:-34px}.Select_size-s__qBK9t .Select_expandButton__UTwlR{margin-left:-37px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_size-xl__0OerX .Select_expandButton__UTwlR{margin-left:-52px}.Select_expandIcon__gWAIB{backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}.Select_chip__FRK2y{margin-left:-.4em}.Select_chipsContainer__JruCi{overflow-y:auto;padding:4px 0}.Select_size-xs__2lZQY .Select_chipsContainer__JruCi{max-height:90px}.Select_size-s__qBK9t .Select_chipsContainer__JruCi{max-height:108px}.Select_size-m__jp7n- .Select_chipsContainer__JruCi{max-height:180px}.Select_size-l__b4EEy .Select_chipsContainer__JruCi{max-height:220px}.Select_size-xl__0OerX .Select_chipsContainer__JruCi{max-height:260px}.Select_chipContainerInner__cYHSk{display:flex;flex-wrap:wrap;gap:4px}.Select_chip__FRK2y{margin:0}.Select_inline__nJFrE{background-color:var(--decent-color);box-shadow:inset 0 0 0 1px var(--accent-color-alpha-50);box-shadow:inset 0 0 0 2px none;display:flex;flex-direction:column;gap:var(--p-1);max-height:none;overflow:hidden;padding:var(--p-1)}.Select_inline__nJFrE.Select_blur__qqWoS{backdrop-filter:blur(50px);background-color:var(--decent-color-alpha-500)}.Select_inline__nJFrE.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_inline__nJFrE.Select_size-xs__2lZQY{border-radius:8.4px}.Select_inline__nJFrE.Select_size-xs__2lZQY.Select_round__Iv2dd{border-radius:12px}.Select_inline__nJFrE.Select_size-s__qBK9t{border-radius:8.4px}.Select_inline__nJFrE.Select_size-s__qBK9t.Select_round__Iv2dd{border-radius:16px}.Select_inline__nJFrE.Select_size-m__jp7n-{border-radius:12.6px}.Select_inline__nJFrE.Select_size-m__jp7n-.Select_round__Iv2dd{border-radius:20px}.Select_inline__nJFrE.Select_size-l__b4EEy{border-radius:16.8px}.Select_inline__nJFrE.Select_size-l__b4EEy.Select_round__Iv2dd{border-radius:24px}.Select_inline__nJFrE.Select_size-xl__0OerX{border-radius:21px}.Select_inline__nJFrE.Select_size-xl__0OerX.Select_round__Iv2dd{border-radius:28px}.Select_inlineSearch__ZDBbK{flex:none;position:relative;z-index:1}.Select_inline__nJFrE.Select_size-xs__2lZQY .Select_option__iJkfJ{padding-left:calc(8px - var(--p-1))!important;padding-right:calc(8px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-s__qBK9t .Select_option__iJkfJ{padding-left:calc(12px - var(--p-1))!important;padding-right:calc(12px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-m__jp7n- .Select_option__iJkfJ{padding-left:calc(16px - var(--p-1))!important;padding-right:calc(16px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-l__b4EEy .Select_option__iJkfJ{padding-left:calc(20px - var(--p-1))!important;padding-right:calc(20px - var(--p-1))!important}.Select_inline__nJFrE.Select_size-xl__0OerX .Select_option__iJkfJ{padding-left:calc(24px - var(--p-1))!important;padding-right:calc(24px - var(--p-1))!important}.Select_inlineChips__no6i2{flex:none}.Select_inlineList__61-N3{flex:1 1 auto;min-height:0}.Select_inlineOptions__-WNbz{max-height:320px}.keyboard .Select_inlineOptions__-WNbz{pointer-events:auto}.Select_options__3C0-v{--select-inset:0px}.Select_options__3C0-v.Select_inlineOptions__-WNbz{--select-inset:var(--p-1)}.Select_options__3C0-v.Select_size-xs__2lZQY{--select-row-radius:6px;--select-box-radius:8.4px}.Select_options__3C0-v.Select_size-xs__2lZQY.Select_round__Iv2dd{--select-box-radius:12px}.Select_options__3C0-v.Select_size-s__qBK9t{--select-row-radius:6px;--select-box-radius:8.4px}.Select_options__3C0-v.Select_size-s__qBK9t.Select_round__Iv2dd{--select-box-radius:16px}.Select_options__3C0-v.Select_size-m__jp7n-{--select-row-radius:9px;--select-box-radius:12.6px}.Select_options__3C0-v.Select_size-m__jp7n-.Select_round__Iv2dd{--select-box-radius:20px}.Select_options__3C0-v.Select_size-l__b4EEy{--select-row-radius:12px;--select-box-radius:16.8px}.Select_options__3C0-v.Select_size-l__b4EEy.Select_round__Iv2dd{--select-box-radius:24px}.Select_options__3C0-v.Select_size-xl__0OerX{--select-row-radius:15px;--select-box-radius:21px}.Select_options__3C0-v.Select_size-xl__0OerX.Select_round__Iv2dd{--select-box-radius:28px}.Select_options__3C0-v.Select_round__Iv2dd.Select_flushTop__h7nnL .Select_option__iJkfJ:first-child{border-top-left-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)));border-top-right-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)))}.Select_options__3C0-v.Select_round__Iv2dd .Select_option__iJkfJ:last-child{border-bottom-left-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)));border-bottom-right-radius:max(var(--select-row-radius),calc(var(--select-box-radius) - var(--select-inset)))}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
+var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","variant-clear":"Select_variant-clear__3Htb5","triggerButton":"Select_triggerButton__lErtt","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","isTree":"Select_isTree__SiTaD","size-xs":"Select_size-xs__2lZQY","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB","chip":"Select_chip__FRK2y","chipsContainer":"Select_chipsContainer__JruCi","chipContainerInner":"Select_chipContainerInner__cYHSk","inline":"Select_inline__nJFrE","blur":"Select_blur__qqWoS","round":"Select_round__Iv2dd","inlineSearch":"Select_inlineSearch__ZDBbK","inlineChips":"Select_inlineChips__no6i2","inlineList":"Select_inlineList__61-N3","inlineOptions":"Select_inlineOptions__-WNbz","flushTop":"Select_flushTop__h7nnL","fadeIn":"Select_fadeIn__QpAwZ"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

package/dist/esm/src/components/Select/Select2.js

@@ -23,7 +23,7 @@ import S from './Select.styl.js';
 const BLUR_CLOSE_DELAY = 60;
 const POINTER_PRESS_TTL = 100;
 function Select2(props) {
-    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionsClassName, optionClassName, selectedChipClassName, additionalOptions = [], options = [], variant, isSearchable, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, onFocus, onBlur, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionsClassName, optionClassName, selectedChipClassName, additionalOptions = [], options = [], variant, isSearchable, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, onFocus, onBlur, inline, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
     const instanceId = useRef(generateUID());
@@ -36,6 +36,8 @@ function Select2(props) {
     const [labelClipPath, setLabelClipPath] = useState('');
     const [isSearching, setIsSearching] = useState(false);
     const [innerSearchVal, setInnerSearchVal] = useState('');
+    /** Inline: keyboard navigation works while focus is inside the list. */
+    const [inlineFocused, setInlineFocused] = useState(false);
     const searchVal = props.searchValue ?? innerSearchVal;
     const searchQuery = isSearching ? searchVal : '';
     const { selectedIds, setSelectedIds } = useSelectedIds(value);
@@ -88,9 +90,14 @@ function Select2(props) {
             applySelection(ids, ids);
         }
         else {
+            // An inline list always shows a pick: pressing the picked row keeps it.
+            if (inline && isSelected(id))
+                return;
             const nextValue = isSelected(id) ? null : id;
             applySelection(nextValue === null ? [] : [id], nextValue);
         }
+        if (inline)
+            return;
         resetSearch();
         if (closeOnSelect)
             close();
@@ -102,7 +109,7 @@ function Select2(props) {
     const dropSelected = () => applySelection([], isMultiple$1 ? [] : null);
     const applyPreset = (ids) => applySelection(ids, isMultiple$1 ? ids : (ids[0] ?? null));
     const { focusedId, setFocusedId } = useKeyboardNav({
-        isOpen,
+        isOpen: inline ? inlineFocused : isOpen,
         navigableOptions,
         selectedIds,
         onSelect: onItemToggle,
@@ -133,7 +140,8 @@ function Select2(props) {
         setIsSearching(true);
         setInnerSearchVal(val);
         onSearchChange?.(val);
-        openIfEnabled();
+        if (!inline)
+            openIfEnabled();
     };
     const handleFocus = e => {
         window.clearTimeout(blurTimer.current);
@@ -188,7 +196,7 @@ function Select2(props) {
     });
     useEvent({
         event: 'click',
-        isActive: isOpen,
+        isActive: isOpen && !inline,
         callback: e => {
             // The click concluding a press that started inside must not count as an
             // outside click: the portalled popup can mount under the cursor, which
@@ -200,9 +208,25 @@ function Select2(props) {
         },
     });
     useEffect(() => {
-        if (!isOpen)
+        if (!isOpen && !inline)
             resetSearch();
     }, [isOpen]);
+    // Inline: on mount the selected option is scrolled into the middle of the list.
+    useEffect(() => {
+        if (!inline)
+            return;
+        const frame = requestAnimationFrame(() => {
+            const list = scrollInnerRef.current;
+            const selected = list?.querySelector(`.${S.isSelected}`);
+            if (!list || !selected)
+                return;
+            const listRect = list.getBoundingClientRect();
+            const rect = selected.getBoundingClientRect();
+            const offset = rect.top - listRect.top + list.scrollTop;
+            list.scrollTop = Math.max(0, offset - (list.clientHeight - rect.height) / 2);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [inline]);
     useEffect(() => {
         if (props.searchValue === undefined)
             return;
@@ -302,8 +326,25 @@ function Select2(props) {
             optionProps.ref = onFocusedElemRef;
         return (jsx("div", { ...optionProps, children: renderLabel(item) }, id));
     };
-    const optionsList = (jsxs("div", { ref: contentRef, "data-select-id": instanceId.current, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, key: "items-scroll" }, visibleOptions.map(item => renderOption(item)))] }));
+    const hasPresetPanel = presets.length > 0 || Boolean(selectAllButton) || Boolean(clearButton);
+    const optionsList = (jsxs("div", { ref: contentRef, "data-select-id": instanceId.current, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], round && S.round, 
+                // The first row touches the box top unless the preset buttons are above it.
+                !hasPresetPanel && S.flushTop, optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, key: "items-scroll" }, visibleOptions.map(item => renderOption(item)))] }));
     const classes = cn(S.root, className, S[`size-${size}`], variant === 'clear' && S['variant-clear']);
+    if (inline) {
+        const onInlineBlur = e => {
+            onBlur?.(e);
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setInlineFocused(false);
+        };
+        return (jsxs(Fragment, { children: [jsxs("div", { className: cn(classes, S.inline, round && S.round, blur && S.blur, disabled && S.disabled, isErrorVisible && S.isError), "data-select-id": instanceId.current, tabIndex: isSearchable ? -1 : 0, onFocus: e => {
+                        setInlineFocused(true);
+                        handleFocus(e);
+                    }, onBlur: onInlineBlur, children: [isSearchable && (jsx("div", { className: S.inlineSearch, children: jsx(Input, { size: size, round: round, variant: "clean", ...inputProps, value: searchVal, onChange: handleSearchChange, 
+                                // A floating label would be cut by the box: it is the placeholder here.
+                                placeholder: inputProps?.placeholder ??
+                                    (hideFieldLabel ? undefined : getFieldLabel(label)) }) })), hasChips && (jsx("div", { className: cn(S.chipContainerInner, S.inlineChips), children: renderSelectedChips() })), renderPresets(), jsx("div", { ref: contentRef, className: S.inlineList, children: jsx(Scroll, { y: true, ...scrollProps, offset: { y: { before: 6, after: 6 } }, className: cn(S.options, S.inlineOptions, S[`size-${size}`], round && S.round, !isSearchable && !hasChips && !hasPresetPanel && S.flushTop, optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, children: visibleOptions.map(item => renderOption(item)) }) })] }), isErrorVisible && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
+    }
     return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, blur: blur, round: round, disabled: disabled, ...popupProps, isOpen: isOpen, onOpen: openIfEnabled, onClose: close, trigger: renderTrigger(), triggerProps: {
                     'data-select-id': instanceId.current,
                     onFocus: handleFocus,

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

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import Dots from '../Gallery/Dots/Dots.js';
+import S from './Stepper.styl.js';
+
+function indexOf(steps, id) {
+    const i = steps.findIndex(s => s.id === id);
+    return i < 0 ? 0 : i;
+}
+function textOf(node) {
+    return typeof node === 'string' || typeof node === 'number'
+        ? String(node)
+        : '';
+}
+function Stepper({ steps, activeId, defaultActiveId, onChange, size = 'm', prevLabel = 'Prev', nextLabel = 'Next', prevButtonProps, nextButtonProps, renderPrevButton, renderNextButton, showDots = true, dotsClickable = true, renderAll = false, animation = true, className, headerClassName, contentClassName, footerClassName, }) {
+    const controlled = activeId !== undefined;
+    const [ownId, setOwnId] = useState(() => defaultActiveId ?? steps[0]?.id);
+    const currentId = controlled ? activeId : ownId;
+    const index = indexOf(steps, currentId);
+    const step = steps[index];
+    const count = steps.length;
+    // The direction of the last move, for the slide.
+    const prevIndex = useRef(index);
+    const [dir, setDir] = useState(null);
+    useEffect(() => {
+        if (index !== prevIndex.current) {
+            setDir(index > prevIndex.current ? 'forward' : 'back');
+            prevIndex.current = index;
+        }
+    }, [index]);
+    // A step that went away (steps changed): fall back to the nearest one.
+    useEffect(() => {
+        if (!controlled && step && step.id !== ownId)
+            setOwnId(step.id);
+    }, [controlled, step?.id, ownId]);
+    if (!step)
+        return null;
+    const go = (i) => {
+        const target = steps[Math.max(0, Math.min(count - 1, i))];
+        if (!target || target.id === step.id)
+            return;
+        if (!controlled)
+            setOwnId(target.id);
+        onChange?.(target.id, steps.indexOf(target));
+    };
+    const api = {
+        index,
+        count,
+        step,
+        isFirst: index === 0,
+        isLast: index === count - 1,
+        prev: () => go(index - 1),
+        next: () => go(index + 1),
+        go,
+    };
+    const button = (kind) => {
+        const own = step[kind];
+        const common = kind === 'prev' ? prevButtonProps : nextButtonProps;
+        if (own === false || (own === undefined && common === false)) {
+            return jsx("span", { className: S.placeholder });
+        }
+        const props = { ...(common || {}), ...(own || {}) };
+        const { onClick, children, ...rest } = props;
+        const isPrev = kind === 'prev';
+        // Nowhere to go and nothing else to do.
+        const stuck = isPrev ? api.isFirst : api.isLast && !onClick;
+        if (isPrev && api.isFirst && !onClick) {
+            return jsx("span", { className: S.placeholder });
+        }
+        return (jsx(Button, { round: true, size: size, variant: isPrev ? 'clear' : 'primary', disabled: stuck, ...rest, onClick: (e) => {
+                if (onClick?.(e) === false || e.defaultPrevented)
+                    return;
+                if (isPrev)
+                    api.prev();
+                else
+                    api.next();
+            }, children: children ?? (isPrev ? prevLabel : nextLabel) }));
+    };
+    const renderContent = (s) => typeof s.content === 'function'
+        ? s.content(s === step ? api : { ...api, step: s })
+        : s.content;
+    const renderStep = (s, active) => (jsxs("div", { className: cn(S.step, active && animation && dir && S[dir], !active && S.hidden), "aria-hidden": !active || undefined, children: [(s.title || s.description) && (jsxs("div", { className: cn(S.header, headerClassName), children: [s.title && jsx("div", { className: S.title, children: s.title }), s.description && (jsx("div", { className: S.description, children: s.description }))] })), jsx("div", { className: cn(S.content, contentClassName), children: renderContent(s) })] }, s.id));
+    return (jsxs("div", { className: cn(S.root, S[`size-${size}`], className), children: [jsx("div", { className: S.body, children: steps.map(s => s === step || renderAll || s.forceRender
+                    ? renderStep(s, s === step)
+                    : null) }), jsxs("div", { className: cn(S.footer, footerClassName), children: [jsx("div", { className: S.prev, children: renderPrevButton
+                            ? renderPrevButton(api, button('prev'))
+                            : button('prev') }), showDots && count > 1 && (jsx(Dots, { index: index, count: count, className: S.dots, onSelect: dotsClickable ? go : undefined, getLabel: i => textOf(steps[i].title) || String(i + 1) })), jsx("div", { className: S.next, children: renderNextButton
+                            ? renderNextButton(api, button('next'))
+                            : button('next') })] })] }));
+}
+
+export { Stepper };

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

@@ -0,0 +1,20 @@
+var css_248z = ".Stepper_root__WET-9{display:flex;flex-direction:column;gap:16px;min-width:0}.Stepper_body__ZRBXe{min-width:0;position:relative}.Stepper_step__e-4NN{display:flex;flex-direction:column;gap:16px;min-width:0}.Stepper_step__e-4NN.Stepper_hidden__ReHDU{display:none}.Stepper_step__e-4NN.Stepper_forward__SY8S2{animation:Stepper_stepFromRight__sFstu .22s ease-out}.Stepper_step__e-4NN.Stepper_back__ko4wh{animation:Stepper_stepFromLeft__AEIpv .22s ease-out}.Stepper_header__Hs5N2{display:flex;flex-direction:column;gap:4px}.Stepper_title__N8esM{font-size:1.4em;font-weight:600;line-height:1.2}.Stepper_description__ng-1A{line-height:1.4;opacity:.6}.Stepper_content__CTnZW{display:flex;flex-direction:column;gap:12px;min-width:0}.Stepper_footer__54ZR5{grid-gap:12px;align-items:center;display:grid;gap:12px;grid-template-columns:1fr auto 1fr}.Stepper_next__MTBhU,.Stepper_prev__eA85V{align-items:center;display:flex;gap:8px;min-width:0}.Stepper_prev__eA85V{grid-column:1;justify-self:start}.Stepper_next__MTBhU{grid-column:3;justify-self:end}.Stepper_placeholder__rpIAG{display:block}.Stepper_dots__cwSqS{grid-column:2;-webkit-mask-image:none;mask-image:none;padding:0;position:static;width:auto}.Stepper_size-s__MZtOL .Stepper_title__N8esM{font-size:1.15em}.Stepper_size-l__IP2y8 .Stepper_title__N8esM{font-size:1.7em}@media (prefers-reduced-motion:reduce){.Stepper_step__e-4NN{animation:none!important}}@keyframes Stepper_stepFromRight__sFstu{0%{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}@keyframes Stepper_stepFromLeft__AEIpv{0%{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}";
+var S = {"root":"Stepper_root__WET-9","body":"Stepper_body__ZRBXe","step":"Stepper_step__e-4NN","hidden":"Stepper_hidden__ReHDU","forward":"Stepper_forward__SY8S2","stepFromRight":"Stepper_stepFromRight__sFstu","back":"Stepper_back__ko4wh","stepFromLeft":"Stepper_stepFromLeft__AEIpv","header":"Stepper_header__Hs5N2","title":"Stepper_title__N8esM","description":"Stepper_description__ng-1A","content":"Stepper_content__CTnZW","footer":"Stepper_footer__54ZR5","prev":"Stepper_prev__eA85V","next":"Stepper_next__MTBhU","placeholder":"Stepper_placeholder__rpIAG","dots":"Stepper_dots__cwSqS","size-s":"Stepper_size-s__MZtOL","size-l":"Stepper_size-l__IP2y8"};
+            if (typeof document !== 'undefined') {
+              var __uilibHead = document.head || document.getElementsByTagName('head')[0];
+              if (__uilibHead) {
+                var __uilibStyle = document.createElement('style');
+                __uilibStyle.setAttribute('data-uilib-css', '');
+                __uilibStyle.appendChild(document.createTextNode(css_248z));
+                var __uilibLink = __uilibHead.querySelector('link[rel="stylesheet"]');
+                var __uilibInline = __uilibHead.querySelector('style:not([data-uilib-css])');
+                var __uilibAnchor = __uilibLink || __uilibInline;
+                if (__uilibLink && __uilibInline && (__uilibLink.compareDocumentPosition(__uilibInline) & 4) === 0) {
+                  __uilibAnchor = __uilibInline;
+                }
+                if (__uilibAnchor) __uilibHead.insertBefore(__uilibStyle, __uilibAnchor);
+                else __uilibHead.appendChild(__uilibStyle);
+              }
+            }
+
+export { S as default };

package/dist/esm/types/src/components/Gallery/Dots/Dots.d.ts

@@ -1,4 +1,9 @@
-export default function Dots({ index, count }: {
-    index: any;
-    count: any;
-}): import("react").JSX.Element;
+type Props = {
+    index: number;
+    count: number;
+    className?: string;
+    onSelect?: (index: number) => void;
+    getLabel?: (index: number) => string;
+};
+export default function Dots({ index, count, className, onSelect, getLabel, }: Props): import("react").JSX.Element;
+export {};

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

@@ -36,6 +36,7 @@ export type Props = FormControl<Value> & InheritedInputProps & {
     className?: string;
     isOpen?: boolean;
     closeOnSelect?: boolean;
+    inline?: boolean;
     optionsClassName?: string;
     optionClassName?: string;
     selectedChipClassName?: string;

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

@@ -0,0 +1,3 @@
+import * as T from './Stepper.types';
+export type { Step as StepperStep, StepButton as StepperButton, StepperApi, Props as StepperProps, } from './Stepper.types';
+export declare function Stepper({ steps, activeId, defaultActiveId, onChange, size, prevLabel, nextLabel, prevButtonProps, nextButtonProps, renderPrevButton, renderNextButton, showDots, dotsClickable, renderAll, animation, className, headerClassName, contentClassName, footerClassName, }: T.Props): import("react").JSX.Element;

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

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { Props as ButtonProps } from '../Button/Button.types';
+import { Size } from 'uilib/types';
+type ID = string | number;
+export type StepButton = false | (Omit<Partial<ButtonProps>, 'onClick'> & {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => boolean | void;
+    [data: `data-${string}`]: string | undefined;
+});
+export type StepperApi = {
+    index: number;
+    count: number;
+    step: Step;
+    isFirst: boolean;
+    isLast: boolean;
+    prev: () => void;
+    next: () => void;
+    go: (index: number) => void;
+};
+export type Step = {
+    id: ID;
+    title?: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode | ((api: StepperApi) => ReactNode);
+    forceRender?: boolean;
+    prev?: StepButton;
+    next?: StepButton;
+};
+export type Props = {
+    steps: Step[];
+    activeId?: ID;
+    defaultActiveId?: ID;
+    onChange?: (id: ID, index: number) => void;
+    size?: Size;
+    prevLabel?: ReactNode;
+    nextLabel?: ReactNode;
+    prevButtonProps?: StepButton;
+    nextButtonProps?: StepButton;
+    renderPrevButton?: (api: StepperApi, button: ReactNode) => ReactNode;
+    renderNextButton?: (api: StepperApi, button: ReactNode) => ReactNode;
+    showDots?: boolean;
+    dotsClickable?: boolean;
+    renderAll?: boolean;
+    animation?: boolean;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    footerClassName?: string;
+};
+export {};

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

@@ -53,6 +53,7 @@ export * from './Scroll/Scroll';
 export * from './Slider/Slider';
 export * from './Shimmer/Shimmer';
 export * from './Spinner/Spinner';
+export * from './Stepper/Stepper';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './TextShimmer/TextShimmer';

package/package.json

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