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

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

@@ -1,6 +1,6 @@
 import { useRender } from "@base-ui/react/use-render";
 import { type ReactElement, type ReactNode } from "react";
-import { AttachmentPreview } from "./attachment-preview.tsx";
+import { AttachmentExtension, AttachmentIcon, AttachmentImage, AttachmentName, AttachmentPreview, AttachmentSkeleton } from "./attachment-preview.tsx";
 export type AttachmentTileRootProps = useRender.ComponentProps<"span"> & Readonly<{
     /** Renders with an error treatment, such as for an oversized file. */
     invalid?: boolean;
@@ -10,19 +10,33 @@ export type AttachmentTileRootProps = useRender.ComponentProps<"span"> & Readonl
  * `TagList` for a staged file, or as an `<a>` for a download.
  */
 declare const Root: ({ invalid, className, render, ref, ...props }: AttachmentTileRootProps) => ReactElement;
+/**
+ * The corner of a tile that a remove button sits in.
+ *
+ * @example
+ * <AttachmentTile.Corner><AttachmentTile.Remove render={…} /></AttachmentTile.Corner>
+ */
+declare const Corner: ({ className, render, ref, ...props }: useRender.ComponentProps<"span">) => ReactElement;
 export type AttachmentTileRemoveProps = Readonly<{
-    /** The button's accessible name and tooltip, such as "Remove". */
-    label: string;
-    /** The remove glyph. */
-    children: ReactNode;
+    /** The button to render, such as `<IconButton label="Remove" variant="tertiary" size="sm"><CloseIcon /></IconButton>`. */
+    render: useRender.RenderProp;
     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.
+ * The pointer-only remove button of a staged tile, as react-aria's remove
+ * slot. It renders whichever button it is given. The surrounding `TagGroup`
+ * owns the removal, and the keyboard removes with Delete.
+ *
+ * @example
+ * <AttachmentTile.Remove
+ * 	render={
+ * 		<IconButton label="Remove" variant="tertiary" size="sm">
+ * 			<CloseIcon />
+ * 		</IconButton>
+ * 	}
+ * />
  */
-declare const Remove: ({ label, children, className, }: AttachmentTileRemoveProps) => ReactNode;
+declare const Remove: ({ render, className, }: AttachmentTileRemoveProps) => ReactNode;
 export type AttachmentTileProps = Readonly<{
     id: string;
     file: File;
@@ -48,13 +62,21 @@ declare const Prefab: ({ id, file, hint, removeLabel, removeIcon, invalid, disab
 export type AttachmentTileParts = typeof Prefab & Readonly<{
     Root: typeof Root;
     Preview: typeof AttachmentPreview;
+    Image: typeof AttachmentImage;
+    Icon: typeof AttachmentIcon;
+    Extension: typeof AttachmentExtension;
+    Skeleton: typeof AttachmentSkeleton;
+    Name: typeof AttachmentName;
+    Corner: typeof Corner;
     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.
+ * The parts hanging off it compose a tile by hand: a `Preview` holding the
+ * `Image`, or the `Icon` and `Extension`, a `Skeleton` and the `Name`, and a
+ * `Remove` button in the `Corner`.
  *
  * @example
  * <AttachmentTile id={id} file={file} hint={hint} removeLabel="Remove" removeIcon={<CloseIcon />} invalid={false} disabled={false} />

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

@@ -1,5 +1,7 @@
-import { Button as Button$1 } from "../button/button.js";
-import { AttachmentPreview, useAttachmentPreview } from "./attachment-preview.js";
+import { renderAs } from "../../lib/render-as.js";
+import { IconButton } from "../button/button.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { AttachmentExtension, AttachmentIcon, AttachmentImage, AttachmentName, AttachmentPreview, AttachmentSkeleton, useAttachmentPreview } from "./attachment-preview.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";
@@ -70,57 +72,162 @@ var Root = (t0) => {
 	return useRender(t5);
 };
 /**
-* 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.
+* The corner of a tile that a remove button sits in.
+*
+* @example
+* <AttachmentTile.Corner><AttachmentTile.Remove render={…} /></AttachmentTile.Corner>
+*/
+var Corner = (t0) => {
+	const $ = c(14);
+	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];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(attachment_tile_module_default.remove, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+/**
+* The pointer-only remove button of a staged tile, as react-aria's remove
+* slot. It renders whichever button it is given. The surrounding `TagGroup`
+* owns the removal, and the keyboard removes with Delete.
+*
+* @example
+* <AttachmentTile.Remove
+* 	render={
+* 		<IconButton label="Remove" variant="tertiary" size="sm">
+* 			<CloseIcon />
+* 		</IconButton>
+* 	}
+* />
 */
 var Remove = (t0) => {
-	const $ = c(11);
-	const { label, children, className } = t0;
+	const $ = c(6);
+	const { render, className } = t0;
 	const removeId = useId();
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(attachment_tile_module_default.remove, className);
-		$[0] = className;
+	if ($[0] !== render) {
+		t1 = renderAs(render);
+		$[0] = render;
 		$[1] = t1;
 	} else t1 = $[1];
 	let t2;
-	if ($[2] !== removeId) {
+	if ($[2] !== className || $[3] !== removeId || $[4] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Button, {
 			slot: "remove",
 			id: removeId,
 			"aria-labelledby": removeId,
-			excludeFromTabOrder: true
+			excludeFromTabOrder: true,
+			className,
+			render: t1
 		});
-		$[2] = removeId;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[2] = className;
+		$[3] = removeId;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+var PreviewContent = (t0) => {
+	const $ = c(14);
+	const { name, hint, src, pending, icon } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(AttachmentImage, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== icon) {
+		t2 = /* @__PURE__ */ jsx(AttachmentIcon, { children: icon });
+		$[1] = icon;
+		$[2] = t2;
+	} else t2 = $[2];
 	let t3;
-	if ($[4] !== children || $[5] !== label || $[6] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Button$1, {
-			variant: "tertiary",
-			size: "sm",
-			iconOnly: true,
-			icon: children,
-			label,
-			render: t2
-		});
-		$[4] = children;
-		$[5] = label;
-		$[6] = t2;
-		$[7] = t3;
-	} else t3 = $[7];
 	let t4;
-	if ($[8] !== t1 || $[9] !== t3) {
-		t4 = /* @__PURE__ */ jsx("span", {
-			className: t1,
-			children: t3
+	let t5;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(AttachmentExtension, {});
+		t4 = /* @__PURE__ */ jsx(AttachmentSkeleton, {});
+		t5 = /* @__PURE__ */ jsx(AttachmentName, {});
+		$[3] = t3;
+		$[4] = t4;
+		$[5] = t5;
+	} else {
+		t3 = $[3];
+		t4 = $[4];
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== name || $[7] !== pending || $[8] !== src || $[9] !== t2) {
+		t6 = /* @__PURE__ */ jsxs(AttachmentPreview, {
+			name,
+			src,
+			pending,
+			children: [
+				t1,
+				t2,
+				t3,
+				t4,
+				t5
+			]
 		});
-		$[8] = t1;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
+		$[6] = name;
+		$[7] = pending;
+		$[8] = src;
+		$[9] = t2;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== hint || $[12] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Tooltip, {
+			content: hint,
+			children: t6
+		});
+		$[11] = hint;
+		$[12] = t6;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 };
 var Prefab = (t0) => {
 	const $ = c(19);
@@ -140,7 +247,7 @@ var Prefab = (t0) => {
 	} else t1 = $[3];
 	let t2;
 	if ($[4] !== file.name || $[5] !== hint || $[6] !== icon || $[7] !== preview.pending || $[8] !== preview.src) {
-		t2 = /* @__PURE__ */ jsx(AttachmentPreview, {
+		t2 = /* @__PURE__ */ jsx(PreviewContent, {
 			name: file.name,
 			hint,
 			src: preview.src,
@@ -156,10 +263,12 @@ var Prefab = (t0) => {
 	} else t2 = $[9];
 	let t3;
 	if ($[10] !== removeIcon || $[11] !== removeLabel) {
-		t3 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx(Remove, {
+		t3 = removeLabel === void 0 ? null : /* @__PURE__ */ jsx(Corner, { children: /* @__PURE__ */ jsx(Remove, { render: /* @__PURE__ */ jsx(IconButton, {
+			variant: "tertiary",
+			size: "sm",
 			label: removeLabel,
 			children: removeIcon
-		});
+		}) }) });
 		$[10] = removeIcon;
 		$[11] = removeLabel;
 		$[12] = t3;
@@ -185,7 +294,9 @@ var Prefab = (t0) => {
 * 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.
+* The parts hanging off it compose a tile by hand: a `Preview` holding the
+* `Image`, or the `Icon` and `Extension`, a `Skeleton` and the `Name`, and a
+* `Remove` button in the `Corner`.
 *
 * @example
 * <AttachmentTile id={id} file={file} hint={hint} removeLabel="Remove" removeIcon={<CloseIcon />} invalid={false} disabled={false} />
@@ -193,6 +304,12 @@ var Prefab = (t0) => {
 var AttachmentTile = Object.assign(Prefab, {
 	Root,
 	Preview: AttachmentPreview,
+	Image: AttachmentImage,
+	Icon: AttachmentIcon,
+	Extension: AttachmentExtension,
+	Skeleton: AttachmentSkeleton,
+	Name: AttachmentName,
+	Corner,
 	Remove
 });
 /**
@@ -219,7 +336,7 @@ var SentAttachmentTile = (props) => {
 	} else t0 = $[3];
 	let t1;
 	if ($[4] !== props.hint || $[5] !== props.icon || $[6] !== props.name || $[7] !== props.pending || $[8] !== props.src) {
-		t1 = /* @__PURE__ */ jsx(AttachmentPreview, {
+		t1 = /* @__PURE__ */ jsx(PreviewContent, {
 			name: props.name,
 			hint: props.hint,
 			src: props.src,

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

@@ -1,12 +1,12 @@
 import './attachment-tile.css';// src/components/attachment-tile/attachment-tile.module.scss
-var tile = "_tile_gqsrq_3";
-var preview = "_preview_gqsrq_48";
-var image = "_image_gqsrq_59";
-var imageSkeleton = "_imageSkeleton_gqsrq_64";
-var icon = "_icon_gqsrq_71";
-var extension = "_extension_gqsrq_80";
-var name = "_name_gqsrq_84";
-var remove = "_remove_gqsrq_92";
+var tile = "_tile_1h7zv_3";
+var preview = "_preview_1h7zv_51";
+var image = "_image_1h7zv_62";
+var imageSkeleton = "_imageSkeleton_1h7zv_67";
+var icon = "_icon_1h7zv_77";
+var extension = "_extension_1h7zv_86";
+var name = "_name_1h7zv_90";
+var remove = "_remove_1h7zv_98";
 var attachment_tile_module_default = {
 	tile,
 	preview,

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

@@ -1,2 +1,2 @@
-export { type AttachmentPreviewProps, type AttachmentPreviewSource, useAttachmentPreview, } from "./attachment-preview.tsx";
+export { type AttachmentImageProps, type AttachmentPreviewProps, type AttachmentPreviewSource, type AttachmentSkeletonProps, type AttachmentTextProps, useAttachmentPreview, } from "./attachment-preview.tsx";
 export * from "./attachment-tile.tsx";

package/dist/components/avatar/avatar.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._avatar_1sy4c_3 {
+  ._avatar_18yef_3 {
     --_avatar-bg: var(--sys-color-primary-container);
     --_avatar-fg: var(--sys-color-on-primary-container);
     position: relative;
@@ -8,37 +8,37 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--sys-radius-circle);
+    border-radius: var(--avatar-radius, var(--sys-radius-circle));
     background-color: var(--avatar-bg, var(--_avatar-bg));
     color: var(--avatar-fg, var(--_avatar-fg));
-    font-weight: 600;
+    font-weight: var(--avatar-font-weight, 600);
     line-height: 1;
     text-transform: uppercase;
     overflow: hidden;
   }
-  ._avatar_1sy4c_3[data-tone="1"] {
+  ._avatar_18yef_3[data-tone="1"] {
     --_avatar-bg: var(--sys-color-identity-1-bg);
     --_avatar-fg: var(--sys-color-identity-1-fg);
   }
-  ._avatar_1sy4c_3[data-tone="2"] {
+  ._avatar_18yef_3[data-tone="2"] {
     --_avatar-bg: var(--sys-color-identity-2-bg);
     --_avatar-fg: var(--sys-color-identity-2-fg);
   }
-  ._avatar_1sy4c_3[data-tone="3"] {
+  ._avatar_18yef_3[data-tone="3"] {
     --_avatar-bg: var(--sys-color-identity-3-bg);
     --_avatar-fg: var(--sys-color-identity-3-fg);
   }
-  ._avatar_1sy4c_3[data-tone="4"] {
+  ._avatar_18yef_3[data-tone="4"] {
     --_avatar-bg: var(--sys-color-identity-4-bg);
     --_avatar-fg: var(--sys-color-identity-4-fg);
   }
-  ._image_1sy4c_35 {
+  ._image_18yef_35 {
     inline-size: 100%;
     block-size: 100%;
     border-radius: inherit;
     object-fit: cover;
   }
-  ._fallback_1sy4c_41 {
+  ._fallback_18yef_41 {
     display: inline-flex;
     align-items: center;
     justify-content: center;

package/dist/components/avatar/avatar.d.ts

@@ -1,19 +1,64 @@
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
 import type { ComponentPropsWithRef, ReactNode } from "react";
-export type AvatarProps = Omit<ComponentPropsWithRef<"span">, "children"> & Readonly<{
+export type AvatarRootProps = ComponentPropsWithRef<"span"> & Readonly<{
+    /** Display name; drives the (stable) tone. */
+    name: string;
+    /** Diameter relative to the surrounding font size (in `em`). @default 2.5 */
+    size?: number;
+}>;
+/**
+ * The circle, in a colour that stays the same for the same `name`. Decorative:
+ * the name it stands for is always beside it, so it is not announced.
+ *
+ * @example
+ * <Avatar.Root name="Ada Lovelace">
+ * 	<Avatar.Image src={colleague.portraitUrl} />
+ * 	<Avatar.Fallback>AL</Avatar.Fallback>
+ * </Avatar.Root>
+ */
+declare const Root: ({ name, size, className, style: inlineStyle, ...props }: AvatarRootProps) => ReactNode;
+export type AvatarImageProps = Omit<BaseAvatar.Image.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+/**
+ * The portrait, shown once it has loaded.
+ *
+ * @example
+ * <Avatar.Image src={colleague.portraitUrl} />
+ */
+declare const Image: ({ alt, className, ...props }: AvatarImageProps) => ReactNode;
+export type AvatarFallbackProps = Omit<BaseAvatar.Fallback.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+/**
+ * What shows while there is no portrait, or while it loads or fails, such as
+ * the initials.
+ *
+ * @example
+ * <Avatar.Fallback>AL</Avatar.Fallback>
+ */
+declare const Fallback: ({ className, ...props }: AvatarFallbackProps) => ReactNode;
+export type AvatarProps = Omit<AvatarRootProps, "children"> & Readonly<{
     /** Display name; drives the initials and the (stable) tone. */
     name: string;
     /** Portrait to show in place of the initials, where there is one. */
     src?: string;
-    /** Diameter relative to the surrounding font size (in `em`). @default 2.5 */
-    size?: number;
+}>;
+declare const Prefab: ({ name, src, ...props }: AvatarProps) => ReactNode;
+/** The parts of an avatar, hanging off its prefab. */
+export type AvatarParts = typeof Prefab & Readonly<{
+    Root: typeof Root;
+    Image: typeof Image;
+    Fallback: typeof Fallback;
 }>;
 /**
  * A small circular avatar: the portrait at `src`, falling back to initials over
  * a colour that stays the same for the same name. Decorative: the name it
  * stands for is always beside it, so it is not announced. Other props go to
- * the `<span>`.
+ * the `<span>`. The parts hanging off it compose one by hand.
  *
  * @example
  * <Avatar name="Ada Lovelace" src={colleague.portraitUrl} />
  */
-export declare const Avatar: ({ name, src, size, className, style: inlineStyle, ...props }: AvatarProps) => ReactNode;
+export declare const Avatar: AvatarParts;
+export {};