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

package/dist/Sidebar/Sidebar.d.cts

@@ -1,7 +1,6 @@
-import { Jt as FlexProps } from "../index-DJ0f69wh.cjs";
-import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
+import { dn as FlexProps } from "../index-Lsm4v8fB.cjs";
+import { a as SidebarLayout, i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-Bod_oUMi.cjs";
 import { ElementType, ReactNode } from "react";
-//#region src/Sidebar/Sidebar/Sidebar.d.ts
 interface SidebarProps extends FlexProps {
   /**
    * Rail contents - `SidebarItem`s, but any node composes (a sponsor logo,
@@ -10,9 +9,18 @@ interface SidebarProps extends FlexProps {
   children: ReactNode;
   /**
    * Whether item labels are shown. Controlled - the toggle lives with the
-   * consumer (typically a menu button in the app bar).
+   * consumer (typically a menu button in the app bar). A `stacked` rail always shows
+   * them. Default: `false`.
    */
-  isOpen: boolean;
+  isOpen?: boolean;
+  /**
+   * How the items are laid out: `'inline'` is the collapsible icon rail, a label beside its
+   * icon while open; `'stacked'` is a navigation rail - each label under its icon, always
+   * shown, in a rail of `stackedWidth`. Default: `'inline'`.
+   */
+  layout?: SidebarLayout;
+  /** Rail width of a `stacked` layout. Default: `'5.5rem'`. */
+  stackedWidth?: string;
   /** Screen edge the rail hugs - labels render away from it. Default: `'left'`. */
   anchor?: SidebarAnchor;
   /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
@@ -27,7 +35,13 @@ interface SidebarProps extends FlexProps {
    * instead. Default: `false`.
    */
   hasPanel?: boolean;
-  /** Width of the panel column. Only meaningful with `hasPanel`. Default: `'18rem'`. */
+  /**
+   * The panel column's content, rendered in place - so it is in the server-rendered markup,
+   * unlike the selected item's `children` under `hasPanel`, which are ported in on the client.
+   * For a panel the page already knows, a navigation tree. Takes the place of `hasPanel`.
+   */
+  panel?: ReactNode;
+  /** Width of the panel column. Only meaningful with `hasPanel` or `panel`. Default: `'18rem'`. */
   panelWidth?: string;
   /**
    * Props for the panel column - any `Flex` prop, plus `as` to change its
@@ -54,6 +68,5 @@ interface SidebarProps extends FlexProps {
  * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
  * open panel.
  */
-declare function Sidebar({ children, isOpen, anchor, variant, expandedWidth, collapsedWidth, hasPanel, panelWidth, panelProps, 'aria-label': ariaLabel, ...rest }: Readonly<SidebarProps>): import("react").JSX.Element;
-//#endregion
+declare function Sidebar({ children, isOpen, anchor, variant, layout, expandedWidth, collapsedWidth, stackedWidth, hasPanel, panel, panelWidth, panelProps, 'aria-label': ariaLabel, ...rest }: Readonly<SidebarProps>): import("react").JSX.Element;
 export { Sidebar, SidebarProps };

package/dist/Sidebar/Sidebar.d.mts

@@ -1,7 +1,6 @@
-import { Jt as FlexProps } from "../index-CJhK7JND.mjs";
-import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
+import { dn as FlexProps } from "../index-CR8qkP8U.mjs";
+import { a as SidebarLayout, i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-Bod_oUMi.mjs";
 import { ElementType, ReactNode } from "react";
-//#region src/Sidebar/Sidebar/Sidebar.d.ts
 interface SidebarProps extends FlexProps {
   /**
    * Rail contents - `SidebarItem`s, but any node composes (a sponsor logo,
@@ -10,9 +9,18 @@ interface SidebarProps extends FlexProps {
   children: ReactNode;
   /**
    * Whether item labels are shown. Controlled - the toggle lives with the
-   * consumer (typically a menu button in the app bar).
+   * consumer (typically a menu button in the app bar). A `stacked` rail always shows
+   * them. Default: `false`.
    */
-  isOpen: boolean;
+  isOpen?: boolean;
+  /**
+   * How the items are laid out: `'inline'` is the collapsible icon rail, a label beside its
+   * icon while open; `'stacked'` is a navigation rail - each label under its icon, always
+   * shown, in a rail of `stackedWidth`. Default: `'inline'`.
+   */
+  layout?: SidebarLayout;
+  /** Rail width of a `stacked` layout. Default: `'5.5rem'`. */
+  stackedWidth?: string;
   /** Screen edge the rail hugs - labels render away from it. Default: `'left'`. */
   anchor?: SidebarAnchor;
   /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
@@ -27,7 +35,13 @@ interface SidebarProps extends FlexProps {
    * instead. Default: `false`.
    */
   hasPanel?: boolean;
-  /** Width of the panel column. Only meaningful with `hasPanel`. Default: `'18rem'`. */
+  /**
+   * The panel column's content, rendered in place - so it is in the server-rendered markup,
+   * unlike the selected item's `children` under `hasPanel`, which are ported in on the client.
+   * For a panel the page already knows, a navigation tree. Takes the place of `hasPanel`.
+   */
+  panel?: ReactNode;
+  /** Width of the panel column. Only meaningful with `hasPanel` or `panel`. Default: `'18rem'`. */
   panelWidth?: string;
   /**
    * Props for the panel column - any `Flex` prop, plus `as` to change its
@@ -54,6 +68,5 @@ interface SidebarProps extends FlexProps {
  * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
  * open panel.
  */
-declare function Sidebar({ children, isOpen, anchor, variant, expandedWidth, collapsedWidth, hasPanel, panelWidth, panelProps, 'aria-label': ariaLabel, ...rest }: Readonly<SidebarProps>): import("react").JSX.Element;
-//#endregion
+declare function Sidebar({ children, isOpen, anchor, variant, layout, expandedWidth, collapsedWidth, stackedWidth, hasPanel, panel, panelWidth, panelProps, 'aria-label': ariaLabel, ...rest }: Readonly<SidebarProps>): import("react").JSX.Element;
 export { Sidebar, SidebarProps };

package/dist/Sidebar/Sidebar.mjs

@@ -1,9 +1,9 @@
-import { o as styled } from "../src-DLGYOJMh.mjs";
+import { o as styled } from "../src-B-rNjHIL.mjs";
 import { Flex } from "../Flex.mjs";
-import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
+import { t as SidebarContext } from "../SidebarContext-D3bF-Q4N.mjs";
 import { useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/Sidebar/Sidebar/Sidebar.tsx
+// src/Sidebar/Sidebar/Sidebar.tsx
 const SidebarRoot = styled(Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -12,13 +12,16 @@ const SidebarRail = styled(Flex, {
 	name: "Sidebar",
 	slot: "rail",
 	label: "SidebarRail",
-	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "expandedWidth" && prop !== "collapsedWidth"
-})(({ isOpen, expandedWidth, collapsedWidth }) => ({
+	shouldForwardProp: (prop) => prop !== "isOpen" && prop !== "layout" && prop !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "stackedWidth"
+})(({ isOpen, layout, expandedWidth, collapsedWidth, stackedWidth }) => layout === "stacked" ? {
+	width: stackedWidth,
+	alignItems: "center"
+} : {
 	width: isOpen ? expandedWidth : collapsedWidth,
 	transition: "width 200ms ease",
 	overflowX: "hidden",
 	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-}));
+});
 const SidebarPanelRoot = styled(Flex, {
 	name: "Sidebar",
 	slot: "panel",
@@ -42,15 +45,17 @@ const SidebarPanelRoot = styled(Flex, {
 * is independent of `isOpen`, so a collapsed icons-only rail can sit beside an
 * open panel.
 */
-function Sidebar({ children, isOpen, anchor = "left", variant = "text", expandedWidth = "14rem", collapsedWidth = "3.5rem", hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+function Sidebar({ children, isOpen = false, anchor = "left", variant = "text", layout = "inline", expandedWidth = "14rem", collapsedWidth = "3.5rem", stackedWidth = "5.5rem", hasPanel = false, panel, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
 	const panelId = useId();
 	const [panelNode, setPanelNode] = useState(null);
 	const [panelLabel, setPanelLabel] = useState(null);
+	const hasPortPanel = hasPanel && panel == null;
 	const context = useMemo(() => ({
 		isOpen,
 		anchor,
 		variant,
-		hasPanel,
+		layout,
+		hasPanel: hasPortPanel,
 		panelId,
 		panelNode,
 		setPanelLabel
@@ -58,7 +63,8 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		isOpen,
 		anchor,
 		variant,
-		hasPanel,
+		layout,
+		hasPortPanel,
 		panelId,
 		panelNode
 	]);
@@ -68,26 +74,36 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
 		...rest,
-		children: [/* @__PURE__ */ jsx(SidebarRail, {
-			flexDirection: "column",
-			gap: 1,
-			flexShrink: 0,
-			isOpen,
-			expandedWidth,
-			collapsedWidth,
-			children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
-				value: context,
-				children
+		children: [
+			/* @__PURE__ */ jsx(SidebarRail, {
+				flexDirection: "column",
+				gap: 1,
+				flexShrink: 0,
+				isOpen,
+				layout,
+				expandedWidth,
+				collapsedWidth,
+				stackedWidth,
+				children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
+					value: context,
+					children
+				})
+			}),
+			panel != null && /* @__PURE__ */ jsx(SidebarPanelRoot, {
+				as: "section",
+				width: panelWidth,
+				...panelProps,
+				children: panel
+			}),
+			hasPortPanel && /* @__PURE__ */ jsx(SidebarPanelRoot, {
+				as: "section",
+				width: panelWidth,
+				"aria-label": panelLabel ?? void 0,
+				...panelProps,
+				ref: setPanelNode,
+				id: panelId
 			})
-		}), hasPanel && /* @__PURE__ */ jsx(SidebarPanelRoot, {
-			as: "section",
-			width: panelWidth,
-			"aria-label": panelLabel ?? void 0,
-			...panelProps,
-			ref: setPanelNode,
-			id: panelId
-		})]
+		]
 	});
 }
-//#endregion
 export { Sidebar };

package/dist/Sidebar/SidebarItem.cjs

@@ -1,17 +1,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
-const require_Flex = require("../Flex.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
-const require_Icon = require("../Icon-D-EWsBVg.cjs");
+const require_Icon = require("../Icon-C5Iz5ekp.cjs");
+const require_Flex = require("../Flex.cjs");
 const require_Portal = require("../Portal.cjs");
 const require_Pressable = require("../Pressable.cjs");
-const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");
+const require_SidebarContext = require("../SidebarContext-mXrB4z8v.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/Sidebar/SidebarItem/SidebarItem.tsx
-const densityStyles = ({ theme, size }) => {
+// src/Sidebar/SidebarItem/SidebarItem.tsx
+const densityStyles = ({ theme, size, layout }) => {
 	const s = theme.sizes[size];
+	if (layout === "stacked") return {
+		paddingTop: theme.space[.5],
+		paddingBottom: theme.space[.5],
+		paddingLeft: 0,
+		paddingRight: 0,
+		fontSize: theme.fontSizes[0],
+		lineHeight: 1.2,
+		whiteSpace: "nowrap"
+	};
 	return {
 		paddingTop: theme.space[s.paddingTop],
 		paddingBottom: theme.space[s.paddingBottom],
@@ -22,13 +31,30 @@ const densityStyles = ({ theme, size }) => {
 		whiteSpace: "nowrap"
 	};
 };
-const layoutStyles = ({ anchor }) => ({
+const justifyFor = ({ anchor, layout }) => {
+	if (layout === "stacked") return "center";
+	return anchor === "right" ? "flex-end" : "flex-start";
+};
+const layoutStyles = (props) => ({
 	width: "100%",
 	alignItems: "center",
-	justifyContent: anchor === "right" ? "flex-end" : "flex-start"
+	justifyContent: justifyFor(props)
 });
-const stateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
+const stackedStateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
 	const { main } = theme.palette[color];
+	return {
+		border: `${theme.borderWidths.thin} solid transparent`,
+		borderRadius: theme.radii.sq,
+		color: isSelected ? main : (0, require_src.src_exports.get)(theme, "text.primary"),
+		fontWeight: isSelected ? 600 : 400,
+		"&:disabled, &[aria-disabled=\"true\"]": { opacity: .5 },
+		...disabled || itemVariant === "plain" ? {} : { "&:hover [data-sidebar-pill]": { backgroundColor: require_utils.alpha(main, isSelected ? .32 : .08) } }
+	};
+};
+const stateStyles = (props) => {
+	const { theme, color, isSelected, itemVariant, layout, disabled } = props;
+	const { main } = theme.palette[color];
+	if (layout === "stacked") return stackedStateStyles(props);
 	const outlined = itemVariant === "outlined";
 	const base = {
 		border: `${theme.borderWidths.thin} solid ${outlined ? (0, require_src.src_exports.get)(theme, "border.light") : "transparent"}`,
@@ -57,8 +83,26 @@ const stateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
 const SidebarItemRoot = require_src.styled(require_Pressable.Pressable, {
 	name: "SidebarItem",
 	label: "SidebarItem",
-	shouldForwardProp: (prop) => prop !== "anchor" && prop !== "isSelected" && prop !== "itemVariant" && prop !== "size"
+	shouldForwardProp: (prop) => prop !== "anchor" && prop !== "layout" && prop !== "isSelected" && prop !== "itemVariant" && prop !== "size"
 })(densityStyles, layoutStyles, stateStyles);
+const SidebarItemPill = require_src.styled("span", {
+	name: "SidebarItem",
+	slot: "pill",
+	label: "SidebarItemPill",
+	shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "itemVariant" && prop !== "color"
+})(({ theme, color, isSelected, itemVariant }) => {
+	const { main } = theme.palette[color];
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "3.5rem",
+		height: "2rem",
+		borderRadius: "1rem",
+		transition: "background-color 150ms",
+		backgroundColor: isSelected && !(itemVariant === "plain") ? require_utils.alpha(main, .24) : "transparent"
+	};
+});
 /**
 * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
 * shown while the rail is open - the `label` by default, or custom `children`
@@ -67,8 +111,9 @@ const SidebarItemRoot = require_src.styled(require_Pressable.Pressable, {
 * here - no inherited uppercase, weight, or tracking.
 */
 function SidebarItem({ icon, label, variant, size = "sm", color = "primary", children, onSelect, onClick, isSelected, ...rest }) {
-	const { isOpen, anchor, variant: railVariant, hasPanel, panelId, panelNode, setPanelLabel } = (0, react.useContext)(require_SidebarContext.SidebarContext);
+	const { isOpen, anchor, variant: railVariant, layout, hasPanel, panelId, panelNode, setPanelLabel } = (0, react.useContext)(require_SidebarContext.SidebarContext);
 	const resolvedVariant = variant ?? railVariant;
+	const isStacked = layout === "stacked";
 	const ownsPanel = hasPanel && children != null;
 	const isPorting = ownsPanel && (isSelected ?? false);
 	(0, react.useEffect)(() => {
@@ -85,12 +130,13 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		onSelect?.();
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemRoot, {
-		feedback: resolvedVariant === "plain" ? "none" : "highlight",
+		feedback: resolvedVariant === "plain" || isStacked ? "none" : "highlight",
 		color,
 		size,
 		itemVariant: resolvedVariant,
 		isSelected,
 		anchor,
+		layout,
 		"aria-label": label,
 		"aria-pressed": isSelected ?? false,
 		...ownsPanel && {
@@ -99,7 +145,29 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		},
 		onClick: handleClick,
 		...rest,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+		children: isStacked ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+			as: "span",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: .5,
+			flexShrink: 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarItemPill, {
+				"data-sidebar-pill": true,
+				color,
+				isSelected,
+				itemVariant: resolvedVariant,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					name: icon,
+					size: "1.5rem",
+					color: "inherit"
+				})
+			}), (ownsPanel ? null : children) ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
+				as: "span",
+				variant: "inherit",
+				m: 0,
+				children: label
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
 			as: "span",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
@@ -121,5 +189,4 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		children
 	})] });
 }
-//#endregion
 exports.SidebarItem = SidebarItem;

package/dist/Sidebar/SidebarItem.d.cts

@@ -1,9 +1,8 @@
-import { W as Theme } from "../index-DJ0f69wh.cjs";
-import { r as IconName } from "../index-Dv_fk1_F.cjs";
-import { i as PressableProps } from "../index-YKrfFC_I.cjs";
-import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.cjs";
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { r as IconName } from "../index-CAt0-L4i.cjs";
+import { i as PressableProps } from "../index-Cjh607-v.cjs";
+import { i as SidebarItemVariant } from "../SidebarContext-Bod_oUMi.cjs";
 import { ReactNode } from "react";
-//#region src/Sidebar/SidebarItem/SidebarItem.d.ts
 /** Density token - controls padding and font size. Resolves against `theme.sizes`. */
 type SidebarItemSize = keyof Theme['sizes'];
 interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback' | 'activeOpacity' | 'size'> {
@@ -15,7 +14,11 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
   variant?: SidebarItemVariant;
   /** Padding and font size - resolves against `theme.sizes`. Default: `'sm'`. */
   size?: SidebarItemSize;
-  /** Active state - drives `aria-pressed` and the selected fill. */
+  /**
+   * Active state - drives `aria-pressed` and the selected fill. A link (an item given `href`)
+   * is marked the current page with `aria-current` by the caller instead: pass
+   * `aria-current="page"` and `aria-pressed={undefined}`, which win over the item's own.
+   */
   isSelected?: boolean;
   /**
    * Custom open-state content rendered instead of the label text (badges,
@@ -34,5 +37,4 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
  * here - no inherited uppercase, weight, or tracking.
  */
 declare function SidebarItem({ icon, label, variant, size, color, children, onSelect, onClick, isSelected, ...rest }: Readonly<SidebarItemProps>): import("react").JSX.Element;
-//#endregion
 export { SidebarItem, SidebarItemProps, SidebarItemSize };

package/dist/Sidebar/SidebarItem.d.mts

@@ -1,9 +1,8 @@
-import { W as Theme } from "../index-CJhK7JND.mjs";
-import { r as IconName } from "../index-ha1WjSZ5.mjs";
-import { i as PressableProps } from "../index-CUz2h5xY.mjs";
-import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.mjs";
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { r as IconName } from "../index-D48qVo1X.mjs";
+import { i as PressableProps } from "../index-CnVvfG9_.mjs";
+import { i as SidebarItemVariant } from "../SidebarContext-Bod_oUMi.mjs";
 import { ReactNode } from "react";
-//#region src/Sidebar/SidebarItem/SidebarItem.d.ts
 /** Density token - controls padding and font size. Resolves against `theme.sizes`. */
 type SidebarItemSize = keyof Theme['sizes'];
 interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback' | 'activeOpacity' | 'size'> {
@@ -15,7 +14,11 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
   variant?: SidebarItemVariant;
   /** Padding and font size - resolves against `theme.sizes`. Default: `'sm'`. */
   size?: SidebarItemSize;
-  /** Active state - drives `aria-pressed` and the selected fill. */
+  /**
+   * Active state - drives `aria-pressed` and the selected fill. A link (an item given `href`)
+   * is marked the current page with `aria-current` by the caller instead: pass
+   * `aria-current="page"` and `aria-pressed={undefined}`, which win over the item's own.
+   */
   isSelected?: boolean;
   /**
    * Custom open-state content rendered instead of the label text (badges,
@@ -34,5 +37,4 @@ interface SidebarItemProps extends Omit<PressableProps, 'children' | 'feedback'
  * here - no inherited uppercase, weight, or tracking.
  */
 declare function SidebarItem({ icon, label, variant, size, color, children, onSelect, onClick, isSelected, ...rest }: Readonly<SidebarItemProps>): import("react").JSX.Element;
-//#endregion
 export { SidebarItem, SidebarItemProps, SidebarItemSize };

package/dist/Sidebar/SidebarItem.mjs

@@ -1,16 +1,25 @@
-import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
-import { Flex } from "../Flex.mjs";
+import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
-import { t as Icon } from "../Icon-BihOAP4u.mjs";
+import { t as Icon } from "../Icon-XpXU-SuF.mjs";
+import { Flex } from "../Flex.mjs";
 import { Portal } from "../Portal.mjs";
 import { Pressable } from "../Pressable.mjs";
-import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
+import { t as SidebarContext } from "../SidebarContext-D3bF-Q4N.mjs";
 import { useContext, useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/Sidebar/SidebarItem/SidebarItem.tsx
-const densityStyles = ({ theme, size }) => {
+// src/Sidebar/SidebarItem/SidebarItem.tsx
+const densityStyles = ({ theme, size, layout }) => {
 	const s = theme.sizes[size];
+	if (layout === "stacked") return {
+		paddingTop: theme.space[.5],
+		paddingBottom: theme.space[.5],
+		paddingLeft: 0,
+		paddingRight: 0,
+		fontSize: theme.fontSizes[0],
+		lineHeight: 1.2,
+		whiteSpace: "nowrap"
+	};
 	return {
 		paddingTop: theme.space[s.paddingTop],
 		paddingBottom: theme.space[s.paddingBottom],
@@ -21,13 +30,30 @@ const densityStyles = ({ theme, size }) => {
 		whiteSpace: "nowrap"
 	};
 };
-const layoutStyles = ({ anchor }) => ({
+const justifyFor = ({ anchor, layout }) => {
+	if (layout === "stacked") return "center";
+	return anchor === "right" ? "flex-end" : "flex-start";
+};
+const layoutStyles = (props) => ({
 	width: "100%",
 	alignItems: "center",
-	justifyContent: anchor === "right" ? "flex-end" : "flex-start"
+	justifyContent: justifyFor(props)
 });
-const stateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
+const stackedStateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
 	const { main } = theme.palette[color];
+	return {
+		border: `${theme.borderWidths.thin} solid transparent`,
+		borderRadius: theme.radii.sq,
+		color: isSelected ? main : (0, src_exports.get)(theme, "text.primary"),
+		fontWeight: isSelected ? 600 : 400,
+		"&:disabled, &[aria-disabled=\"true\"]": { opacity: .5 },
+		...disabled || itemVariant === "plain" ? {} : { "&:hover [data-sidebar-pill]": { backgroundColor: alpha(main, isSelected ? .32 : .08) } }
+	};
+};
+const stateStyles = (props) => {
+	const { theme, color, isSelected, itemVariant, layout, disabled } = props;
+	const { main } = theme.palette[color];
+	if (layout === "stacked") return stackedStateStyles(props);
 	const outlined = itemVariant === "outlined";
 	const base = {
 		border: `${theme.borderWidths.thin} solid ${outlined ? (0, src_exports.get)(theme, "border.light") : "transparent"}`,
@@ -56,8 +82,26 @@ const stateStyles = ({ theme, color, isSelected, itemVariant, disabled }) => {
 const SidebarItemRoot = styled(Pressable, {
 	name: "SidebarItem",
 	label: "SidebarItem",
-	shouldForwardProp: (prop) => prop !== "anchor" && prop !== "isSelected" && prop !== "itemVariant" && prop !== "size"
+	shouldForwardProp: (prop) => prop !== "anchor" && prop !== "layout" && prop !== "isSelected" && prop !== "itemVariant" && prop !== "size"
 })(densityStyles, layoutStyles, stateStyles);
+const SidebarItemPill = styled("span", {
+	name: "SidebarItem",
+	slot: "pill",
+	label: "SidebarItemPill",
+	shouldForwardProp: (prop) => prop !== "isSelected" && prop !== "itemVariant" && prop !== "color"
+})(({ theme, color, isSelected, itemVariant }) => {
+	const { main } = theme.palette[color];
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: "3.5rem",
+		height: "2rem",
+		borderRadius: "1rem",
+		transition: "background-color 150ms",
+		backgroundColor: isSelected && !(itemVariant === "plain") ? alpha(main, .24) : "transparent"
+	};
+});
 /**
 * One entry of a `Sidebar`: an icon pinned to the anchored edge, plus content
 * shown while the rail is open - the `label` by default, or custom `children`
@@ -66,8 +110,9 @@ const SidebarItemRoot = styled(Pressable, {
 * here - no inherited uppercase, weight, or tracking.
 */
 function SidebarItem({ icon, label, variant, size = "sm", color = "primary", children, onSelect, onClick, isSelected, ...rest }) {
-	const { isOpen, anchor, variant: railVariant, hasPanel, panelId, panelNode, setPanelLabel } = useContext(SidebarContext);
+	const { isOpen, anchor, variant: railVariant, layout, hasPanel, panelId, panelNode, setPanelLabel } = useContext(SidebarContext);
 	const resolvedVariant = variant ?? railVariant;
+	const isStacked = layout === "stacked";
 	const ownsPanel = hasPanel && children != null;
 	const isPorting = ownsPanel && (isSelected ?? false);
 	useEffect(() => {
@@ -84,12 +129,13 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		onSelect?.();
 	};
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarItemRoot, {
-		feedback: resolvedVariant === "plain" ? "none" : "highlight",
+		feedback: resolvedVariant === "plain" || isStacked ? "none" : "highlight",
 		color,
 		size,
 		itemVariant: resolvedVariant,
 		isSelected,
 		anchor,
+		layout,
 		"aria-label": label,
 		"aria-pressed": isSelected ?? false,
 		...ownsPanel && {
@@ -98,7 +144,29 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		},
 		onClick: handleClick,
 		...rest,
-		children: /* @__PURE__ */ jsxs(Flex, {
+		children: isStacked ? /* @__PURE__ */ jsxs(Flex, {
+			as: "span",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: .5,
+			flexShrink: 0,
+			children: [/* @__PURE__ */ jsx(SidebarItemPill, {
+				"data-sidebar-pill": true,
+				color,
+				isSelected,
+				itemVariant: resolvedVariant,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					size: "1.5rem",
+					color: "inherit"
+				})
+			}), (ownsPanel ? null : children) ?? /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "inherit",
+				m: 0,
+				children: label
+			})]
+		}) : /* @__PURE__ */ jsxs(Flex, {
 			as: "span",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
@@ -120,5 +188,4 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		children
 	})] });
 }
-//#endregion
 export { SidebarItem };

package/dist/Sidebar.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_SidebarContext = require("./SidebarContext-jG6OioC-.cjs");
+const require_SidebarContext = require("./SidebarContext-mXrB4z8v.cjs");
 const require_Sidebar_Sidebar = require("./Sidebar/Sidebar.cjs");
 const require_Sidebar_SidebarItem = require("./Sidebar/SidebarItem.cjs");
 exports.Sidebar = require_Sidebar_Sidebar.Sidebar;

package/dist/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-B1lWrt77.cjs";
+import { a as SidebarLayout, i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-Bod_oUMi.cjs";
 import { Sidebar, SidebarProps } from "./Sidebar/Sidebar.cjs";
 import { SidebarItem, SidebarItemProps, SidebarItemSize } from "./Sidebar/SidebarItem.cjs";
-export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarProps };
+export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarLayout, SidebarProps };

package/dist/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-B1lWrt77.mjs";
+import { a as SidebarLayout, i as SidebarItemVariant, n as SidebarContext, r as SidebarContextValue, t as SidebarAnchor } from "./SidebarContext-Bod_oUMi.mjs";
 import { Sidebar, SidebarProps } from "./Sidebar/Sidebar.mjs";
 import { SidebarItem, SidebarItemProps, SidebarItemSize } from "./Sidebar/SidebarItem.mjs";
-export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarProps };
+export { Sidebar, SidebarAnchor, SidebarContext, SidebarContextValue, SidebarItem, SidebarItemProps, SidebarItemSize, SidebarItemVariant, SidebarLayout, SidebarProps };

package/dist/Sidebar.mjs

@@ -1,4 +1,4 @@
-import { t as SidebarContext } from "./SidebarContext-DgSLwjur.mjs";
+import { t as SidebarContext } from "./SidebarContext-D3bF-Q4N.mjs";
 import { Sidebar } from "./Sidebar/Sidebar.mjs";
 import { SidebarItem } from "./Sidebar/SidebarItem.mjs";
 export { Sidebar, SidebarContext, SidebarItem };