@homecode/ui 5.1.9 → 5.1.10

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".TextShimmer_root__cnKtV{-webkit-text-fill-color:transparent;-webkit-font-smoothing:antialiased;--txt-sh-fill:var(--text-shimmer-decent-tone,var(--accent-color));--txt-sh-highlight:var(--text-shimmer-accent-tone,var(--decent-color));animation:TextShimmer_textShimmer__w7rQj 1s linear infinite;animation:TextShimmer_textShimmer__w7rQj var(--text-shimmer-duration,1s) linear infinite;-webkit-background-clip:text;background-clip:text;background-repeat:repeat-x;background-size:200% 100%;color:transparent!important;display:inline-block;position:relative}@keyframes TextShimmer_textShimmer__w7rQj{0%{background-position:100%}to{background-position:-100%}}";
+var S = {"root":"TextShimmer_root__cnKtV","textShimmer":"TextShimmer_textShimmer__w7rQj"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,53 @@
-import{mixColor,colorsConfigToVars}from"./Theme.helpers.js";const pScale=Object.fromEntries(Array.from({length:20},(o,r)=>{r+=1;return["p-"+r,4*r+"px"]})),baseConfig={...pScale,"border-radius-s":"2px","border-radius-m":"4px","border-radius-l":"6px"},colorsAlphaModes=[0,50,100,200,300,400,500,600,700,800,900],colors={light:"#e6e6e6",dark:"#1a1a1a"};function getColors({accent:o=colors.light,decent:r=colors.dark,active:e="#54b62b",warning:s="#ffa31a",danger:l="#da3749",disabled:a="#f1f1f2",link:c="#3089fe"}={}){return{active:{color:e,mods:{alpha:colorsAlphaModes}},warning:{color:s,mods:{alpha:colorsAlphaModes}},danger:{color:l,mods:{alpha:colorsAlphaModes}},accent:{color:o,mods:{alpha:colorsAlphaModes}},decent:{color:r,mods:{alpha:colorsAlphaModes}},disabled:a,link:c,surface:mixColor("string"==typeof r?r:colors.dark,"string"==typeof o?o:colors.light,.12)}}const getConfig=(o={})=>({...colorsConfigToVars(getColors(o.colors)),...baseConfig,...o.rest});export{baseConfig,colors,getColors,getConfig};
-//# sourceMappingURL=Theme.defaults.js.map
+import { mixColor, colorsConfigToVars } from './Theme.helpers.js';
+
+const pScale = Object.fromEntries(Array.from({ length: 20 }, (_, i) => {
+    const n = i + 1;
+    return [`p-${n}`, `${n * 4}px`];
+}));
+const baseConfig = {
+    ...pScale,
+    'border-radius-s': '2px',
+    'border-radius-m': '4px',
+    'border-radius-l': '6px',
+};
+const colorsAlphaModes = [0, 50, 100, 200, 300, 400, 500, 600, 700, 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: colorsAlphaModes /* mix: [['accent', 300]] */ },
+        },
+        warning: {
+            color: warning,
+            mods: { alpha: colorsAlphaModes },
+        },
+        danger: {
+            color: danger,
+            mods: { alpha: colorsAlphaModes },
+        },
+        accent: {
+            color: accent,
+            mods: { alpha: colorsAlphaModes },
+        },
+        decent: {
+            color: decent,
+            mods: { alpha: colorsAlphaModes },
+        },
+        disabled,
+        link,
+        surface: mixColor(typeof decent === 'string' ? decent : colors.dark, typeof accent === 'string' ? accent : colors.light, 0.12),
+    };
+}
+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,15 @@
-import{jsx}from"react/jsx-runtime";import*as Theme_defaults from"./Theme.defaults.js";function buildVar(e,t){return`--${e}: ${t};`}function Theme({config:e={}}){e=Object.entries(e).map(([e,t])=>buildVar(e,t)).join("\n");return jsx("style",{children:`:root {${e}}`})}export{Theme_defaults as ThemeDefaults,Theme};
-//# sourceMappingURL=Theme.js.map
+import { jsx } from 'react/jsx-runtime';
+import * as Theme_defaults from './Theme.defaults.js';
+export { Theme_defaults as ThemeDefaults };
+
+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/Theme/ThemeProvider.js

@@ -1,2 +1,50 @@
-import{jsxs,jsx}from"react/jsx-runtime";import{createContext,useState,useMemo,useCallback,useLayoutEffect,useContext}from"react";import LS from"../../tools/localStorage.js";import{Theme}from"./Theme.js";const ThemeContext=createContext(null);function ThemeProvider({children:e,getThemeConfig:t,initialTheme:o="dark",initialActiveColor:r}){const[s,a]=useState(o),[m,i]=useState(r);var o=useMemo(()=>t(s,m),[s,m,t]),r=useCallback(e=>{a(e),LS.set("theme",e)},[]),u=useCallback(e=>{i(e),"undefined"!=typeof localStorage&&localStorage.setItem("activeColor",e)},[]),l=useCallback(()=>{a(e=>{e="dark"===e?"light":"dark";return LS.set("theme",e),e})},[]),l=(useLayoutEffect(()=>{document.body.classList.toggle("dark","dark"===s)},[s]),{currThemeConfig:o,theme:s,isDarkTheme:"dark"===s,toggleTheme:l,setTheme:r,setActiveColor:u,activeColor:m});return jsxs(ThemeContext.Provider,{value:l,children:[jsx(Theme,{config:o}),e]})}function useTheme(){var e=useContext(ThemeContext);if(e)return e;throw new Error("useTheme must be used within ThemeProvider")}export{ThemeProvider,useTheme};
-//# sourceMappingURL=ThemeProvider.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useMemo, useCallback, useLayoutEffect, useContext } from 'react';
+import LS from '../../tools/localStorage.js';
+import { Theme } from './Theme.js';
+
+const ThemeContext = createContext(null);
+function ThemeProvider({ children, getThemeConfig, initialTheme = 'dark', initialActiveColor, }) {
+    const [theme, setThemeState] = useState(initialTheme);
+    const [activeColor, setActiveColorState] = useState(initialActiveColor);
+    const currThemeConfig = useMemo(() => getThemeConfig(theme, activeColor), [theme, activeColor, getThemeConfig]);
+    const setTheme = useCallback((t) => {
+        setThemeState(t);
+        LS.set('theme', t);
+    }, []);
+    const setActiveColor = useCallback((color) => {
+        setActiveColorState(color);
+        if (typeof localStorage !== 'undefined') {
+            localStorage.setItem('activeColor', color);
+        }
+    }, []);
+    const toggleTheme = useCallback(() => {
+        setThemeState(t => {
+            const next = t === 'dark' ? 'light' : 'dark';
+            LS.set('theme', next);
+            return next;
+        });
+    }, []);
+    useLayoutEffect(() => {
+        document.body.classList.toggle('dark', theme === 'dark');
+    }, [theme]);
+    const value = {
+        currThemeConfig,
+        theme,
+        isDarkTheme: theme === 'dark',
+        toggleTheme,
+        setTheme,
+        setActiveColor,
+        activeColor,
+    };
+    return (jsxs(ThemeContext.Provider, { value: value, children: [jsx(Theme, { config: currThemeConfig }), children] }));
+}
+function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return ctx;
+}
+
+export { ThemeProvider, useTheme };

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

@@ -1,2 +1,18 @@
-import{jsxs,jsx}from"react/jsx-runtime";import cn from"classnames";import{useToggleState}from"../../hooks/useToggleState.js";import S from"./Toggle.styl.js";function Toggle(e){const{className:s,label:o,size:a="m",variant:r="default",error:t,...l}=e;var{checked:n,disabled:i}=l,{id:e,isActive:c,handlers:m}=useToggleState(e),n=cn(S.root,S["size-"+a],S["variant-"+r],n&&S.checked,i&&S.disabled,c&&S.isActive,s);return jsxs("label",{className:n,onPointerDown:m.onPointerDown,onPointerUp:m.onPointerUp,children:[jsxs("div",{className:S.toggleWrapper,children:[jsx("input",{className:S.control,...l,onFocus:m.onFocus,onBlur:m.onBlur,id:e,type:"checkbox",tabIndex:0}),jsx("div",{className:S.track,children:jsx("div",{className:S.thumb})})]}),o&&jsx("span",{className:S.label,children:o})]})}export{Toggle};
-//# sourceMappingURL=Toggle.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useToggleState } from '../../hooks/useToggleState.js';
+import S from './Toggle.styl.js';
+
+function Toggle(props) {
+    const { className, label, size = 'm', variant = 'default', error, ...inputProps } = props;
+    const { checked, disabled } = inputProps;
+    const { id, isActive, isFocused, handlers } = useToggleState(props);
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, 
+    // error && S.hasError,
+    isActive && S.isActive, 
+    // isFocused && S.isFocused,
+    className);
+    return (jsxs("label", { className: classes, onPointerDown: handlers.onPointerDown, onPointerUp: handlers.onPointerUp, children: [jsxs("div", { className: S.toggleWrapper, children: [jsx("input", { className: S.control, ...inputProps, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: id, type: "checkbox", tabIndex: 0 }), jsx("div", { className: S.track, children: jsx("div", { className: S.thumb }) })] }), label && jsx("span", { className: S.label, children: label })] }));
+}
+
+export { Toggle };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".Toggle_root__oTmAc{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;gap:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Toggle_disabled__tFhaN{opacity:.4;pointer-events:none}.Toggle_toggleWrapper__CAd-a{display:block;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.Toggle_control__umhAB{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;opacity:0;pointer-events:none;position:absolute;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity}.Toggle_control__umhAB:focus,.Toggle_control__umhAB:hover{background-color:var(--active-color-alpha-100)}.Toggle_control__umhAB[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Toggle_track__8HXVK{background-color:var(--accent-color-alpha-100);border-radius:100px;cursor:pointer;padding:2px;position:relative;transition:.3s ease-out;transition-property:background-color,border-color}.Toggle_checked__E4mPh .Toggle_track__8HXVK{background-color:var(--active-color)}.Toggle_isActive__Rx-Bv .Toggle_track__8HXVK,.Toggle_isFocused__LIHbP .Toggle_track__8HXVK{background-color:var(--active-color-alpha-500)}.Toggle_thumb__MrfWx{background-color:var(--accent-color-alpha-900);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);opacity:.9;transition:.2s ease-out;transition-property:transform,opacity}.Toggle_isActive__Rx-Bv .Toggle_thumb__MrfWx,.Toggle_root__oTmAc:hover .Toggle_thumb__MrfWx{opacity:1}.Toggle_label__eLVN-{font-size:inherit;line-height:inherit}.Toggle_size-xs__H0cAG{--size:16.8px;font-size:14px}.Toggle_size-s__NZkE5{--size:22.4px;font-size:16px}.Toggle_size-m__c2T-w{--size:28px;font-size:18px}.Toggle_size-l__LhLRR{--size:33.6px;font-size:22px}.Toggle_size-xl__SAI-S{--size:39.2px;font-size:26px}.Toggle_track__8HXVK{height:var(--size);width:calc(var(--size)*1.7)}.Toggle_thumb__MrfWx{height:calc(var(--size) - 4px);width:calc(var(--size) - 4px)}.Toggle_checked__E4mPh .Toggle_thumb__MrfWx{transform:translateX(calc(var(--size)*.7))}",S={root:"Toggle_root__oTmAc",disabled:"Toggle_disabled__tFhaN",toggleWrapper:"Toggle_toggleWrapper__CAd-a",control:"Toggle_control__umhAB",track:"Toggle_track__8HXVK",checked:"Toggle_checked__E4mPh",isActive:"Toggle_isActive__Rx-Bv",isFocused:"Toggle_isFocused__LIHbP",thumb:"Toggle_thumb__MrfWx",label:"Toggle_label__eLVN-","size-xs":"Toggle_size-xs__H0cAG","size-s":"Toggle_size-s__NZkE5","size-m":"Toggle_size-m__c2T-w","size-l":"Toggle_size-l__LhLRR","size-xl":"Toggle_size-xl__SAI-S"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Toggle.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Toggle_root__oTmAc{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;gap:.5em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Toggle_disabled__tFhaN{opacity:.4;pointer-events:none}.Toggle_toggleWrapper__CAd-a{display:block;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.Toggle_control__umhAB{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;opacity:0;pointer-events:none;position:absolute;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity}.Toggle_control__umhAB:focus,.Toggle_control__umhAB:hover{background-color:var(--active-color-alpha-100)}.Toggle_control__umhAB[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Toggle_track__8HXVK{background-color:var(--accent-color-alpha-100);border-radius:100px;cursor:pointer;padding:2px;position:relative;transition:.3s ease-out;transition-property:background-color,border-color}.Toggle_checked__E4mPh .Toggle_track__8HXVK{background-color:var(--active-color)}.Toggle_isActive__Rx-Bv .Toggle_track__8HXVK,.Toggle_isFocused__LIHbP .Toggle_track__8HXVK{background-color:var(--active-color-alpha-500)}.Toggle_thumb__MrfWx{background-color:var(--accent-color-alpha-900);border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);opacity:.9;transition:.2s ease-out;transition-property:transform,opacity}.Toggle_isActive__Rx-Bv .Toggle_thumb__MrfWx,.Toggle_root__oTmAc:hover .Toggle_thumb__MrfWx{opacity:1}.Toggle_label__eLVN-{font-size:inherit;line-height:inherit}.Toggle_size-xs__H0cAG{--size:16.8px;font-size:14px}.Toggle_size-s__NZkE5{--size:22.4px;font-size:16px}.Toggle_size-m__c2T-w{--size:28px;font-size:18px}.Toggle_size-l__LhLRR{--size:33.6px;font-size:22px}.Toggle_size-xl__SAI-S{--size:39.2px;font-size:26px}.Toggle_track__8HXVK{height:var(--size);width:calc(var(--size)*1.7)}.Toggle_thumb__MrfWx{height:calc(var(--size) - 4px);width:calc(var(--size) - 4px)}.Toggle_checked__E4mPh .Toggle_thumb__MrfWx{transform:translateX(calc(var(--size)*.7))}";
+var S = {"root":"Toggle_root__oTmAc","disabled":"Toggle_disabled__tFhaN","toggleWrapper":"Toggle_toggleWrapper__CAd-a","control":"Toggle_control__umhAB","track":"Toggle_track__8HXVK","checked":"Toggle_checked__E4mPh","isActive":"Toggle_isActive__Rx-Bv","isFocused":"Toggle_isFocused__LIHbP","thumb":"Toggle_thumb__MrfWx","label":"Toggle_label__eLVN-","size-xs":"Toggle_size-xs__H0cAG","size-s":"Toggle_size-s__NZkE5","size-m":"Toggle_size-m__c2T-w","size-l":"Toggle_size-l__LhLRR","size-xl":"Toggle_size-xl__SAI-S"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,86 @@
-import{jsx,Fragment,jsxs}from"react/jsx-runtime";import{useRef,useEffect}from"react";import S from"./Tooltip.styl.js";import cn from"classnames";const TooltipBase=({className:e,contentClassName:t,children:n,content:r,delay:s=0,direction:a="top",blur:i=!1})=>{const l=useRef(null),c=useRef(null),d=useRef();return useEffect(()=>{const i=l.current,o=c.current;if(i&&o){const e=()=>{var e=i.getBoundingClientRect(),t=o.getBoundingClientRect();let n=0,r=0;switch(a){case"top":n=e.top-t.height-8,r=e.left+e.width/2-t.width/2;break;case"bottom":n=e.bottom+8,r=e.left+e.width/2-t.width/2;break;case"left":n=e.top+e.height/2-t.height/2,r=e.left-t.width-8;break;case"right":n=e.top+e.height/2-t.height/2,r=e.right+8}r=Math.max(10,Math.min(r,window.innerWidth-t.width-10)),n=Math.max(10,Math.min(n,window.innerHeight-t.height-10)),o.style.left=r+"px",o.style.top=n+"px"},t=()=>{d.current=window.setTimeout(()=>{o.showPopover?.(),e()},s)},n=()=>{clearTimeout(d.current),o.hidePopover?.()};return i.addEventListener("mouseenter",t),i.addEventListener("mouseleave",n),i.addEventListener("focus",t),i.addEventListener("blur",n),()=>{clearTimeout(d.current),i.removeEventListener("mouseenter",t),i.removeEventListener("mouseleave",n),i.removeEventListener("focus",t),i.removeEventListener("blur",n)}}},[r,s,a]),jsxs(Fragment,{children:[jsx("div",{ref:l,className:cn(S.trigger,e),children:n}),jsx("div",{ref:c,popover:"manual",className:cn(S.tooltip,i&&S.blur,t),"data-direction":a,children:r})]})},Tooltip=({className:e,contentClassName:t,children:n,content:r,delay:i=0,direction:o="top",blur:s=!1,disabled:a=!1})=>a||!r?jsx(Fragment,{children:n}):jsx(TooltipBase,{className:e,contentClassName:t,children:n,content:r,delay:i,direction:o,blur:s});export{Tooltip};
-//# sourceMappingURL=Tooltip.js.map
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import S from './Tooltip.styl.js';
+import cn from 'classnames';
+
+/**
+ * TooltipBase component contains the core tooltip functionality including:
+ * - Positioning logic that calculates optimal tooltip placement based on direction
+ * - Event handlers for mouse and keyboard interactions (hover, focus)
+ * - Viewport boundary detection to keep tooltips visible
+ * - Delay handling for show/hide animations
+ * - Popover API integration for native browser tooltip behavior
+ *
+ * This component should only be used when the tooltip is enabled and has content.
+ * For disabled tooltips, use the main Tooltip component which returns early.
+ */
+const TooltipBase = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, }) => {
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef();
+    useEffect(() => {
+        const trigger = triggerRef.current;
+        const tooltip = tooltipRef.current;
+        if (!trigger || !tooltip)
+            return;
+        const positionTooltip = () => {
+            const rect = trigger.getBoundingClientRect();
+            const tooltipRect = tooltip.getBoundingClientRect();
+            let top = 0;
+            let left = 0;
+            switch (direction) {
+                case 'top':
+                    top = rect.top - tooltipRect.height - 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'bottom':
+                    top = rect.bottom + 8;
+                    left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+                    break;
+                case 'left':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.left - tooltipRect.width - 8;
+                    break;
+                case 'right':
+                    top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+                    left = rect.right + 8;
+                    break;
+            }
+            // Ensure tooltip stays within viewport
+            const padding = 10;
+            left = Math.max(padding, Math.min(left, window.innerWidth - tooltipRect.width - padding));
+            top = Math.max(padding, Math.min(top, window.innerHeight - tooltipRect.height - padding));
+            tooltip.style.left = `${left}px`;
+            tooltip.style.top = `${top}px`;
+        };
+        const showTooltip = () => {
+            timeoutRef.current = window.setTimeout(() => {
+                tooltip.showPopover?.();
+                positionTooltip();
+            }, delay);
+        };
+        const hideTooltip = () => {
+            clearTimeout(timeoutRef.current);
+            tooltip.hidePopover?.();
+        };
+        trigger.addEventListener('mouseenter', showTooltip);
+        trigger.addEventListener('mouseleave', hideTooltip);
+        trigger.addEventListener('focus', showTooltip);
+        trigger.addEventListener('blur', hideTooltip);
+        return () => {
+            clearTimeout(timeoutRef.current);
+            trigger.removeEventListener('mouseenter', showTooltip);
+            trigger.removeEventListener('mouseleave', hideTooltip);
+            trigger.removeEventListener('focus', showTooltip);
+            trigger.removeEventListener('blur', hideTooltip);
+        };
+    }, [content, delay, direction]);
+    return (jsxs(Fragment, { children: [jsx("div", { ref: triggerRef, className: cn(S.trigger, className), children: children }), jsx("div", { ref: tooltipRef, popover: "manual", className: cn(S.tooltip, blur && S.blur, contentClassName), "data-direction": direction, children: content })] }));
+};
+const Tooltip = ({ className, contentClassName, children, content, delay = 0, direction = 'top', blur = false, disabled = false, }) => {
+    if (disabled || !content)
+        return jsx(Fragment, { children: children });
+    return (jsx(TooltipBase, { className: className, contentClassName: contentClassName, children: children, content: content, delay: delay, direction: direction, blur: blur }));
+};
+
+export { Tooltip };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:"";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}',S={trigger:"Tooltip_trigger__9GSNV",tooltip:"Tooltip_tooltip__tzL8q",blur:"Tooltip_blur__SQYHW",fadeIn:"Tooltip_fadeIn__Buhx4"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Tooltip.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
+var S = {"trigger":"Tooltip_trigger__9GSNV","tooltip":"Tooltip_tooltip__tzL8q","blur":"Tooltip_blur__SQYHW","fadeIn":"Tooltip_fadeIn__Buhx4"};
+styleInject(css_248z);
+
+export { S as default };

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,136 @@
-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,this.forceUpdate()))};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";if(n){m=n.component,Object.assign(r,n?.props);const c=r.onInnerRef;r.onInnerRef=e=>{e&&(this.wrapElem=e,this.store.hasWrap||(this.store.hasWrap=!0),this.forceUpdate()),c?.(e)}}return 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;
+            this.forceUpdate();
+        }
+    };
+    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);
+            const prevOnInnerRef = props.onInnerRef;
+            props.onInnerRef = (el) => {
+                if (el) {
+                    this.wrapElem = el;
+                    if (!this.store.hasWrap)
+                        this.store.hasWrap = true;
+                    this.forceUpdate();
+                }
+                prevOnInnerRef?.(el);
+            };
+        }
+        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,22 @@
-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.innerClassName),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, scrollProps.innerClassName);
+    const props = {
+        ...scrollProps,
+        innerClassName,
+    };
+    return (jsx(List, { ...rest, customWrapElem: {
+            // @ts-ignore
+            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 };