@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/components/attachment-tile/attachment-preview.js

@@ -1,11 +1,12 @@
 import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
 import { Skeleton } from "../skeleton/skeleton.js";
-import { Tooltip } from "../tooltip/tooltip.js";
 import attachment_tile_module_default from "./attachment-tile.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from "react";
 // src/components/attachment-tile/attachment-preview.tsx
 var extensionOf = (name) => {
 	const dot = name.lastIndexOf(".");
@@ -64,152 +65,420 @@ var useAttachmentPreview = (blob) => {
 	} else t3 = $[5];
 	return t3;
 };
+var PreviewContext = createContext(null);
+var usePreview = () => {
+	return useRequiredContext(PreviewContext, "AttachmentTile preview parts must be rendered within <AttachmentTile.Preview>.");
+};
+var useFallbackShown = () => {
+	const { image, pending } = usePreview();
+	return image === void 0 && !pending;
+};
 /**
-* The inside of an attachment tile: an image preview where there is one, the
-* `icon` and the file's extension otherwise, plus the file name for assistive
-* tech. A source that is still arriving shows a skeleton; one that fails to
-* load falls back to the extension.
+* The inside of an attachment tile, holding the `Image`, `Icon`, `Extension`,
+* `Skeleton` and `Name` that read its file. A source that fails to load falls
+* back to the icon and the extension.
 *
 * @example
-* <AttachmentTile.Preview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+* <AttachmentTile.Preview name="nota.pdf" src={undefined}>
+* 	<AttachmentTile.Image />
+* 	<AttachmentTile.Extension />
+* 	<AttachmentTile.Name />
+* </AttachmentTile.Preview>
 */
 var AttachmentPreview = (t0) => {
-	const $ = c(36);
+	const $ = c(22);
 	let className;
-	let hint;
-	let icon;
 	let name;
 	let props;
 	let src;
 	let t1;
 	if ($[0] !== t0) {
-		({name, hint, src, pending: t1, icon, className, ...props} = t0);
+		({name, src, pending: t1, className, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = hint;
-		$[3] = icon;
-		$[4] = name;
-		$[5] = props;
-		$[6] = src;
-		$[7] = t1;
+		$[2] = name;
+		$[3] = props;
+		$[4] = src;
+		$[5] = t1;
 	} else {
 		className = $[1];
-		hint = $[2];
-		icon = $[3];
-		name = $[4];
-		props = $[5];
-		src = $[6];
-		t1 = $[7];
+		name = $[2];
+		props = $[3];
+		src = $[4];
+		t1 = $[5];
 	}
 	const pending = t1 === void 0 ? false : t1;
 	const [loadedSrc, setLoadedSrc] = useState();
 	const [brokenSrc, setBrokenSrc] = useState();
-	let t2;
-	if ($[8] !== name) {
-		t2 = extensionOf(name);
-		$[8] = name;
-		$[9] = t2;
-	} else t2 = $[9];
-	const extension = t2;
 	const image = src === brokenSrc ? void 0 : src;
-	const t3 = pending || image !== void 0 && image !== loadedSrc;
+	const t2 = pending || image !== void 0 && image !== loadedSrc;
+	let t3;
+	if ($[6] !== t2) {
+		t3 = { busy: t2 };
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	const busy = useBusyPhase(t3) !== "fresh";
 	let t4;
-	if ($[10] !== t3) {
-		t4 = { busy: t3 };
-		$[10] = t3;
-		$[11] = t4;
-	} else t4 = $[11];
-	const busy = useBusyPhase(t4) !== "fresh";
+	if ($[8] !== busy || $[9] !== image || $[10] !== name || $[11] !== pending) {
+		t4 = {
+			name,
+			image,
+			pending,
+			busy,
+			onLoaded: setLoadedSrc,
+			onBroken: setBrokenSrc
+		};
+		$[8] = busy;
+		$[9] = image;
+		$[10] = name;
+		$[11] = pending;
+		$[12] = t4;
+	} else t4 = $[12];
 	let t5;
-	if ($[12] !== image) {
-		t5 = (node) => {
+	if ($[13] !== className) {
+		t5 = clsx(attachment_tile_module_default.preview, className);
+		$[13] = className;
+		$[14] = t5;
+	} else t5 = $[14];
+	const t6 = busy || void 0;
+	let t7;
+	if ($[15] !== props || $[16] !== t5 || $[17] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			...props,
+			className: t5,
+			"aria-busy": t6
+		});
+		$[15] = props;
+		$[16] = t5;
+		$[17] = t6;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== t4 || $[20] !== t7) {
+		t8 = /* @__PURE__ */ jsx(PreviewContext, {
+			value: t4,
+			children: t7
+		});
+		$[19] = t4;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+};
+/**
+* The image, once there is a source that loads. Renders nothing otherwise.
+*
+* @example
+* <AttachmentTile.Image />
+*/
+var AttachmentImage = (t0) => {
+	const $ = c(31);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { image, onLoaded, onBroken } = usePreview();
+	let t1;
+	if ($[5] !== image || $[6] !== onBroken || $[7] !== onLoaded) {
+		t1 = (node) => {
 			if (image === void 0 || !node?.complete) return;
 			if (node.naturalWidth === 0) {
-				setBrokenSrc(image);
+				onBroken(image);
 				return;
 			}
-			setLoadedSrc(image);
+			onLoaded(image);
 		};
-		$[12] = image;
-		$[13] = t5;
-	} else t5 = $[13];
-	const settleAlreadyDecoded = t5;
+		$[5] = image;
+		$[6] = onBroken;
+		$[7] = onLoaded;
+		$[8] = t1;
+	} else t1 = $[8];
+	const settleAlreadyDecoded = t1;
+	let t2;
+	if ($[9] !== ref || $[10] !== settleAlreadyDecoded) {
+		t2 = ref === void 0 ? settleAlreadyDecoded : [ref, settleAlreadyDecoded];
+		$[9] = ref;
+		$[10] = settleAlreadyDecoded;
+		$[11] = t2;
+	} else t2 = $[11];
+	const t3 = image !== void 0;
+	let t4;
+	if ($[12] !== className) {
+		t4 = clsx(attachment_tile_module_default.image, className);
+		$[12] = className;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== image || $[15] !== onLoaded) {
+		t5 = () => {
+			if (image !== void 0) onLoaded(image);
+		};
+		$[14] = image;
+		$[15] = onLoaded;
+		$[16] = t5;
+	} else t5 = $[16];
 	let t6;
-	if ($[14] !== className) {
-		t6 = clsx(attachment_tile_module_default.preview, className);
-		$[14] = className;
-		$[15] = t6;
-	} else t6 = $[15];
-	const t7 = busy || void 0;
-	let t8;
-	if ($[16] !== extension || $[17] !== icon || $[18] !== image || $[19] !== pending || $[20] !== settleAlreadyDecoded) {
-		t8 = image === void 0 ? pending ? null : /* @__PURE__ */ jsxs(Fragment, { children: [icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: attachment_tile_module_default.icon,
-			children: icon
-		}), extension === "" ? null : /* @__PURE__ */ jsx("span", {
-			className: attachment_tile_module_default.extension,
-			children: extension
-		})] }) : /* @__PURE__ */ jsx("img", {
-			ref: settleAlreadyDecoded,
-			src: image,
+	if ($[17] !== image || $[18] !== onBroken) {
+		t6 = () => {
+			if (image !== void 0) onBroken(image);
+		};
+		$[17] = image;
+		$[18] = onBroken;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== image || $[21] !== props || $[22] !== t4 || $[23] !== t5 || $[24] !== t6) {
+		t7 = {
 			alt: "",
-			className: attachment_tile_module_default.image,
-			onLoad: () => setLoadedSrc(image),
-			onError: () => setBrokenSrc(image)
-		});
-		$[16] = extension;
-		$[17] = icon;
-		$[18] = image;
-		$[19] = pending;
-		$[20] = settleAlreadyDecoded;
-		$[21] = t8;
-	} else t8 = $[21];
-	let t9;
-	if ($[22] !== busy) {
-		t9 = busy ? /* @__PURE__ */ jsx(Skeleton, { className: attachment_tile_module_default.imageSkeleton }) : null;
-		$[22] = busy;
-		$[23] = t9;
-	} else t9 = $[23];
-	let t10;
-	if ($[24] !== name) {
-		t10 = /* @__PURE__ */ jsx("span", {
-			className: attachment_tile_module_default.name,
-			children: name
-		});
-		$[24] = name;
-		$[25] = t10;
-	} else t10 = $[25];
-	let t11;
-	if ($[26] !== props || $[27] !== t10 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("span", {
 			...props,
-			className: t6,
-			"aria-busy": t7,
-			children: [
-				t8,
-				t9,
-				t10
-			]
-		});
-		$[26] = props;
-		$[27] = t10;
-		$[28] = t6;
+			src: image,
+			className: t4,
+			onLoad: t5,
+			onError: t6
+		};
+		$[20] = image;
+		$[21] = props;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+	} else t7 = $[25];
+	let t8;
+	if ($[26] !== render || $[27] !== t2 || $[28] !== t3 || $[29] !== t7) {
+		t8 = {
+			defaultTagName: "img",
+			render,
+			ref: t2,
+			enabled: t3,
+			props: t7
+		};
+		$[26] = render;
+		$[27] = t2;
+		$[28] = t3;
 		$[29] = t7;
 		$[30] = t8;
-		$[31] = t9;
-		$[32] = t11;
-	} else t11 = $[32];
-	let t12;
-	if ($[33] !== hint || $[34] !== t11) {
-		t12 = /* @__PURE__ */ jsx(Tooltip, {
-			content: hint,
-			children: t11
-		});
-		$[33] = hint;
-		$[34] = t11;
-		$[35] = t12;
-	} else t12 = $[35];
-	return t12;
+	} else t8 = $[30];
+	return useRender(t8);
+};
+/**
+* A file-type glyph where there is no image, such as a document icon. Renders
+* nothing without children.
+*
+* @example
+* <AttachmentTile.Icon><DescriptionIcon /></AttachmentTile.Icon>
+*/
+var AttachmentIcon = (t0) => {
+	const $ = c(17);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const t1 = useFallbackShown() && children !== void 0 && children !== null && children !== false;
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(attachment_tile_module_default.icon, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== props || $[10] !== t2) {
+		t3 = {
+			"aria-hidden": true,
+			...props,
+			className: t2,
+			children
+		};
+		$[8] = children;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t1 || $[15] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: t1,
+			props: t3
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return useRender(t4);
+};
+/**
+* The file's extension where there is no image, such as "pdf". Renders
+* nothing for a name without one.
+*
+* @example
+* <AttachmentTile.Extension />
+*/
+var AttachmentExtension = (t0) => {
+	const $ = c(18);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { name } = usePreview();
+	const shown = useFallbackShown();
+	let t1;
+	if ($[5] !== name) {
+		t1 = extensionOf(name);
+		$[5] = name;
+		$[6] = t1;
+	} else t1 = $[6];
+	const extension = t1;
+	const t2 = shown && extension !== "";
+	let t3;
+	if ($[7] !== className) {
+		t3 = clsx(attachment_tile_module_default.extension, className);
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== extension || $[10] !== props || $[11] !== t3) {
+		t4 = {
+			...props,
+			className: t3,
+			children: extension
+		};
+		$[9] = extension;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+	} else t4 = $[12];
+	let t5;
+	if ($[13] !== ref || $[14] !== render || $[15] !== t2 || $[16] !== t4) {
+		t5 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: t2,
+			props: t4
+		};
+		$[13] = ref;
+		$[14] = render;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return useRender(t5);
+};
+/**
+* The placeholder while the image is still on its way. Renders nothing once it
+* has arrived.
+*
+* @example
+* <AttachmentTile.Skeleton />
+*/
+var AttachmentSkeleton = (t0) => {
+	const { className } = t0;
+	return usePreview().busy ? /* @__PURE__ */ jsx(Skeleton, { className: clsx(attachment_tile_module_default.imageSkeleton, className) }) : null;
+};
+/**
+* The file's name, for assistive tech only.
+*
+* @example
+* <AttachmentTile.Name />
+*/
+var AttachmentName = (t0) => {
+	const $ = c(15);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { name } = usePreview();
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(attachment_tile_module_default.name, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== name || $[8] !== props || $[9] !== t1) {
+		t2 = {
+			...props,
+			className: t1,
+			children: name
+		};
+		$[7] = name;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== ref || $[12] !== render || $[13] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return useRender(t3);
 };
-export { AttachmentPreview, useAttachmentPreview };
+export { AttachmentExtension, AttachmentIcon, AttachmentImage, AttachmentName, AttachmentPreview, AttachmentSkeleton, useAttachmentPreview };

package/dist/components/attachment-tile/attachment-tile.css

@@ -1,8 +1,11 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._tile_gqsrq_3 {
+  ._tile_1h7zv_3 {
     --_tile-size: var(--attachment-tile-size, 5rem);
-    --_tile-border-width: 1px;
+    --_tile-border-width: var(
+    	--attachment-tile-border-width,
+    	1px
+    );
     --_tile-radius: var(
     	--attachment-tile-radius,
     	var(--sys-radius-sm)
@@ -14,74 +17,77 @@
     box-sizing: border-box;
     inline-size: var(--_tile-size);
     block-size: var(--_tile-size);
-    border: var(--_tile-border-width) solid transparent;
+    border: var(--_tile-border-width) solid var(--attachment-tile-border, transparent);
     border-radius: var(--_tile-radius);
     background: var(--attachment-tile-bg, var(--sys-color-surface-highest));
     color: var(--attachment-tile-fg, var(--sys-color-text-muted));
     cursor: default;
   }
-  ._tile_gqsrq_3 {
+  ._tile_1h7zv_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tile_gqsrq_3:focus-visible {
+  ._tile_1h7zv_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tile_gqsrq_3[data-focus-visible] {
+  ._tile_1h7zv_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tile_gqsrq_3[data-invalid] {
-    border-color: var(--sys-color-error-border);
-    background: var(--sys-color-error-bg);
-    color: var(--sys-color-error-fg);
+  ._tile_1h7zv_3[data-invalid] {
+    border-color: var(--attachment-tile-invalid-border, var(--sys-color-error-border));
+    background: var(--attachment-tile-invalid-bg, var(--sys-color-error-bg));
+    color: var(--attachment-tile-invalid-fg, var(--sys-color-error-fg));
   }
-  ._tile_gqsrq_3:any-link {
+  ._tile_1h7zv_3:any-link {
     display: block;
     color: var(--attachment-tile-fg, var(--sys-color-text-muted));
     text-decoration: none;
     cursor: pointer;
   }
-  ._tile_gqsrq_3:any-link:hover {
+  ._tile_1h7zv_3:any-link:hover {
     border-color: var(--attachment-tile-hover-border, var(--sys-color-primary));
     color: var(--attachment-tile-fg, var(--sys-color-text-muted));
   }
-  ._preview_gqsrq_48 {
+  ._preview_1h7zv_51 {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: var(--sys-unit-2);
+    gap: var(--attachment-tile-gap, var(--sys-unit-2));
     position: absolute;
     inset: 0;
     overflow: hidden;
     border-radius: var(--_tile-inner-radius);
   }
-  ._image_gqsrq_59 {
+  ._image_1h7zv_62 {
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
   }
-  ._imageSkeleton_gqsrq_64 {
-    --skeleton-bg: var(--sys-color-outline);
+  ._imageSkeleton_1h7zv_67 {
+    --skeleton-bg: var(
+    	--attachment-tile-skeleton-bg,
+    	var(--sys-color-outline)
+    );
     position: absolute;
     inset: 0;
     border-radius: var(--_tile-inner-radius);
     block-size: auto;
   }
-  ._icon_gqsrq_71 {
+  ._icon_1h7zv_77 {
     display: inline-flex;
     font-size: var(--attachment-tile-icon-size, 1.5em);
   }
-  ._icon_gqsrq_71 > svg {
+  ._icon_1h7zv_77 > svg {
     inline-size: 1em;
     block-size: 1em;
     fill: currentcolor;
   }
-  ._extension_gqsrq_80 {
-    font: var(--sys-font-label-small);
+  ._extension_1h7zv_86 {
+    font: var(--attachment-tile-extension-font, var(--sys-font-label-small));
     text-transform: uppercase;
   }
-  ._name_gqsrq_84 {
+  ._name_1h7zv_90 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -89,13 +95,13 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._remove_gqsrq_92 {
+  ._remove_1h7zv_98 {
     display: grid;
     place-items: center;
     position: absolute;
     inset-block-start: calc(-1 * var(--sys-unit-2));
     inset-inline-end: calc(-1 * var(--sys-unit-2));
-    border-radius: var(--sys-radius-circle);
-    background: var(--sys-color-surface);
+    border-radius: var(--attachment-tile-remove-radius, var(--sys-radius-circle));
+    background: var(--attachment-tile-remove-bg, var(--sys-color-surface));
   }
 }