@noambz/ui 0.7.0 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/organisms/app-shell/app-shell-layout.d.ts +6 -0
- package/dist/components/organisms/app-shell/app-shell-layout.d.ts.map +1 -1
- package/dist/components/organisms/app-shell/app-shell-layout.js +8 -3
- package/dist/components/organisms/app-shell/app-shell-layout.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,6 +14,12 @@ export interface IAppShellLayoutProps {
|
|
|
14
14
|
* sidebar, main content, and footer. Contains no navigation, theming, or
|
|
15
15
|
* i18n concerns; those are the consumer's responsibility.
|
|
16
16
|
*
|
|
17
|
+
* When a sidebar is provided, the body row is full-width so the aside docks
|
|
18
|
+
* to the viewport start edge; maxWidth constrains header and main content
|
|
19
|
+
* only, both left-aligned in the pane after the aside. Without a sidebar,
|
|
20
|
+
* the body row itself is centered at maxWidth (top-nav shells such as
|
|
21
|
+
* AppShellPreset).
|
|
22
|
+
*
|
|
17
23
|
* For a flight-finder-shaped default (top-nav header with active links,
|
|
18
24
|
* mobile hamburger, locale/theme toggles), use AppShellPreset instead.
|
|
19
25
|
* For sidebar link lists and module sub top bars, use SidebarNav and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app-shell-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC/F;AAgBD
|
|
1
|
+
{"version":3,"file":"app-shell-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC/F;AAgBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,GAAG,EACH,SAAc,EACd,aAAkB,EAClB,QAAgB,GACjB,EAAE,oBAAoB,+BAyCtB"}
|
|
@@ -24,16 +24,21 @@ function AppShellLayout({
|
|
|
24
24
|
maxWidth = "7xl"
|
|
25
25
|
}) {
|
|
26
26
|
const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;
|
|
27
|
+
const mainContentClass = `${MAX_WIDTH_CLASSES[maxWidth]} w-full`;
|
|
28
|
+
const hasSidebar = Boolean(sidebar);
|
|
27
29
|
return /* @__PURE__ */ jsxs(
|
|
28
30
|
"div",
|
|
29
31
|
{
|
|
30
32
|
dir,
|
|
31
33
|
className: `flex min-h-screen flex-col bg-background text-foreground ${className}`,
|
|
32
34
|
children: [
|
|
33
|
-
header && /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */
|
|
34
|
-
|
|
35
|
+
header && /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm", children: hasSidebar ? /* @__PURE__ */ jsxs("div", { className: "flex w-full", children: [
|
|
36
|
+
/* @__PURE__ */ jsx("div", { className: "hidden w-64 shrink-0 md:block", "aria-hidden": "true" }),
|
|
37
|
+
/* @__PURE__ */ jsx("div", { className: `min-w-0 flex-1 px-4 ${mainContentClass}`, children: header })
|
|
38
|
+
] }) : /* @__PURE__ */ jsx("div", { className: `${containerClass} px-4`, children: header }) }),
|
|
39
|
+
/* @__PURE__ */ jsxs("div", { className: `flex w-full flex-1 ${hasSidebar ? "" : containerClass}`, children: [
|
|
35
40
|
sidebar && /* @__PURE__ */ jsx("aside", { className: "hidden w-64 shrink-0 border-e border-border-base py-6 md:block", children: sidebar }),
|
|
36
|
-
/* @__PURE__ */ jsx("main", { className: `flex-1 px-4 py-6 ${mainClassName}`, children })
|
|
41
|
+
/* @__PURE__ */ jsx("main", { className: `flex-1 px-4 py-6 ${mainClassName}`, children: hasSidebar ? /* @__PURE__ */ jsx("div", { className: mainContentClass, children }) : children })
|
|
37
42
|
] }),
|
|
38
43
|
footer && /* @__PURE__ */ jsx("footer", { className: "border-t border-border-base py-4 text-center text-sm text-muted-foreground", children: footer })
|
|
39
44
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nexport interface IAppShellLayoutProps {\n header?: ReactNode;\n sidebar?: ReactNode;\n footer?: ReactNode;\n children: ReactNode;\n dir?: \"ltr\" | \"rtl\";\n className?: string;\n mainClassName?: string;\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\n}\n\nconst MAX_WIDTH_CLASSES: Record<NonNullable<IAppShellLayoutProps[\"maxWidth\"]>, string> = {\n sm: \"max-w-sm\",\n md: \"max-w-md\",\n lg: \"max-w-lg\",\n xl: \"max-w-xl\",\n \"2xl\": \"max-w-2xl\",\n \"3xl\": \"max-w-3xl\",\n \"4xl\": \"max-w-4xl\",\n \"5xl\": \"max-w-5xl\",\n \"6xl\": \"max-w-6xl\",\n \"7xl\": \"max-w-7xl\",\n full: \"max-w-full\",\n};\n\n/**\n * Unopinionated slot-based app shell: renders a sticky header, optional\n * sidebar, main content, and footer. Contains no navigation, theming, or\n * i18n concerns; those are the consumer's responsibility.\n *\n * For a flight-finder-shaped default (top-nav header with active links,\n * mobile hamburger, locale/theme toggles), use AppShellPreset instead.\n * For sidebar link lists and module sub top bars, use SidebarNav and\n * ModuleSubnav with an injected LinkComponent.\n */\nexport function AppShellLayout({\n header,\n sidebar,\n footer,\n children,\n dir,\n className = \"\",\n mainClassName = \"\",\n maxWidth = \"7xl\",\n}: IAppShellLayoutProps) {\n const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;\n\n return (\n <div\n dir={dir}\n className={`flex min-h-screen flex-col bg-background text-foreground ${className}`}\n >\n {header && (\n <header className=\"sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm\">\n <div className={containerClass}>{header}</div>\n </header>\n )}\n\n <div className={`flex flex-1 ${containerClass}`}>\n {sidebar && (\n <aside className=\"hidden w-64 shrink-0 border-e border-border-base py-6 md:block\">\n {sidebar}\n </aside>\n )}\n <main className={`flex-1 px-4 py-6 ${mainClassName}`}>{children}</main>\n </div>\n\n {footer && (\n <footer className=\"border-t border-border-base py-4 text-center text-sm text-muted-foreground\">\n {footer}\n </footer>\n )}\n </div>\n );\n}\n"],"mappings":";
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/app-shell/app-shell-layout.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\n\nexport interface IAppShellLayoutProps {\n header?: ReactNode;\n sidebar?: ReactNode;\n footer?: ReactNode;\n children: ReactNode;\n dir?: \"ltr\" | \"rtl\";\n className?: string;\n mainClassName?: string;\n maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"full\";\n}\n\nconst MAX_WIDTH_CLASSES: Record<NonNullable<IAppShellLayoutProps[\"maxWidth\"]>, string> = {\n sm: \"max-w-sm\",\n md: \"max-w-md\",\n lg: \"max-w-lg\",\n xl: \"max-w-xl\",\n \"2xl\": \"max-w-2xl\",\n \"3xl\": \"max-w-3xl\",\n \"4xl\": \"max-w-4xl\",\n \"5xl\": \"max-w-5xl\",\n \"6xl\": \"max-w-6xl\",\n \"7xl\": \"max-w-7xl\",\n full: \"max-w-full\",\n};\n\n/**\n * Unopinionated slot-based app shell: renders a sticky header, optional\n * sidebar, main content, and footer. Contains no navigation, theming, or\n * i18n concerns; those are the consumer's responsibility.\n *\n * When a sidebar is provided, the body row is full-width so the aside docks\n * to the viewport start edge; maxWidth constrains header and main content\n * only, both left-aligned in the pane after the aside. Without a sidebar,\n * the body row itself is centered at maxWidth (top-nav shells such as\n * AppShellPreset).\n *\n * For a flight-finder-shaped default (top-nav header with active links,\n * mobile hamburger, locale/theme toggles), use AppShellPreset instead.\n * For sidebar link lists and module sub top bars, use SidebarNav and\n * ModuleSubnav with an injected LinkComponent.\n */\nexport function AppShellLayout({\n header,\n sidebar,\n footer,\n children,\n dir,\n className = \"\",\n mainClassName = \"\",\n maxWidth = \"7xl\",\n}: IAppShellLayoutProps) {\n const containerClass = `${MAX_WIDTH_CLASSES[maxWidth]} mx-auto w-full`;\n const mainContentClass = `${MAX_WIDTH_CLASSES[maxWidth]} w-full`;\n const hasSidebar = Boolean(sidebar);\n\n return (\n <div\n dir={dir}\n className={`flex min-h-screen flex-col bg-background text-foreground ${className}`}\n >\n {header && (\n <header className=\"sticky top-0 z-10 border-b border-border-base bg-background/80 backdrop-blur-sm\">\n {hasSidebar ? (\n <div className=\"flex w-full\">\n <div className=\"hidden w-64 shrink-0 md:block\" aria-hidden=\"true\" />\n <div className={`min-w-0 flex-1 px-4 ${mainContentClass}`}>{header}</div>\n </div>\n ) : (\n <div className={`${containerClass} px-4`}>{header}</div>\n )}\n </header>\n )}\n\n <div className={`flex w-full flex-1 ${hasSidebar ? \"\" : containerClass}`}>\n {sidebar && (\n <aside className=\"hidden w-64 shrink-0 border-e border-border-base py-6 md:block\">\n {sidebar}\n </aside>\n )}\n <main className={`flex-1 px-4 py-6 ${mainClassName}`}>\n {hasSidebar ? <div className={mainContentClass}>{children}</div> : children}\n </main>\n </div>\n\n {footer && (\n <footer className=\"border-t border-border-base py-4 text-center text-sm text-muted-foreground\">\n {footer}\n </footer>\n )}\n </div>\n );\n}\n"],"mappings":";AAmEY,SACE,KADF;AApDZ,MAAM,oBAAmF;AAAA,EACvF,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,MAAM;AACR;AAkBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,WAAW;AACb,GAAyB;AACvB,QAAM,iBAAiB,GAAG,kBAAkB,QAAQ,CAAC;AACrD,QAAM,mBAAmB,GAAG,kBAAkB,QAAQ,CAAC;AACvD,QAAM,aAAa,QAAQ,OAAO;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,4DAA4D,SAAS;AAAA,MAE/E;AAAA,kBACC,oBAAC,YAAO,WAAU,mFACf,uBACC,qBAAC,SAAI,WAAU,eACb;AAAA,8BAAC,SAAI,WAAU,iCAAgC,eAAY,QAAO;AAAA,UAClE,oBAAC,SAAI,WAAW,uBAAuB,gBAAgB,IAAK,kBAAO;AAAA,WACrE,IAEA,oBAAC,SAAI,WAAW,GAAG,cAAc,SAAU,kBAAO,GAEtD;AAAA,QAGF,qBAAC,SAAI,WAAW,sBAAsB,aAAa,KAAK,cAAc,IACnE;AAAA,qBACC,oBAAC,WAAM,WAAU,kEACd,mBACH;AAAA,UAEF,oBAAC,UAAK,WAAW,oBAAoB,aAAa,IAC/C,uBAAa,oBAAC,SAAI,WAAW,kBAAmB,UAAS,IAAS,UACrE;AAAA,WACF;AAAA,QAEC,UACC,oBAAC,YAAO,WAAU,8EACf,kBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
package/package.json
CHANGED