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

package/dist/components/combobox-field/combobox.module.js

@@ -1,25 +1,25 @@
 import './combobox.css';// src/components/combobox-field/combobox.module.scss
-var control = "_control_u8epf_3";
-var content = "_content_u8epf_84";
-var trigger = "_trigger_u8epf_99";
-var spokenValue = "_spokenValue_u8epf_110";
-var icon = "_icon_u8epf_118";
-var tags = "_tags_u8epf_122";
-var tagList = "_tagList_u8epf_125";
-var tag = "_tag_u8epf_122";
-var tagRemove = "_tagRemove_u8epf_242";
-var positioner = "_positioner_u8epf_276";
-var popup = "_popup_u8epf_290";
-var search = "_search_u8epf_318";
-var statusArea = "_statusArea_u8epf_394";
-var status = "_status_u8epf_394";
-var empty = "_empty_u8epf_404";
-var list = "_list_u8epf_420";
-var option = "_option_u8epf_428";
-var indicator = "_indicator_u8epf_475";
-var checkbox = "_checkbox_u8epf_480";
-var checkboxIndicator = "_checkboxIndicator_u8epf_505";
-var optionText = "_optionText_u8epf_534";
+var control = "_control_siwfv_3";
+var content = "_content_siwfv_177";
+var trigger = "_trigger_siwfv_192";
+var spokenValue = "_spokenValue_siwfv_203";
+var icon = "_icon_siwfv_211";
+var tags = "_tags_siwfv_224";
+var tagList = "_tagList_siwfv_227";
+var tag = "_tag_siwfv_224";
+var tagRemove = "_tagRemove_siwfv_344";
+var positioner = "_positioner_siwfv_378";
+var popup = "_popup_siwfv_392";
+var search = "_search_siwfv_420";
+var statusArea = "_statusArea_siwfv_589";
+var status = "_status_siwfv_589";
+var empty = "_empty_siwfv_599";
+var list = "_list_siwfv_615";
+var option = "_option_siwfv_623";
+var indicator = "_indicator_siwfv_675";
+var checkbox = "_checkbox_siwfv_680";
+var checkboxIndicator = "_checkboxIndicator_siwfv_720";
+var optionText = "_optionText_siwfv_749";
 var combobox_module_default = {
 	control,
 	content,

package/dist/components/combobox-field/value-state-view.css

@@ -1,20 +1,20 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._muted_1bwba_3 {
+  ._muted_1lmaa_3 {
     display: inline-flex;
     align-items: center;
-    gap: var(--sys-unit-2);
+    gap: var(--combobox-unavailable-gap, var(--sys-unit-2));
     min-inline-size: 0;
     color: var(--combobox-unavailable-fg, var(--sys-color-text-muted));
   }
-  ._item_1bwba_10 {
+  ._item_1lmaa_10 {
     min-inline-size: 0;
   }
-  ._icon_1bwba_13 {
+  ._icon_1lmaa_13 {
     display: inline-flex;
     flex-shrink: 0;
   }
-  ._name_1bwba_17 {
+  ._name_1lmaa_17 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);

package/dist/components/combobox-field/value-state-view.module.js

@@ -1,8 +1,8 @@
 import './value-state-view.css';// src/components/combobox-field/value-state-view.module.scss
-var muted = "_muted_1bwba_3";
-var item = "_item_1bwba_10";
-var icon = "_icon_1bwba_13";
-var name = "_name_1bwba_17";
+var muted = "_muted_1lmaa_3";
+var item = "_item_1lmaa_10";
+var icon = "_icon_1lmaa_13";
+var name = "_name_1lmaa_17";
 var value_state_view_module_default = {
 	muted,
 	item,

package/dist/components/composer/composer-attachments.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { type ComposerAttachment } from "./composer.context.ts";
 export type ComposerAttachButtonProps = Readonly<{
     /** The button's accessible name and tooltip, such as "Add attachment". */
     label: string;
@@ -10,24 +11,42 @@ export type ComposerAttachButtonProps = Readonly<{
 }>;
 /** An icon button, its children the glyph, that opens the file picker and stages what is picked. */
 export declare const ComposerAttachButton: ({ label, accept, children, className, }: ComposerAttachButtonProps) => ReactNode;
+/** What a staged file's tile renders from, besides the file. */
+export type ComposerAttachmentState = Readonly<{
+    /** Whether the file is over `maxFileSize`, and blocks sending. */
+    oversized: boolean;
+    /** The file's size, formatted for the locale, such as "12 kB". */
+    size: string;
+    /** Whether the composer is disabled. */
+    disabled: boolean;
+}>;
 export type ComposerAttachmentsProps = Readonly<{
     /** The tile list's accessible name, such as "Attachments". */
     label: string;
-    /** Each tile's remove button's accessible name, such as "Remove". */
-    removeLabel: string;
-    /** Each tile's remove glyph. */
-    removeIcon: ReactNode;
-    /** A tile's file-type glyph. Left out, a tile that is not an image shows only the file's extension. */
-    fileIcon?: ReactNode;
-    /** A tile's tooltip, from the file's name and formatted size. */
-    fileHint: (name: string, size: string) => string;
+    /** The tile for one staged file, such as an `AttachmentTile` with the attachment's `id`. */
+    children: (attachment: ComposerAttachment, state: ComposerAttachmentState) => ReactNode;
     className?: string;
 }>;
 /**
- * The staged files as removable tiles. Removing the last one returns focus to
- * the editor. Renders nothing while no file is staged.
+ * The staged files, each as the tile `children` returns. Removing the last one
+ * returns focus to the editor. Renders nothing while no file is staged.
+ *
+ * @example
+ * <Composer.Attachments label="Attachments">
+ * 	{(attachment, { oversized, size, disabled }) => (
+ * 		<AttachmentTile
+ * 			id={attachment.id}
+ * 			file={attachment.file}
+ * 			hint={`${attachment.file.name} (${size})`}
+ * 			removeLabel="Remove"
+ * 			removeIcon={<CloseIcon />}
+ * 			invalid={oversized}
+ * 			disabled={disabled}
+ * 		/>
+ * 	)}
+ * </Composer.Attachments>
  */
-export declare const ComposerAttachments: ({ label, removeLabel, removeIcon, fileIcon, fileHint, className, }: ComposerAttachmentsProps) => ReactNode;
+export declare const ComposerAttachments: ({ label, children, className, }: ComposerAttachmentsProps) => ReactNode;
 export type ComposerAttachmentsErrorProps = Readonly<{
     /** The alert, from the formatted `maxFileSize`, such as "Files over 5 MB must be removed before sending." */
     tooLargeError: (maxSize: string) => string;

package/dist/components/composer/composer-attachments.js

@@ -1,6 +1,5 @@
 import { formatBytes } from "../../lib/format-bytes.js";
-import { AttachmentTile } from "../attachment-tile/attachment-tile.js";
-import { Button as Button$1 } from "../button/button.js";
+import { IconButton } from "../button/button.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import { useComposerContext } from "./composer.context.js";
 import composer_module_default from "./composer.module.js";
@@ -31,15 +30,14 @@ var ComposerAttachButton = (t0) => {
 	} else t2 = $[3];
 	let t3;
 	if ($[4] !== children || $[5] !== className || $[6] !== disabled || $[7] !== label || $[8] !== t2) {
-		t3 = /* @__PURE__ */ jsx(Button$1, {
+		t3 = /* @__PURE__ */ jsx(IconButton, {
 			className,
 			variant: "tertiary",
 			size: "md",
-			iconOnly: true,
-			icon: children,
 			disabled,
 			label,
-			render: t2
+			render: t2,
+			children
 		});
 		$[4] = children;
 		$[5] = className;
@@ -64,12 +62,27 @@ var ComposerAttachButton = (t0) => {
 	return t4;
 };
 /**
-* The staged files as removable tiles. Removing the last one returns focus to
-* the editor. Renders nothing while no file is staged.
+* The staged files, each as the tile `children` returns. Removing the last one
+* returns focus to the editor. Renders nothing while no file is staged.
+*
+* @example
+* <Composer.Attachments label="Attachments">
+* 	{(attachment, { oversized, size, disabled }) => (
+* 		<AttachmentTile
+* 			id={attachment.id}
+* 			file={attachment.file}
+* 			hint={`${attachment.file.name} (${size})`}
+* 			removeLabel="Remove"
+* 			removeIcon={<CloseIcon />}
+* 			invalid={oversized}
+* 			disabled={disabled}
+* 		/>
+* 	)}
+* </Composer.Attachments>
 */
 var ComposerAttachments = (t0) => {
-	const $ = c(22);
-	const { label, removeLabel, removeIcon, fileIcon, fileHint, className } = t0;
+	const $ = c(19);
+	const { label, children, className } = t0;
 	const locale = useLocale();
 	const { attachments, removeAttachment, focusEditor, disabled, maxFileSize } = useComposerContext();
 	if (attachments.length === 0) return null;
@@ -93,50 +106,42 @@ var ComposerAttachments = (t0) => {
 		$[5] = t2;
 	} else t2 = $[5];
 	let t3;
-	if ($[6] !== disabled || $[7] !== fileHint || $[8] !== fileIcon || $[9] !== locale || $[10] !== maxFileSize || $[11] !== removeIcon || $[12] !== removeLabel) {
-		t3 = (attachment_1) => /* @__PURE__ */ jsx(AttachmentTile, {
-			id: attachment_1.id,
-			file: attachment_1.file,
-			hint: fileHint(attachment_1.file.name, formatBytes(attachment_1.file.size, locale)),
-			removeLabel,
-			removeIcon,
-			icon: fileIcon,
-			invalid: isOversized(attachment_1.file, maxFileSize),
+	if ($[6] !== children || $[7] !== disabled || $[8] !== locale || $[9] !== maxFileSize) {
+		t3 = (attachment_1) => children(attachment_1, {
+			oversized: isOversized(attachment_1.file, maxFileSize),
+			size: formatBytes(attachment_1.file.size, locale),
 			disabled
 		});
-		$[6] = disabled;
-		$[7] = fileHint;
-		$[8] = fileIcon;
-		$[9] = locale;
-		$[10] = maxFileSize;
-		$[11] = removeIcon;
-		$[12] = removeLabel;
-		$[13] = t3;
-	} else t3 = $[13];
+		$[6] = children;
+		$[7] = disabled;
+		$[8] = locale;
+		$[9] = maxFileSize;
+		$[10] = t3;
+	} else t3 = $[10];
 	let t4;
-	if ($[14] !== attachments || $[15] !== t2 || $[16] !== t3) {
+	if ($[11] !== attachments || $[12] !== t2 || $[13] !== t3) {
 		t4 = /* @__PURE__ */ jsx(TagList, {
 			items: attachments,
 			className: t2,
 			children: t3
 		});
-		$[14] = attachments;
-		$[15] = t2;
-		$[16] = t3;
-		$[17] = t4;
-	} else t4 = $[17];
+		$[11] = attachments;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
 	let t5;
-	if ($[18] !== label || $[19] !== remove || $[20] !== t4) {
+	if ($[15] !== label || $[16] !== remove || $[17] !== t4) {
 		t5 = /* @__PURE__ */ jsx(TagGroup, {
 			"aria-label": label,
 			onRemove: remove,
 			children: t4
 		});
-		$[18] = label;
-		$[19] = remove;
-		$[20] = t4;
-		$[21] = t5;
-	} else t5 = $[21];
+		$[15] = label;
+		$[16] = remove;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
 	return t5;
 };
 /**

package/dist/components/composer/composer-editor.css

@@ -1,12 +1,12 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._editor_1wstb_3 {
+  ._editor_1emww_3 {
     position: relative;
     flex: 1;
     min-inline-size: 0;
     overflow: hidden auto;
   }
-  ._content_1wstb_9 {
+  ._content_1emww_9 {
     outline: none;
     padding: var(--composer-editor-pad, var(--sys-unit-6));
     min-block-size: calc(var(--composer-min-lines) * 1lh + var(--composer-editor-pad, var(--sys-unit-6)));
@@ -14,7 +14,7 @@
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
-  ._placeholder_1wstb_17 {
+  ._placeholder_1emww_17 {
     position: absolute;
     inset-block-start: var(--composer-editor-pad, var(--sys-unit-6));
     inset-inline-start: var(--composer-editor-pad, var(--sys-unit-6));
@@ -22,52 +22,53 @@
     pointer-events: none;
     user-select: none;
   }
-  ._menu_1wstb_25 {
+  ._menu_1emww_25 {
     box-sizing: border-box;
     border: none;
-    border-radius: var(--sys-radius-md);
-    background: var(--sys-color-surface-overlay);
-    padding: var(--sys-unit-4);
-    color: var(--sys-color-text);
+    border-radius: var(--popup-radius, var(--sys-radius-md));
+    background: var(--popup-bg, var(--sys-color-surface-overlay));
+    padding: var(--popup-pad, var(--sys-unit-4));
+    color: var(--popup-fg, var(--sys-color-text));
     transform-origin: var(--transform-origin);
     scrollbar-width: thin;
-    scrollbar-color: var(--sys-color-outline) transparent;
-    box-shadow: var(--sys-elevation-1);
+    scrollbar-color: var(--popup-scrollbar-fg, var(--sys-color-outline)) transparent;
+    box-shadow: var(--popup-shadow, var(--sys-elevation-1));
   }
   @media not (prefers-reduced-motion) {
-    ._menu_1wstb_25 {
+    ._menu_1emww_25 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._menu_1wstb_25[data-starting-style], ._menu_1wstb_25[data-ending-style] {
+  ._menu_1emww_25[data-starting-style], ._menu_1emww_25[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._menu_1wstb_25 {
+  ._menu_1emww_25 {
     inline-size: max-content;
-    min-inline-size: 16rem;
-    max-inline-size: 24rem;
-    max-block-size: 20rem;
+    min-inline-size: var(--composer-menu-min-inline-size, 16rem);
+    max-inline-size: var(--composer-menu-max-inline-size, 24rem);
+    max-block-size: var(--composer-menu-max-block-size, 20rem);
     margin: 0;
     overflow: hidden auto;
   }
-  ._menuItem_1wstb_54 {
+  ._menuItem_1emww_54 {
     display: flex;
     align-items: center;
-    gap: var(--sys-unit-6);
+    gap: var(--popup-item-gap, var(--sys-unit-6));
     box-sizing: border-box;
-    min-block-size: var(--sys-unit-20);
-    border-radius: var(--sys-radius-sm);
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text);
-    font: var(--sys-font-body-medium);
+    min-block-size: var(--popup-item-min-block-size, var(--sys-unit-20));
+    border-radius: var(--popup-item-radius, var(--sys-radius-sm));
+    background: var(--popup-item-bg, transparent);
+    padding: var(--popup-item-pad-y, var(--sys-unit-4)) var(--popup-item-pad-x, var(--sys-unit-6));
+    color: var(--popup-item-fg, var(--popup-fg, var(--sys-color-text)));
+    font: var(--popup-item-font, var(--sys-font-body-medium));
     user-select: none;
   }
-  ._menuItem_1wstb_54 {
+  ._menuItem_1emww_54 {
     position: relative;
     isolation: isolate;
   }
-  ._menuItem_1wstb_54::after {
+  ._menuItem_1emww_54::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -78,27 +79,31 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._menuItem_1wstb_54::after {
+    ._menuItem_1emww_54::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._menuItem_1wstb_54:hover:not(:disabled, [data-disabled])::after {
+  ._menuItem_1emww_54:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._menuItem_1wstb_54:active:not(:disabled, [data-disabled])::after {
+  ._menuItem_1emww_54:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._menuItem_1wstb_54 {
+  ._menuItem_1emww_54 {
     outline: none;
   }
-  ._menuItem_1wstb_54[data-highlighted] {
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
+  ._menuItem_1emww_54[data-selected] {
+    background: var(--popup-item-selected-bg, var(--popup-item-bg, transparent));
+    color: var(--popup-item-selected-fg, var(--popup-item-fg, var(--popup-fg, var(--sys-color-text))));
   }
-  ._menuItem_1wstb_54[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._menuItem_1emww_54[data-highlighted] {
+    background: var(--popup-item-highlighted-bg, var(--sys-color-primary-container));
+    color: var(--popup-item-highlighted-fg, var(--sys-color-on-primary-container));
   }
-  ._menuItem_1wstb_54 {
+  ._menuItem_1emww_54[data-disabled] {
+    color: var(--popup-item-disabled-fg, var(--sys-color-disabled-fg));
+  }
+  ._menuItem_1emww_54 {
     list-style: none;
   }
 }

package/dist/components/composer/composer-editor.d.ts

@@ -1,9 +1,8 @@
-import { type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ReactElement, type ReactNode } from "react";
 export type ComposerEditorProps = Readonly<{
     /** The editor's accessible name, such as "Comment". */
     label: string;
-    /** Shown while the draft is empty, and describes the editor. */
-    placeholder?: string;
     /** Lines of height while short. @default 3 */
     minLines?: number;
     /** Lines of height before it scrolls. */
@@ -13,4 +12,15 @@ export type ComposerEditorProps = Readonly<{
     className?: string;
 }>;
 /** The composer's plain-text editor, with mentions and Enter to send. */
-export declare const ComposerEditor: ({ label, placeholder, minLines, maxLines, children, className, }: ComposerEditorProps) => ReactNode;
+export declare const ComposerEditor: ({ label, minLines, maxLines, children, className, }: ComposerEditorProps) => ReactNode;
+export type ComposerPlaceholderProps = useRender.ComponentProps<"div">;
+/**
+ * What the editor shows while the draft is empty, inside the `Editor`. It also
+ * describes the editor.
+ *
+ * @example
+ * <Composer.Editor label="Comment">
+ * 	<Composer.Placeholder>Write a comment</Composer.Placeholder>
+ * </Composer.Editor>
+ */
+export declare const ComposerPlaceholder: ({ render, className, ref, ...props }: ComposerPlaceholderProps) => ReactElement;