@soroush.tech/design-system 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/NativeSelect.d.mts

@@ -1,8 +1,7 @@
-import { nt as Theme } from "./index-CRQ7XLri.mjs";
-import { n as IconProps, r as IconName } from "./index-DNj5P2NH.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 { r as useTheme } from "./theme-oBfFhJm9.mjs";
-import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
-import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-q_cZsCJg.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 "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/NativeSelect/NativeSelect.tsx
+// src/NativeSelect/NativeSelect.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"color",
@@ -181,5 +181,4 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 		})]
 	});
 }
-//#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 };

package/dist/NavTree/NavTree.d.mts

@@ -0,0 +1,14 @@
+import { dn as FlexProps, nt as Theme } from "../index-CR8qkP8U.mjs";
+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 };

package/dist/NavTree/NavTree.mjs

@@ -0,0 +1,28 @@
+import { o as styled } from "../src-B-rNjHIL.mjs";
+import { Flex } from "../Flex.mjs";
+import { t as NavTreeContext } from "../NavTreeContext-Cs0zC5hK.mjs";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/NavTree/NavTree/NavTree.tsx
+const NavTreeRoot = styled(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 = useMemo(() => ({ color }), [color]);
+	return /* @__PURE__ */ jsx(NavTreeContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(NavTreeRoot, { ...rest })
+	});
+}
+export { NavTree };

package/dist/NavTree.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_NavTree_NavTree = require("./NavTree/NavTree.cjs");
+const require_NavTree_NavGroup = require("./NavTree/NavGroup.cjs");
+const require_NavTree_NavLink = require("./NavTree/NavLink.cjs");
+exports.NavGroup = require_NavTree_NavGroup.NavGroup;
+exports.NavLink = require_NavTree_NavLink.NavLink;
+exports.NavTree = require_NavTree_NavTree.NavTree;

package/dist/NavTree.d.cts

@@ -0,0 +1,4 @@
+import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.cjs";
+import { NavLink, NavLinkProps } from "./NavTree/NavLink.cjs";
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.cjs";
+export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NavTree.d.mts

@@ -0,0 +1,4 @@
+import { NavGroup, NavGroupProps } from "./NavTree/NavGroup.mjs";
+import { NavLink, NavLinkProps } from "./NavTree/NavLink.mjs";
+import { NavTree, NavTreeProps } from "./NavTree/NavTree.mjs";
+export { NavGroup, NavGroupProps, NavLink, NavLinkProps, NavTree, NavTreeProps };

package/dist/NavTree.mjs

@@ -0,0 +1,4 @@
+import { NavTree } from "./NavTree/NavTree.mjs";
+import { NavGroup } from "./NavTree/NavGroup.mjs";
+import { NavLink } from "./NavTree/NavLink.mjs";
+export { NavGroup, NavLink, NavTree };

package/dist/NavTreeContext-Cs0zC5hK.mjs

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+// src/NavTree/NavTreeContext.ts
+const NavTreeContext = createContext({ color: "primary" });
+export { NavTreeContext as t };

package/dist/NavTreeContext-DrxNyII8.cjs

@@ -0,0 +1,8 @@
+// src/NavTree/NavTreeContext.ts
+const NavTreeContext = (0, require("react").createContext)({ color: "primary" });
+Object.defineProperty(exports, "NavTreeContext", {
+	enumerable: true,
+	get: function() {
+		return NavTreeContext;
+	}
+});