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

package/dist/Select.cjs

@@ -1,16 +1,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-DzfwuzMZ.cjs");
-const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_Icon = require("./Icon-BE7bRsqR.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BUK_62Ra.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_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-xyJTSjZy.cjs");
+const require_Popover = require("./Popover-BniabG7D.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");
-//#region src/Select/hooks/useSelectPopover.ts
+// src/Select/hooks/useSelectPopover.ts
 /**
 * Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
 * callbacks. Positioning is delegated to `Popover`.
@@ -30,8 +30,7 @@ function useSelectPopover({ open: openProp, defaultOpen = false, onOpen, onClose
 		}, [isControlled, onClose])
 	};
 }
-//#endregion
-//#region src/Select/utils/getOptionsFromChildren.ts
+// src/Select/utils/getOptionsFromChildren.ts
 /**
 * Flattens `Select`'s `MenuItem` children into a plain option list. Any child that
 * is not a valid element carrying a `value` prop (e.g. whitespace, `null`) is skipped,
@@ -49,8 +48,7 @@ function getOptionsFromChildren(children) {
 		}];
 	});
 }
-//#endregion
-//#region src/Select/utils/getNextEnabledIndex.ts
+// src/Select/utils/getNextEnabledIndex.ts
 /**
 * Walks `options` from `from` by `step` (+1 / -1), skipping disabled rows, and
 * returns the first enabled index reached. Stops at the edges (no wrap-around);
@@ -66,14 +64,12 @@ function getEdgeEnabledIndex(options, edge) {
 	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
 	return -1;
 }
-//#endregion
-//#region src/Select/utils/isOptionSelected.ts
+// src/Select/utils/isOptionSelected.ts
 /** True when `optionValue` is the current single value, or is contained in the multiple-mode array. */
 function isOptionSelected(value, optionValue) {
 	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
 }
-//#endregion
-//#region src/Select/utils/computeNextValue.ts
+// src/Select/utils/computeNextValue.ts
 /**
 * The value that results from choosing `optionValue`.
 * - Multiple mode: toggles `optionValue` in/out of the array, preserving order.
@@ -83,8 +79,7 @@ function computeNextValue(value, optionValue) {
 	if (!Array.isArray(value)) return optionValue;
 	return value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue];
 }
-//#endregion
-//#region src/Select/utils/resolveDisplayLabel.ts
+// src/Select/utils/resolveDisplayLabel.ts
 /**
 * The label(s) to show in the trigger for the current `value`, or `null` when nothing
 * is selected (the caller then falls back to the placeholder). Multiple-mode selections
@@ -103,8 +98,7 @@ function resolveDisplayLabel(options, value) {
 	const match = options.find((option) => option.value === value);
 	return match ? match.label : null;
 }
-//#endregion
-//#region src/Select/Select.tsx
+// src/Select/Select.tsx
 const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 	..._soroush_tech_styled_system_should_forward_prop.props,
 	"variant",
@@ -505,5 +499,4 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 		})
 	] });
 }
-//#endregion
 exports.Select = Select;

package/dist/Select.d.cts

@@ -1,12 +1,9 @@
-import { nt as Theme } from "./index-XN4-ZqTB.cjs";
-import { n as IconProps, r as IconName } from "./index-05VGk0y_.cjs";
+import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { n as IconProps, r as IconName } from "./index-CAt0-L4i.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-//#region src/Select/utils/isOptionSelected.d.ts
 /** The union of value shapes `Select` holds: a single value, or an array in multiple mode. */
 type SelectValue = string | number | Array<string | number>;
-//#endregion
-//#region src/Select/Select.d.ts
 type SelectColor = keyof Theme['palette'];
 type SelectTextColor = keyof Theme['text'];
 type SelectBackgroundToken = keyof Theme['background'];
@@ -65,5 +62,4 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   'data-testid'?: string;
 }
 declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
-//#endregion
 export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };

package/dist/Select.d.mts

@@ -1,12 +1,9 @@
-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 { ReactNode } from "react";
-//#region src/Select/utils/isOptionSelected.d.ts
 /** The union of value shapes `Select` holds: a single value, or an array in multiple mode. */
 type SelectValue = string | number | Array<string | number>;
-//#endregion
-//#region src/Select/Select.d.ts
 type SelectColor = keyof Theme['palette'];
 type SelectTextColor = keyof Theme['text'];
 type SelectBackgroundToken = keyof Theme['background'];
@@ -65,5 +62,4 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   'data-testid'?: string;
 }
 declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId: labelIdProp, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
-//#endregion
 export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };

package/dist/Select.mjs

@@ -1,14 +1,14 @@
-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 { NativeSelect } from "./NativeSelect.mjs";
-import { t as Popover } from "./Popover-Neeqs_7l.mjs";
+import { t as Popover } from "./Popover-Dnmeo0Av.mjs";
 import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region src/Select/hooks/useSelectPopover.ts
+// src/Select/hooks/useSelectPopover.ts
 /**
 * Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
 * callbacks. Positioning is delegated to `Popover`.
@@ -28,8 +28,7 @@ function useSelectPopover({ open: openProp, defaultOpen = false, onOpen, onClose
 		}, [isControlled, onClose])
 	};
 }
-//#endregion
-//#region src/Select/utils/getOptionsFromChildren.ts
+// src/Select/utils/getOptionsFromChildren.ts
 /**
 * Flattens `Select`'s `MenuItem` children into a plain option list. Any child that
 * is not a valid element carrying a `value` prop (e.g. whitespace, `null`) is skipped,
@@ -47,8 +46,7 @@ function getOptionsFromChildren(children) {
 		}];
 	});
 }
-//#endregion
-//#region src/Select/utils/getNextEnabledIndex.ts
+// src/Select/utils/getNextEnabledIndex.ts
 /**
 * Walks `options` from `from` by `step` (+1 / -1), skipping disabled rows, and
 * returns the first enabled index reached. Stops at the edges (no wrap-around);
@@ -64,14 +62,12 @@ function getEdgeEnabledIndex(options, edge) {
 	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
 	return -1;
 }
-//#endregion
-//#region src/Select/utils/isOptionSelected.ts
+// src/Select/utils/isOptionSelected.ts
 /** True when `optionValue` is the current single value, or is contained in the multiple-mode array. */
 function isOptionSelected(value, optionValue) {
 	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
 }
-//#endregion
-//#region src/Select/utils/computeNextValue.ts
+// src/Select/utils/computeNextValue.ts
 /**
 * The value that results from choosing `optionValue`.
 * - Multiple mode: toggles `optionValue` in/out of the array, preserving order.
@@ -81,8 +77,7 @@ function computeNextValue(value, optionValue) {
 	if (!Array.isArray(value)) return optionValue;
 	return value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue];
 }
-//#endregion
-//#region src/Select/utils/resolveDisplayLabel.ts
+// src/Select/utils/resolveDisplayLabel.ts
 /**
 * The label(s) to show in the trigger for the current `value`, or `null` when nothing
 * is selected (the caller then falls back to the placeholder). Multiple-mode selections
@@ -101,8 +96,7 @@ function resolveDisplayLabel(options, value) {
 	const match = options.find((option) => option.value === value);
 	return match ? match.label : null;
 }
-//#endregion
-//#region src/Select/Select.tsx
+// src/Select/Select.tsx
 const shouldForwardProp = createShouldForwardProp([
 	...props,
 	"variant",
@@ -503,5 +497,4 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 		})
 	] });
 }
-//#endregion
 export { Select };

package/dist/Sidebar/Sidebar.cjs

@@ -1,10 +1,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-DU81aGy9.cjs");
+const require_src = require("../src-yC1f5WR2.cjs");
 const require_Flex = require("../Flex.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/Sidebar/Sidebar.tsx
+// src/Sidebar/Sidebar/Sidebar.tsx
 const SidebarRoot = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -13,13 +13,16 @@ const SidebarRail = require_src.styled(require_Flex.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 = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	slot: "panel",
@@ -43,15 +46,17 @@ const SidebarPanelRoot = require_src.styled(require_Flex.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 = (0, react.useId)();
 	const [panelNode, setPanelNode] = (0, react.useState)(null);
 	const [panelLabel, setPanelLabel] = (0, react.useState)(null);
+	const hasPortPanel = hasPanel && panel == null;
 	const context = (0, react.useMemo)(() => ({
 		isOpen,
 		anchor,
 		variant,
-		hasPanel,
+		layout,
+		hasPanel: hasPortPanel,
 		panelId,
 		panelNode,
 		setPanelLabel
@@ -59,7 +64,8 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		isOpen,
 		anchor,
 		variant,
-		hasPanel,
+		layout,
+		hasPortPanel,
 		panelId,
 		panelNode
 	]);
@@ -69,26 +75,36 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
 		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarRail, {
-			flexDirection: "column",
-			gap: 1,
-			flexShrink: 0,
-			isOpen,
-			expandedWidth,
-			collapsedWidth,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SidebarContext.SidebarContext.Provider, {
-				value: context,
-				children
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarRail, {
+				flexDirection: "column",
+				gap: 1,
+				flexShrink: 0,
+				isOpen,
+				layout,
+				expandedWidth,
+				collapsedWidth,
+				stackedWidth,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SidebarContext.SidebarContext.Provider, {
+					value: context,
+					children
+				})
+			}),
+			panel != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarPanelRoot, {
+				as: "section",
+				width: panelWidth,
+				...panelProps,
+				children: panel
+			}),
+			hasPortPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarPanelRoot, {
+				as: "section",
+				width: panelWidth,
+				"aria-label": panelLabel ?? void 0,
+				...panelProps,
+				ref: setPanelNode,
+				id: panelId
 			})
-		}), hasPanel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarPanelRoot, {
-			as: "section",
-			width: panelWidth,
-			"aria-label": panelLabel ?? void 0,
-			...panelProps,
-			ref: setPanelNode,
-			id: panelId
-		})]
+		]
 	});
 }
-//#endregion
 exports.Sidebar = Sidebar;

package/dist/Sidebar/Sidebar.d.cts

@@ -1,7 +1,6 @@
-import { dn as FlexProps } from "../index-XN4-ZqTB.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 { dn as FlexProps } from "../index-CRQ7XLri.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 };