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

package/dist/components/menu/menu.js

@@ -1,9 +1,8 @@
 import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
-import { Button } from "../button/button.js";
 import menu_module_default from "./menu.module.js";
 import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
 // src/components/menu/menu.tsx
 /** Holds the menu's open state for its parts. It renders no element of its own. */
@@ -18,82 +17,20 @@ var Root = (props) => {
 	return t0;
 };
 /**
-* 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>} />
 */
 var Trigger = (props) => {
-	const $ = c(20);
-	if (props.label !== void 0) {
-		let icon;
-		let label;
-		let triggerProps;
-		if ($[0] !== props) {
-			({icon, label, ...triggerProps} = props);
-			$[0] = props;
-			$[1] = icon;
-			$[2] = label;
-			$[3] = triggerProps;
-		} else {
-			icon = $[1];
-			label = $[2];
-			triggerProps = $[3];
-		}
-		let t0;
-		if ($[4] !== triggerProps) {
-			t0 = /* @__PURE__ */ jsx(Menu.Trigger, { ...triggerProps });
-			$[4] = triggerProps;
-			$[5] = t0;
-		} else t0 = $[5];
-		let t1;
-		if ($[6] !== icon || $[7] !== label || $[8] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Button, {
-				variant: "tertiary",
-				iconOnly: true,
-				icon,
-				label,
-				render: t0
-			});
-			$[6] = icon;
-			$[7] = label;
-			$[8] = t0;
-			$[9] = t1;
-		} else t1 = $[9];
-		return t1;
-	}
-	let children;
-	let icon_0;
-	let triggerProps_0;
-	if ($[10] !== props) {
-		({icon: icon_0, children, ...triggerProps_0} = props);
-		$[10] = props;
-		$[11] = children;
-		$[12] = icon_0;
-		$[13] = triggerProps_0;
-	} else {
-		children = $[11];
-		icon_0 = $[12];
-		triggerProps_0 = $[13];
-	}
+	const $ = c(2);
 	let t0;
-	if ($[14] !== triggerProps_0) {
-		t0 = /* @__PURE__ */ jsx(Menu.Trigger, { ...triggerProps_0 });
-		$[14] = triggerProps_0;
-		$[15] = t0;
-	} else t0 = $[15];
-	let t1;
-	if ($[16] !== children || $[17] !== icon_0 || $[18] !== t0) {
-		t1 = /* @__PURE__ */ jsx(Button, {
-			variant: "secondary",
-			icon: icon_0,
-			render: t0,
-			children
-		});
-		$[16] = children;
-		$[17] = icon_0;
-		$[18] = t0;
-		$[19] = t1;
-	} else t1 = $[19];
-	return t1;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Menu.Trigger, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 };
 /** Places the popup against its trigger, clear of the viewport's edges. */
 var Positioner = (t0) => {
@@ -222,29 +159,38 @@ var Content = (t0) => {
 	} else t3 = $[17];
 	return t3;
 };
-/** The arrow pointing from the popup at its trigger. */
+/**
+* The arrow pointing from the popup at its trigger: the kit's own shape, or the
+* children given in its place.
+*
+* @example
+* <Menu.Arrow />
+*/
 var Arrow = (t0) => {
-	const $ = c(9);
+	const $ = c(12);
+	let children;
 	let className;
 	let props;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
 	} else {
-		className = $[1];
-		props = $[2];
+		children = $[1];
+		className = $[2];
+		props = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
+	if ($[4] !== className) {
 		t1 = clsx(menu_module_default.arrow, className);
-		$[3] = className;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[4] = className;
+		$[5] = t1;
+	} else t1 = $[5];
 	let t2;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("svg", {
+	if ($[6] !== children) {
+		t2 = children ?? /* @__PURE__ */ jsx("svg", {
 			width: "16",
 			height: "8",
 			viewBox: "0 0 16 8",
@@ -254,60 +200,58 @@ var Arrow = (t0) => {
 				d: "M0 9 V8 L8 0 L16 8 V9 Z"
 			})
 		});
-		$[5] = t2;
-	} else t2 = $[5];
+		$[6] = children;
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[6] !== props || $[7] !== t1) {
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
 		t3 = /* @__PURE__ */ jsx(Menu.Arrow, {
 			className: t1,
 			...props,
 			children: t2
 		});
-		$[6] = props;
-		$[7] = t1;
-		$[8] = t3;
-	} else t3 = $[8];
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
 	return t3;
 };
-/** An action, with an optional leading icon. */
+/**
+* An action. A leading icon goes in its children, before the label.
+*
+* @example
+* <Menu.Item onClick={download}><DownloadIcon />Download</Menu.Item>
+*/
 var Item = (t0) => {
-	const $ = c(12);
-	let children;
+	const $ = c(8);
 	let className;
-	let icon;
 	let props;
 	if ($[0] !== t0) {
-		({icon, className, children, ...props} = t0);
+		({className, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = icon;
-		$[4] = props;
+		$[1] = className;
+		$[2] = props;
 	} else {
-		children = $[1];
-		className = $[2];
-		icon = $[3];
-		props = $[4];
+		className = $[1];
+		props = $[2];
 	}
 	let t1;
-	if ($[5] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(menu_module_default.item, className);
-		$[5] = className;
-		$[6] = t1;
-	} else t1 = $[6];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[7] !== children || $[8] !== icon || $[9] !== props || $[10] !== t1) {
-		t2 = /* @__PURE__ */ jsxs(Menu.Item, {
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Item, {
 			className: t1,
-			...props,
-			children: [icon, children]
+			...props
 		});
-		$[7] = children;
-		$[8] = icon;
-		$[9] = props;
-		$[10] = t1;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
 /**
@@ -415,10 +359,17 @@ var GroupLabel = (t0) => {
 *
 * @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>

package/dist/components/menu/menu.module.js

@@ -1,12 +1,12 @@
 import './menu.css';// src/components/menu/menu.module.scss
-var positioner = "_positioner_1rb71_3";
-var popup = "_popup_1rb71_18";
-var arrow = "_arrow_1rb71_41";
-var arrowFill = "_arrowFill_1rb71_59";
-var item = "_item_1rb71_62";
-var linkItem = "_linkItem_1rb71_109";
-var separator = "_separator_1rb71_112";
-var groupLabel = "_groupLabel_1rb71_117";
+var positioner = "_positioner_75w81_3";
+var popup = "_popup_75w81_18";
+var arrow = "_arrow_75w81_41";
+var arrowFill = "_arrowFill_75w81_59";
+var item = "_item_75w81_62";
+var linkItem = "_linkItem_75w81_114";
+var separator = "_separator_75w81_117";
+var groupLabel = "_groupLabel_75w81_122";
 var menu_module_default = {
 	positioner,
 	popup,

package/dist/components/nav/nav-context.d.ts

@@ -10,7 +10,7 @@ export type NavOrientation = "horizontal" | "vertical";
 export type NavLayout = "row" | "stack";
 export type NavContextValue = Readonly<{
     orientation: NavOrientation;
-    /** The one tooltip every unlabelled entry in the nav names itself through. */
+    /** The one hint every entry with a `label` names itself through. */
     hint: BaseTooltip.Handle<string>;
 }>;
 export declare const NavContext: Context<NavContextValue | null>;

package/dist/components/nav/nav-item-view.d.ts

@@ -5,23 +5,20 @@ import { type NavLayout } from "./nav-context.ts";
 export type NavEntryProps = Readonly<{
     /** @default "row" */
     layout?: NavLayout;
-    /** When false, the label hides and the entry is named by `label` and the nav's tooltip instead. @default true */
-    labelled?: boolean;
-    /** The entry's name, for where no visible `Label` carries it. */
-    label: string;
+    /** The entry's name where no visible `Label` carries it: announced, and shown by the nav's `Hint`. */
+    label?: string;
 }>;
-type EntryShellProps = NavEntryProps & Readonly<{
+type EntryShellProps = Pick<NavEntryProps, "label"> & Readonly<{
     element: ReactElement;
 }>;
 /**
- * Hangs an entry's element off the nav's one tooltip, which names it while it
- * is unlabelled. Outside a `Nav.Root` the element stands alone.
+ * Hangs an entry's element off the nav's one hint, which shows its `label`.
+ * Outside a `Nav.Root` the element stands alone.
  */
-export declare const EntryShell: ({ labelled, label, element, }: EntryShellProps) => ReactNode;
+export declare const EntryShell: ({ label, element, }: EntryShellProps) => ReactNode;
 /** The attributes an entry's element carries for its layout and label. */
-export declare const entryAttributes: ({ layout, labelled, label, }: NavEntryProps) => Readonly<{
+export declare const entryAttributes: ({ layout, label, }: NavEntryProps) => Readonly<{
     "data-layout": NavLayout;
-    "data-labelled": "false" | undefined;
     "aria-label": string | undefined;
 }>;
 export type NavItemRootProps = useRender.ComponentProps<"button"> & NavEntryProps;
@@ -30,7 +27,7 @@ export type NavItemRootProps = useRender.ComponentProps<"button"> & NavEntryProp
  * `Drawer.Trigger`, a router link, or the default `<button>`. Mark the current
  * destination with `data-active="true"` or `aria-current="page"`.
  */
-declare const Root: ({ layout, labelled, label, className, ...props }: NavItemRootProps) => ReactNode;
+declare const Root: ({ layout, label, className, ...props }: NavItemRootProps) => ReactNode;
 export type NavItemIconProps = Readonly<{
     className?: string;
     /** The app's icon, drawn at `1em` in `currentColor`; the slot sizes it. */
@@ -41,7 +38,7 @@ export type NavItemIconProps = Readonly<{
  * own, so it takes 1.5em over the row's text-matched 1em.
  */
 declare const NavItemIcon: ({ className, children, }: NavItemIconProps) => ReactNode;
-/** The entry's text. Fades out where the entry is named by its tooltip instead. */
+/** The entry's text. Leave it out where the entry is named by its `label` and the nav's `Hint` instead. */
 declare const Label: ({ className, ...props }: ComponentPropsWithRef<"span">) => ReactNode;
 type NavItemViewParts = Readonly<{
     Root: typeof Root;
@@ -54,7 +51,7 @@ type NavItemViewParts = Readonly<{
  * is not a link, such as the trigger of an overflow sheet.
  *
  * @example
- * <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
+ * <NavItemView.Root render={<Drawer.Trigger />} layout="stack">
  * 	<NavItemView.Icon><MoreIcon /></NavItemView.Icon>
  * 	<NavItemView.Label>More</NavItemView.Label>
  * </NavItemView.Root>

package/dist/components/nav/nav-item-view.js

@@ -8,35 +8,32 @@ import { use } from "react";
 import { Tooltip } from "@base-ui/react/tooltip";
 // src/components/nav/nav-item-view.tsx
 /**
-* Hangs an entry's element off the nav's one tooltip, which names it while it
-* is unlabelled. Outside a `Nav.Root` the element stands alone.
+* Hangs an entry's element off the nav's one hint, which shows its `label`.
+* Outside a `Nav.Root` the element stands alone.
 */
 var EntryShell = (t0) => {
-	const $ = c(5);
-	const { labelled: t1, label, element } = t0;
-	const labelled = t1 === void 0 ? true : t1;
+	const $ = c(4);
+	const { label, element } = t0;
 	const nav = use(NavContext);
-	let t2;
-	if ($[0] !== element || $[1] !== label || $[2] !== labelled || $[3] !== nav) {
-		t2 = nav === null ? element : /* @__PURE__ */ jsx(Tooltip.Trigger, {
+	let t1;
+	if ($[0] !== element || $[1] !== label || $[2] !== nav) {
+		t1 = nav === null ? element : /* @__PURE__ */ jsx(Tooltip.Trigger, {
 			handle: nav.hint,
 			payload: label,
-			disabled: labelled,
+			disabled: label === void 0,
 			render: element
 		});
 		$[0] = element;
 		$[1] = label;
-		$[2] = labelled;
-		$[3] = nav;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+		$[2] = nav;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
 };
 /** The attributes an entry's element carries for its layout and label. */
-var entryAttributes = ({ layout = "row", labelled = true, label }) => ({
+var entryAttributes = ({ layout = "row", label }) => ({
 	"data-layout": layout,
-	"data-labelled": labelled ? void 0 : "false",
-	"aria-label": labelled ? void 0 : label
+	"aria-label": label
 });
 var NavItemElement = (t0) => {
 	const $ = c(8);
@@ -75,71 +72,62 @@ var NavItemElement = (t0) => {
 * destination with `data-active="true"` or `aria-current="page"`.
 */
 var Root = (t0) => {
-	const $ = c(21);
+	const $ = c(17);
 	let className;
 	let label;
-	let labelled;
 	let layout;
 	let props;
 	if ($[0] !== t0) {
-		({layout, labelled, label, className, ...props} = t0);
+		({layout, label, className, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = label;
-		$[3] = labelled;
-		$[4] = layout;
-		$[5] = props;
+		$[3] = layout;
+		$[4] = props;
 	} else {
 		className = $[1];
 		label = $[2];
-		labelled = $[3];
-		layout = $[4];
-		props = $[5];
+		layout = $[3];
+		props = $[4];
 	}
 	let t1;
-	if ($[6] !== label || $[7] !== labelled || $[8] !== layout) {
+	if ($[5] !== label || $[6] !== layout) {
 		t1 = entryAttributes({
 			layout,
-			labelled,
 			label
 		});
-		$[6] = label;
-		$[7] = labelled;
-		$[8] = layout;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[5] = label;
+		$[6] = layout;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[10] !== className) {
+	if ($[8] !== className) {
 		t2 = clsx(nav_module_default.item, className);
-		$[10] = className;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[12] !== props || $[13] !== t1 || $[14] !== t2) {
+	if ($[10] !== props || $[11] !== t1 || $[12] !== t2) {
 		t3 = /* @__PURE__ */ jsx(NavItemElement, {
 			...t1,
 			className: t2,
 			...props
 		});
-		$[12] = props;
-		$[13] = t1;
-		$[14] = t2;
-		$[15] = t3;
-	} else t3 = $[15];
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
 	let t4;
-	if ($[16] !== label || $[17] !== labelled || $[18] !== layout || $[19] !== t3) {
+	if ($[14] !== label || $[15] !== t3) {
 		t4 = /* @__PURE__ */ jsx(EntryShell, {
-			layout,
-			labelled,
 			label,
 			element: t3
 		});
-		$[16] = label;
-		$[17] = labelled;
-		$[18] = layout;
-		$[19] = t3;
-		$[20] = t4;
-	} else t4 = $[20];
+		$[14] = label;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
 	return t4;
 };
 /**
@@ -168,7 +156,7 @@ var NavItemIcon = (t0) => {
 	} else t2 = $[4];
 	return t2;
 };
-/** The entry's text. Fades out where the entry is named by its tooltip instead. */
+/** The entry's text. Leave it out where the entry is named by its `label` and the nav's `Hint` instead. */
 var Label = (t0) => {
 	const $ = c(8);
 	let className;
@@ -206,7 +194,7 @@ var Label = (t0) => {
 * is not a link, such as the trigger of an overflow sheet.
 *
 * @example
-* <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
+* <NavItemView.Root render={<Drawer.Trigger />} layout="stack">
 * 	<NavItemView.Icon><MoreIcon /></NavItemView.Icon>
 * 	<NavItemView.Label>More</NavItemView.Label>
 * </NavItemView.Root>