@homecode/ui 4.18.16 → 4.18.17

package/dist/esm/src/components/Spinner/spinner.svg.js

@@ -1,2 +1,24 @@
-import*as React from"react";var _circle;function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t,n=arguments[r];for(t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e}).apply(this,arguments)}var SvgSpinner=function(e){return React.createElement("svg",_extends({width:50,height:50,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 100 100",preserveAspectRatio:"xMidYMid"},e),_circle=_circle||React.createElement("circle",{cx:50,cy:50,fill:"none",stroke:"currentColor",strokeWidth:8,r:45,strokeDasharray:"212.05750411731105 72.68583470577035",transform:"rotate(270 50 50)"}))};export{SvgSpinner as default};
-//# sourceMappingURL=spinner.svg.js.map
+import * as React from 'react';
+
+var _circle;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgSpinner = function SvgSpinner(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: 50,
+    height: 50,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 100 100",
+    preserveAspectRatio: "xMidYMid"
+  }, props), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    cx: 50,
+    cy: 50,
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 8,
+    r: 45,
+    strokeDasharray: "212.05750411731105 72.68583470577035",
+    transform: "rotate(270 50 50)"
+  })));
+};
+
+export { SvgSpinner as default };

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

@@ -1,2 +1,24 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{Component}from"react";import cn from"classnames";import{Paranja}from"../Paranja/Paranja.js";import{Scroll}from"../Scroll/Scroll.js";import{Spinner}from"../Spinner/Spinner.js";import S from"./Table.styl.js";class Table extends Component{renderHeaderColumn=({id:r,label:e,sticky:n})=>jsx("th",{className:cn(n&&S.sticky),children:e},r);renderRow=e=>{var r=this.props["columns"];return jsx("tr",{children:r.map(r=>this.renderDataCol(r,e))},e.id)};renderDataCol({id:r,dataField:e,render:n,sticky:s},a){return jsx("td",{className:cn(s&&S.sticky),children:n?n(a):a[e||r]},r)}render(){var{className:r,columns:e,isLoading:n=!1,loadingText:s,blur:a,data:l}=this.props;return jsxs("div",{className:cn(S.root,a&&S.blur,r),children:[jsx(Scroll,{x:!0,y:!0,offset:{x:{before:10,after:10}},children:jsxs("table",{children:[jsx("thead",{children:jsx("tr",{children:e.map(this.renderHeaderColumn)})}),jsx("tbody",{children:l.map(this.renderRow)})]})}),jsx(Paranja,{inline:!0,visible:n,blur:a,children:n&&(s??jsx(Spinner,{}))})]})}}export{Table};
-//# sourceMappingURL=Table.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Component } from 'react';
+import cn from 'classnames';
+import { Paranja } from '../Paranja/Paranja.js';
+import { Scroll } from '../Scroll/Scroll.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import S from './Table.styl.js';
+
+class Table extends Component {
+    renderHeaderColumn = ({ id, label, sticky }) => (jsx("th", { className: cn(sticky && S.sticky), children: label }, id));
+    renderRow = data => {
+        const { columns } = this.props;
+        return (jsx("tr", { children: columns.map(param => this.renderDataCol(param, data)) }, data.id));
+    };
+    renderDataCol({ id, dataField, render, sticky }, data) {
+        return (jsx("td", { className: cn(sticky && S.sticky), children: render ? render(data) : data[dataField || id] }, id));
+    }
+    render() {
+        const { className, columns, isLoading = false, loadingText, blur, data, } = this.props;
+        return (jsxs("div", { className: cn(S.root, blur && S.blur, className), children: [jsx(Scroll, { x: true, y: true, offset: { x: { before: 10, after: 10 } }, children: jsxs("table", { children: [jsx("thead", { children: jsx("tr", { children: columns.map(this.renderHeaderColumn) }) }), jsx("tbody", { children: data.map(this.renderRow) })] }) }), jsx(Paranja, { inline: true, visible: isLoading, blur: blur, children: isLoading && (loadingText ?? jsx(Spinner, {})) })] }));
+    }
+}
+
+export { Table };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Table_root__PxLR-{border-radius:var(--border-radius-l);box-shadow:0 0 0 2px var(--accent-color-alpha-100);overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--indent-s);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{padding-bottom:var(--indent-l)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}",S={root:"Table_root__PxLR-",sticky:"Table_sticky__99lks",blur:"Table_blur__UwMAo"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Table.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Table_root__PxLR-{border-radius:var(--border-radius-l);box-shadow:0 0 0 2px var(--accent-color-alpha-100);overflow:hidden;position:relative}.Table_root__PxLR- table{min-width:100%}.Table_root__PxLR- tbody{overflow-scrolling:touch;overflow:auto}.Table_root__PxLR- thead{position:sticky;top:0;z-index:1}.Table_root__PxLR- td{box-shadow:inset 0 1px 0 0 var(--accent-color-alpha-100)}.Table_root__PxLR- td,.Table_root__PxLR- th{min-width:5em;padding:var(--indent-s);text-align:left}.Table_root__PxLR- th{background-color:var(--accent-color-alpha-100);padding-bottom:16px}.Table_root__PxLR- td{vertical-align:top}.Table_root__PxLR- tr:last-child td{padding-bottom:var(--indent-l)}.Table_sticky__99lks{background-color:var(--decent-color);left:0;position:sticky;z-index:1}th.Table_sticky__99lks{background-color:var(--accent-color);color:var(--decent-color)}.Table_blur__UwMAo .Table_sticky__99lks{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Table_blur__UwMAo th.Table_sticky__99lks{background-color:var(--accent-color-alpha-500);color:var(--decent-color-alpha-800)}";
+var S = {"root":"Table_root__PxLR-","sticky":"Table_sticky__99lks","blur":"Table_blur__UwMAo"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,43 @@
-import{useState,useRef,useCallback,createElement}from"react";import{jsx,Fragment}from"react/jsx-runtime";import cn from"classnames";import{Button}from"../Button/Button.js";import{ButtonGroup}from"../ButtonGroup/ButtonGroup.js";import S from"./Tabs.styl.js";function isId(t){return["string","number"].includes(typeof t)}function Tabs(t){const{size:i="m",contentClassName:m,items:e,onChange:r,renderAll:l,activeId:n,children:o,...s}=t,[f,c]=useState(isId(n)?n:e[0].id),p=useRef([]),d=useCallback((t,{id:e,onClick:n}={})=>{n&&!n(t)?t.peventDefault():(c(e),r?.(e))},[]);p.current=[];t=e.map(e=>{const{id:t,label:n,forceRender:r,content:o,contentClassName:s,...c}=e;var u=f===t,a="function"==typeof o?o():o;return(l||r||u)&&p.current.push(jsx("div",{className:cn(m,s,!u&&S.inactive),children:a},t)),createElement(Button,{...c,size:i,key:t,onClick:t=>d(t,e),checked:u},n)});return"function"==typeof o?o({tabs:jsx(ButtonGroup,{...s,children:t}),content:p.current}):jsx(Fragment,{children:p.current})}export{Tabs};
-//# sourceMappingURL=Tabs.js.map
+import { useState, useRef, useCallback, createElement } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Button } from '../Button/Button.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import S from './Tabs.styl.js';
+
+function isId(id) {
+    return ['string', 'number'].includes(typeof id);
+}
+function Tabs(props) {
+    const { size = 'm', contentClassName, items, onChange, renderAll, activeId: initialId, children, ...rest } = props;
+    const [activeId, setActiveId] = useState(isId(initialId) ? initialId : items[0].id);
+    const tabsContent = useRef([]);
+    const onTabClick = useCallback((e, { id, onClick } = {}) => {
+        // @ts-ignore
+        if (onClick && !onClick(e)) {
+            e.peventDefault();
+            return;
+        }
+        setActiveId(id);
+        onChange?.(id);
+    }, []);
+    tabsContent.current = [];
+    const tabs = items.map((params) => {
+        const { id, label, forceRender, content, contentClassName: currContentClassName, ...rest } = params;
+        const isActive = activeId === id;
+        const tabContent = typeof content === 'function' ? content() : content;
+        if (renderAll || forceRender || isActive) {
+            tabsContent.current.push(jsx("div", { className: cn(contentClassName, currContentClassName, !isActive && S.inactive), children: tabContent }, id));
+        }
+        return (createElement(Button, { ...rest, size: size, key: id, onClick: e => onTabClick(e, params), checked: isActive }, label));
+    });
+    if (typeof children === 'function') {
+        return children({
+            tabs: jsx(ButtonGroup, { ...rest, children: tabs }),
+            content: tabsContent.current,
+        });
+    }
+    return jsx(Fragment, { children: tabsContent.current });
+}
+
+export { Tabs };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z="div .Tabs_inactive__H0mPh{display:none}",S={inactive:"Tabs_inactive__H0mPh"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Tabs.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "div .Tabs_inactive__H0mPh{display:none}";
+var S = {"inactive":"Tabs_inactive__H0mPh"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,44 @@
-import{jsx,jsxs,Fragment}from"react/jsx-runtime";import cn from"classnames";import{useCallback}from"react";import{Link}from"../Router/Link/Link.js";import{isBrowser}from"../../tools/env.js";import"nanoid";import"../../tools/dom.js";import"timen";import"compareq";import"lodash.pick";import"../../tools/queryParams.js";import S from"./Text.styl.js";const textToAnchorId=o=>o.toLowerCase().split(" ").join("_"),getPath=()=>(isBrowser&&location.pathname)??"/",scrollIntoHeader=o=>document.getElementById(o)?.scrollIntoView();function useAnchor(o){if("string"!=typeof o)return[];const s=textToAnchorId(o);var o=getPath()+"#"+s,r=useCallback(()=>scrollIntoHeader(s),[s]);return[s,jsxs(Fragment,{children:[" ",jsx(Link,{href:o,className:S.anchor,onClick:r,children:"#"})]})]}function H({As:o,className:s,children:r,anchor:t,...e}){var[t,n]=useAnchor(t??r);return jsxs(o,{...e,className:cn(S.heading,s),id:t,children:[r,n]})}const H1=o=>jsx(H,{...o,As:"h1",anchor:!1}),H2=o=>jsx(H,{...o,As:"h2"}),H3=o=>jsx(H,{...o,As:"h3"}),H4=o=>jsx(H,{...o,As:"h4"}),H5=o=>jsx(H,{...o,As:"h5"}),H6=o=>jsx(H,{...o,As:"h6"});isBrowser&&window.addEventListener("load",()=>{scrollIntoHeader(location.hash.slice(1))});export{H1,H2,H3,H4,H5,H6};
-//# sourceMappingURL=Text.js.map
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useCallback } from 'react';
+import { Link } from '../Router/Link/Link.js';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+import S from './Text.styl.js';
+
+const textToAnchorId = text => text.toLowerCase().split(' ').join('_');
+const getPath = () => (isBrowser && location.pathname) ?? '/';
+const scrollIntoHeader = id => document.getElementById(id)?.scrollIntoView();
+function useAnchor(text) {
+    if (typeof text !== 'string')
+        return [];
+    const id = textToAnchorId(text);
+    const href = `${getPath()}#${id}`;
+    const scrollUp = useCallback(() => scrollIntoHeader(id), [id]);
+    return [
+        id,
+        jsxs(Fragment, { children: ["\u00A0", jsx(Link, { href: href, className: S.anchor, onClick: scrollUp, children: "#" })] }),
+    ];
+}
+function H({ As, className, children, anchor, ...rest }) {
+    const [id, anchorEl] = useAnchor(anchor ?? children);
+    return (jsxs(As, { ...rest, className: cn(S.heading, className), id: id, children: [children, anchorEl] }));
+}
+const H1 = props => jsx(H, { ...props, As: "h1", anchor: false });
+const H2 = props => jsx(H, { ...props, As: "h2" });
+const H3 = props => jsx(H, { ...props, As: "h3" });
+const H4 = props => jsx(H, { ...props, As: "h4" });
+const H5 = props => jsx(H, { ...props, As: "h5" });
+const H6 = props => jsx(H, { ...props, As: "h6" });
+if (isBrowser) {
+    window.addEventListener('load', () => {
+        scrollIntoHeader(location.hash.slice(1));
+    });
+}
+
+export { H1, H2, H3, H4, H5, H6 };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Text_heading__DR-MG{position:relative}.Text_anchor__hq6W6{align-items:flex-start;border-radius:50%;height:100%;opacity:0;padding:0 .5em;transform:translateX(-1em);transition:.2s ease-out;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Text_anchor__hq6W6:before{background:none!important;height:100%;position:absolute;width:2em}.Text_heading__DR-MG:hover .Text_anchor__hq6W6{opacity:1;transform:translateX(0)}.Text_heading__DR-MG .Text_anchor__hq6W6:hover{color:var(--active-color)}",S={heading:"Text_heading__DR-MG",anchor:"Text_anchor__hq6W6"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Text.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Text_heading__DR-MG{position:relative}.Text_anchor__hq6W6{align-items:flex-start;border-radius:50%;height:100%;opacity:0;padding:0 .5em;transform:translateX(-1em);transition:.2s ease-out;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Text_anchor__hq6W6:before{background:none!important;height:100%;position:absolute;width:2em}.Text_heading__DR-MG:hover .Text_anchor__hq6W6{opacity:1;transform:translateX(0)}.Text_heading__DR-MG .Text_anchor__hq6W6:hover{color:var(--active-color)}";
+var S = {"heading":"Text_heading__DR-MG","anchor":"Text_anchor__hq6W6"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Theme/Theme.defaults.js

@@ -1,2 +1,50 @@
-import{colorsConfigToVars}from"./Theme.helpers.js";const baseConfig={"indent-s":"10px","indent-m":"20px","indent-l":"30px","border-radius-s":"2px","border-radius-m":"4px","border-radius-l":"6px"},colorsAlphaModes=[0,50,100,200,300,500,800,900],colors={light:"#e6e6e6",dark:"#1a1a1a"};function getColors({accent:o=colors.light,decent:r=colors.dark,active:e="#54b62b",warning:a="#ffa31a",danger:s="#da3749",disabled:l="#f1f1f2",link:n="#3089fe"}={}){return{active:{color:e,mods:{alpha:[100,300,500,800]}},warning:{color:a,mods:{alpha:[100,300,500]}},danger:{color:s,mods:{alpha:[100,300,500]}},disabled:l,link:n,accent:{color:o,mods:{alpha:colorsAlphaModes}},decent:{color:r,mods:{alpha:colorsAlphaModes}}}}const getConfig=(o={})=>({...colorsConfigToVars(getColors(o.colors)),...baseConfig,...o.rest});export{baseConfig,colors,getColors,getConfig};
-//# sourceMappingURL=Theme.defaults.js.map
+import { colorsConfigToVars } from './Theme.helpers.js';
+
+const baseConfig = {
+    'indent-s': '10px',
+    'indent-m': '20px',
+    'indent-l': '30px',
+    'border-radius-s': '2px',
+    'border-radius-m': '4px',
+    'border-radius-l': '6px',
+};
+const colorsAlphaModes = [0, 50, 100, 200, 300, 500, 800, 900];
+const colors = {
+    light: '#e6e6e6',
+    dark: '#1a1a1a',
+};
+function getColors({ accent = colors.light, decent = colors.dark, active = '#54b62b', warning = '#ffa31a', danger = '#da3749', disabled = '#f1f1f2', link = '#3089fe', } = {}) {
+    return {
+        active: {
+            color: active,
+            mods: { alpha: [100, 300, 500, 800] /* mix: [['accent', 300]] */ },
+        },
+        warning: {
+            color: warning,
+            mods: { alpha: [100, 300, 500] },
+        },
+        danger: {
+            color: danger,
+            mods: { alpha: [100, 300, 500] },
+        },
+        disabled,
+        link,
+        accent: {
+            color: accent,
+            mods: { alpha: colorsAlphaModes },
+        },
+        decent: {
+            color: decent,
+            mods: { alpha: colorsAlphaModes },
+        },
+    };
+}
+const getConfig = (cfg = {}) => ({
+    // @ts-ignore
+    ...colorsConfigToVars(getColors(cfg.colors)),
+    ...baseConfig,
+    // @ts-ignore
+    ...cfg.rest,
+});
+
+export { baseConfig, colors, getColors, getConfig };

package/dist/esm/src/components/Theme/Theme.helpers.js

@@ -1,2 +1,67 @@
-function hexToRGB(o){o=o.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(o,r,e,t)=>r+r+e+e+t+t),o=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return o?[parseInt(o[1],16),parseInt(o[2],16),parseInt(o[3],16)].join(","):null}const mix=(o,r,e)=>Math.floor(o*(1-e)+r*e);function mixColor(o,r,e=1){o=(/^#/.test(o)?hexToRGB(o):o).split(",").map(o=>parseInt(o,10)),r=(/^#/.test(r)?hexToRGB(r):r).split(",").map(o=>parseInt(o,10));return`rgb(${[mix(o[0],r[0],e),mix(o[1],r[1],e),mix(o[2],r[2],e)].join(",")})`}function rgba(o,r){return`rgba(${getRGB(o)},${r})`}function getRGB(o){return/^rgb/.test(o)?o.replace(/^rgb?\(|\)$/g,""):hexToRGB(o)}const getConfigColor=o=>o?.color||o,colorMods={alpha:(o,r)=>[rgba(o,r/1e3),"alpha-"+r],mix:(o,[r,e],t)=>[mixColor(o,getConfigColor(t[r]),e/1e3),`mix-${r}-`+e]};function colorsConfigToVars(i){return Object.entries(i).reduce((t,[o,r])=>{const n=o+"-color";if("string"==typeof r)t[n]=r;else{const{color:a,mods:e}=r;t[n]=a,"object"==typeof e&&null!==e&&Object.entries(e||{}).forEach(([e,o])=>{o.forEach(o=>{var[o,r]=colorMods[e](a,o,i);t[n+"-"+r]=o})})}return t},{})}export{colorsConfigToVars,getRGB,mixColor,rgba};
-//# sourceMappingURL=Theme.helpers.js.map
+function hexToRGB(str) {
+    // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    const hex = str.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result)
+        return null;
+    return [
+        parseInt(result[1], 16),
+        parseInt(result[2], 16),
+        parseInt(result[3], 16),
+    ].join(',');
+}
+const mix = (c1, c2, val) => Math.floor(c1 * (1 - val) + c2 * val);
+function mixColor(color1, color2, val = 1) {
+    const c1 = (/^#/.test(color1) ? hexToRGB(color1) : color1)
+        .split(',')
+        .map(n => parseInt(n, 10));
+    const c2 = (/^#/.test(color2) ? hexToRGB(color2) : color2)
+        .split(',')
+        .map(n => parseInt(n, 10));
+    const rgb = [
+        mix(c1[0], c2[0], val),
+        mix(c1[1], c2[1], val),
+        mix(c1[2], c2[2], val),
+    ].join(',');
+    return `rgb(${rgb})`;
+}
+function rgba(color, transparency) {
+    return `rgba(${getRGB(color)},${transparency})`;
+}
+function getRGB(color) {
+    if (/^rgb/.test(color))
+        return color.replace(/^rgb?\(|\)$/g, '');
+    return hexToRGB(color);
+}
+const getConfigColor = val => val?.color || val;
+const colorMods = {
+    alpha: (color, val) => [rgba(color, val / 1000), `alpha-${val}`],
+    mix: (color1, [color2, val], config) => [
+        mixColor(color1, getConfigColor(config[color2]), val / 1000),
+        `mix-${color2}-${val}`,
+    ],
+};
+function colorsConfigToVars(config) {
+    return Object.entries(config).reduce((acc, [name, val]) => {
+        const colorName = `${name}-color`;
+        if (typeof val === 'string') {
+            acc[colorName] = val;
+        }
+        else {
+            const { color, mods } = val;
+            acc[colorName] = color;
+            if (typeof mods === 'object' && mods !== null) {
+                Object.entries(mods || {}).forEach(([mod, vals]) => {
+                    vals.forEach(val => {
+                        const [res, prefix] = colorMods[mod](color, val, config);
+                        acc[`${colorName}-${prefix}`] = res;
+                    });
+                });
+            }
+        }
+        return acc;
+    }, {});
+}
+
+export { colorsConfigToVars, getRGB, mixColor, rgba };

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

@@ -1,2 +1,13 @@
-import{jsx}from"react/jsx-runtime";function buildVar(e,r){return`--${e}: ${r};`}function Theme({config:e={}}){e=Object.entries(e).map(([e,r])=>buildVar(e,r)).join("\n");return jsx("style",{children:`:root {${e}}`})}export{Theme};
-//# sourceMappingURL=Theme.js.map
+import { jsx } from 'react/jsx-runtime';
+
+function buildVar(name, val) {
+    return `--${name}: ${val};`;
+}
+function Theme({ config = {} }) {
+    const vars = Object.entries(config)
+        .map(([name, val]) => buildVar(name, val))
+        .join('\n');
+    return jsx("style", { children: `:root {${vars}}` });
+}
+
+export { Theme };

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

@@ -1,2 +1,33 @@
-import{jsx}from"react/jsx-runtime";import{Component}from"react";import{isBrowser}from"../../tools/env.js";import"nanoid";import"../../tools/dom.js";import"timen";import"compareq";import"lodash.pick";import"../../tools/queryParams.js";const getVH=()=>isBrowser?window.innerHeight/100:0;class VH extends Component{constructor(t){super(t),this.state={vh:0}}componentDidMount(){this.updateVH(),window.addEventListener("resize",this.updateVH)}componentWillUnmount(){window.removeEventListener("resize",this.updateVH)}updateVH=()=>{this.setState({vh:getVH()})};render(){var t=this.state["vh"];return jsx("style",{children:`:root{--vh: ${t}px;}`})}}export{VH};
-//# sourceMappingURL=VH.js.map
+import { jsx } from 'react/jsx-runtime';
+import { Component } from 'react';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+import '../../tools/queryParams.js';
+
+const getVH = () => (isBrowser ? window.innerHeight / 100 : 0);
+class VH extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { vh: 0 };
+    }
+    componentDidMount() {
+        this.updateVH();
+        window.addEventListener('resize', this.updateVH);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.updateVH);
+    }
+    updateVH = () => {
+        this.setState({ vh: getVH() });
+    };
+    render() {
+        const { vh } = this.state;
+        return jsx("style", { children: `:root{--vh: ${vh}px;}` });
+    }
+}
+
+export { VH };

package/dist/esm/src/components/Virtualized/List/List.js

@@ -1,2 +1,124 @@
-import{jsxs,Fragment,jsx}from"react/jsx-runtime";import{Component,createRef}from"react";import omit from"lodash.omit";import{createStore}from"justorm/react";import Time from"timen";import*as number from"../../../tools/number.js";import"nanoid";import"../../../tools/dom.js";import"compareq";import"lodash.pick";import"../../../tools/queryParams.js";import Virtualized from"../Virtualized.js";import S from"./List.styl.js";const zero=number["zero"],CONTENT_BEFORE_SIZE_CHECK_TIMEOUT=300;class List extends Component{store;wrapElem;contentBeforeElem;contentAfterElem;timers=Time.create();unsubscribeContentBeforeResize;constructor(e){super(e),this.store=createStore(this,{mounted:!1,contentBeforeHeight:0,hasWrap:!1}),this.contentBeforeElem=createRef(),this.contentAfterElem=createRef()}componentDidMount(){this.props.contentBefore&&(this.subscribeContentBeforeResize(),this.checkContentBeforeHeight())}componentDidUpdate(e){var t=this.props["contentBefore"];!e.contentBefore&&t&&this.subscribeContentBeforeResize(),e.contentBefore&&!t&&this.unsubscribeContentBeforeResize?.()}subscribeContentBeforeResize(){this.unsubscribeContentBeforeResize=Time.every(CONTENT_BEFORE_SIZE_CHECK_TIMEOUT,this.checkContentBeforeHeight)}checkContentBeforeHeight=()=>{var e=this.contentBeforeElem.current;e&&(e=e["offsetHeight"],e!==this.store.contentBeforeHeight)&&(this.store.contentBeforeHeight=e)};getProps(){var e=omit(this.props,["contentBefore","contentAfter","customWrapElem"]),t=this.store["contentBeforeHeight"],t=zero(t)+zero(this.props.offsetBefore),r=zero(this.contentAfterElem.current?.offsetHeight)+zero(this.props.offsetAfter);return t&&(e.offsetBefore=t),r&&(e.offsetAfter=r),e}getItemProps=({index:e,offsetBefore:t})=>{var r=this.props["itemHeight"];return{className:S.item,style:{top:zero(t)+e*r}}};onWrapRef=e=>{e&&(this.wrapElem=this.props.customWrapElem?.getRef?.(e)||e,this.store.hasWrap||(this.store.hasWrap=!0))};renderLayout=({state:e,items:t,...r})=>{var{contentBefore:o,contentAfter:s,customWrapElem:n}=this.props,{height:e,offsetAfter:i}=e,f=this.store["contentBeforeHeight"],r=omit(r,["contentBefore","contentAfter","scrollTop","itemHeight","itemsCount","totalCount","overlapCount","onScrollEnd","renderItem","wrapElem","getItemProps","offsetAfter","offsetBefore"]),o=jsxs(Fragment,{children:[o&&jsx("div",{ref:this.contentBeforeElem,children:o},"contentBefore"),jsx("div",{className:S.gap,style:{height:e-f}},"gap"),t,s&&jsx("div",{className:S.contentAfter,ref:this.contentAfterElem,style:{top:e-zero(i)},children:s},"contentAfter")]});let m="div";return n&&(m=n.component,Object.assign(r,n?.props)),jsx(m,{...r,ref:this.onWrapRef,children:o})};render(){return jsx(Virtualized,{...this.getProps(),wrapElem:this.wrapElem,getItemProps:this.getItemProps,children:this.renderLayout})}}export{List as default};
-//# sourceMappingURL=List.js.map
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component, createRef } from 'react';
+import omit from 'lodash.omit';
+import { createStore } from 'justorm/react';
+import Time from 'timen';
+import * as number from '../../../tools/number.js';
+import 'nanoid';
+import '../../../tools/dom.js';
+import 'compareq';
+import 'lodash.pick';
+import '../../../tools/queryParams.js';
+import Virtualized from '../Virtualized.js';
+import S from './List.styl.js';
+
+const { zero } = number;
+const CONTENT_BEFORE_SIZE_CHECK_TIMEOUT = 300;
+class List extends Component {
+    store;
+    wrapElem;
+    contentBeforeElem;
+    contentAfterElem;
+    timers = Time.create();
+    unsubscribeContentBeforeResize;
+    constructor(props) {
+        super(props);
+        this.store = createStore(this, {
+            mounted: false,
+            contentBeforeHeight: 0,
+            hasWrap: false,
+        });
+        // this.wrapElem = createRef<HTMLDivElement>();
+        this.contentBeforeElem = createRef();
+        this.contentAfterElem = createRef();
+    }
+    componentDidMount() {
+        // update, to pass actual wrapElem to Virtualized props
+        // this.store.mounted = true;
+        if (this.props.contentBefore) {
+            this.subscribeContentBeforeResize();
+            this.checkContentBeforeHeight();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const { contentBefore } = this.props;
+        if (!prevProps.contentBefore && contentBefore)
+            this.subscribeContentBeforeResize();
+        if (prevProps.contentBefore && !contentBefore)
+            this.unsubscribeContentBeforeResize?.();
+    }
+    subscribeContentBeforeResize() {
+        this.unsubscribeContentBeforeResize = Time.every(CONTENT_BEFORE_SIZE_CHECK_TIMEOUT, this.checkContentBeforeHeight);
+    }
+    checkContentBeforeHeight = () => {
+        const elem = this.contentBeforeElem.current;
+        if (!elem)
+            return;
+        const { offsetHeight } = elem;
+        if (offsetHeight !== this.store.contentBeforeHeight)
+            this.store.contentBeforeHeight = offsetHeight;
+    };
+    getProps() {
+        const props = omit(this.props, [
+            'contentBefore',
+            'contentAfter',
+            'customWrapElem',
+        ]);
+        const { contentBeforeHeight } = this.store;
+        const offsetBefore = zero(contentBeforeHeight) + zero(this.props.offsetBefore);
+        const offsetAfter = zero(this.contentAfterElem.current?.offsetHeight) +
+            zero(this.props.offsetAfter);
+        if (offsetBefore)
+            props.offsetBefore = offsetBefore;
+        if (offsetAfter)
+            props.offsetAfter = offsetAfter;
+        return props;
+    }
+    getItemProps = ({ index, offsetBefore, offsetAfter }) => {
+        const { itemHeight } = this.props;
+        return {
+            className: S.item,
+            style: { top: zero(offsetBefore) + index * itemHeight },
+        };
+    };
+    onWrapRef = (ref) => {
+        if (!ref)
+            return;
+        // @ts-ignore
+        this.wrapElem = this.props.customWrapElem?.getRef?.(ref) || ref;
+        if (!this.store.hasWrap)
+            this.store.hasWrap = true;
+    };
+    renderLayout = ({ state, items, ...rest }) => {
+        const { contentBefore, contentAfter, customWrapElem } = this.props;
+        const { height, offsetAfter } = state;
+        const { contentBeforeHeight } = this.store;
+        const props = omit(rest, [
+            'contentBefore',
+            'contentAfter',
+            'scrollTop',
+            'itemHeight',
+            'itemsCount',
+            'totalCount',
+            'overlapCount',
+            'onScrollEnd',
+            'renderItem',
+            'wrapElem',
+            'getItemProps',
+            'offsetAfter',
+            'offsetBefore',
+        ]);
+        const content = (jsxs(Fragment, { children: [contentBefore && (jsx("div", { ref: this.contentBeforeElem, children: contentBefore }, "contentBefore")), jsx("div", { className: S.gap, style: { height: height - contentBeforeHeight } }, "gap"), items, contentAfter && (jsx("div", { className: S.contentAfter, ref: this.contentAfterElem, style: { top: height - zero(offsetAfter) }, children: contentAfter }, "contentAfter"))] }));
+        let Elem = 'div';
+        if (customWrapElem) {
+            Elem = customWrapElem.component;
+            Object.assign(props, customWrapElem?.props);
+        }
+        return (jsx(Elem, { ...props, ref: this.onWrapRef, children: content }));
+    };
+    render() {
+        return (jsx(Virtualized, { ...this.getProps(), wrapElem: this.wrapElem, getItemProps: this.getItemProps, children: this.renderLayout }));
+    }
+}
+
+export { List as default };

package/dist/esm/src/components/Virtualized/List/List.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".List_gap__-52oM{pointer-events:none;width:100%}.List_gap__-52oM,.List_item__-true{position:absolute}.List_contentAfter__H0Ujd{left:0;position:absolute;width:100%}",S={gap:"List_gap__-52oM",item:"List_item__-true",contentAfter:"List_contentAfter__H0Ujd"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=List.styl.js.map
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".List_gap__-52oM{pointer-events:none;width:100%}.List_gap__-52oM,.List_item__-true{position:absolute}.List_contentAfter__H0Ujd{left:0;position:absolute;width:100%}";
+var S = {"gap":"List_gap__-52oM","item":"List_item__-true","contentAfter":"List_contentAfter__H0Ujd"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Virtualized/List/ListScroll.js

@@ -1,2 +1,21 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import{Scroll}from"../../Scroll/Scroll.js";import List from"./List.js";import S from"./ListScroll.styl.js";function ListScroll({scrollProps:r,...o}){var s=cn(r.x&&S.x,r.y&&S.y),r={...r,innerClassName:s};return jsx(List,{...o,customWrapElem:{component:Scroll,props:r,getRef:r=>r.innerElem}})}export{ListScroll as default};
-//# sourceMappingURL=ListScroll.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Scroll } from '../../Scroll/Scroll.js';
+import List from './List.js';
+import S from './ListScroll.styl.js';
+
+function ListScroll({ scrollProps, ...rest }) {
+    const innerClassName = cn(scrollProps.x && S.x, scrollProps.y && S.y);
+    const props = {
+        ...scrollProps,
+        innerClassName,
+    };
+    return (jsx(List, { ...rest, customWrapElem: {
+            component: Scroll,
+            props,
+            // @ts-ignore
+            getRef: ref => ref.innerElem,
+        } }));
+}
+
+export { ListScroll as default };

package/dist/esm/src/components/Virtualized/List/ListScroll.styl.js

@@ -1,2 +1,7 @@
-import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".ListScroll_x__tSPeG{width:100%}.ListScroll_y__mvFCU{height:100%}",S={x:"ListScroll_x__tSPeG",y:"ListScroll_y__mvFCU"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=ListScroll.styl.js.map
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ListScroll_x__tSPeG{width:100%}.ListScroll_y__mvFCU{height:100%}";
+var S = {"x":"ListScroll_x__tSPeG","y":"ListScroll_y__mvFCU"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Virtualized/Virtualized.helpers.js

@@ -1,2 +1,14 @@
-function getLastIndex(t,e,n,o,i){return Math.min(i-1,Math.floor((t+e)/n+o))}function getIndexes({scrollTop:t,clientHeight:e,itemHeight:n,itemsCount:o,totalCount:i,overlapCount:a}){var r=Math.max(0,Math.floor(t/n-a));return{first:r,last:Math.min(Math.max(r,o+a-1),getLastIndex(t,e,n,a,i))}}function getHeight({itemsCount:t,itemHeight:e,offsetBefore:n=0,offsetAfter:o=0}){return t*e+n+o}export{getHeight,getIndexes,getLastIndex};
-//# sourceMappingURL=Virtualized.helpers.js.map
+function getLastIndex(scrollTop, clientHeight, itemHeight, overlapCount, totalCount) {
+    return Math.min(totalCount - 1, Math.floor((scrollTop + clientHeight) / itemHeight + overlapCount));
+}
+// Returns indexes of first and last items to be rendered
+function getIndexes({ scrollTop, clientHeight, itemHeight, itemsCount, totalCount, overlapCount, }) {
+    const first = Math.max(0, Math.floor(scrollTop / itemHeight - overlapCount));
+    const last = Math.min(Math.max(first, itemsCount + overlapCount - 1), getLastIndex(scrollTop, clientHeight, itemHeight, overlapCount, totalCount));
+    return { first, last };
+}
+function getHeight({ itemsCount, itemHeight, offsetBefore = 0, offsetAfter = 0, }) {
+    return itemsCount * itemHeight + offsetBefore + offsetAfter;
+}
+
+export { getHeight, getIndexes, getLastIndex };