@homecode/ui 5.1.9 → 5.1.11

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

@@ -1,2 +1,23 @@
-import{jsxs,jsx}from"react/jsx-runtime";import cn from"classnames";import{calculateProgress}from"../Progress/Progress.helpers.js";import S from"./ProgressCircular.styl.js";const SIZE_MAP={xs:14,s:20,m:30,l:60,xl:120};function ProgressCircular({value:r,showPercentage:s,size:e="m",strokeWidth:o,className:t}){var a=calculateProgress(r),e=SIZE_MAP[e],o=o??e/10,c=(e-o)/2,i=2*Math.PI*c,l=i-a/100*i;return jsxs("svg",{width:e,height:e,viewBox:`0 0 ${e} `+e,className:cn(S.root,0<r&&S.animated,t),children:[jsx("circle",{className:S.background,cx:e/2,cy:e/2,r:c,fill:"none",strokeWidth:o}),jsx("circle",{cx:e/2,cy:e/2,r:c,fill:"none",stroke:"var(--active-color)",strokeWidth:o,strokeLinecap:"round",strokeDasharray:i,strokeDashoffset:l,transform:`rotate(-90 ${e/2} ${e/2})`,className:S.progress}),s&&jsxs("text",{x:"50%",y:"50%",textAnchor:"middle",dominantBaseline:"middle",fontSize:"16",fontWeight:"bold",children:[Math.round(a),"%"]})]})}export{ProgressCircular};
-//# sourceMappingURL=ProgressCircular.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { calculateProgress } from '../Progress/Progress.helpers.js';
+import S from './ProgressCircular.styl.js';
+
+const SIZE_MAP = {
+    xs: 14,
+    s: 20,
+    m: 30,
+    l: 60,
+    xl: 120,
+};
+function ProgressCircular({ value, showPercentage, size = 'm', strokeWidth, className, }) {
+    const progress = calculateProgress(value);
+    const pixelSize = SIZE_MAP[size];
+    const calculatedStrokeWidth = strokeWidth ?? pixelSize / 10;
+    const radius = (pixelSize - calculatedStrokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = circumference - (progress / 100) * circumference;
+    return (jsxs("svg", { width: pixelSize, height: pixelSize, viewBox: `0 0 ${pixelSize} ${pixelSize}`, className: cn(S.root, value > 0 && S.animated, className), children: [jsx("circle", { className: S.background, cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", strokeWidth: calculatedStrokeWidth }), jsx("circle", { cx: pixelSize / 2, cy: pixelSize / 2, r: radius, fill: "none", stroke: "var(--active-color)", strokeWidth: calculatedStrokeWidth, strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, transform: `rotate(-90 ${pixelSize / 2} ${pixelSize / 2})`, className: S.progress }), showPercentage && (jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", fontSize: "16", fontWeight: "bold", children: [Math.round(progress), "%"] }))] }));
+}
+
+export { ProgressCircular };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".ProgressCircular_root__z7xBm .ProgressCircular_background__Rlqcq{stroke:var(--accent-color-alpha-100)}.ProgressCircular_root__z7xBm.ProgressCircular_animated__w3Bpf .ProgressCircular_progress__QVG7n{transition:stroke-dashoffset .3s ease-in-out}.ProgressCircular_root__z7xBm text{fill:var(--accent-color)}",S={root:"ProgressCircular_root__z7xBm",background:"ProgressCircular_background__Rlqcq",animated:"ProgressCircular_animated__w3Bpf",progress:"ProgressCircular_progress__QVG7n"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=ProgressCircular.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".ProgressCircular_root__z7xBm .ProgressCircular_background__Rlqcq{stroke:var(--accent-color-alpha-100)}.ProgressCircular_root__z7xBm.ProgressCircular_animated__w3Bpf .ProgressCircular_progress__QVG7n{transition:stroke-dashoffset .3s ease-in-out}.ProgressCircular_root__z7xBm text{fill:var(--accent-color)}";
+var S = {"root":"ProgressCircular_root__z7xBm","background":"ProgressCircular_background__Rlqcq","animated":"ProgressCircular_animated__w3Bpf","progress":"ProgressCircular_progress__QVG7n"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,33 @@
-import{jsxs,jsx}from"react/jsx-runtime";import cn from"classnames";import"react";import"timen";import{useToggleState}from"../../hooks/useToggleState.js";import{useRadioGroup}from"../RadioGroup/RadioGroupContext.js";import S from"./RadioButton.styl.js";const RadioButton=({className:o,label:e="",size:a,variant:s,error:n,value:r,checked:i,disabled:t,name:d,onChange:l,id:c,onFocus:u,onBlur:m,...p})=>{const h=useRadioGroup();var a=a??h?.size??"m",s=s??h?.variant??"default",n=n??h?.error,t=Boolean(t||h?.disabled),d=h?h.name:d,i=h?void 0!==h.value&&h.value===r:Boolean(i),{id:c,isActive:u,isFocused:m,handlers:v}=useToggleState({id:c,onFocus:u,onBlur:m}),a=cn(S.root,S["size-"+a],S["variant-"+s],i&&S.checked,t&&S.disabled,n&&S.hasError,u&&S.isActive,m&&S.isFocused,o);return jsxs("label",{className:a,onPointerDown:v.onPointerDown,onPointerUp:v.onPointerUp,children:[jsxs("div",{className:S.controlWrapper,children:[jsx("input",{className:S.control,...p,onChange:o=>{h&&h.onChange(r),l?.(o)},onFocus:v.onFocus,onBlur:v.onBlur,id:c,type:"radio",name:d,value:String(r),checked:i,disabled:t,tabIndex:0}),jsx("span",{className:S.dot,"aria-hidden":!0})]}),e]})};export{RadioButton};
-//# sourceMappingURL=RadioButton.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import 'react';
+import 'timen';
+import { useToggleState } from '../../hooks/useToggleState.js';
+import { useRadioGroup } from '../RadioGroup/RadioGroupContext.js';
+import S from './RadioButton.styl.js';
+
+const RadioButton = ({ className, label = '', size: sizeProp, variant: variantProp, error: errorProp, value, checked: checkedProp, disabled: disabledProp, name: nameProp, onChange, id, onFocus, onBlur, ...props }) => {
+    const group = useRadioGroup();
+    const size = sizeProp ?? group?.size ?? 'm';
+    const variant = variantProp ?? group?.variant ?? 'default';
+    const error = errorProp ?? group?.error;
+    const disabled = Boolean(disabledProp || group?.disabled);
+    const name = group ? group.name : nameProp;
+    const checked = group
+        ? group.value !== undefined && group.value === value
+        : Boolean(checkedProp);
+    const { id: componentId, isActive, isFocused, handlers, } = useToggleState({
+        id,
+        onFocus,
+        onBlur,
+    });
+    const handleChange = (e) => {
+        if (group)
+            group.onChange(value);
+        onChange?.(e);
+    };
+    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.controlWrapper, children: [jsx("input", { className: S.control, ...props, onChange: handleChange, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: componentId, type: "radio", name: name, value: String(value), checked: checked, disabled: disabled, tabIndex: 0 }), jsx("span", { className: S.dot, "aria-hidden": true })] }), label] }));
+};
+
+export { RadioButton };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".RadioButton_root__-zReK{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.RadioButton_disabled__OuVm5{opacity:.4;pointer-events:none}.RadioButton_controlWrapper__xtZkJ{display:block;margin-right:1em;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.RadioButton_variant-default__r2D0X .RadioButton_controlWrapper__xtZkJ{background-color:var(--accent-color-alpha-100)}.RadioButton_variant-outlined__ZE2em .RadioButton_controlWrapper__xtZkJ{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.RadioButton_root__-zReK:hover .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100)}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ,.RadioButton_isFocused__pQaTx .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--active-color)!important}.RadioButton_hasError__SFhRz .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--danger-color)!important}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100);opacity:.7}.RadioButton_control__RLcpz{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;transition:.1s ease-out;transition-property:background-color,color}.RadioButton_control__RLcpz:focus,.RadioButton_control__RLcpz:hover{background-color:var(--active-color-alpha-100)}.RadioButton_control__RLcpz[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.RadioButton_dot__m6MWL{background-color:var(--active-color);border-radius:50%;height:42%;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.4);transition:.1s ease-in;transition-property:transform,opacity;width:42%}.RadioButton_checked__X45GC .RadioButton_dot__m6MWL{opacity:1;transform:translate(-50%,-50%) scale(1.8)}.RadioButton_size-xs__gBuwV{font-size:14px}.RadioButton_size-xs__gBuwV .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:12px;min-height:24px;min-width:24px}.RadioButton_size-s__2fKr7{font-size:16px}.RadioButton_size-s__2fKr7 .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:16px;min-height:32px;min-width:32px}.RadioButton_size-m__cQ-gf{font-size:18px}.RadioButton_size-m__cQ-gf .RadioButton_controlWrapper__xtZkJ{border-radius:6px;border-radius:20px;min-height:40px;min-width:40px}.RadioButton_size-l__h3Alz{font-size:22px}.RadioButton_size-l__h3Alz .RadioButton_controlWrapper__xtZkJ{border-radius:8px;border-radius:24px;min-height:48px;min-width:48px}.RadioButton_size-xl__evU9a{font-size:26px}.RadioButton_size-xl__evU9a .RadioButton_controlWrapper__xtZkJ{border-radius:10px;border-radius:28px;min-height:56px;min-width:56px}",S={root:"RadioButton_root__-zReK",disabled:"RadioButton_disabled__OuVm5",controlWrapper:"RadioButton_controlWrapper__xtZkJ","variant-default":"RadioButton_variant-default__r2D0X","variant-outlined":"RadioButton_variant-outlined__ZE2em",isActive:"RadioButton_isActive__hAdvm",isFocused:"RadioButton_isFocused__pQaTx",hasError:"RadioButton_hasError__SFhRz",control:"RadioButton_control__RLcpz",dot:"RadioButton_dot__m6MWL",checked:"RadioButton_checked__X45GC","size-xs":"RadioButton_size-xs__gBuwV","size-s":"RadioButton_size-s__2fKr7","size-m":"RadioButton_size-m__cQ-gf","size-l":"RadioButton_size-l__h3Alz","size-xl":"RadioButton_size-xl__evU9a"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=RadioButton.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioButton_root__-zReK{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.RadioButton_disabled__OuVm5{opacity:.4;pointer-events:none}.RadioButton_controlWrapper__xtZkJ{display:block;margin-right:1em;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.RadioButton_variant-default__r2D0X .RadioButton_controlWrapper__xtZkJ{background-color:var(--accent-color-alpha-100)}.RadioButton_variant-outlined__ZE2em .RadioButton_controlWrapper__xtZkJ{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.RadioButton_root__-zReK:hover .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100)}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ,.RadioButton_isFocused__pQaTx .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--active-color)!important}.RadioButton_hasError__SFhRz .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--danger-color)!important}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100);opacity:.7}.RadioButton_control__RLcpz{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;transition:.1s ease-out;transition-property:background-color,color}.RadioButton_control__RLcpz:focus,.RadioButton_control__RLcpz:hover{background-color:var(--active-color-alpha-100)}.RadioButton_control__RLcpz[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.RadioButton_dot__m6MWL{background-color:var(--active-color);border-radius:50%;height:42%;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.4);transition:.1s ease-in;transition-property:transform,opacity;width:42%}.RadioButton_checked__X45GC .RadioButton_dot__m6MWL{opacity:1;transform:translate(-50%,-50%) scale(1.8)}.RadioButton_size-xs__gBuwV{font-size:14px}.RadioButton_size-xs__gBuwV .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:12px;min-height:24px;min-width:24px}.RadioButton_size-s__2fKr7{font-size:16px}.RadioButton_size-s__2fKr7 .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:16px;min-height:32px;min-width:32px}.RadioButton_size-m__cQ-gf{font-size:18px}.RadioButton_size-m__cQ-gf .RadioButton_controlWrapper__xtZkJ{border-radius:6px;border-radius:20px;min-height:40px;min-width:40px}.RadioButton_size-l__h3Alz{font-size:22px}.RadioButton_size-l__h3Alz .RadioButton_controlWrapper__xtZkJ{border-radius:8px;border-radius:24px;min-height:48px;min-width:48px}.RadioButton_size-xl__evU9a{font-size:26px}.RadioButton_size-xl__evU9a .RadioButton_controlWrapper__xtZkJ{border-radius:10px;border-radius:28px;min-height:56px;min-width:56px}";
+var S = {"root":"RadioButton_root__-zReK","disabled":"RadioButton_disabled__OuVm5","controlWrapper":"RadioButton_controlWrapper__xtZkJ","variant-default":"RadioButton_variant-default__r2D0X","variant-outlined":"RadioButton_variant-outlined__ZE2em","isActive":"RadioButton_isActive__hAdvm","isFocused":"RadioButton_isFocused__pQaTx","hasError":"RadioButton_hasError__SFhRz","control":"RadioButton_control__RLcpz","dot":"RadioButton_dot__m6MWL","checked":"RadioButton_checked__X45GC","size-xs":"RadioButton_size-xs__gBuwV","size-s":"RadioButton_size-s__2fKr7","size-m":"RadioButton_size-m__cQ-gf","size-l":"RadioButton_size-l__h3Alz","size-xl":"RadioButton_size-xl__evU9a"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,31 @@
-import{jsx,jsxs}from"react/jsx-runtime";import{useId,useState,useCallback,useMemo}from"react";import cn from"classnames";import{RadioGroupContext}from"./RadioGroupContext.js";import S from"./RadioGroup.styl.js";const RadioGroup=({className:e,children:a,label:r,value:o,defaultValue:s,onChange:i,name:l,size:t="m",variant:n="default",error:d,disabled:u,orientation:c="vertical",...m})=>{var p=useId();const x=l??"radio"+p.replace(/:/g,""),[v,h]=useState(s),j=void 0!==o,f=j?o:v,C=useCallback(e=>{j||h(e),i?.(e)},[j,i]);l=useMemo(()=>({name:x,value:f,onChange:C,size:t,variant:n,error:d,disabled:u}),[x,f,C,t,n,d,u]),p=jsx("div",{className:cn(S.inner,"horizontal"===c&&S.horizontal),children:jsx(RadioGroupContext.Provider,{value:l,children:a})});return jsxs("fieldset",{className:cn(S.root,e),disabled:u,...m,children:[null!=r&&""!==r&&jsx("legend",{className:S.legend,children:r}),p]})};export{RadioGroup};
-//# sourceMappingURL=RadioGroup.js.map
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useCallback, useMemo } from 'react';
+import cn from 'classnames';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import S from './RadioGroup.styl.js';
+
+const RadioGroup = ({ className, children, label, value, defaultValue, onChange, name: nameProp, size = 'm', variant = 'default', error, disabled, orientation = 'vertical', ...rest }) => {
+    const reactId = useId();
+    const name = nameProp ?? `radio${reactId.replace(/:/g, '')}`;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : uncontrolled;
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        name,
+        value: selectedValue,
+        onChange: setValue,
+        size,
+        variant,
+        error,
+        disabled,
+    }), [name, selectedValue, setValue, size, variant, error, disabled]);
+    const inner = (jsx("div", { className: cn(S.inner, orientation === 'horizontal' && S.horizontal), children: jsx(RadioGroupContext.Provider, { value: contextValue, children: children }) }));
+    return (jsxs("fieldset", { className: cn(S.root, className), disabled: disabled, ...rest, children: [label != null && label !== '' && (jsx("legend", { className: S.legend, children: label })), inner] }));
+};
+
+export { RadioGroup };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".RadioGroup_root__f0yTC{border:none;margin:0;min-width:0;padding:0}.RadioGroup_legend__Fq1Yg{margin:0 0 .5em;padding:0}.RadioGroup_inner__GZ2--{align-items:flex-start;display:flex;flex-direction:column;gap:.5em}.RadioGroup_inner__GZ2--.RadioGroup_horizontal__72oyb{align-items:center;flex-direction:row;flex-wrap:wrap}",S={root:"RadioGroup_root__f0yTC",legend:"RadioGroup_legend__Fq1Yg",inner:"RadioGroup_inner__GZ2--",horizontal:"RadioGroup_horizontal__72oyb"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=RadioGroup.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioGroup_root__f0yTC{border:none;margin:0;min-width:0;padding:0}.RadioGroup_legend__Fq1Yg{margin:0 0 .5em;padding:0}.RadioGroup_inner__GZ2--{align-items:flex-start;display:flex;flex-direction:column;gap:.5em}.RadioGroup_inner__GZ2--.RadioGroup_horizontal__72oyb{align-items:center;flex-direction:row;flex-wrap:wrap}";
+var S = {"root":"RadioGroup_root__f0yTC","legend":"RadioGroup_legend__Fq1Yg","inner":"RadioGroup_inner__GZ2--","horizontal":"RadioGroup_horizontal__72oyb"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/RadioGroup/RadioGroupContext.js

@@ -1,2 +1,8 @@
-import{createContext,useContext}from"react";const RadioGroupContext=createContext(null);function useRadioGroup(){return useContext(RadioGroupContext)}export{RadioGroupContext,useRadioGroup};
-//# sourceMappingURL=RadioGroupContext.js.map
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext(null);
+function useRadioGroup() {
+    return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext, useRadioGroup };

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

@@ -1,2 +1,12 @@
-import{jsx}from"react/jsx-runtime";import cn from"classnames";import{Icon}from"../Icon/Icon.js";import S from"./RequiredStar.styl.js";function RequiredStar(r){const{className:e,inline:o,...t}=r;r=cn(S.root,e,o&&S.inline);return jsx(Icon,{...t,type:"requiredStar",className:r})}export{RequiredStar};
-//# sourceMappingURL=RequiredStar.js.map
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import S from './RequiredStar.styl.js';
+
+function RequiredStar(props) {
+    const { className, inline, ...rest } = props;
+    const classes = cn(S.root, className, inline && S.inline);
+    return jsx(Icon, { ...rest, type: "requiredStar", className: classes });
+}
+
+export { RequiredStar };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z=".RequiredStar_root__qZpQW{color:var(--danger-color)!important;pointer-events:none;position:absolute;right:2px;top:2px;transform:scale(.6)}.RequiredStar_inline__328Ou{position:relative;transform:translateY(-.5em)}",S={root:"RequiredStar_root__qZpQW",inline:"RequiredStar_inline__328Ou"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=RequiredStar.styl.js.map
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RequiredStar_root__qZpQW{color:var(--danger-color)!important;pointer-events:none;position:absolute;right:2px;top:2px;transform:scale(.6)}.RequiredStar_inline__328Ou{position:relative;transform:translateY(-.5em)}";
+var S = {"root":"RequiredStar_root__qZpQW","inline":"RequiredStar_inline__328Ou"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,62 @@
-import{jsxs,jsx}from"react/jsx-runtime";import{useRef,useContext,useMemo,useCallback}from"react";import{useStore}from"justorm/react";import cn from"classnames";import{Icon}from"../../Icon/Icon.js";import Context from"../context.js";import S from"./Link.styl.js";const isStartFromDoubleSlash=e=>/^\/\//.test(e),Link=({className:e,exactClassName:t,children:r,href:s,isClear:a=!1,isDisabled:o=!1,disableExternalIcon:n=!1,inline:l=!1,isPartialExact:c=!1,onClick:i,...m})=>{const u=useStore({router:["path"]})["router"],p=u["path"],x=isStartFromDoubleSlash(s),f=useRef(null),h=useContext(Context)["basePath"],b=useMemo(()=>/\./.test(s),[s]),k=useMemo(()=>b||x?"":h??"",[b,x,h]),C=useMemo(()=>{let e=s;return"/"===(e=x?e.replace(/^\//,""):e)&&(e=""),""+k+e},[s,k]);var j=useCallback(e=>{i?.(e,C),b||u.path===C||(e.preventDefault(),e.ctrlKey||e.metaKey?window.open(C,"_blank"):u.go(C),f.current?.blur())},[C,b,i]),d=useMemo(()=>c?p.startsWith(C):p===C,[p,C,c]),m={...m,href:C},I=!/^\//.test(C)&&!b,o=cn(S.root,o&&S.disabled,b&&S.external,d&&cn(S.exact,t),a&&S.clear,l&&S.inline,e);return I&&(m.href=p.replace(/\/$/,"")+"/"+C),b&&(m.target="_blank",/^http/.test(C)||(m.href="http://"+C)),jsxs("a",{className:o,...m,onClick:j,ref:f,children:[r,b&&!n&&jsx(Icon,{type:"externalLink",className:S.externalIcon})]})};export{Link};
-//# sourceMappingURL=Link.js.map
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useContext, useMemo, useCallback } from 'react';
+import { useStore } from 'justorm/react';
+import cn from 'classnames';
+import { Icon } from '../../Icon/Icon.js';
+import Context from '../context.js';
+import S from './Link.styl.js';
+
+const isStartFromDoubleSlash = href => /^\/\//.test(href);
+const Link = ({ className, exactClassName, children, href: hrefProp, isClear = false, isDisabled = false, disableExternalIcon = false, inline = false, isPartialExact = false, onClick, ...rest }) => {
+    const { router } = useStore({ router: ['path'] });
+    const { path } = router;
+    const isFromRoot = isStartFromDoubleSlash(hrefProp);
+    const domElem = useRef(null);
+    const { basePath } = useContext(Context);
+    const isExternal = useMemo(() => /\./.test(hrefProp), [hrefProp]);
+    const rootPath = useMemo(() => {
+        if (isExternal || isFromRoot)
+            return '';
+        return basePath ?? '';
+    }, [isExternal, isFromRoot, basePath]);
+    const href = useMemo(() => {
+        let str = hrefProp;
+        if (isFromRoot)
+            str = str.replace(/^\//, '');
+        if (str === '/')
+            str = '';
+        return `${rootPath}${str}`;
+    }, [hrefProp, rootPath]);
+    const handleClick = useCallback(e => {
+        onClick?.(e, href);
+        if (!isExternal && router.path !== href) {
+            e.preventDefault();
+            if (e.ctrlKey || e.metaKey) {
+                window.open(href, '_blank');
+            }
+            else {
+                router.go(href);
+            }
+            domElem.current?.blur();
+        }
+    }, [href, isExternal, onClick]);
+    const isExact = useMemo(() => {
+        if (isPartialExact)
+            return path.startsWith(href);
+        return path === href;
+    }, [path, href, isPartialExact]);
+    const props = { ...rest, href };
+    const isNested = !/^\//.test(href) && !isExternal;
+    const classes = cn(S.root, isDisabled && S.disabled, isExternal && S.external, isExact && cn(S.exact, exactClassName), isClear && S.clear, inline && S.inline, className);
+    if (isNested) {
+        props.href = `${path.replace(/\/$/, '')}/${href}`;
+    }
+    if (isExternal) {
+        props.target = '_blank';
+        if (!/^http/.test(href))
+            props.href = `http://${href}`;
+    }
+    return (jsxs("a", { className: classes, ...props, onClick: handleClick, ref: domElem, children: [children, isExternal && !disableExternalIcon && (jsx(Icon, { type: "externalLink", className: S.externalIcon }))] }));
+};
+
+export { Link };

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

@@ -1,2 +1,7 @@
-import styleInject from"../../../../node_modules/style-inject/dist/style-inject.es.js";var css_248z='.Link_root__KhBI1{align-items:center;box-shadow:inset 0 0 0 2px none;color:var(--link-color);cursor:pointer;display:inline-flex;padding:5px;position:relative;text-decoration:none;transition:color .1s ease-out;white-space:nowrap}.Link_root__KhBI1:before{background-color:var(--accent-color);bottom:0;content:"";height:2px;left:5px;pointer-events:none;position:absolute;right:5px;transform:scale(0);transition:transform .1s ease-out}.Link_root__KhBI1.Link_clear__abVgJ:before{content:none}.Link_root__KhBI1.Link_inline__iuNov{padding:0}.Link_root__KhBI1.Link_inline__iuNov:before{bottom:-2px;left:0;right:0}.Link_root__KhBI1.Link_exact__3MNoz{color:var(--accent-color);pointer-events:none}.Link_root__KhBI1.Link_external__drijI:before{background-color:var(--active-color)}.Link_root__KhBI1:active,.Link_root__KhBI1:focus,.Link_root__KhBI1:hover{color:var(--accent-color)}.Link_root__KhBI1:active.Link_external__drijI,.Link_root__KhBI1:focus.Link_external__drijI,.Link_root__KhBI1:hover.Link_external__drijI{color:var(--active-color)}.Link_root__KhBI1:active::-moz-selection,.Link_root__KhBI1:focus::-moz-selection,.Link_root__KhBI1:hover::-moz-selection{color:var(--accent-color)}.Link_root__KhBI1:active::selection,.Link_root__KhBI1:focus::selection,.Link_root__KhBI1:hover::selection{color:var(--accent-color)}.Link_root__KhBI1:active:before,.Link_root__KhBI1:focus:before,.Link_root__KhBI1:hover:before{transform:scale(1)}.Link_root__KhBI1.Link_disabled__wkAeH{color:var(--accent-color);opacity:.4;pointer-events:none}.Link_externalIcon__YDRJG{display:inline-block;height:1em;margin-bottom:-2px;margin-left:3px;width:1em}',S={root:"Link_root__KhBI1",clear:"Link_clear__abVgJ",inline:"Link_inline__iuNov",exact:"Link_exact__3MNoz",external:"Link_external__drijI",disabled:"Link_disabled__wkAeH",externalIcon:"Link_externalIcon__YDRJG"};styleInject(css_248z);export{S as default};
-//# sourceMappingURL=Link.styl.js.map
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Link_root__KhBI1{align-items:center;box-shadow:inset 0 0 0 2px none;color:var(--link-color);cursor:pointer;display:inline-flex;padding:5px;position:relative;text-decoration:none;transition:color .1s ease-out;white-space:nowrap}.Link_root__KhBI1:before{background-color:var(--accent-color);bottom:0;content:\"\";height:2px;left:5px;pointer-events:none;position:absolute;right:5px;transform:scale(0);transition:transform .1s ease-out}.Link_root__KhBI1.Link_clear__abVgJ:before{content:none}.Link_root__KhBI1.Link_inline__iuNov{padding:0}.Link_root__KhBI1.Link_inline__iuNov:before{bottom:-2px;left:0;right:0}.Link_root__KhBI1.Link_exact__3MNoz{color:var(--accent-color);pointer-events:none}.Link_root__KhBI1.Link_external__drijI:before{background-color:var(--active-color)}.Link_root__KhBI1:active,.Link_root__KhBI1:focus,.Link_root__KhBI1:hover{color:var(--accent-color)}.Link_root__KhBI1:active.Link_external__drijI,.Link_root__KhBI1:focus.Link_external__drijI,.Link_root__KhBI1:hover.Link_external__drijI{color:var(--active-color)}.Link_root__KhBI1:active::-moz-selection,.Link_root__KhBI1:focus::-moz-selection,.Link_root__KhBI1:hover::-moz-selection{color:var(--accent-color)}.Link_root__KhBI1:active::selection,.Link_root__KhBI1:focus::selection,.Link_root__KhBI1:hover::selection{color:var(--accent-color)}.Link_root__KhBI1:active:before,.Link_root__KhBI1:focus:before,.Link_root__KhBI1:hover:before{transform:scale(1)}.Link_root__KhBI1.Link_disabled__wkAeH{color:var(--accent-color);opacity:.4;pointer-events:none}.Link_externalIcon__YDRJG{display:inline-block;height:1em;margin-bottom:-2px;margin-left:3px;width:1em}";
+var S = {"root":"Link_root__KhBI1","clear":"Link_clear__abVgJ","inline":"Link_inline__iuNov","exact":"Link_exact__3MNoz","external":"Link_external__drijI","disabled":"Link_disabled__wkAeH","externalIcon":"Link_externalIcon__YDRJG"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -1,2 +1,12 @@
-import{useEffect}from"react";import STORE from"./store.js";const Redirect=e=>(useEffect(()=>{STORE.replaceState(e.to)},[]),null);Redirect.displayName="Redirect";export{Redirect};
-//# sourceMappingURL=Redirect.js.map
+import { useEffect } from 'react';
+import STORE from './store.js';
+
+const Redirect = (props) => {
+    useEffect(() => {
+        STORE.replaceState(props.to);
+    }, []);
+    return null;
+};
+Redirect.displayName = 'Redirect';
+
+export { Redirect };

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

@@ -1,2 +1,6 @@
-function Route(e){return null}Route.displayName="Route";export{Route};
-//# sourceMappingURL=Route.js.map
+function Route(props) {
+    return null;
+}
+Route.displayName = 'Route';
+
+export { Route };

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

@@ -1,2 +1,33 @@
-const replaceParamsInPath=(e,r)=>"/"===e?"":Object.keys(r).reduce((e,t)=>e.replace(":"+t,r[t]),e);function parsePath(e,t,r=!1){var a=e.split("/"),l=t.split("/");let n=!0;if(r&&l.length!==a.length)return null;var s={};for(let e=0;e<l.length;e++){var c=l[e],h=a[e];if(h&&c.startsWith(":"))s[c.slice(1)]=h;else if(c!==h){n=!1;break}}return n?s:null}export{parsePath,replaceParamsInPath};
-//# sourceMappingURL=Router.helpers.js.map
+const replaceParamsInPath = (path, params) => {
+    if (path === '/')
+        return '';
+    return Object.keys(params).reduce((updatedPath, paramKey) => {
+        return updatedPath.replace(`:${paramKey}`, params[paramKey]);
+    }, path);
+};
+function parsePath(currPath, routePath, exact = false) {
+    const pathParts = currPath.split('/');
+    const routePathParts = routePath.split('/');
+    let matched = true;
+    if (exact && routePathParts.length !== pathParts.length) {
+        return null;
+    }
+    const params = {};
+    for (let i = 0; i < routePathParts.length; i++) {
+        const routeToken = routePathParts[i];
+        const currentPathToken = pathParts[i];
+        if (currentPathToken && routeToken.startsWith(':')) {
+            const paramName = routeToken.slice(1);
+            params[paramName] = currentPathToken;
+        }
+        else if (routeToken !== currentPathToken) {
+            matched = false;
+            break;
+        }
+    }
+    if (!matched)
+        return null;
+    return params;
+}
+
+export { parsePath, replaceParamsInPath };

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

@@ -1,2 +1,72 @@
-import{jsx,Fragment}from"react/jsx-runtime";import{useContext,useEffect,useMemo}from"react";import{useStore}from"justorm/react";import STORE from"./store.js";import Context from"./context.js";import{parsePath,replaceParamsInPath}from"./Router.helpers.js";export{Route}from"./Route.js";export{Redirect}from"./Redirect.js";import"classnames";import"../Icon/Icon.styl.js";import"./Link/Link.styl.js";const Router=e=>{const h=useStore({router:["path"]})["router"],{children:l,single:R,basePath:t=""}=e;const x=useContext(Context).basePath+t;useEffect(()=>{const e=()=>{STORE.go(window.location.pathname,STORE.query,{replace:!0})};return window.addEventListener("popstate",e),()=>window.removeEventListener("popstate",e)},[]);e=useMemo(()=>{var e=[];let t,r=!1;for(const n of React.Children.toArray(l))if(React.isValidElement(n)){var o,s,a="Route"===n.type.displayName;const{path:p,queryParam:m,exact:u,component:i,...c}=n.props;p?R&&r||(o=x&&"/"===p?"":p,o=x+o,(o=parsePath(h.path,o,u))&&(s=x+replaceParamsInPath(p,o),s=jsx(Context.Provider,{value:{basePath:s},children:jsx(i,{...c,pathParams:o})},p),r=!0,e.push(s))):(m?h.query[m]:a&&i)?t=jsx(i,{...c}):e.push(n)}else e.push(n);return 0===e.length&&t?t:e},[l,h.path,x,R]);return jsx(Fragment,{children:e})},RouterStore=(Router.displayName="Router",STORE),RouterContext=Context;export{Router,RouterContext,RouterStore};
-//# sourceMappingURL=Router.js.map
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useContext, useEffect, useMemo } from 'react';
+import { useStore } from 'justorm/react';
+import STORE from './store.js';
+import Context from './context.js';
+import { parsePath, replaceParamsInPath } from './Router.helpers.js';
+export { Route } from './Route.js';
+export { Redirect } from './Redirect.js';
+import 'classnames';
+import '../Icon/Icon.styl.js';
+import './Link/Link.styl.js';
+
+const Router = (props) => {
+    const { router } = useStore({ router: ['path'] });
+    const { children, single, basePath = '' } = props;
+    const ctx = useContext(Context);
+    const fullPath = ctx.basePath + basePath;
+    useEffect(() => {
+        const onPopState = () => {
+            STORE.go(window.location.pathname, STORE.query, { replace: true });
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+    }, []);
+    const matchedRoutes = useMemo(() => {
+        const childs = [];
+        let noMatchRoute;
+        let isRouteMatched = false;
+        for (const child of React.Children.toArray(children)) {
+            if (!React.isValidElement(child)) {
+                childs.push(child);
+                continue;
+            }
+            // @ts-ignore
+            const isRouteComponent = child.type.displayName === 'Route';
+            const { path, queryParam, exact, component: Component, ...rest } = child.props;
+            if (!path) {
+                const isMatched = queryParam
+                    ? router.query[queryParam]
+                    : isRouteComponent && Component;
+                if (isMatched) {
+                    noMatchRoute = jsx(Component, { ...rest });
+                    continue;
+                }
+                childs.push(child);
+                continue;
+            }
+            if (single && isRouteMatched) {
+                continue;
+            }
+            const tailPath = fullPath && path === '/' ? '' : path;
+            const routePath = fullPath + tailPath;
+            const params = parsePath(router.path, routePath, exact);
+            if (params) {
+                const routeBasePath = fullPath + replaceParamsInPath(path, params);
+                const matchedRoute = (jsx(Context.Provider, { value: { basePath: routeBasePath }, children: jsx(Component, { ...rest, pathParams: params }) }, path));
+                isRouteMatched = true;
+                childs.push(matchedRoute);
+            }
+        }
+        if (childs.length === 0 && noMatchRoute) {
+            return noMatchRoute;
+        }
+        return childs;
+    }, [children, router.path, fullPath, single]);
+    return jsx(Fragment, { children: matchedRoutes });
+};
+Router.displayName = 'Router';
+const RouterStore = STORE;
+const RouterContext = Context;
+
+export { Router, RouterContext, RouterStore };

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

@@ -1,2 +1,5 @@
-import{createContext}from"react";var Context=createContext({basePath:""});export{Context as default};
-//# sourceMappingURL=context.js.map
+import { createContext } from 'react';
+
+var Context = createContext({ basePath: '' });
+
+export { Context as default };

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

@@ -1,2 +1,75 @@
-import{createStore}from"justorm/react";import{addUniq,spliceWhere}from"../../tools/array.js";import{parseQueryParams,applyQueryParams}from"../../tools/queryParams.js";import{isBrowser}from"../../tools/env.js";import"nanoid";import"../../tools/dom.js";import"timen";import"compareq";import"lodash.pick";const LISTENERS=[],STORE=createStore("router",{path:isBrowser&&location.pathname,params:{},query:parseQueryParams(),queryString:isBrowser&&location.search,on(e){addUniq(LISTENERS,e)},un(e){spliceWhere(LISTENERS,e)},go(e=this.path,t={},o={}){e===this.path&&!t||(o=o["replace"],e=applyQueryParams(e??this.path,t),o=o?"replaceState":"pushState",console.log("Router.go",t,e),history[o]({},"",e),onRouteChange(e))},setQuery(e){this.go(this.path,e),onRouteChange()},addQuery(e){this.go(this.path,{...this.query,...e}),onRouteChange()},removeQuery(e){var t={...this.query};for(const o of e)delete t[o];this.go(this.path,t),onRouteChange()},back(){history.back(),onRouteChange()},replaceState(e,t={}){history.replaceState({},"",e),t.quiet||onRouteChange(e)}});function onRouteChange(e=window.location.pathname){STORE.queryString=location.search,STORE.query=parseQueryParams(),STORE.path=e.replace(/\?.+/,"")||"/",LISTENERS.forEach(e=>e(STORE.path,STORE.query))}function updateRouteState(){STORE.path===window.location.pathname&&STORE.queryString===location.search||onRouteChange()}isBrowser&&(window.addEventListener("popstate",updateRouteState),window.addEventListener("pushstate",updateRouteState));export{STORE as default};
-//# sourceMappingURL=store.js.map
+import { createStore } from 'justorm/react';
+import { addUniq, spliceWhere } from '../../tools/array.js';
+import { parseQueryParams, applyQueryParams } from '../../tools/queryParams.js';
+import { isBrowser } from '../../tools/env.js';
+import 'nanoid';
+import '../../tools/dom.js';
+import 'timen';
+import 'compareq';
+import 'lodash.pick';
+
+const LISTENERS = [];
+const STORE = createStore('router', {
+    path: isBrowser && location.pathname,
+    params: {},
+    query: parseQueryParams(),
+    queryString: isBrowser && location.search,
+    on(cb) {
+        addUniq(LISTENERS, cb);
+    },
+    un(cb) {
+        spliceWhere(LISTENERS, cb);
+    },
+    go(path = this.path, query = {}, params = {}) {
+        if (path === this.path && !query)
+            return;
+        const { replace } = params;
+        const pathStr = applyQueryParams(path ?? this.path, query);
+        const action = replace ? 'replaceState' : 'pushState';
+        console.log('Router.go', query, pathStr);
+        history[action]({}, '', pathStr);
+        onRouteChange(pathStr);
+    },
+    setQuery(queryParams) {
+        this.go(this.path, queryParams);
+        onRouteChange();
+    },
+    addQuery(query) {
+        this.go(this.path, { ...this.query, ...query });
+        onRouteChange();
+    },
+    removeQuery(fields) {
+        const newQuery = { ...this.query };
+        for (const field of fields)
+            delete newQuery[field];
+        this.go(this.path, newQuery);
+        onRouteChange();
+    },
+    back() {
+        history.back();
+        onRouteChange();
+    },
+    replaceState(href, params = {}) {
+        history.replaceState({}, '', href);
+        if (!params.quiet)
+            onRouteChange(href);
+    },
+});
+function onRouteChange(path = window.location.pathname) {
+    STORE.queryString = location.search;
+    STORE.query = parseQueryParams();
+    STORE.path = path.replace(/\?.+/, '') || '/';
+    LISTENERS.forEach(cb => cb(STORE.path, STORE.query));
+}
+function updateRouteState() {
+    if (STORE.path !== window.location.pathname ||
+        STORE.queryString !== location.search)
+        onRouteChange();
+}
+if (isBrowser) {
+    window.addEventListener('popstate', updateRouteState);
+    window.addEventListener('pushstate', updateRouteState);
+}
+// window.routerStore = STORE;
+
+export { STORE as default };