@net-advantage/nabs-ui-layout 0.44.0 → 0.45.0

package/README.md

@@ -13,6 +13,8 @@ export function Example() {
       className="app-shell"
       header={<div>Header</div>}
       leftSidePanel={<div>Nav</div>}
+      leftSidePanelWidth="18rem"
+      rightSidePanelWidth="20rem"
       footer={<div>Footer</div>}
     >
       <div>Main content</div>
@@ -21,6 +23,15 @@ export function Example() {
 }
 ```
 
+## Side Panel Widths
+
+- `leftSidePanelWidth` and `rightSidePanelWidth` accept CSS length values (for example `"18rem"`, `"280px"`) or numbers (treated as pixels).
+- When omitted, side panels use content-driven width.
+- You can still tune defaults through CSS variables:
+  - `--nabs-ui-layout-left-panel-width`
+  - `--nabs-ui-layout-right-panel-width`
+  - `--nabs-ui-layout-side-panel-max-width`
+
 ## Styling
 
 Use CSS to tune the shell and the slot regions:

package/dist/Layout.d.ts

@@ -1,2 +1,2 @@
 import { LayoutProps } from './Layout.types';
-export declare function Layout({ header, footer, leftSidePanel, rightSidePanel, children, className, headerClassName, footerClassName, leftSidePanelClassName, rightSidePanelClassName, contentClassName, ...props }: LayoutProps): import("react").JSX.Element;
+export declare function Layout({ header, footer, leftSidePanel, rightSidePanel, leftSidePanelWidth, rightSidePanelWidth, children, className, headerClassName, footerClassName, leftSidePanelClassName, rightSidePanelClassName, contentClassName, style, ...props }: LayoutProps): import("react").JSX.Element;

package/dist/Layout.types.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type LayoutPanelWidth = string | number;
 export interface LayoutSlotProps extends ComponentPropsWithoutRef<"div"> {
     as?: "div" | "header" | "footer" | "aside" | "section";
 }
@@ -7,6 +8,8 @@ export interface LayoutProps extends ComponentPropsWithoutRef<"div"> {
     footer?: ReactNode;
     leftSidePanel?: ReactNode;
     rightSidePanel?: ReactNode;
+    leftSidePanelWidth?: LayoutPanelWidth;
+    rightSidePanelWidth?: LayoutPanelWidth;
     children?: ReactNode;
     headerClassName?: string;
     footerClassName?: string;

package/dist/nabs-ui-layout.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");function t({as:t=`div`,className:n=``,children:r,...i}){return(0,e.jsx)(t,{className:n,...i,children:r})}function n({header:n,footer:r,leftSidePanel:i,rightSidePanel:a,children:o,className:s=``,headerClassName:c=``,footerClassName:l=``,leftSidePanelClassName:u=``,rightSidePanelClassName:d=``,contentClassName:f=``,...p}){let m=n!=null&&n!==!1,h=r!=null&&r!==!1,g=i!=null&&i!==!1,_=a!=null&&a!==!1,v=[`nabs-ui-layout__body`,g&&_?`nabs-ui-layout__body--with-both-panels`:``,g&&!_?`nabs-ui-layout__body--with-left-panel`:``,!g&&_?`nabs-ui-layout__body--with-right-panel`:``].filter(Boolean).join(` `);return(0,e.jsxs)(`div`,{className:[`nabs-ui-layout`,s].filter(Boolean).join(` `),...p,children:[m?(0,e.jsx)(t,{as:`header`,className:`nabs-ui-layout__headerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__header`,c].filter(Boolean).join(` `),children:n})}):null,(0,e.jsxs)(`div`,{className:v,children:[g?(0,e.jsx)(t,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--left`,u].filter(Boolean).join(` `),children:i}):null,(0,e.jsx)(t,{as:`section`,className:[`nabs-ui-layout__content`,f].filter(Boolean).join(` `),children:o}),_?(0,e.jsx)(t,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--right`,d].filter(Boolean).join(` `),children:a}):null]}),h?(0,e.jsx)(t,{as:`footer`,className:`nabs-ui-layout__footerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__footer`,l].filter(Boolean).join(` `),children:r})}):null]})}exports.Layout=n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");function t(e){if(e==null)return;if(typeof e==`number`)return`${e}px`;let t=e.trim();return t.length>0?t:void 0}function n({as:t=`div`,className:n=``,children:r,...i}){return(0,e.jsx)(t,{className:n,...i,children:r})}function r({header:r,footer:i,leftSidePanel:a,rightSidePanel:o,leftSidePanelWidth:s,rightSidePanelWidth:c,children:l,className:u=``,headerClassName:d=``,footerClassName:f=``,leftSidePanelClassName:p=``,rightSidePanelClassName:m=``,contentClassName:h=``,style:g,..._}){let v=r!=null&&r!==!1,y=i!=null&&i!==!1,b=a!=null&&a!==!1,x=o!=null&&o!==!1,S=[`nabs-ui-layout__body`,b&&x?`nabs-ui-layout__body--with-both-panels`:``,b&&!x?`nabs-ui-layout__body--with-left-panel`:``,!b&&x?`nabs-ui-layout__body--with-right-panel`:``].filter(Boolean).join(` `),C=[`nabs-ui-layout`,u].filter(Boolean).join(` `),w=t(s),T=t(c);return(0,e.jsxs)(`div`,{className:C,style:{...g??{},...w?{"--nabs-ui-layout-left-panel-width":w}:{},...T?{"--nabs-ui-layout-right-panel-width":T}:{}},..._,children:[v?(0,e.jsx)(n,{as:`header`,className:`nabs-ui-layout__headerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__header`,d].filter(Boolean).join(` `),children:r})}):null,(0,e.jsxs)(`div`,{className:S,children:[b?(0,e.jsx)(n,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--left`,p].filter(Boolean).join(` `),children:a}):null,(0,e.jsx)(n,{as:`section`,className:[`nabs-ui-layout__content`,h].filter(Boolean).join(` `),children:l}),x?(0,e.jsx)(n,{as:`aside`,className:[`nabs-ui-layout__panel`,`nabs-ui-layout__panel--right`,m].filter(Boolean).join(` `),children:o}):null]}),y?(0,e.jsx)(n,{as:`footer`,className:`nabs-ui-layout__footerWrapper`,children:(0,e.jsx)(`div`,{className:[`nabs-ui-layout__footer`,f].filter(Boolean).join(` `),children:i})}):null]})}exports.Layout=r;

package/dist/nabs-ui-layout.css

@@ -1,2 +1,2 @@
-.nabs-ui-layout{gap:var(--nabs-ui-layout-gap,1rem);grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-width:0;min-height:100%;display:grid}.nabs-ui-layout__headerWrapper,.nabs-ui-layout__footerWrapper{min-width:0}.nabs-ui-layout__header,.nabs-ui-layout__footer,.nabs-ui-layout__panel,.nabs-ui-layout__content{border:1px solid var(--nabs-ui-layout-border);border-radius:var(--nabs-ui-layout-radius,1rem);box-sizing:border-box;min-width:0}.nabs-ui-layout__header,.nabs-ui-layout__footer{padding:var(--nabs-ui-density-layout-chrome-padding-y,.75rem) var(--nabs-ui-density-layout-chrome-padding-x,.9rem)}.nabs-ui-layout__panel,.nabs-ui-layout__content{padding:var(--nabs-ui-density-layout-body-padding-y,1rem) var(--nabs-ui-density-layout-body-padding-x,1rem)}.nabs-ui-layout__header,.nabs-ui-layout__footer{background:var(--nabs-ui-layout-surface)}.nabs-ui-layout__footer{font-size:var(--nabs-ui-density-layout-footer-font-size,.76rem);line-height:var(--nabs-ui-density-layout-footer-line-height,1.25)}.nabs-ui-layout__body{gap:var(--nabs-ui-layout-gap,1rem);min-width:0;min-height:0;display:grid}.nabs-ui-layout__body--with-both-panels{grid-template-columns:max-content minmax(0,1fr) max-content}.nabs-ui-layout__body--with-left-panel{grid-template-columns:max-content minmax(0,1fr)}.nabs-ui-layout__body--with-right-panel{grid-template-columns:minmax(0,1fr) max-content}.nabs-ui-layout__panel{background:var(--nabs-ui-layout-panel-surface)}.nabs-ui-layout__content{background:var(--nabs-ui-layout-content-surface)}.nabs-ui-layout__content>:first-child{margin-top:0}.nabs-ui-layout__content>:last-child{margin-bottom:0}
+.nabs-ui-layout{gap:var(--nabs-ui-layout-gap,1rem);grid-template-rows:auto minmax(0,1fr) auto;width:100%;min-width:0;min-height:100%;display:grid}.nabs-ui-layout__headerWrapper,.nabs-ui-layout__footerWrapper{min-width:0}.nabs-ui-layout__header,.nabs-ui-layout__footer,.nabs-ui-layout__panel,.nabs-ui-layout__content{border:1px solid var(--nabs-ui-layout-border);border-radius:var(--nabs-ui-layout-radius,1rem);box-sizing:border-box;min-width:0}.nabs-ui-layout__header,.nabs-ui-layout__footer{padding:var(--nabs-ui-density-layout-chrome-padding-y,.75rem) var(--nabs-ui-density-layout-chrome-padding-x,.9rem)}.nabs-ui-layout__panel,.nabs-ui-layout__content{padding:var(--nabs-ui-density-layout-body-padding-y,1rem) var(--nabs-ui-density-layout-body-padding-x,1rem)}.nabs-ui-layout__header,.nabs-ui-layout__footer{background:var(--nabs-ui-layout-surface)}.nabs-ui-layout__footer{font-size:var(--nabs-ui-density-layout-footer-font-size,.76rem);line-height:var(--nabs-ui-density-layout-footer-line-height,1.25)}.nabs-ui-layout__body{gap:var(--nabs-ui-layout-gap,1rem);min-width:0;min-height:0;display:grid}.nabs-ui-layout__body--with-both-panels{grid-template-columns:var(--nabs-ui-layout-left-panel-width,max-content) minmax(0, 1fr) var(--nabs-ui-layout-right-panel-width,max-content)}.nabs-ui-layout__body--with-left-panel{grid-template-columns:var(--nabs-ui-layout-left-panel-width,max-content) minmax(0, 1fr)}.nabs-ui-layout__body--with-right-panel{grid-template-columns:minmax(0, 1fr) var(--nabs-ui-layout-right-panel-width,max-content)}.nabs-ui-layout__panel{background:var(--nabs-ui-layout-panel-surface);max-inline-size:min(100%, var(--nabs-ui-layout-side-panel-max-width,22rem))}.nabs-ui-layout__content{background:var(--nabs-ui-layout-content-surface)}.nabs-ui-layout__content>:first-child{margin-top:0}.nabs-ui-layout__content>:last-child{margin-bottom:0}
 /*$vite$:1*/

package/dist/nabs-ui-layout.js

@@ -1,69 +1,80 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/Layout.tsx
-function n({ as: t = "div", className: n = "", children: r, ...i }) {
+function n(e) {
+	if (e == null) return;
+	if (typeof e == "number") return `${e}px`;
+	let t = e.trim();
+	return t.length > 0 ? t : void 0;
+}
+function r({ as: t = "div", className: n = "", children: r, ...i }) {
 	return /* @__PURE__ */ e(t, {
 		className: n,
 		...i,
 		children: r
 	});
 }
-function r({ header: r, footer: i, leftSidePanel: a, rightSidePanel: o, children: s, className: c = "", headerClassName: l = "", footerClassName: u = "", leftSidePanelClassName: d = "", rightSidePanelClassName: f = "", contentClassName: p = "", ...m }) {
-	let h = r != null && r !== !1, g = i != null && i !== !1, _ = a != null && a !== !1, v = o != null && o !== !1, y = [
+function i({ header: i, footer: a, leftSidePanel: o, rightSidePanel: s, leftSidePanelWidth: c, rightSidePanelWidth: l, children: u, className: d = "", headerClassName: f = "", footerClassName: p = "", leftSidePanelClassName: m = "", rightSidePanelClassName: h = "", contentClassName: g = "", style: _, ...v }) {
+	let y = i != null && i !== !1, b = a != null && a !== !1, x = o != null && o !== !1, S = s != null && s !== !1, C = [
 		"nabs-ui-layout__body",
-		_ && v ? "nabs-ui-layout__body--with-both-panels" : "",
-		_ && !v ? "nabs-ui-layout__body--with-left-panel" : "",
-		!_ && v ? "nabs-ui-layout__body--with-right-panel" : ""
-	].filter(Boolean).join(" ");
+		x && S ? "nabs-ui-layout__body--with-both-panels" : "",
+		x && !S ? "nabs-ui-layout__body--with-left-panel" : "",
+		!x && S ? "nabs-ui-layout__body--with-right-panel" : ""
+	].filter(Boolean).join(" "), w = ["nabs-ui-layout", d].filter(Boolean).join(" "), T = n(c), E = n(l);
 	return /* @__PURE__ */ t("div", {
-		className: ["nabs-ui-layout", c].filter(Boolean).join(" "),
-		...m,
+		className: w,
+		style: {
+			..._ ?? {},
+			...T ? { "--nabs-ui-layout-left-panel-width": T } : {},
+			...E ? { "--nabs-ui-layout-right-panel-width": E } : {}
+		},
+		...v,
 		children: [
-			h ? /* @__PURE__ */ e(n, {
+			y ? /* @__PURE__ */ e(r, {
 				as: "header",
 				className: "nabs-ui-layout__headerWrapper",
 				children: /* @__PURE__ */ e("div", {
-					className: ["nabs-ui-layout__header", l].filter(Boolean).join(" "),
-					children: r
+					className: ["nabs-ui-layout__header", f].filter(Boolean).join(" "),
+					children: i
 				})
 			}) : null,
 			/* @__PURE__ */ t("div", {
-				className: y,
+				className: C,
 				children: [
-					_ ? /* @__PURE__ */ e(n, {
+					x ? /* @__PURE__ */ e(r, {
 						as: "aside",
 						className: [
 							"nabs-ui-layout__panel",
 							"nabs-ui-layout__panel--left",
-							d
+							m
 						].filter(Boolean).join(" "),
-						children: a
+						children: o
 					}) : null,
-					/* @__PURE__ */ e(n, {
+					/* @__PURE__ */ e(r, {
 						as: "section",
-						className: ["nabs-ui-layout__content", p].filter(Boolean).join(" "),
-						children: s
+						className: ["nabs-ui-layout__content", g].filter(Boolean).join(" "),
+						children: u
 					}),
-					v ? /* @__PURE__ */ e(n, {
+					S ? /* @__PURE__ */ e(r, {
 						as: "aside",
 						className: [
 							"nabs-ui-layout__panel",
 							"nabs-ui-layout__panel--right",
-							f
+							h
 						].filter(Boolean).join(" "),
-						children: o
+						children: s
 					}) : null
 				]
 			}),
-			g ? /* @__PURE__ */ e(n, {
+			b ? /* @__PURE__ */ e(r, {
 				as: "footer",
 				className: "nabs-ui-layout__footerWrapper",
 				children: /* @__PURE__ */ e("div", {
-					className: ["nabs-ui-layout__footer", u].filter(Boolean).join(" "),
-					children: i
+					className: ["nabs-ui-layout__footer", p].filter(Boolean).join(" "),
+					children: a
 				})
 			}) : null
 		]
 	});
 }
 //#endregion
-export { r as Layout };
+export { i as Layout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net-advantage/nabs-ui-layout",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "Reusable React layout control for the Nabs UI library.",
   "type": "module",
   "main": "./dist/nabs-ui-layout.cjs",