@homecode/ui 5.20.22 → 5.20.24

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

@@ -6,8 +6,14 @@ import { Button } from '../Button/Button.js';
 import { Icon } from '../Icon/Icon.js';
 import S from './LightBox.styl.js';
 
+/** Matches the fade-out in LightBox.styl: the blur stays until it ends. */
+const FADE_MS = 200;
 function LightBox({ children, className, onClose, blur, ...props }) {
     const [isOpen, setOpen] = useState(false);
+    // A closed light box stays mounted at opacity 0, and an invisible
+    // full-screen blur still costs a backdrop pass every frame (a list of cards,
+    // each with its own light box, stalled the page). Blur only while it shows.
+    const [blurOn, setBlurOn] = useState(false);
     const onKeyDown = useCallback(e => {
         if (isOpen && e.key === 'Escape') {
             e.stopPropagation();
@@ -18,11 +24,19 @@ function LightBox({ children, className, onClose, blur, ...props }) {
     useEffect(() => {
         setOpen(props.isOpen);
     }, [props.isOpen]);
+    useEffect(() => {
+        if (isOpen) {
+            setBlurOn(true);
+            return;
+        }
+        const timer = setTimeout(() => setBlurOn(false), FADE_MS);
+        return () => clearTimeout(timer);
+    }, [isOpen]);
     useEffect(() => {
         document.addEventListener('keydown', onKeyDown, true);
         return () => document.removeEventListener('keydown', onKeyDown, true);
     }, [isOpen]);
-    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
+    return (jsxs(Paranja, { className: cn(S.root, isOpen && S.open, className), blur: blur && blurOn, children: [children, jsx(Button, { className: S.close, onClick: onClose, variant: "clear", children: jsx(Icon, { type: "close", size: "l" }) })] }));
 }
 
 export { LightBox };

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

@@ -503,7 +503,10 @@ class Popup extends Component {
         const wrapperClasses = cn(S.contentWrapper, inline && S.inline, isOpen && S.isOpen, animating && S.animating, wrapperProps.className);
         const trigger = this.triggerElem.current;
         const [axis, float] = direction.split('-');
-        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], blur && S.blur, round && S.round, contentProps.className);
+        const classes = cn(S.content, outlined && S.outlined, animated && animating && S.animating, elevation && S[`elevation-${elevation}`], S[`size-${size}`], S[`axis-${axis}`], S[`float-${float || 'middle'}`], 
+        // A closed popup stays mounted at opacity 0; its blur would still cost
+        // a backdrop pass every frame, so blur only while the content is shown.
+        blur && isContentVisible && S.blur, round && S.round, contentProps.className);
         if (trigger && !inline && triggerBounds) {
             const shiftTf = boundaryFit.left !== 0 || boundaryFit.top !== 0
                 ? `translate3d(${boundaryFit.left}px, ${boundaryFit.top}px, 0)`

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

@@ -1,10 +1,31 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import cn from 'classnames';
 import S from './ThinkingOutline.styl.js';
 
-function ThinkingOutline({ active, className }) {
+const BASE_DURATION = 3.5; // seconds per lap at speed 1
+const DEFAULT_GRADIENTS = [{}];
+const toSize = (size) => typeof size === 'number' ? `${size}px` : size;
+// Unset values stay undefined so the stylesheet defaults (and the root's vars) apply
+const glowVars = (thickness, spread) => ({
+    '--tol-thickness': thickness,
+    '--tol-spread': toSize(spread),
+});
+function getLayerStyle({ color, speed = 1, reverse, phase = 0, thickness, spread, }) {
+    const duration = BASE_DURATION / (speed > 0 ? speed : 1);
+    return {
+        ...glowVars(thickness, spread),
+        '--tol-color': color,
+        '--tol-color-soft': color && `color-mix(in srgb, ${color} 30%, transparent)`,
+        '--tol-duration': speed !== 1 ? `${duration}s` : undefined,
+        // Negative delay starts the orbit part-way through a lap
+        '--tol-delay': phase ? `${-phase * duration}s` : undefined,
+        '--tol-direction': reverse ? 'reverse' : undefined,
+    };
+}
+function ThinkingOutline({ active, gradients, thickness, spread, className, }) {
     const isControlled = active !== undefined;
-    return (jsx("div", { className: cn(S.root, isControlled && active && S.active, !isControlled && S.interactive, className), children: jsx("div", { className: S.bloom }) }));
+    const layers = gradients?.length ? gradients : DEFAULT_GRADIENTS;
+    return (jsx("div", { className: cn(S.root, isControlled && active && S.active, !isControlled && S.interactive, className), style: glowVars(thickness, spread), children: layers.map((gradient, i) => (jsxs("div", { className: S.layer, style: getLayerStyle(gradient), children: [jsx("div", { className: S.halo }), jsx("div", { className: S.bloom })] }, i))) }));
 }
 
 export { ThinkingOutline };

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

@@ -1,5 +1,5 @@
-var css_248z = "@property --promptGlowAngle{syntax:\"<angle>\";inherits:true;initial-value:0deg}.ThinkingOutline_root__rvvBG{animation:ThinkingOutline_orbitGlow__3bK-F 3.5s linear infinite;animation-play-state:paused;border-radius:inherit;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .5s ease-out}.ThinkingOutline_root__rvvBG.ThinkingOutline_interactive__3jMCg{pointer-events:auto}.ThinkingOutline_root__rvvBG.ThinkingOutline_active__-66iV,.ThinkingOutline_root__rvvBG.ThinkingOutline_interactive__3jMCg:hover{animation-play-state:running;opacity:1}.ThinkingOutline_root__rvvBG:before{background:conic-gradient(from var(--promptGlowAngle),var(--active-color) 0deg,var(--active-color-alpha-300) 48deg,transparent 80deg,transparent 100deg,var(--active-color-alpha-300) 132deg,var(--active-color) 180deg,var(--active-color-alpha-300) 228deg,transparent 260deg,transparent 280deg,var(--active-color-alpha-300) 312deg,var(--active-color) 1turn);border-radius:inherit;content:\"\";inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;position:absolute}.ThinkingOutline_bloom__XKYD5{border-radius:inherit;filter:blur(20px);inset:0;opacity:.55;position:absolute}.ThinkingOutline_bloom__XKYD5:before{background:conic-gradient(from var(--promptGlowAngle),var(--active-color) 0deg,var(--active-color-alpha-300) 48deg,transparent 80deg,transparent 100deg,var(--active-color-alpha-300) 132deg,var(--active-color) 180deg,var(--active-color-alpha-300) 228deg,transparent 260deg,transparent 280deg,var(--active-color-alpha-300) 312deg,var(--active-color) 1turn);border-radius:inherit;content:\"\";inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:6px;position:absolute}@media (prefers-reduced-motion:reduce){.ThinkingOutline_root__rvvBG{animation:none}}@keyframes ThinkingOutline_orbitGlow__3bK-F{0%{--promptGlowAngle:-30deg}25%{--promptGlowAngle:30deg}50%{--promptGlowAngle:150deg}75%{--promptGlowAngle:210deg}to{--promptGlowAngle:330deg}}";
-var S = {"root":"ThinkingOutline_root__rvvBG","orbitGlow":"ThinkingOutline_orbitGlow__3bK-F","interactive":"ThinkingOutline_interactive__3jMCg","active":"ThinkingOutline_active__-66iV","bloom":"ThinkingOutline_bloom__XKYD5"};
+var css_248z = "@property --promptGlowAngle{syntax:\"<angle>\";inherits:true;initial-value:0deg}.ThinkingOutline_root__rvvBG{border-radius:inherit;inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity .5s ease-out}.ThinkingOutline_root__rvvBG.ThinkingOutline_interactive__3jMCg{pointer-events:auto}.ThinkingOutline_root__rvvBG.ThinkingOutline_active__-66iV,.ThinkingOutline_root__rvvBG.ThinkingOutline_interactive__3jMCg:hover{opacity:1}.ThinkingOutline_root__rvvBG.ThinkingOutline_active__-66iV .ThinkingOutline_layer__lDYzJ,.ThinkingOutline_root__rvvBG.ThinkingOutline_interactive__3jMCg:hover .ThinkingOutline_layer__lDYzJ{animation-play-state:running}.ThinkingOutline_layer__lDYzJ{--tol-source:calc(6px*var(--tol-thickness, 1));--tol-outset:calc(var(--tol-source) - 6px);--tol-halo:calc(3px*var(--tol-thickness, 1));animation:ThinkingOutline_orbitGlow__3bK-F 3.5s linear infinite;animation:ThinkingOutline_orbitGlow__3bK-F var(--tol-duration,3.5s) linear infinite;animation-delay:0s;animation-delay:var(--tol-delay,0s);animation-direction:normal;animation-direction:var(--tol-direction,normal);animation-play-state:paused;border-radius:inherit;inset:0;position:absolute}.ThinkingOutline_layer__lDYzJ:before{background:conic-gradient(from var(--promptGlowAngle),var(--tol-color,var(--active-color)) 0deg,var(--tol-color-soft,var(--active-color-alpha-300)) 48deg,transparent 80deg,transparent 100deg,var(--tol-color-soft,var(--active-color-alpha-300)) 132deg,var(--tol-color,var(--active-color)) 180deg,var(--tol-color-soft,var(--active-color-alpha-300)) 228deg,transparent 260deg,transparent 280deg,var(--tol-color-soft,var(--active-color-alpha-300)) 312deg,var(--tol-color,var(--active-color)) 1turn);border-radius:inherit;content:\"\";inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;padding:var(--tol-line,1.5px);position:absolute}.ThinkingOutline_bloom__XKYD5{border-radius:inherit;filter:blur(20px);filter:blur(var(--tol-spread,20px));inset:0;opacity:min(1,.55);opacity:min(1,calc(var(--tol-thickness, 1)*.55));position:absolute}.ThinkingOutline_bloom__XKYD5:before{background:conic-gradient(from var(--promptGlowAngle),var(--tol-color,var(--active-color)) 0deg,var(--tol-color-soft,var(--active-color-alpha-300)) 48deg,transparent 80deg,transparent 100deg,var(--tol-color-soft,var(--active-color-alpha-300)) 132deg,var(--tol-color,var(--active-color)) 180deg,var(--tol-color-soft,var(--active-color-alpha-300)) 228deg,transparent 260deg,transparent 280deg,var(--tol-color-soft,var(--active-color-alpha-300)) 312deg,var(--tol-color,var(--active-color)) 1turn);border-radius:inherit;content:\"\";inset:calc(var(--tol-outset)*-1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:var(--tol-source);position:absolute}.ThinkingOutline_halo__tD2oJ{border-radius:inherit;filter:blur(6px);filter:blur(calc(var(--tol-spread, 20px)*.3));inset:0;opacity:clamp(0,0,1);opacity:clamp(0,calc((var(--tol-thickness, 1) - 1)*.5),1);position:absolute}.ThinkingOutline_halo__tD2oJ:before{background:conic-gradient(from var(--promptGlowAngle),var(--tol-color,var(--active-color)) 0deg,var(--tol-color-soft,var(--active-color-alpha-300)) 48deg,transparent 80deg,transparent 100deg,var(--tol-color-soft,var(--active-color-alpha-300)) 132deg,var(--tol-color,var(--active-color)) 180deg,var(--tol-color-soft,var(--active-color-alpha-300)) 228deg,transparent 260deg,transparent 280deg,var(--tol-color-soft,var(--active-color-alpha-300)) 312deg,var(--tol-color,var(--active-color)) 1turn);border-radius:inherit;content:\"\";inset:calc(var(--tol-halo)*-1);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:calc(var(--tol-halo) + 1.5px);position:absolute}@media (prefers-reduced-motion:reduce){.ThinkingOutline_layer__lDYzJ{animation:none}}@keyframes ThinkingOutline_orbitGlow__3bK-F{0%{--promptGlowAngle:-30deg}25%{--promptGlowAngle:30deg}50%{--promptGlowAngle:150deg}75%{--promptGlowAngle:210deg}to{--promptGlowAngle:330deg}}";
+var S = {"root":"ThinkingOutline_root__rvvBG","interactive":"ThinkingOutline_interactive__3jMCg","active":"ThinkingOutline_active__-66iV","layer":"ThinkingOutline_layer__lDYzJ","orbitGlow":"ThinkingOutline_orbitGlow__3bK-F","bloom":"ThinkingOutline_bloom__XKYD5","halo":"ThinkingOutline_halo__tD2oJ"};
             if (typeof document !== 'undefined') {
               var __uilibHead = document.head || document.getElementsByTagName('head')[0];
               if (__uilibHead) {

package/dist/esm/types/src/components/LightBox/LightBox.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -1,3 +1,3 @@
-import { ThinkingOutlineProps } from './ThinkingOutline.types';
-export type { ThinkingOutlineProps };
-export declare function ThinkingOutline({ active, className }: ThinkingOutlineProps): import("react").JSX.Element;
+import { ThinkingOutlineGradient, ThinkingOutlineProps, ThinkingOutlineSize } from './ThinkingOutline.types';
+export type { ThinkingOutlineGradient, ThinkingOutlineProps, ThinkingOutlineSize, };
+export declare function ThinkingOutline({ active, gradients, thickness, spread, className, }: ThinkingOutlineProps): import("react").JSX.Element;

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

@@ -1,4 +1,16 @@
+export type ThinkingOutlineSize = number | string;
+export type ThinkingOutlineGradient = {
+    color?: string;
+    speed?: number;
+    reverse?: boolean;
+    phase?: number;
+    thickness?: number;
+    spread?: ThinkingOutlineSize;
+};
 export type ThinkingOutlineProps = {
     active?: boolean;
+    gradients?: ThinkingOutlineGradient[];
+    thickness?: number;
+    spread?: ThinkingOutlineSize;
     className?: string;
 };

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

@@ -1,2 +1,2 @@
 export { ThinkingOutline } from './ThinkingOutline';
-export type { ThinkingOutlineProps } from './ThinkingOutline';
+export type { ThinkingOutlineGradient, ThinkingOutlineProps, ThinkingOutlineSize, } from './ThinkingOutline';

package/package.json

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