@homecode/ui 5.20.21 → 5.20.23

package/dist/esm/index.js

@@ -30,6 +30,7 @@ export { Gallery, normalizeGalleryItem } from './src/components/Gallery/Gallery.
 export { GridLayout } from './src/components/GridLayout/GridLayout.js';
 export { Heading } from './src/components/Heading/Heading.js';
 export { Icon } from './src/components/Icon/Icon.js';
+export { Img } from './src/components/Img/Img.js';
 export { Input } from './src/components/Input/Input.js';
 export { InputFile } from './src/components/InputFile/InputFile.js';
 export { Label } from './src/components/Label/Label.js';

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

@@ -64,6 +64,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../InputFile/InputFile.styl.js';
 import '../InputFile/Item/Item.styl.js';
 import '@tiptap/core';

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

@@ -0,0 +1,26 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState } from 'react';
+import { Icon } from '../Icon/Icon.js';
+import S from './Img.styl.js';
+
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+function Img({ src, alt = '', fallback, fallbackClassName, className, onError, ...rest }) {
+    const [failedSrc, setFailedSrc] = useState(null);
+    // Keyed by src, so a new src gets a fresh attempt.
+    const isFailed = !src || failedSrc === src;
+    if (isFailed) {
+        if (fallback !== undefined)
+            return jsx(Fragment, { children: fallback });
+        return (jsx("span", { className: cn(S.fallback, className, fallbackClassName), role: "img", "aria-label": alt || undefined, children: jsx(Icon, { type: "brokenImage", className: S.fallbackIcon }) }));
+    }
+    return (jsx("img", { ...rest, src: src, alt: alt, className: className, onError: event => {
+            setFailedSrc(src);
+            onError?.(event);
+        } }));
+}
+
+export { Img };

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

@@ -0,0 +1,20 @@
+var css_248z = ".Img_fallback__crzoQ{align-items:center;color:currentColor;display:inline-flex;justify-content:center}.Img_fallbackIcon__oyxkV{height:50%;max-height:48px;max-width:48px;opacity:.4;width:50%}";
+var S = {"fallback":"Img_fallback__crzoQ","fallbackIcon":"Img_fallbackIcon__oyxkV"};
+            if (typeof document !== 'undefined') {
+              var __uilibHead = document.head || document.getElementsByTagName('head')[0];
+              if (__uilibHead) {
+                var __uilibStyle = document.createElement('style');
+                __uilibStyle.setAttribute('data-uilib-css', '');
+                __uilibStyle.appendChild(document.createTextNode(css_248z));
+                var __uilibLink = __uilibHead.querySelector('link[rel="stylesheet"]');
+                var __uilibInline = __uilibHead.querySelector('style:not([data-uilib-css])');
+                var __uilibAnchor = __uilibLink || __uilibInline;
+                if (__uilibLink && __uilibInline && (__uilibLink.compareDocumentPosition(__uilibInline) & 4) === 0) {
+                  __uilibAnchor = __uilibInline;
+                }
+                if (__uilibAnchor) __uilibHead.insertBefore(__uilibStyle, __uilibAnchor);
+                else __uilibHead.appendChild(__uilibStyle);
+              }
+            }
+
+export { S as default };

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

@@ -66,6 +66,7 @@ import '../VideoPlayer/VideoPlayer.styl.js';
 import '../Gallery/Gallery.styl.js';
 import '../GridLayout/GridLayout.styl.js';
 import '../Heading/Heading.js';
+import '../Img/Img.styl.js';
 import '../LightBox/LightBox.styl.js';
 import '../NestedMenu/NestedMenu.js';
 import '../Notifications/store.js';

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/Img/Img.d.ts

@@ -0,0 +1,7 @@
+import * as T from './Img.types';
+export type ImgProps = T.Props;
+/**
+ * `<img>` that never shows the browser's broken-image glyph or its alt text:
+ * when loading fails it renders `fallback` (a broken-image icon by default).
+ */
+export declare function Img({ src, alt, fallback, fallbackClassName, className, onError, ...rest }: T.Props): import("react").JSX.Element;

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

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

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

@@ -0,0 +1,10 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+export type Props = ImgHTMLAttributes<HTMLImageElement> & {
+    /**
+     * Rendered instead of the image when it fails to load. Defaults to a
+     * broken-image icon. Pass `null` to render nothing.
+     */
+    fallback?: ReactNode;
+    /** Class for the default fallback wrapper. */
+    fallbackClassName?: string;
+};

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/dist/esm/types/src/components/index.d.ts

@@ -24,6 +24,7 @@ export * from './Gallery/Gallery';
 export * from './GridLayout/GridLayout';
 export * from './Heading/Heading';
 export * from './Icon/Icon';
+export * from './Img/Img';
 export * from './Input/Input';
 export * from './InputFile/InputFile';
 export * from './Label/Label';

package/package.json

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