@soroush.tech/design-system 1.3.3 → 2.0.0-alpha.0

package/dist/PageLayout.d.mts

@@ -0,0 +1,19 @@
+import { h as LayoutPanels } from "./themes-9YNnlVyY.mjs";
+import { LayoutGrid, LayoutGridProps } from "./PageLayout/LayoutGrid.mjs";
+import "./index-CoHrw2p7.mjs";
+import { PageLayout, PageLayoutBarPlacement, PageLayoutPanelSide, PageLayoutProps } from "./PageLayout/PageLayout.mjs";
+//#region src/PageLayout/PageLayoutContext.d.ts
+/**
+ * The `PageLayout` region a component renders in, so components that fill a region
+ * (`Sidebar` in a panel, `AppBar` in a bar) can size from it. `null` outside one.
+ */
+type PageLayoutRegion = {
+  region: 'panel';
+  side: keyof LayoutPanels;
+} | {
+  region: 'bar';
+  placement: 'top' | 'bottom';
+};
+declare const PageLayoutContext: import("react").Context<PageLayoutRegion | null>;
+//#endregion
+export { LayoutGrid, LayoutGridProps, PageLayout, PageLayoutBarPlacement, PageLayoutContext, PageLayoutPanelSide, PageLayoutProps, PageLayoutRegion };

package/dist/PageLayout.mjs

@@ -0,0 +1,4 @@
+import { t as PageLayoutContext } from "./PageLayoutContext-DjJ1_7Xc.mjs";
+import { PageLayout } from "./PageLayout/PageLayout.mjs";
+import { LayoutGrid } from "./PageLayout/LayoutGrid.mjs";
+export { LayoutGrid, PageLayout, PageLayoutContext };

package/dist/PageLayoutContext-DjJ1_7Xc.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/PageLayout/PageLayoutContext.ts
+const PageLayoutContext = createContext(null);
+//#endregion
+export { PageLayoutContext as t };

package/dist/PageLayoutContext-agXGhegE.cjs

@@ -0,0 +1,9 @@
+//#region src/PageLayout/PageLayoutContext.ts
+const PageLayoutContext = (0, require("react").createContext)(null);
+//#endregion
+Object.defineProperty(exports, "PageLayoutContext", {
+	enumerable: true,
+	get: function() {
+		return PageLayoutContext;
+	}
+});

package/dist/Pagination/PaginationItem.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_themeDefault = require("../themeDefault-Cebi08Cv.cjs");
 const require_utils = require("../utils.cjs");
-const require_Icon = require("../Icon-BAMpe9SO.cjs");
+const require_Icon = require("../Icon-CKLBJ7CC.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");

package/dist/Pagination/PaginationItem.d.cts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-d6gR2x8j.cjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-CLttbRhG.cjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.d.mts

@@ -1,2 +1,2 @@
-import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-DdBeSvit.mjs";
+import { a as PaginationItemSize, i as PaginationItemShape, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, t as PaginationItem } from "../index-CzmA09Yf.mjs";
 export { PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemVariant };

package/dist/Pagination/PaginationItem.mjs

@@ -1,7 +1,7 @@
 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 { alpha } from "../utils.mjs";
-import { t as Icon } from "../Icon-gSiGgU13.mjs";
+import { t as Icon } from "../Icon-CkQGOBmm.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pagination/PaginationItem/PaginationItem.tsx

package/dist/Pagination.d.cts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-d6gR2x8j.cjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-Br2gDSme.cjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-CLttbRhG.cjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-CohgpyUj.cjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Pagination.d.mts

@@ -1,3 +1,3 @@
-import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-DdBeSvit.mjs";
-import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-h36rcOy8.mjs";
+import { a as PaginationItemSize, c as UsePaginationItem, i as PaginationItemShape, l as UsePaginationProps, n as PaginationItemColor, o as PaginationItemVariant, r as PaginationItemProps, s as PaginationItemType, t as PaginationItem, u as usePagination } from "./index-CzmA09Yf.mjs";
+import { a as PaginationSize, i as PaginationShape, n as PaginationColor, o as PaginationVariant, r as PaginationProps, t as Pagination } from "./index-DsKd9VW5.mjs";
 export { Pagination, PaginationColor, PaginationItem, PaginationItemColor, PaginationItemProps, PaginationItemShape, PaginationItemSize, PaginationItemType, PaginationItemVariant, PaginationProps, PaginationShape, PaginationSize, PaginationVariant, UsePaginationItem, UsePaginationProps, usePagination };

package/dist/Paper.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_Flex = require("./Flex.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Paper/Paper.tsx

package/dist/Paper.d.cts

@@ -1,2 +1,2 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-Cf7w9Lod.cjs";
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-BGD4OzzG.cjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.d.mts

@@ -1,2 +1,2 @@
-import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-BCvkP5R1.mjs";
+import { n as PaperElevation, r as PaperProps, t as Paper } from "./index-BSR9zrAA.mjs";
 export { Paper, PaperElevation, PaperProps };

package/dist/Paper.mjs

@@ -1,7 +1,7 @@
 import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
 import { Flex } from "./Flex.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Paper/Paper.tsx

package/dist/{Popover-Bq31OTEl.mjs → Popover-DWOrf7sy.mjs}

@@ -1,5 +1,5 @@
 import { o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import { Paper } from "./Paper.mjs";
 import { t as Modal } from "./Modal-CYNcPk-2.mjs";
 import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";

package/dist/{Popover-gg44qzwo.cjs → Popover-Dz6h3A_9.cjs}

@@ -1,5 +1,5 @@
 const require_src = require("./src-DU81aGy9.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
 const require_Paper = require("./Paper.cjs");
 const require_Modal = require("./Modal-CApyh_V5.cjs");
 let react = require("react");

package/dist/Popover.cjs

@@ -1,3 +1,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Popover = require("./Popover-gg44qzwo.cjs");
+const require_Popover = require("./Popover-Dz6h3A_9.cjs");
 exports.Popover = require_Popover.Popover;

package/dist/Popover.d.cts

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as PaperElevation, r as PaperProps } from "./index-Cf7w9Lod.cjs";
-import { l as ModalCloseReason } from "./index-D-QRCHiS.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as PaperElevation, r as PaperProps } from "./index-BGD4OzzG.cjs";
+import { l as ModalCloseReason } from "./index-B8KscJic.cjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts
 type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;

package/dist/Popover.d.mts

@@ -1,7 +1,7 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as PaperElevation, r as PaperProps } from "./index-BCvkP5R1.mjs";
-import { l as ModalCloseReason } from "./index-CTVFwvju.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as PaperElevation, r as PaperProps } from "./index-BSR9zrAA.mjs";
+import { l as ModalCloseReason } from "./index-qtKJ56yu.mjs";
 import { ReactNode, Ref } from "react";
 //#region src/Popover/utils/resolveAnchorEl.d.ts
 type PopoverAnchorEl = HTMLElement | (() => HTMLElement | null) | null;

package/dist/Popover.mjs

@@ -1,2 +1,2 @@
-import { t as Popover } from "./Popover-Bq31OTEl.mjs";
+import { t as Popover } from "./Popover-DWOrf7sy.mjs";
 export { Popover };

package/dist/Pressable.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.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");

package/dist/Pressable.d.cts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-DzuXwDCW.cjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-CtrxW81j.cjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.d.mts

@@ -1,2 +1,2 @@
-import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-COYxtrc0.mjs";
+import { i as PressableProps, n as PressableColor, r as PressableFeedback, t as Pressable } from "./index-8mHoIUt5.mjs";
 export { Pressable, PressableColor, PressableFeedback, PressableProps };

package/dist/Pressable.mjs

@@ -1,7 +1,7 @@
 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 { alpha } from "./utils.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/Pressable/Pressable.tsx

package/dist/Quote.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { s as ViewProps } from "./index-Btmdtbpb.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { s as ViewProps } from "./index-CvWslVk6.cjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Quote.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { s as ViewProps } from "./index-DQ16ijxx.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { s as ViewProps } from "./index-tv-TGYSG.mjs";
 //#region src/Quote/Quote.d.ts
 type QuoteProps = ViewProps;
 /** A View with a 2px primary left-border - used for terminal readouts and markdown blockquotes. */

package/dist/Radio.d.cts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Radio/Radio.d.ts

package/dist/Radio.d.mts

@@ -1,5 +1,5 @@
-import { d as PaletteColor, h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme, v as PaletteColor } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 //#region src/Radio/Radio.d.ts

package/dist/Select.cjs

@@ -1,12 +1,12 @@
 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-Bnc03K83.cjs");
-const require_Icon = require("./Icon-BAMpe9SO.cjs");
+const require_theme = require("./theme-BmEAXmwh.cjs");
+const require_Icon = require("./Icon-CKLBJ7CC.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 const require_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-gg44qzwo.cjs");
+const require_Popover = require("./Popover-Dz6h3A_9.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");

package/dist/Select.d.cts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
-import { n as IconProps, r as IconName } from "./index-DCu7qjpa.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
+import { n as IconProps, r as IconName } from "./index-DPHwCZYf.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Select/utils/isOptionSelected.d.ts

package/dist/Select.d.mts

@@ -1,6 +1,6 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
-import { n as IconProps, r as IconName } from "./index-76XH-GEc.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
+import { n as IconProps, r as IconName } from "./index-r2avCy1z.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
 //#region src/Select/utils/isOptionSelected.d.ts

package/dist/Select.mjs

@@ -1,11 +1,11 @@
 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-BuqqFbsz.mjs";
-import { t as Icon } from "./Icon-gSiGgU13.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
+import { t as Icon } from "./Icon-CkQGOBmm.mjs";
 import { useFormControl } from "./FormControl.mjs";
 import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { NativeSelect } from "./NativeSelect.mjs";
-import { t as Popover } from "./Popover-Bq31OTEl.mjs";
+import { t as Popover } from "./Popover-DWOrf7sy.mjs";
 import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Select/hooks/useSelectPopover.ts

package/dist/Sidebar/Sidebar.cjs

@@ -1,10 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
 const require_Flex = require("../Flex.cjs");
+const require_PageLayoutContext = require("../PageLayoutContext-agXGhegE.cjs");
+const require_layoutStyles = require("../layoutStyles-B4Z1K6HZ.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/Sidebar/Sidebar/Sidebar.tsx
+const hideLabels = { "[data-sidebar-item-content] > :not(:first-child)": { display: "none" } };
 const SidebarRoot = require_src.styled(require_Flex.Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -13,13 +16,21 @@ 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 !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "panelSide"
+})(({ theme, isOpen, expandedWidth, collapsedWidth, panelSide }) => panelSide ? {
+	width: "100%",
+	overflowX: "hidden",
+	containerType: "inline-size",
+	...require_layoutStyles.layoutStyles(theme, ({ panels }) => {
+		const width = panels[panelSide]?.width;
+		return width === void 0 ? {} : { [`@container (width < ${require_layoutStyles.layoutLength(theme, width)})`]: hideLabels };
+	})
+} : {
 	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,7 +54,10 @@ 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, anchor = "left", variant = "text", expandedWidth, collapsedWidth, hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+	const region = (0, react.useContext)(require_PageLayoutContext.PageLayoutContext);
+	const isSized = expandedWidth !== void 0 || collapsedWidth !== void 0;
+	const panelSide = region?.region === "panel" && !isSized ? region.side : void 0;
 	const panelId = (0, react.useId)();
 	const [panelNode, setPanelNode] = (0, react.useState)(null);
 	const [panelLabel, setPanelLabel] = (0, react.useState)(null);
@@ -68,14 +82,19 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		"aria-label": ariaLabel,
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
+		...panelSide && {
+			width: "100%",
+			height: "100%"
+		},
 		...rest,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SidebarRail, {
 			flexDirection: "column",
 			gap: 1,
 			flexShrink: 0,
 			isOpen,
-			expandedWidth,
-			collapsedWidth,
+			expandedWidth: expandedWidth ?? "14rem",
+			collapsedWidth: collapsedWidth ?? "3.5rem",
+			panelSide,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SidebarContext.SidebarContext.Provider, {
 				value: context,
 				children

package/dist/Sidebar/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-DOLA1VFD.cjs";
+import { n as FlexProps } from "../index-BMJ3tyIw.cjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts
@@ -17,7 +17,10 @@ interface SidebarProps extends FlexProps {
   anchor?: SidebarAnchor;
   /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
   variant?: SidebarItemVariant;
-  /** Rail width while open. Default: `'14rem'`. */
+  /**
+   * Rail width while open. Default: `'14rem'`. In a `PageLayout` panel, with neither
+   * width set, the rail fills the panel's track instead.
+   */
   expandedWidth?: string;
   /** Rail width while collapsed (icons only). Default: `'3.5rem'`. */
   collapsedWidth?: string;

package/dist/Sidebar/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { n as FlexProps } from "../index-KZKeZDAF.mjs";
+import { n as FlexProps } from "../index-B41OXLX8.mjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts
@@ -17,7 +17,10 @@ interface SidebarProps extends FlexProps {
   anchor?: SidebarAnchor;
   /** Default variant for every item - an item's own `variant` wins. Default: `'text'`. */
   variant?: SidebarItemVariant;
-  /** Rail width while open. Default: `'14rem'`. */
+  /**
+   * Rail width while open. Default: `'14rem'`. In a `PageLayout` panel, with neither
+   * width set, the rail fills the panel's track instead.
+   */
   expandedWidth?: string;
   /** Rail width while collapsed (icons only). Default: `'3.5rem'`. */
   collapsedWidth?: string;

package/dist/Sidebar/Sidebar.mjs

@@ -1,9 +1,12 @@
 import { o as styled } from "../src-DLGYOJMh.mjs";
 import { Flex } from "../Flex.mjs";
+import { t as PageLayoutContext } from "../PageLayoutContext-DjJ1_7Xc.mjs";
+import { n as layoutStyles, t as layoutLength } from "../layoutStyles-f0ISNjsC.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
-import { useId, useMemo, useState } from "react";
+import { useContext, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Sidebar/Sidebar/Sidebar.tsx
+const hideLabels = { "[data-sidebar-item-content] > :not(:first-child)": { display: "none" } };
 const SidebarRoot = styled(Flex, {
 	name: "Sidebar",
 	label: "Sidebar"
@@ -12,13 +15,21 @@ 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 !== "expandedWidth" && prop !== "collapsedWidth" && prop !== "panelSide"
+})(({ theme, isOpen, expandedWidth, collapsedWidth, panelSide }) => panelSide ? {
+	width: "100%",
+	overflowX: "hidden",
+	containerType: "inline-size",
+	...layoutStyles(theme, ({ panels }) => {
+		const width = panels[panelSide]?.width;
+		return width === void 0 ? {} : { [`@container (width < ${layoutLength(theme, width)})`]: hideLabels };
+	})
+} : {
 	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,7 +53,10 @@ 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, anchor = "left", variant = "text", expandedWidth, collapsedWidth, hasPanel = false, panelWidth = "18rem", panelProps, "aria-label": ariaLabel, ...rest }) {
+	const region = useContext(PageLayoutContext);
+	const isSized = expandedWidth !== void 0 || collapsedWidth !== void 0;
+	const panelSide = region?.region === "panel" && !isSized ? region.side : void 0;
 	const panelId = useId();
 	const [panelNode, setPanelNode] = useState(null);
 	const [panelLabel, setPanelLabel] = useState(null);
@@ -67,14 +81,19 @@ function Sidebar({ children, isOpen, anchor = "left", variant = "text", expanded
 		"aria-label": ariaLabel,
 		flexDirection: anchor === "right" ? "row-reverse" : "row",
 		flexShrink: 0,
+		...panelSide && {
+			width: "100%",
+			height: "100%"
+		},
 		...rest,
 		children: [/* @__PURE__ */ jsx(SidebarRail, {
 			flexDirection: "column",
 			gap: 1,
 			flexShrink: 0,
 			isOpen,
-			expandedWidth,
-			collapsedWidth,
+			expandedWidth: expandedWidth ?? "14rem",
+			collapsedWidth: collapsedWidth ?? "3.5rem",
+			panelSide,
 			children: /* @__PURE__ */ jsx(SidebarContext.Provider, {
 				value: context,
 				children

package/dist/Sidebar/SidebarItem.cjs

@@ -3,7 +3,7 @@ const require_src = require("../src-DU81aGy9.cjs");
 const require_Flex = require("../Flex.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
-const require_Icon = require("../Icon-BAMpe9SO.cjs");
+const require_Icon = require("../Icon-CKLBJ7CC.cjs");
 const require_Portal = require("../Portal.cjs");
 const require_Pressable = require("../Pressable.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");
@@ -101,6 +101,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
 			as: "span",
+			"data-sidebar-item-content": "",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
 			gap: 2,

package/dist/Sidebar/SidebarItem.d.cts

@@ -1,7 +1,7 @@
-import { h as Theme } from "../themes-kbuYiwCi.cjs";
-import "../index-jmy5eXpx.cjs";
-import { r as IconName } from "../index-DCu7qjpa.cjs";
-import { i as PressableProps } from "../index-DzuXwDCW.cjs";
+import { S as Theme } from "../themes-9YNnlVyY.cjs";
+import "../index-DkJzi96w.cjs";
+import { r as IconName } from "../index-DPHwCZYf.cjs";
+import { i as PressableProps } from "../index-CtrxW81j.cjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.cjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.d.mts

@@ -1,7 +1,7 @@
-import { h as Theme } from "../themes-kbuYiwCi.mjs";
-import "../index-v_otepCe.mjs";
-import { r as IconName } from "../index-76XH-GEc.mjs";
-import { i as PressableProps } from "../index-COYxtrc0.mjs";
+import { S as Theme } from "../themes-9YNnlVyY.mjs";
+import "../index-CEqa8xx8.mjs";
+import { r as IconName } from "../index-r2avCy1z.mjs";
+import { i as PressableProps } from "../index-8mHoIUt5.mjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.mjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.mjs

@@ -2,7 +2,7 @@ import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
 import { Flex } from "../Flex.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
-import { t as Icon } from "../Icon-gSiGgU13.mjs";
+import { t as Icon } from "../Icon-CkQGOBmm.mjs";
 import { Portal } from "../Portal.mjs";
 import { Pressable } from "../Pressable.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
@@ -100,6 +100,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		...rest,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			as: "span",
+			"data-sidebar-item-content": "",
 			flexDirection: anchor === "right" ? "row-reverse" : "row",
 			alignItems: "center",
 			gap: 2,

package/dist/Skeleton.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { HTMLAttributes } from "react";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Skeleton/Skeleton.d.ts

package/dist/Skeleton.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Skeleton/Skeleton.d.ts

package/dist/Switch.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
-const require_theme = require("./theme-Bnc03K83.cjs");
+const require_theme = require("./theme-BmEAXmwh.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");

package/dist/Switch.d.cts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.cjs";
-import "./index-jmy5eXpx.cjs";
+import { S as Theme } from "./themes-9YNnlVyY.cjs";
+import "./index-DkJzi96w.cjs";
 import { ChangeEvent, ReactNode } from "react";
 import { SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Switch/Switch.d.ts

package/dist/Switch.d.mts

@@ -1,5 +1,5 @@
-import { h as Theme } from "./themes-kbuYiwCi.mjs";
-import "./index-v_otepCe.mjs";
+import { S as Theme } from "./themes-9YNnlVyY.mjs";
+import "./index-CEqa8xx8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEvent, ReactNode } from "react";
 //#region src/Switch/Switch.d.ts

package/dist/Switch.mjs

@@ -1,7 +1,7 @@
 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 { alpha } from "./utils.mjs";
-import { r as useTheme } from "./theme-BuqqFbsz.mjs";
+import { r as useTheme } from "./theme-BQGlZoma.mjs";
 import "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Switch/Switch.tsx