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

package/dist/components/form/form.js

@@ -12,6 +12,7 @@ import { focusFirstInvalid } from "./first-invalid.js";
 import { FormDisabledProvider, FormStatusProvider, useFormDisabled, useFormStatus } from "./form-context.js";
 import form_module_default from "./form.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useStore } from "@tanstack/react-form";
@@ -203,14 +204,64 @@ var FormErrors = (t0) => {
 	return t2;
 };
 /**
-* The form's submit button. A wait that lasts 150 ms shows a spinner, is
-* announced as `busyLabel`, and stays shown at least 200 ms.
+* What the form shows while its wait is worth showing, such as a spinner: it
+* renders once the form has been busy for 150 ms, and stays at least 200 ms.
+* It is decoration; `Form.Submit` announces the wait.
+*
+* @example
+* <Form.Pending render={<Spinner size={1} />} />
+*/
+var FormPending = (t0) => {
+	const $ = c(11);
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = ref;
+		$[3] = render;
+	} else {
+		props = $[1];
+		ref = $[2];
+		render = $[3];
+	}
+	const busy = useFormDisabled();
+	let t1;
+	if ($[4] !== busy) {
+		t1 = { busy };
+		$[4] = busy;
+		$[5] = t1;
+	} else t1 = $[5];
+	const t2 = useBusyPhase(t1) !== "fresh";
+	let t3;
+	if ($[6] !== props || $[7] !== ref || $[8] !== render || $[9] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: t2,
+			props
+		};
+		$[6] = props;
+		$[7] = ref;
+		$[8] = render;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return useRender(t3);
+};
+/**
+* The form's submit button. A wait that lasts 150 ms shows a `Form.Pending`
+* spinner in place of its icon, is announced as `busyLabel`, and stays shown
+* at least 200 ms.
 *
 * @example
 * <Form.Submit busyLabel="Saving">Save</Form.Submit>
 */
 var FormSubmit = (t0) => {
-	const $ = c(24);
+	const $ = c(22);
 	let busyLabel;
 	let children;
 	let icon;
@@ -244,13 +295,12 @@ var FormSubmit = (t0) => {
 	const t3 = shown ? void 0 : icon;
 	const t4 = shown || void 0;
 	let t5;
-	if ($[8] !== shown) {
-		t5 = shown ? /* @__PURE__ */ jsx(Spinner, { size: 1 }) : null;
-		$[8] = shown;
-		$[9] = t5;
-	} else t5 = $[9];
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(FormPending, { render: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[8] = t5;
+	} else t5 = $[8];
 	let t6;
-	if ($[10] !== children || $[11] !== props || $[12] !== t3 || $[13] !== t4 || $[14] !== t5 || $[15] !== variant) {
+	if ($[9] !== children || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== variant) {
 		t6 = /* @__PURE__ */ jsxs(Button, {
 			...props,
 			type: "submit",
@@ -259,34 +309,34 @@ var FormSubmit = (t0) => {
 			"aria-busy": t4,
 			children: [t5, children]
 		});
-		$[10] = children;
-		$[11] = props;
-		$[12] = t3;
-		$[13] = t4;
-		$[14] = t5;
-		$[15] = variant;
-		$[16] = t6;
-	} else t6 = $[16];
+		$[9] = children;
+		$[10] = props;
+		$[11] = t3;
+		$[12] = t4;
+		$[13] = variant;
+		$[14] = t6;
+	} else t6 = $[14];
 	let t7;
-	if ($[17] !== busyLabel || $[18] !== shown || $[19] !== status) {
+	if ($[15] !== busyLabel || $[16] !== shown || $[17] !== status) {
 		t7 = shown && status !== null ? createPortal(busyLabel, status) : null;
-		$[17] = busyLabel;
-		$[18] = shown;
-		$[19] = status;
-		$[20] = t7;
-	} else t7 = $[20];
+		$[15] = busyLabel;
+		$[16] = shown;
+		$[17] = status;
+		$[18] = t7;
+	} else t7 = $[18];
 	let t8;
-	if ($[21] !== t6 || $[22] !== t7) {
+	if ($[19] !== t6 || $[20] !== t7) {
 		t8 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t7] });
-		$[21] = t6;
-		$[22] = t7;
-		$[23] = t8;
-	} else t8 = $[23];
+		$[19] = t6;
+		$[20] = t7;
+		$[21] = t8;
+	} else t8 = $[21];
 	return t8;
 };
 /**
 * A form over a TanStack Form instance: `Root` is the `<form>`, `Errors` its
-* form-level errors and `Submit` its submit button.
+* form-level errors, `Submit` its submit button and `Pending` what shows while
+* it waits.
 *
 * @example
 * <Form.Root form={form}>
@@ -298,6 +348,7 @@ var FormSubmit = (t0) => {
 var Form = {
 	Root: FormRoot,
 	Errors: FormErrors,
+	Pending: FormPending,
 	Submit: FormSubmit
 };
 function _temp(state) {

package/dist/components/icon/icon.css

@@ -1,9 +1,9 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._icon_ex143_3 {
+  ._icon_24xqt_3 {
     display: inline-block;
     flex-shrink: 0;
     vertical-align: middle;
-    fill: var(--icon-color, currentcolor);
+    fill: var(--icon-fg, currentcolor);
   }
 }

package/dist/components/icon/icon.module.js

@@ -1,4 +1,4 @@
 import './icon.css';// src/components/icon/icon.module.scss
-var icon = "_icon_ex143_3";
+var icon = "_icon_24xqt_3";
 var icon_module_default = { icon };
 export { icon_module_default as default, icon };

package/dist/components/link/link.css

@@ -1,18 +1,19 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._link_xyp6s_3 {
+  ._link_3h8gn_3 {
     color: var(--link-fg, var(--sys-color-primary));
-    text-decoration: underline;
+    font: var(--link-font, inherit);
+    text-decoration: var(--link-text-decoration, underline);
     text-underline-offset: var(--link-underline-offset, var(--sys-unit-1));
   }
-  ._link_xyp6s_3 {
+  ._link_3h8gn_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._link_xyp6s_3:focus-visible {
+  ._link_3h8gn_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._link_xyp6s_3:hover {
+  ._link_3h8gn_3:hover {
     color: var(--link-hover-fg, var(--sys-color-on-primary-container));
   }
 }

package/dist/components/link/link.module.js

@@ -1,4 +1,4 @@
 import './link.css';// src/components/link/link.module.scss
-var link = "_link_xyp6s_3";
+var link = "_link_3h8gn_3";
 var link_module_default = { link };
 export { link_module_default as default, link };

package/dist/components/menu/menu.css

@@ -1,6 +1,6 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._positioner_1rb71_3 {
+  ._positioner_75w81_3 {
     --_popup-edge-padding: var(
     	--popup-edge-padding,
     	var(--sys-unit-16)
@@ -11,71 +11,72 @@
     inherits: false;
     initial-value: 0px;
   }
-  ._positioner_1rb71_3 {
+  ._positioner_75w81_3 {
     outline: none;
-    filter: var(--sys-elevation-1-filter);
+    filter: var(--menu-filter, var(--sys-elevation-1-filter));
   }
-  ._popup_1rb71_18 {
+  ._popup_75w81_18 {
     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;
+    scrollbar-color: var(--popup-scrollbar-fg, var(--sys-color-outline)) transparent;
   }
   @media not (prefers-reduced-motion) {
-    ._popup_1rb71_18 {
+    ._popup_75w81_18 {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), transform var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._popup_1rb71_18[data-starting-style], ._popup_1rb71_18[data-ending-style] {
+  ._popup_75w81_18[data-starting-style], ._popup_75w81_18[data-ending-style] {
     opacity: 0;
     transform: scale(0.96);
   }
-  ._popup_1rb71_18 {
-    min-inline-size: 12rem;
+  ._popup_75w81_18 {
+    min-inline-size: var(--menu-min-inline-size, 12rem);
   }
-  ._arrow_1rb71_41 {
+  ._arrow_75w81_41 {
     display: flex;
   }
-  ._arrow_1rb71_41[data-side=top] {
+  ._arrow_75w81_41[data-side=top] {
     bottom: -8px;
     transform: rotate(180deg);
   }
-  ._arrow_1rb71_41[data-side=bottom] {
+  ._arrow_75w81_41[data-side=bottom] {
     top: -8px;
   }
-  ._arrow_1rb71_41[data-side=left] {
+  ._arrow_75w81_41[data-side=left] {
     right: -12px;
     transform: rotate(90deg);
   }
-  ._arrow_1rb71_41[data-side=right] {
+  ._arrow_75w81_41[data-side=right] {
     left: -12px;
     transform: rotate(-90deg);
   }
-  ._arrowFill_1rb71_59 {
-    fill: var(--sys-color-surface-overlay);
+  ._arrowFill_75w81_59 {
+    fill: var(--popup-bg, var(--sys-color-surface-overlay));
   }
-  ._item_1rb71_62 {
+  ._item_75w81_62 {
     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;
   }
-  ._item_1rb71_62 {
+  ._item_75w81_62 {
     position: relative;
     isolation: isolate;
   }
-  ._item_1rb71_62::after {
+  ._item_75w81_62::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -86,37 +87,41 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._item_1rb71_62::after {
+    ._item_75w81_62::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._item_1rb71_62:hover:not(:disabled, [data-disabled])::after {
+  ._item_75w81_62:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._item_1rb71_62:active:not(:disabled, [data-disabled])::after {
+  ._item_75w81_62:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._item_1rb71_62 {
+  ._item_75w81_62 {
     outline: none;
   }
-  ._item_1rb71_62[data-highlighted] {
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
+  ._item_75w81_62[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))));
   }
-  ._item_1rb71_62[data-disabled] {
-    color: var(--sys-color-disabled-fg);
+  ._item_75w81_62[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));
   }
-  ._linkItem_1rb71_109 {
+  ._item_75w81_62[data-disabled] {
+    color: var(--popup-item-disabled-fg, var(--sys-color-disabled-fg));
+  }
+  ._linkItem_75w81_114 {
     text-decoration: none;
   }
-  ._separator_1rb71_112 {
-    block-size: 1px;
-    margin: var(--sys-unit-2) 0;
-    background: var(--sys-color-border);
+  ._separator_75w81_117 {
+    block-size: var(--menu-separator-size, 1px);
+    margin: var(--menu-separator-space, var(--sys-unit-2)) 0;
+    background: var(--menu-separator-bg, var(--sys-color-border));
   }
-  ._groupLabel_1rb71_117 {
-    padding: var(--sys-unit-4) var(--sys-unit-6);
-    color: var(--sys-color-text-muted);
-    font: var(--sys-font-label-small);
+  ._groupLabel_75w81_122 {
+    padding: var(--menu-group-label-pad-y, var(--sys-unit-4)) var(--menu-group-label-pad-x, var(--sys-unit-6));
+    color: var(--menu-group-label-fg, var(--sys-color-text-muted));
+    font: var(--menu-group-label-font, var(--sys-font-label-small));
   }
 }

package/dist/components/menu/menu.d.ts

@@ -14,23 +14,15 @@ export type MenuRootProps<Payload = unknown> = Omit<BaseMenu.Root.Props<Payload>
 }>;
 /** Holds the menu's open state for its parts. It renders no element of its own. */
 declare const Root: <Payload>(props: MenuRootProps<Payload>) => ReactNode;
-type TriggerBaseProps = Omit<ComponentProps<typeof BaseMenu.Trigger>, "children" | "render">;
-type IconTriggerProps = TriggerBaseProps & Readonly<{
-    icon: ReactNode;
-    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
-    label: string;
-    children?: never;
+export type MenuTriggerProps = Omit<ComponentProps<typeof BaseMenu.Trigger>, "render"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Row actions" variant="tertiary"><MoreIcon /></IconButton>`. */
+    render: NonNullable<ComponentProps<typeof BaseMenu.Trigger>["render"]>;
 }>;
-type TextTriggerProps = TriggerBaseProps & Readonly<{
-    /** Optional leading icon rendered before the label. */
-    icon?: ReactNode;
-    children: ReactNode;
-    label?: never;
-}>;
-export type MenuTriggerProps = IconTriggerProps | TextTriggerProps;
 /**
- * The button that opens a menu: `icon` + `label` for the icon form, `children`
- * for a labelled one. Always a {@link Button}.
+ * The button that opens a menu. It renders whichever button it is given.
+ *
+ * @example
+ * <Menu.Trigger render={<IconButton label="Row actions" variant="tertiary"><MoreIcon /></IconButton>} />
  */
 declare const Trigger: (props: MenuTriggerProps) => ReactNode;
 export type MenuPositionerProps = Omit<ComponentProps<typeof BaseMenu.Positioner>, "ref">;
@@ -44,14 +36,22 @@ export type MenuContentProps = ComponentProps<typeof BaseMenu.Popup> & Readonly<
 }>;
 /** `Portal`, `Positioner` and `Popup` in one: the menu's surface, placed against its trigger. */
 declare const Content: ({ container, side, sideOffset, align, alignOffset, ...props }: MenuContentProps) => ReactNode;
-/** The arrow pointing from the popup at its trigger. */
-declare const Arrow: ({ className, ...props }: ComponentProps<typeof BaseMenu.Arrow>) => ReactNode;
-export type MenuItemProps = ComponentProps<typeof BaseMenu.Item> & Readonly<{
-    /** Optional leading icon, rendered decoratively before the label. */
-    icon?: ReactNode;
-}>;
-/** An action, with an optional leading icon. */
-declare const Item: ({ icon, className, children, ...props }: MenuItemProps) => ReactNode;
+/**
+ * The arrow pointing from the popup at its trigger: the kit's own shape, or the
+ * children given in its place.
+ *
+ * @example
+ * <Menu.Arrow />
+ */
+declare const Arrow: ({ className, children, ...props }: ComponentProps<typeof BaseMenu.Arrow>) => ReactNode;
+export type MenuItemProps = ComponentProps<typeof BaseMenu.Item>;
+/**
+ * An action. A leading icon goes in its children, before the label.
+ *
+ * @example
+ * <Menu.Item onClick={download}><DownloadIcon />Download</Menu.Item>
+ */
+declare const Item: ({ className, ...props }: MenuItemProps) => ReactNode;
 export type MenuLinkItemProps = ComponentProps<typeof BaseMenu.LinkItem>;
 /**
  * An item that leads to a page. It spreads every other prop onto the `<a>` and
@@ -83,10 +83,17 @@ type MenuParts = Readonly<{
  *
  * @example
  * <Menu.Root>
- *   <Menu.Trigger icon={<MoreIcon />} label="Row actions" />
+ *   <Menu.Trigger
+ *     render={
+ *       <IconButton label="Row actions" variant="tertiary">
+ *         <MoreIcon />
+ *       </IconButton>
+ *     }
+ *   />
  *   <Menu.Content sideOffset={8}>
  *     <Menu.Arrow />
- *     <Menu.Item icon={<DownloadIcon />} onClick={download}>
+ *     <Menu.Item onClick={download}>
+ *       <DownloadIcon />
  *       Download
  *     </Menu.Item>
  *   </Menu.Content>