@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/dist/Modal.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Modal = require("./Modal-CM3osOqj.cjs");
+const require_Modal = require("./Modal-gQcAJAKH.cjs");
 exports.Modal = require_Modal.Modal;
 exports.ModalManager = require_Modal.ModalManager;
 exports.exposeToAria = require_Modal.exposeToAria;

package/dist/Modal.d.cts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-nqUA_6J_.cjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-BC9S8Fpr.cjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.d.mts

@@ -1,2 +1,2 @@
-import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-Bx0-6yeX.mjs";
+import { a as hideFromAria, c as ModalScroll, d as UseModalReturnValue, f as useModal, i as exposeToAria, l as ModalCloseReason, n as ManagedModalProps, o as Modal, r as ModalManager, s as ModalProps, t as ManagedModal, u as UseModalParameters } from "./index-4maWM1H8.mjs";
 export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, exposeToAria, hideFromAria, useModal };

package/dist/Modal.mjs

@@ -1,2 +1 @@
-import { a as hideFromAria, i as exposeToAria, n as useModal, r as ModalManager, t as Modal } from "./Modal-BcsyrrpH.mjs";
-export { Modal, ModalManager, exposeToAria, hideFromAria, useModal };
+export { t as Modal, r as ModalManager, i as exposeToAria, a as hideFromAria, n as useModal } from "./Modal-DR4TRQSH.mjs";

package/dist/NativeSelect.cjs

@@ -1,14 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_src = require("./src-yC1f5WR2.cjs");
+const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
+const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
 const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/NativeSelect/NativeSelect.tsx
+// src/NativeSelect/NativeSelect.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"color",
@@ -39,17 +39,13 @@ const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "
 const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
 	return { "&:focus-within": { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`) } };
 };
-const focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, error) });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: require_inputVariantStyles.getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -181,11 +177,10 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});
 }
-//#endregion
 exports.NativeSelect = NativeSelect;

package/dist/NativeSelect.d.cts

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-DJ0f69wh.cjs";
-import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as IconProps, r as IconName } from "./index-CAt0-L4i.cjs";
 import { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/NativeSelect/NativeSelect.d.ts
 type NativeSelectColor = keyof Theme['palette'];
 type NativeSelectTextColor = keyof Theme['text'];
 type NativeSelectBackgroundToken = keyof Theme['background'];
@@ -59,5 +58,4 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   'data-testid'?: string;
 }
 declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
-//#endregion
 export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };

package/dist/NativeSelect.d.mts

@@ -1,8 +1,7 @@
-import { W as Theme } from "./index-CJhK7JND.mjs";
-import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.mjs";
+import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { n as IconProps, r as IconName } from "./index-D48qVo1X.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { SelectHTMLAttributes } from "react";
-//#region src/NativeSelect/NativeSelect.d.ts
 type NativeSelectColor = keyof Theme['palette'];
 type NativeSelectTextColor = keyof Theme['text'];
 type NativeSelectBackgroundToken = keyof Theme['background'];
@@ -59,5 +58,4 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   'data-testid'?: string;
 }
 declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
-//#endregion
 export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };

package/dist/NativeSelect.mjs

@@ -1,12 +1,12 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
+import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
+import { t as Icon } from "./Icon-XpXU-SuF.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/NativeSelect/NativeSelect.tsx
+// src/NativeSelect/NativeSelect.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"color",
@@ -37,17 +37,13 @@ const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), e
 const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
 	return { "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } };
 };
-const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": getFocusRing(theme, color, error) });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -179,11 +175,10 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ jsx(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});
 }
-//#endregion
 export { NativeSelect };

package/dist/NavTree/NavGroup.cjs

@@ -0,0 +1,93 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_utils = require("../utils.cjs");
+const require_Typography = require("../Typography.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/NavTree/NavGroup/NavGroup.tsx
+const NavGroupRoot = require_src.styled("section", {
+	name: "NavGroup",
+	label: "NavGroup"
+})({});
+const NavGroupDetails = require_src.styled("details", {
+	name: "NavGroup",
+	label: "NavGroup"
+})({});
+const NavGroupHeading = require_src.styled(require_Typography.Typography, {
+	name: "NavGroup",
+	slot: "label",
+	label: "NavGroupLabel"
+})(({ theme }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} ${theme.space[2]}`
+}));
+const NavGroupSummary = require_src.styled("summary", {
+	name: "NavGroup",
+	slot: "label",
+	label: "NavGroupLabel"
+})(({ theme }) => {
+	const main = theme.palette.primary.main;
+	return {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: "1.5rem",
+		cursor: "pointer",
+		listStyle: "none",
+		color: (0, require_src.src_exports.get)(theme, "text.initial"),
+		"&::-webkit-details-marker": { display: "none" },
+		"&:hover": { backgroundColor: require_utils.alpha(main, .1) },
+		"&:focus-visible": {
+			outline: `2px solid ${main}`,
+			outlineOffset: -2
+		},
+		"&::after": {
+			content: "\"\"",
+			width: "0.5rem",
+			height: "0.5rem",
+			marginRight: theme.space[.5],
+			borderRight: "2px solid currentColor",
+			borderBottom: "2px solid currentColor",
+			transform: "rotate(45deg) translate(-2px, -2px)"
+		},
+		"details[open] > &::after": { transform: "rotate(-135deg) translate(-2px, -2px)" }
+	};
+});
+const NavGroupList = require_src.styled("ul", {
+	name: "NavGroup",
+	slot: "list",
+	label: "NavGroupList"
+})(({ theme }) => ({
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.space[.25]
+}));
+/**
+* @description A group of a `NavTree`: a name over a list of `NavLink`s. Plain, the name is a
+* heading and the links always show; collapsible, the name is a `summary` and the links fold under
+* it - a native `details`, so it folds and opens with scripts off.
+*/
+function NavGroup({ label, children, isCollapsible = false, isOpen = false, ...rest }) {
+	const headingId = (0, react.useId)();
+	const list = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavGroupList, { children: react.Children.toArray(children).map((child, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: child }, child.key ?? index)) });
+	if (isCollapsible) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NavGroupDetails, {
+		open: isOpen,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavGroupSummary, { children: label }), list]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NavGroupRoot, {
+		"aria-labelledby": headingId,
+		...rest,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavGroupHeading, {
+			id: headingId,
+			variant: "subtitle2",
+			as: "h2",
+			children: label
+		}), list]
+	});
+}
+exports.NavGroup = NavGroup;

package/dist/NavTree/NavGroup.d.cts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from "react";
+interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  /** The group's name - a heading over its links, or the button that folds it. */
+  label: ReactNode;
+  /** The `NavLink`s of the group - each is put in a list item of the group's list. */
+  children?: ReactNode;
+  /** Whether the group folds under its label, as a native `details`. Default: `false`. */
+  isCollapsible?: boolean;
+  /**
+   * Whether a collapsible group is open. The reader can still fold it or open it; a change of this
+   * prop opens or closes it - open the group that holds the current page. Default: `false`.
+   */
+  isOpen?: boolean;
+}
+/**
+ * @description A group of a `NavTree`: a name over a list of `NavLink`s. Plain, the name is a
+ * heading and the links always show; collapsible, the name is a `summary` and the links fold under
+ * it - a native `details`, so it folds and opens with scripts off.
+ */
+declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;
+export { NavGroup, NavGroupProps };

package/dist/NavTree/NavGroup.d.mts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from "react";
+interface NavGroupProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  /** The group's name - a heading over its links, or the button that folds it. */
+  label: ReactNode;
+  /** The `NavLink`s of the group - each is put in a list item of the group's list. */
+  children?: ReactNode;
+  /** Whether the group folds under its label, as a native `details`. Default: `false`. */
+  isCollapsible?: boolean;
+  /**
+   * Whether a collapsible group is open. The reader can still fold it or open it; a change of this
+   * prop opens or closes it - open the group that holds the current page. Default: `false`.
+   */
+  isOpen?: boolean;
+}
+/**
+ * @description A group of a `NavTree`: a name over a list of `NavLink`s. Plain, the name is a
+ * heading and the links always show; collapsible, the name is a `summary` and the links fold under
+ * it - a native `details`, so it folds and opens with scripts off.
+ */
+declare function NavGroup({ label, children, isCollapsible, isOpen, ...rest }: Readonly<NavGroupProps>): import("react").JSX.Element;
+export { NavGroup, NavGroupProps };

package/dist/NavTree/NavGroup.mjs

@@ -0,0 +1,92 @@
+import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
+import { alpha } from "../utils.mjs";
+import { Typography } from "../Typography.mjs";
+import { Children, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/NavTree/NavGroup/NavGroup.tsx
+const NavGroupRoot = styled("section", {
+	name: "NavGroup",
+	label: "NavGroup"
+})({});
+const NavGroupDetails = styled("details", {
+	name: "NavGroup",
+	label: "NavGroup"
+})({});
+const NavGroupHeading = styled(Typography, {
+	name: "NavGroup",
+	slot: "label",
+	label: "NavGroupLabel"
+})(({ theme }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} ${theme.space[2]}`
+}));
+const NavGroupSummary = styled("summary", {
+	name: "NavGroup",
+	slot: "label",
+	label: "NavGroupLabel"
+})(({ theme }) => {
+	const main = theme.palette.primary.main;
+	return {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: "1.5rem",
+		cursor: "pointer",
+		listStyle: "none",
+		color: (0, src_exports.get)(theme, "text.initial"),
+		"&::-webkit-details-marker": { display: "none" },
+		"&:hover": { backgroundColor: alpha(main, .1) },
+		"&:focus-visible": {
+			outline: `2px solid ${main}`,
+			outlineOffset: -2
+		},
+		"&::after": {
+			content: "\"\"",
+			width: "0.5rem",
+			height: "0.5rem",
+			marginRight: theme.space[.5],
+			borderRight: "2px solid currentColor",
+			borderBottom: "2px solid currentColor",
+			transform: "rotate(45deg) translate(-2px, -2px)"
+		},
+		"details[open] > &::after": { transform: "rotate(-135deg) translate(-2px, -2px)" }
+	};
+});
+const NavGroupList = styled("ul", {
+	name: "NavGroup",
+	slot: "list",
+	label: "NavGroupList"
+})(({ theme }) => ({
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.space[.25]
+}));
+/**
+* @description A group of a `NavTree`: a name over a list of `NavLink`s. Plain, the name is a
+* heading and the links always show; collapsible, the name is a `summary` and the links fold under
+* it - a native `details`, so it folds and opens with scripts off.
+*/
+function NavGroup({ label, children, isCollapsible = false, isOpen = false, ...rest }) {
+	const headingId = useId();
+	const list = /* @__PURE__ */ jsx(NavGroupList, { children: Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx("li", { children: child }, child.key ?? index)) });
+	if (isCollapsible) return /* @__PURE__ */ jsxs(NavGroupDetails, {
+		open: isOpen,
+		...rest,
+		children: [/* @__PURE__ */ jsx(NavGroupSummary, { children: label }), list]
+	});
+	return /* @__PURE__ */ jsxs(NavGroupRoot, {
+		"aria-labelledby": headingId,
+		...rest,
+		children: [/* @__PURE__ */ jsx(NavGroupHeading, {
+			id: headingId,
+			variant: "subtitle2",
+			as: "h2",
+			children: label
+		}), list]
+	});
+}
+export { NavGroup };

package/dist/NavTree/NavLink.cjs

@@ -0,0 +1,78 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_utils = require("../utils.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_NavTreeContext = require("../NavTreeContext-DrxNyII8.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/NavTree/NavLink/NavLink.tsx
+const NavLinkRoot = require_src.styled("a", {
+	name: "NavLink",
+	label: "NavLink",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["isCurrent", "accent"])
+})(({ theme, isCurrent, accent }) => {
+	const { main } = theme.palette[accent];
+	return {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space[1],
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: "1.5rem",
+		color: (0, require_src.src_exports.get)(theme, "text.initial"),
+		textDecoration: "none",
+		fontWeight: isCurrent ? 600 : 400,
+		backgroundColor: isCurrent ? require_utils.alpha(main, .28) : "transparent",
+		"&:hover": { backgroundColor: require_utils.alpha(main, isCurrent ? .28 : .1) },
+		"&:focus-visible": {
+			outline: `2px solid ${main}`,
+			outlineOffset: -2
+		}
+	};
+});
+const NavLinkName = require_src.styled("span", {
+	name: "NavLink",
+	slot: "label",
+	label: "NavLinkLabel"
+})({
+	flex: "1 1 auto",
+	minWidth: 0
+});
+const NavLinkNote = require_src.styled("span", {
+	name: "NavLink",
+	slot: "note",
+	label: "NavLinkNote"
+})(({ theme }) => ({
+	flexShrink: 0,
+	fontSize: theme.fontSizes[0],
+	color: (0, require_src.src_exports.get)(theme, "text.secondary")
+}));
+/**
+* @description A link to a page of the site, a row of a `NavTree`: its name, an optional note
+* beside it, and a fill when it is the current page. It is a plain anchor - a keyboard follows it
+* as any link - with `aria-current="page"` for the current one. An external link opens in a tab
+* of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
+*/
+function NavLink({ children, isCurrent = false, note, isExternal = false, color, ...rest }) {
+	const tree = (0, react.useContext)(require_NavTreeContext.NavTreeContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NavLinkRoot, {
+		isCurrent,
+		accent: color ?? tree.color,
+		"aria-current": isCurrent ? "page" : void 0,
+		...isExternal && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLinkName, { children }),
+			note != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavLinkNote, { children: note }),
+			isExternal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				name: "external_link",
+				size: "0.875rem",
+				color: "inherit"
+			})
+		]
+	});
+}
+exports.NavLink = NavLink;

package/dist/NavTree/NavLink.d.cts

@@ -0,0 +1,24 @@
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+  /** Where it goes. */
+  href: string;
+  /** The name of the page. */
+  children: ReactNode;
+  /** Whether it is the page the reader is on - marked with `aria-current="page"` and filled. Default: `false`. */
+  isCurrent?: boolean;
+  /** A short note beside the name - a version, a count. */
+  note?: ReactNode;
+  /** Whether the page is outside the site: it opens in a tab of its own, with an arrow after it. Default: `false`. */
+  isExternal?: boolean;
+  /** Palette color of the pill - resolves to `theme.palette`. Default: its `NavTree`'s. */
+  color?: keyof Theme['palette'];
+}
+/**
+ * @description A link to a page of the site, a row of a `NavTree`: its name, an optional note
+ * beside it, and a fill when it is the current page. It is a plain anchor - a keyboard follows it
+ * as any link - with `aria-current="page"` for the current one. An external link opens in a tab
+ * of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
+ */
+declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;
+export { NavLink, NavLinkProps };

package/dist/NavTree/NavLink.d.mts

@@ -0,0 +1,24 @@
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { AnchorHTMLAttributes, ReactNode } from "react";
+interface NavLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+  /** Where it goes. */
+  href: string;
+  /** The name of the page. */
+  children: ReactNode;
+  /** Whether it is the page the reader is on - marked with `aria-current="page"` and filled. Default: `false`. */
+  isCurrent?: boolean;
+  /** A short note beside the name - a version, a count. */
+  note?: ReactNode;
+  /** Whether the page is outside the site: it opens in a tab of its own, with an arrow after it. Default: `false`. */
+  isExternal?: boolean;
+  /** Palette color of the pill - resolves to `theme.palette`. Default: its `NavTree`'s. */
+  color?: keyof Theme['palette'];
+}
+/**
+ * @description A link to a page of the site, a row of a `NavTree`: its name, an optional note
+ * beside it, and a fill when it is the current page. It is a plain anchor - a keyboard follows it
+ * as any link - with `aria-current="page"` for the current one. An external link opens in a tab
+ * of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
+ */
+declare function NavLink({ children, isCurrent, note, isExternal, color, ...rest }: Readonly<NavLinkProps>): import("react").JSX.Element;
+export { NavLink, NavLinkProps };

package/dist/NavTree/NavLink.mjs

@@ -0,0 +1,76 @@
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { alpha } from "../utils.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { t as NavTreeContext } from "../NavTreeContext-Cs0zC5hK.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/NavTree/NavLink/NavLink.tsx
+const NavLinkRoot = styled("a", {
+	name: "NavLink",
+	label: "NavLink",
+	shouldForwardProp: createShouldForwardProp(["isCurrent", "accent"])
+})(({ theme, isCurrent, accent }) => {
+	const { main } = theme.palette[accent];
+	return {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space[1],
+		padding: `${theme.space[1]} ${theme.space[2]}`,
+		borderRadius: "1.5rem",
+		color: (0, src_exports.get)(theme, "text.initial"),
+		textDecoration: "none",
+		fontWeight: isCurrent ? 600 : 400,
+		backgroundColor: isCurrent ? alpha(main, .28) : "transparent",
+		"&:hover": { backgroundColor: alpha(main, isCurrent ? .28 : .1) },
+		"&:focus-visible": {
+			outline: `2px solid ${main}`,
+			outlineOffset: -2
+		}
+	};
+});
+const NavLinkName = styled("span", {
+	name: "NavLink",
+	slot: "label",
+	label: "NavLinkLabel"
+})({
+	flex: "1 1 auto",
+	minWidth: 0
+});
+const NavLinkNote = styled("span", {
+	name: "NavLink",
+	slot: "note",
+	label: "NavLinkNote"
+})(({ theme }) => ({
+	flexShrink: 0,
+	fontSize: theme.fontSizes[0],
+	color: (0, src_exports.get)(theme, "text.secondary")
+}));
+/**
+* @description A link to a page of the site, a row of a `NavTree`: its name, an optional note
+* beside it, and a fill when it is the current page. It is a plain anchor - a keyboard follows it
+* as any link - with `aria-current="page"` for the current one. An external link opens in a tab
+* of its own, `noopener noreferrer`, and carries an arrow so it is not taken for a page here.
+*/
+function NavLink({ children, isCurrent = false, note, isExternal = false, color, ...rest }) {
+	const tree = useContext(NavTreeContext);
+	return /* @__PURE__ */ jsxs(NavLinkRoot, {
+		isCurrent,
+		accent: color ?? tree.color,
+		"aria-current": isCurrent ? "page" : void 0,
+		...isExternal && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(NavLinkName, { children }),
+			note != null && /* @__PURE__ */ jsx(NavLinkNote, { children: note }),
+			isExternal && /* @__PURE__ */ jsx(Icon, {
+				name: "external_link",
+				size: "0.875rem",
+				color: "inherit"
+			})
+		]
+	});
+}
+export { NavLink };

package/dist/NavTree/NavTree.cjs

@@ -0,0 +1,29 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_Flex = require("../Flex.cjs");
+const require_NavTreeContext = require("../NavTreeContext-DrxNyII8.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/NavTree/NavTree/NavTree.tsx
+const NavTreeRoot = require_src.styled(require_Flex.Flex, {
+	name: "NavTree",
+	label: "NavTree"
+})(({ theme }) => ({
+	flexDirection: "column",
+	gap: theme.space[1]
+}));
+/**
+* @description A tree of links to the pages of a site: its `NavGroup`s, each with its `NavLink`s,
+* and any link of its own. It is a column of plain markup - links and lists, nothing that needs
+* JavaScript - so it is in the server-rendered page and works with scripts off; a group that
+* folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
+* `Sidebar`. Any `Flex` prop applies.
+*/
+function NavTree({ color = "primary", ...rest }) {
+	const context = (0, react.useMemo)(() => ({ color }), [color]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NavTreeContext.NavTreeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NavTreeRoot, { ...rest })
+	});
+}
+exports.NavTree = NavTree;

package/dist/NavTree/NavTree.d.cts

@@ -0,0 +1,14 @@
+import { dn as FlexProps, nt as Theme } from "../index-Lsm4v8fB.cjs";
+interface NavTreeProps extends FlexProps {
+  /** Palette color of the current page's pill, a hovered link and the focus ring - resolves to `theme.palette`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+}
+/**
+ * @description A tree of links to the pages of a site: its `NavGroup`s, each with its `NavLink`s,
+ * and any link of its own. It is a column of plain markup - links and lists, nothing that needs
+ * JavaScript - so it is in the server-rendered page and works with scripts off; a group that
+ * folds is a native `details`. Put it in a landmark of your own - a `nav`, or the panel of a
+ * `Sidebar`. Any `Flex` prop applies.
+ */
+declare function NavTree({ color, ...rest }: Readonly<NavTreeProps>): import("react").JSX.Element;
+export { NavTree, NavTreeProps };