@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/attachment-tile/attachment-preview.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ComponentPropsWithRef, type ReactNode } from "react";
 /** An image source for a preview, and whether one is still on its way. */
 export type AttachmentPreviewSource = Readonly<{
     src: string | undefined;
@@ -12,22 +12,24 @@ export type AttachmentPreviewSource = Readonly<{
  * useAttachmentPreview(file); // -> { src: "data:image/png;base64,…", pending: false }
  */
 export declare const useAttachmentPreview: (blob: Blob | undefined) => AttachmentPreviewSource;
-export type AttachmentPreviewProps = Readonly<{
+export type AttachmentPreviewProps = Omit<ComponentPropsWithRef<"span">, "children"> & Readonly<{
     name: string;
     /** Tooltip text for the preview. */
     hint: string;
-    /** Image source; without one the tile shows a glyph and the extension. */
+    /** Image source; without one the tile shows its `icon` and the file's extension. */
     src: string | undefined;
     /** Whether an image source is still being produced. */
     pending?: boolean;
+    /** A file-type glyph above the extension, where there is no image. */
+    icon?: ReactNode;
 }>;
 /**
- * The inside of an attachment tile: an image preview where there is one, a file
- * glyph and the 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 glyph.
+ * 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.
  *
  * @example
- * <AttachmentPreview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+ * <AttachmentTile.Preview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
  */
-export declare const AttachmentPreview: ({ name, hint, src, pending, }: AttachmentPreviewProps) => ReactNode;
+export declare const AttachmentPreview: ({ name, hint, src, pending, icon, className, ...props }: AttachmentPreviewProps) => ReactNode;

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

@@ -1,12 +1,11 @@
-import SvgDescription from "../../vendor/@material-design-icons/svg/outlined/description.js";
 import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
-import { Icon } from "../icon/icon.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 { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 // src/components/attachment-tile/attachment-preview.tsx
 var extensionOf = (name) => {
 	const dot = name.lastIndexOf(".");
@@ -66,38 +65,63 @@ var useAttachmentPreview = (blob) => {
 	return t3;
 };
 /**
-* The inside of an attachment tile: an image preview where there is one, a file
-* glyph and the 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 glyph.
+* 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.
 *
 * @example
-* <AttachmentPreview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
+* <AttachmentTile.Preview name="nota.pdf" hint="nota.pdf (12 kB)" src={undefined} />
 */
 var AttachmentPreview = (t0) => {
-	const $ = c(23);
-	const { name, hint, src, pending: t1 } = t0;
+	const $ = c(36);
+	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);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = hint;
+		$[3] = icon;
+		$[4] = name;
+		$[5] = props;
+		$[6] = src;
+		$[7] = t1;
+	} else {
+		className = $[1];
+		hint = $[2];
+		icon = $[3];
+		name = $[4];
+		props = $[5];
+		src = $[6];
+		t1 = $[7];
+	}
 	const pending = t1 === void 0 ? false : t1;
 	const [loadedSrc, setLoadedSrc] = useState();
 	const [brokenSrc, setBrokenSrc] = useState();
 	let t2;
-	if ($[0] !== name) {
+	if ($[8] !== name) {
 		t2 = extensionOf(name);
-		$[0] = name;
-		$[1] = t2;
-	} else t2 = $[1];
+		$[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;
 	let t4;
-	if ($[2] !== t3) {
+	if ($[10] !== t3) {
 		t4 = { busy: t3 };
-		$[2] = t3;
-		$[3] = t4;
-	} else t4 = $[3];
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
 	const busy = useBusyPhase(t4) !== "fresh";
 	let t5;
-	if ($[4] !== image) {
+	if ($[12] !== image) {
 		t5 = (node) => {
 			if (image === void 0 || !node?.complete) return;
 			if (node.naturalWidth === 0) {
@@ -106,17 +130,23 @@ var AttachmentPreview = (t0) => {
 			}
 			setLoadedSrc(image);
 		};
-		$[4] = image;
-		$[5] = t5;
-	} else t5 = $[5];
+		$[12] = image;
+		$[13] = t5;
+	} else t5 = $[13];
 	const settleAlreadyDecoded = t5;
-	const t6 = busy || void 0;
-	let t7;
-	if ($[6] !== extension || $[7] !== image || $[8] !== pending || $[9] !== settleAlreadyDecoded) {
-		t7 = image === void 0 ? pending ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
-			svg: SvgDescription,
-			size: 1.5,
-			label: ""
+	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
@@ -128,54 +158,58 @@ var AttachmentPreview = (t0) => {
 			onLoad: () => setLoadedSrc(image),
 			onError: () => setBrokenSrc(image)
 		});
-		$[6] = extension;
-		$[7] = image;
-		$[8] = pending;
-		$[9] = settleAlreadyDecoded;
-		$[10] = t7;
-	} else t7 = $[10];
-	let t8;
-	if ($[11] !== busy) {
-		t8 = busy ? /* @__PURE__ */ jsx(Skeleton, { className: attachment_tile_module_default.imageSkeleton }) : null;
-		$[11] = busy;
-		$[12] = t8;
-	} else t8 = $[12];
+		$[16] = extension;
+		$[17] = icon;
+		$[18] = image;
+		$[19] = pending;
+		$[20] = settleAlreadyDecoded;
+		$[21] = t8;
+	} else t8 = $[21];
 	let t9;
-	if ($[13] !== name) {
-		t9 = /* @__PURE__ */ jsx("span", {
+	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
 		});
-		$[13] = name;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("span", {
-			className: attachment_tile_module_default.preview,
-			"aria-busy": t6,
+		$[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: [
-				t7,
 				t8,
-				t9
+				t9,
+				t10
 			]
 		});
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-		$[18] = t9;
-		$[19] = t10;
-	} else t10 = $[19];
-	let t11;
-	if ($[20] !== hint || $[21] !== t10) {
-		t11 = /* @__PURE__ */ jsx(Tooltip, {
+		$[26] = props;
+		$[27] = t10;
+		$[28] = t6;
+		$[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: t10
+			children: t11
 		});
-		$[20] = hint;
-		$[21] = t10;
-		$[22] = t11;
-	} else t11 = $[22];
-	return t11;
+		$[33] = hint;
+		$[34] = t11;
+		$[35] = t12;
+	} else t12 = $[35];
+	return t12;
 };
 export { AttachmentPreview, useAttachmentPreview };

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

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._tile_1v5fo_3 {
+  ._tile_gqsrq_3 {
     --_tile-size: var(--attachment-tile-size, 5rem);
     --_tile-border-width: 1px;
     --_tile-radius: var(
@@ -20,32 +20,32 @@
     color: var(--attachment-tile-fg, var(--sys-color-text-muted));
     cursor: default;
   }
-  ._tile_1v5fo_3 {
+  ._tile_gqsrq_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tile_1v5fo_3:focus-visible {
+  ._tile_gqsrq_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tile_1v5fo_3[data-focus-visible] {
+  ._tile_gqsrq_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tile_1v5fo_3[data-invalid] {
+  ._tile_gqsrq_3[data-invalid] {
     border-color: var(--sys-color-error-border);
     background: var(--sys-color-error-bg);
     color: var(--sys-color-error-fg);
   }
-  ._link_1v5fo_38 {
+  ._tile_gqsrq_3:any-link {
     display: block;
     color: var(--attachment-tile-fg, var(--sys-color-text-muted));
     text-decoration: none;
     cursor: pointer;
   }
-  ._link_1v5fo_38:hover {
+  ._tile_gqsrq_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_1v5fo_48 {
+  ._preview_gqsrq_48 {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -56,23 +56,32 @@
     overflow: hidden;
     border-radius: var(--_tile-inner-radius);
   }
-  ._image_1v5fo_59 {
+  ._image_gqsrq_59 {
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
   }
-  ._imageSkeleton_1v5fo_64 {
+  ._imageSkeleton_gqsrq_64 {
     --skeleton-bg: var(--sys-color-outline);
     position: absolute;
     inset: 0;
     border-radius: var(--_tile-inner-radius);
     block-size: auto;
   }
-  ._extension_1v5fo_71 {
+  ._icon_gqsrq_71 {
+    display: inline-flex;
+    font-size: var(--attachment-tile-icon-size, 1.5em);
+  }
+  ._icon_gqsrq_71 > svg {
+    inline-size: 1em;
+    block-size: 1em;
+    fill: currentcolor;
+  }
+  ._extension_gqsrq_80 {
     font: var(--sys-font-label-small);
     text-transform: uppercase;
   }
-  ._name_1v5fo_75 {
+  ._name_gqsrq_84 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);
@@ -80,7 +89,7 @@
     block-size: 1px;
     white-space: nowrap;
   }
-  ._remove_1v5fo_83 {
+  ._remove_gqsrq_92 {
     display: grid;
     place-items: center;
     position: absolute;

package/dist/components/attachment-tile/attachment-tile.d.ts

@@ -1,30 +1,74 @@
-import { type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ReactElement, type ReactNode } from "react";
+import { AttachmentPreview } from "./attachment-preview.tsx";
+export type AttachmentTileRootProps = useRender.ComponentProps<"span"> & Readonly<{
+    /** Renders with an error treatment, such as for an oversized file. */
+    invalid?: boolean;
+}>;
+/**
+ * The square frame of a tile. Render it as react-aria's `Tag` inside a
+ * `TagList` for a staged file, or as an `<a>` for a download.
+ */
+declare const Root: ({ invalid, className, render, ref, ...props }: AttachmentTileRootProps) => ReactElement;
+export type AttachmentTileRemoveProps = Readonly<{
+    /** The button's accessible name and tooltip, such as "Remove". */
+    label: string;
+    /** The remove glyph. */
+    children: ReactNode;
+    className?: string;
+}>;
+/**
+ * The pointer-only remove button in a staged tile's corner, its children the
+ * glyph. The surrounding `TagGroup` owns the removal, and the keyboard removes
+ * with Delete.
+ */
+declare const Remove: ({ label, children, className, }: AttachmentTileRemoveProps) => ReactNode;
 export type AttachmentTileProps = Readonly<{
     id: string;
     file: File;
     /** Tooltip text for the tile, e.g. "nota.pdf (12 kB)". */
     hint: string;
-    /** Accessible name for the remove button; without one the tile is fixed. */
-    removeLabel?: string;
     /** Renders with an error treatment (e.g. an oversized file). */
     invalid: boolean;
     disabled: boolean;
+    /** A file-type glyph, shown above the extension where the file is not an image. */
+    icon?: ReactNode;
+    className?: string;
+}> & (Readonly<{
+    /** Accessible name for the remove button; without one the tile is fixed. */
+    removeLabel: string;
+    /** The remove button's glyph. */
+    removeIcon: ReactNode;
+}> | Readonly<{
+    removeLabel?: undefined;
+    removeIcon?: undefined;
+}>);
+declare const Prefab: ({ id, file, hint, removeLabel, removeIcon, invalid, disabled, icon, className, }: AttachmentTileProps) => ReactNode;
+/** The parts of an attachment tile, hanging off its prefab. */
+export type AttachmentTileParts = typeof Prefab & Readonly<{
+    Root: typeof Root;
+    Preview: typeof AttachmentPreview;
+    Remove: typeof Remove;
 }>;
 /**
  * A single staged attachment as a square thumbnail inside a `TagList`: an image
  * preview where the file is one, its extension otherwise, and a pointer-only
  * remove button in the corner. Removal is owned by the surrounding `TagGroup`.
+ * The parts hanging off it compose a tile by hand.
  *
  * @example
- * <AttachmentTile id={id} file={file} hint={hint} removeLabel={label} invalid={false} disabled={false} />
+ * <AttachmentTile id={id} file={file} hint={hint} removeLabel="Remove" removeIcon={<CloseIcon />} invalid={false} disabled={false} />
  */
-export declare const AttachmentTile: ({ id, file, hint, removeLabel, invalid, disabled, }: AttachmentTileProps) => ReactNode;
+export declare const AttachmentTile: AttachmentTileParts;
 export type SentAttachmentTileProps = Readonly<{
     name: string;
     /** Tooltip text for the tile. */
     hint: string;
+    /** A file-type glyph, shown above the extension where there is no image. */
+    icon?: ReactNode;
+    className?: string;
 }> & (Readonly<{
-    /** Image source; without one the tile shows a glyph and the extension. */
+    /** Image source; without one the tile shows its icon and the extension. */
     src: string;
     pending?: false;
 }> | Readonly<{
@@ -49,3 +93,4 @@ export type SentAttachmentTileProps = Readonly<{
  * <SentAttachmentTile name="nota.pdf" hint="nota.pdf (12 kB)" src={url} href={url} label="Download nota.pdf" />
  */
 export declare const SentAttachmentTile: (props: SentAttachmentTileProps) => ReactNode;
+export {};