@ctrl-ui/react 0.8.9 → 0.8.10

package/dist/knob-contracts/app-shell-header-knobs.d.ts

@@ -0,0 +1,4 @@
+//#region src/knob-contracts/app-shell-header-knobs.d.ts
+export declare const appShellHeaderKnobs: readonly ["--cui-app-shell-header-height", "--cui-app-shell-header-padding-inline", "--cui-app-shell-header-background", "--cui-app-shell-header-border-color", "--cui-app-shell-header-border-width"];
+export type AppShellHeaderKnobStyle = Partial<Record<(typeof appShellHeaderKnobs)[number], string>>;
+//#endregion

package/dist/knob-contracts/app-shell-header-knobs.js

@@ -0,0 +1,10 @@
+//#region src/knob-contracts/app-shell-header-knobs.ts
+const appShellHeaderKnobs = [
+	"--cui-app-shell-header-height",
+	"--cui-app-shell-header-padding-inline",
+	"--cui-app-shell-header-background",
+	"--cui-app-shell-header-border-color",
+	"--cui-app-shell-header-border-width"
+];
+//#endregion
+export { appShellHeaderKnobs };

package/dist/styles/index.css

@@ -13,6 +13,12 @@
 @import "./recipes/popup-controls.css";
 @import "./recipes/popup-lists.css";
 @import "./recipes/popup-motion.css";
+@import "./recipes/page-layout.css";
+@import "./recipes/track-highlight.css";
+@import "./recipes/sidebar.css";
+@import "./recipes/sidebar-menu.css";
+@import "./recipes/sidebar-parts.css";
+@import "./recipes/app-shell-header.css";
 @import "./recipes/audio-visualizer.css";
 @import "./recipes/audio-recorder.css";
 @import "./recipes/field.css";
@@ -20,7 +26,6 @@
 @import "./recipes/avatar.css";
 @import "./recipes/badge.css";
 @import "./recipes/breadcrumb.css";
-@import "./recipes/track-highlight.css";
 @import "./recipes/button-group.css";
 @import "./recipes/calendar.css";
 @import "./recipes/card.css";
@@ -35,9 +40,6 @@
 @import "./code.css";
 @import "./recipes/code.css";
 @import "./recipes/code-diff.css";
-@import "./recipes/sidebar.css";
-@import "./recipes/sidebar-menu.css";
-@import "./recipes/sidebar-parts.css";
 @import "./recipes/color-picker.css";
 @import "./recipes/color-picker-details.css";
 @import "./recipes/color-picker-values.css";
@@ -66,7 +68,6 @@
 @import "./recipes/markdown-block.css";
 @import "./recipes/range.css";
 @import "./recipes/morphing-panel.css";
-@import "./recipes/page-layout.css";
 @import "./recipes/pagination.css";
 @import "./recipes/phone-input.css";
 @import "./recipes/rich-tooltip.css";

package/dist/styles/recipes/app-shell-header.css

@@ -0,0 +1,43 @@
+@layer components {
+  :where([data-control-family="app-shell-header"][data-slot="root"]) {
+    --cui-app-shell-header-height: calc(var(--spacing) * 14);
+    --cui-app-shell-header-padding-inline: calc(var(--spacing) * 4);
+    --cui-app-shell-header-background: var(--background);
+    --cui-app-shell-header-border-width: 1px;
+    --cui-app-shell-header-border-color: var(--border);
+    min-height: var(--cui-app-shell-header-height);
+    padding-inline: var(--cui-app-shell-header-padding-inline);
+    background: var(--cui-app-shell-header-background);
+    border-block-end: var(--cui-app-shell-header-border-width) solid var(--cui-app-shell-header-border-color);
+  }
+}
+
+@property --cui-app-shell-header-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-app-shell-header-padding-inline {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@property --cui-app-shell-header-background {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-app-shell-header-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --cui-app-shell-header-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}

package/dist/ui/app-shell.d.ts

@@ -0,0 +1,16 @@
+import { SidebarProviderProps } from "./sidebar-provider.js";
+import { SidebarInsetProps } from "./sidebar.js";
+import { AppShellHeaderKnobStyle } from "../knob-contracts/app-shell-header-knobs.js";
+import { PageScroll } from "./page-layout.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/app-shell.d.ts
+export type AppShellProps = SidebarProviderProps & {
+  scroll?: PageScroll;
+};
+export declare function AppShell({ scroll, layout, className, ...props }: AppShellProps): import("react").JSX.Element;
+export declare function AppShellContent({ className, ...props }: SidebarInsetProps): import("react").JSX.Element;
+export type AppShellHeaderProps = Omit<ComponentProps<"header">, "style"> & {
+  style?: CSSProperties & AppShellHeaderKnobStyle;
+};
+export declare function AppShellHeader({ className, ...props }: AppShellHeaderProps): import("react").JSX.Element;
+//#endregion

package/dist/ui/app-shell.js

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { SidebarProvider } from "./sidebar-provider.js";
+import { SidebarInset } from "./sidebar.js";
+import { PageScrollContext, usePageScroll } from "./page-layout.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/app-shell.tsx
+function AppShell({ scroll = "auto", layout = "viewport", className, ...props }) {
+	const resolvedScroll = usePageScroll(scroll);
+	return /* @__PURE__ */ jsx(PageScrollContext.Provider, {
+		value: resolvedScroll,
+		children: /* @__PURE__ */ jsx(SidebarProvider, {
+			"data-app-shell": "",
+			"data-scroll": resolvedScroll,
+			layout,
+			className: cn(layout === "viewport" && (resolvedScroll === "page" ? "min-h-dvh" : "h-dvh min-h-0 overflow-hidden"), className),
+			...props
+		})
+	});
+}
+function AppShellContent({ className, ...props }) {
+	const scroll = usePageScroll();
+	return /* @__PURE__ */ jsx(SidebarInset, {
+		"data-app-shell-content": "",
+		className: cn("min-h-0", scroll !== "page" && "overflow-hidden", className),
+		...props
+	});
+}
+function AppShellHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-control-ui": "app-shell",
+		"data-control-family": "app-shell-header",
+		"data-slot": "root",
+		className: cn("sticky top-0 z-30 flex shrink-0 items-center gap-2", className),
+		...props
+	});
+}
+//#endregion
+export { AppShell, AppShellContent, AppShellHeader };

package/dist/ui/page-layout.d.ts

@@ -10,6 +10,7 @@ export type PageScroll = PageScrollMode | "auto";
 export declare const pageHeaderVariants: readonly ["flow", "sticky", "floating"];
 export type PageHeaderVariant = (typeof pageHeaderVariants)[number];
 type PageStyle = CSSProperties & PageLayoutKnobStyle;
+export declare const PageScrollContext: import("react").Context<"inset" | "none" | "page" | null>;
 export declare function usePageScroll(scroll?: PageScroll): PageScrollMode;
 export type PageLayoutProps = Omit<ComponentProps<"div">, "style"> & {
   scroll?: PageScroll;

package/dist/ui/page-layout.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
+import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/page-layout.tsx
 const pageWidths = [
@@ -20,9 +21,12 @@ const pageHeaderVariants = [
 	"sticky",
 	"floating"
 ];
+const PageScrollContext = createContext(null);
 function usePageScroll(scroll = "auto") {
 	const skin = useSkin();
+	const inheritedScroll = useContext(PageScrollContext);
 	if (scroll !== "auto") return scroll;
+	if (inheritedScroll) return inheritedScroll;
 	return skin.sidebarLayout === "page" ? "page" : "inset";
 }
 function PageLayout({ scroll = "auto", width = "prose", scrollViewportRef, children, className, ...props }) {
@@ -34,7 +38,7 @@ function PageLayout({ scroll = "auto", width = "prose", scrollViewportRef, child
 		"data-slot": "root",
 		"data-scroll": resolvedScroll,
 		"data-width": width,
-		className: cn("flex w-full flex-col", resolvedScroll !== "page" && "min-h-0 flex-1 overflow-hidden", className),
+		className: cn("flex min-w-0 w-full flex-col", resolvedScroll === "page" ? "grow" : "min-h-0 flex-1 overflow-hidden", className),
 		...props,
 		children: scrollsInset ? /* @__PURE__ */ jsx(ScrollArea, {
 			className: "min-h-0 flex-1",
@@ -103,4 +107,4 @@ function PageBody({ aside, contentClassName, children, className, ...props }) {
 	});
 }
 //#endregion
-export { PageActions, PageBody, PageDescription, PageHeader, PageLayout, PageTitle, pageHeaderVariants, pageScrollModes, pageWidths, usePageScroll };
+export { PageActions, PageBody, PageDescription, PageHeader, PageLayout, PageScrollContext, PageTitle, pageHeaderVariants, pageScrollModes, pageWidths, usePageScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {