@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

package/dist/components/menu/menu.js

@@ -0,0 +1,382 @@
+import { usePopupEdgePadding } from "../../lib/popup-edge-padding.js";
+import { Button } from "../button/button.js";
+import { Icon } from "../icon/icon.js";
+import menu_module_default from "./menu.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Menu } from "@base-ui/react/menu";
+// src/components/menu/menu.tsx
+/**
+* The button that opens a menu: `icon` + `label` for the icon form, `children`
+* for a labelled one. Always a {@link Button}.
+*/
+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];
+	}
+	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;
+};
+var Positioner = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const t1 = usePopupEdgePadding();
+	let t2;
+	if ($[3] !== className) {
+		t2 = clsx(menu_module_default.positioner, className);
+		$[3] = className;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== props || $[6] !== t1 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Menu.Positioner, {
+			...t1,
+			className: t2,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var Popup = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(menu_module_default.popup, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Popup, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Arrow = (t0) => {
+	const $ = c(9);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(menu_module_default.arrow, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("svg", {
+			width: "16",
+			height: "8",
+			viewBox: "0 0 16 8",
+			overflow: "visible",
+			children: /* @__PURE__ */ jsx("path", {
+				className: menu_module_default.arrowFill,
+				d: "M0 9 V8 L8 0 L16 8 V9 Z"
+			})
+		});
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== props || $[7] !== t1) {
+		t3 = /* @__PURE__ */ jsx(Menu.Arrow, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[6] = props;
+		$[7] = t1;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+};
+var Item = (t0) => {
+	const $ = c(14);
+	let children;
+	let className;
+	let icon;
+	let props;
+	if ($[0] !== t0) {
+		({icon, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		props = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(menu_module_default.item, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== icon) {
+		t2 = icon && /* @__PURE__ */ jsx(Icon, {
+			svg: icon,
+			label: ""
+		});
+		$[7] = icon;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== children || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Menu.Item, {
+			className: t1,
+			...props,
+			children: [t2, children]
+		});
+		$[9] = children;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
+};
+/**
+* An item that leads to a page. It spreads every other prop onto the `<a>` and
+* forwards its ref, so a router's `createLink` can wrap it.
+*/
+var LinkItem = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(menu_module_default.item, menu_module_default.linkItem, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.LinkItem, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var Separator = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(menu_module_default.separator, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.Separator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var GroupLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(menu_module_default.groupLabel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Menu.GroupLabel, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* Dropdown menu over base-ui's Menu, with an arrow pointing at the trigger.
+* `Menu.Item` accepts an optional leading `icon`. The positioner keeps
+* `--popup-edge-padding` from the viewport's edges.
+*
+* @example
+* import RowActionsIcon from "@material-design-icons/svg/outlined/more_vert.svg?react";
+* import DownloadIcon from "@material-design-icons/svg/outlined/download.svg?react";
+*
+* <Menu.Root>
+*   <Menu.Trigger icon={RowActionsIcon} label="Row actions" />
+*   <Menu.Portal>
+*     <Menu.Positioner sideOffset={8}>
+*       <Menu.Popup>
+*         <Menu.Arrow />
+*         <Menu.Item icon={DownloadIcon} onClick={download}>
+*           Download
+*         </Menu.Item>
+*       </Menu.Popup>
+*     </Menu.Positioner>
+*   </Menu.Portal>
+* </Menu.Root>
+*/
+var Menu$1 = {
+	Root: Menu.Root,
+	Trigger,
+	Portal: Menu.Portal,
+	Positioner,
+	Popup,
+	Arrow,
+	Item,
+	LinkItem,
+	Separator,
+	Group: Menu.Group,
+	GroupLabel,
+	createHandle: Menu.createHandle
+};
+export { Menu$1 as Menu };

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

@@ -0,0 +1,20 @@
+import './menu.css';// src/components/menu/menu.module.scss
+var positioner = "_positioner_wd5vm_3";
+var popup = "_popup_wd5vm_18";
+var arrow = "_arrow_wd5vm_41";
+var arrowFill = "_arrowFill_wd5vm_59";
+var item = "_item_wd5vm_62";
+var linkItem = "_linkItem_wd5vm_110";
+var separator = "_separator_wd5vm_113";
+var groupLabel = "_groupLabel_wd5vm_118";
+var menu_module_default = {
+	positioner,
+	popup,
+	arrow,
+	arrowFill,
+	item,
+	linkItem,
+	separator,
+	groupLabel
+};
+export { arrow, arrowFill, menu_module_default as default, groupLabel, item, linkItem, popup, positioner, separator };

package/dist/components/nav/index.d.ts

@@ -0,0 +1,4 @@
+export type { NavLayout, NavOrientation, } from "./nav-context.ts";
+export { type NavEntryProps, type NavItemIconProps, type NavItemRootProps, NavItemView, } from "./nav-item-view.tsx";
+export * from "./nav.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/nav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACX,SAAS,EACT,cAAc,GACd,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACN,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,WAAW,GACX,MAAM,qBAAqB,CAAC;AAC7B,cAAc,WAAW,CAAC"}

package/dist/components/nav/index.js

@@ -0,0 +1,3 @@
+import { NavItemView } from "./nav-item-view.js";
+import { Nav } from "./nav.js";
+export { Nav, NavItemView };

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

@@ -0,0 +1,18 @@
+import type { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { type Context } from "react";
+/** Which way a nav lays its entries out. */
+export type NavOrientation = "horizontal" | "vertical";
+/**
+ * `"row"` is the rail and overflow-sheet treatment: a full-width pill with the
+ * icon beside the label. `"stack"` is the compact bottom-bar treatment: a larger
+ * icon over a smaller label.
+ */
+export type NavLayout = "row" | "stack";
+export type NavContextValue = Readonly<{
+    orientation: NavOrientation;
+    /** The one tooltip every unlabelled entry in the nav names itself through. */
+    hint: BaseTooltip.Handle<string>;
+}>;
+export declare const NavContext: Context<NavContextValue | null>;
+export declare const NavItemLayoutContext: Context<NavLayout>;
+//# sourceMappingURL=nav-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-context.d.ts","sourceRoot":"","sources":["../../../src/components/nav/nav-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,4CAA4C;AAC5C,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,UAAU,CAAC;AAEvD;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAExC,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,WAAW,EAAE,cAAc,CAAC;IAC5B,8EAA8E;IAC9E,IAAI,EAAE,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,eAAe,GAAG,IAAI,CACX,CAAC;AAE7C,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,SAAS,CACpB,CAAC"}

package/dist/components/nav/nav-context.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+// src/components/nav/nav-context.ts
+var NavContext = createContext(null);
+var NavItemLayoutContext = createContext("row");
+export { NavContext, NavItemLayoutContext };

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

@@ -0,0 +1,64 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentPropsWithRef, type ReactElement, type ReactNode } from "react";
+import { type SvgComponent } from "../icon/icon.tsx";
+import { type NavLayout } from "./nav-context.ts";
+/** What every nav entry takes besides its element's own props. */
+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;
+}>;
+type EntryShellProps = NavEntryProps & 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.
+ */
+export declare const EntryShell: ({ layout, labelled, 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<{
+    "data-layout": NavLayout;
+    "data-labelled": "false" | undefined;
+    "aria-label": string | undefined;
+}>;
+export type NavItemRootProps = useRender.ComponentProps<"button"> & NavEntryProps;
+/**
+ * The shell every nav entry shares, over whatever element `render` names — a
+ * `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;
+export type NavItemIconProps = Readonly<{
+    svg: SvgComponent;
+    className?: string;
+}>;
+/**
+ * The entry's glyph. A stacked entry's icon carries the destination on its own,
+ * so it takes 24px over the row's text-matched 16px.
+ */
+declare const NavItemIcon: ({ svg, className, }: NavItemIconProps) => ReactNode;
+/** The entry's text. Fades out where the entry is named by its tooltip instead. */
+declare const Label: ({ className, ...props }: ComponentPropsWithRef<"span">) => ReactNode;
+type NavItemViewParts = Readonly<{
+    Root: typeof Root;
+    Icon: typeof NavItemIcon;
+    Label: typeof Label;
+}>;
+/**
+ * The parts of one nav entry: the `Root` shell, its `Icon` and its `Label`.
+ * `Nav.Link` is the same shell as an `<a>`; reach for `Root` for an entry that
+ * is not a link, such as the trigger of an overflow sheet.
+ *
+ * @example
+ * <NavItemView.Root render={<Drawer.Trigger />} label="More" layout="stack">
+ * 	<NavItemView.Icon svg={MoreIcon} />
+ * 	<NavItemView.Label>More</NavItemView.Label>
+ * </NavItemView.Root>
+ */
+export declare const NavItemView: NavItemViewParts;
+export {};
+//# sourceMappingURL=nav-item-view.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav-item-view.d.ts","sourceRoot":"","sources":["../../../src/components/nav/nav-item-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EACN,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,SAAS,EAEd,MAAM,OAAO,CAAC;AACf,OAAO,EAAQ,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAGN,KAAK,SAAS,EACd,MAAM,kBAAkB,CAAC;AAG1B,kEAAkE;AAClE,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,qBAAqB;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,iHAAiH;IACjH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH,KAAK,eAAe,GAAG,aAAa,GACnC,QAAQ,CAAC;IACR,OAAO,EAAE,YAAY,CAAC;CACtB,CAAC,CAAC;AAEJ;;;GAGG;AACH,eAAO,MAAM,UAAU,0CAKpB,eAAe,KAAG,SAiBpB,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,eAAe,iCAIzB,aAAa,KAAG,QAAQ,CAAC;IAC3B,aAAa,EAAE,SAAS,CAAC;IACzB,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC,CAIC,CAAC;AAcH,MAAM,MAAM,gBAAgB,GAC3B,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;AAEpD;;;;GAIG;AACH,QAAA,MAAM,IAAI,qDAMP,gBAAgB,KAAG,SAarB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACvC,GAAG,EAAE,YAAY,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH;;;GAGG;AACH,QAAA,MAAM,WAAW,wBAGd,gBAAgB,KAAG,SAYrB,CAAC;AAEF,mFAAmF;AACnF,QAAA,MAAM,KAAK,4BAGR,qBAAqB,CAAC,MAAM,CAAC,KAAG,SAKlC,CAAC;AAEF,KAAK,gBAAgB,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,KAAK,EAAE,OAAO,KAAK,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,gBAIzB,CAAC"}