@net-advantage/nabs-ui-shell 0.34.0 → 0.36.0
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/README.md +19 -2
- package/dist/Shell.d.ts +3 -0
- package/dist/Shell.types.d.ts +11 -0
- package/dist/index.d.ts +29 -0
- package/dist/nabs-ui-shell.cjs +1 -1
- package/dist/nabs-ui-shell.css +88 -2
- package/dist/nabs-ui-shell.js +4 -12
- package/package.json +32 -31
package/README.md
CHANGED
|
@@ -29,5 +29,22 @@ The shell package re-exports all Nabs UI control modules so your project can use
|
|
|
29
29
|
- `footer` renders the shell footer area.
|
|
30
30
|
- `children` renders the main content area.
|
|
31
31
|
|
|
32
|
-
The shell composes the `nabs-ui-layout` control and uses
|
|
33
|
-
Header and footer height are driven by their content, so they stay static around the main content area.
|
|
32
|
+
The shell composes the `nabs-ui-layout` control and uses bundled package CSS for its presentation styles.
|
|
33
|
+
Header and footer height are driven by their content, so they stay static around the main content area.
|
|
34
|
+
|
|
35
|
+
The shell also provides default semantic typography sizing for plain content inside the shell content region (`h1`-`h6`, `p`, `li`, `ul`, `ol`).
|
|
36
|
+
If needed, customize the scale with CSS variables such as `--nabs-ui-shell-h1-font-size` and `--nabs-ui-shell-body-font-size`.
|
|
37
|
+
List styles are also restored by default (`disc` for `ul`, `decimal` for `ol`) and marker contrast can be customized with `--nabs-ui-shell-list-marker-color`.
|
|
38
|
+
Links inside shell content are theme-aware by default and can be customized with `--nabs-ui-shell-link-color`, `--nabs-ui-shell-link-hover-color`, and `--nabs-ui-shell-link-visited-color`.
|
|
39
|
+
|
|
40
|
+
## Verification
|
|
41
|
+
|
|
42
|
+
Use the dedicated typography page in the workbench to validate shell defaults without app-level overrides:
|
|
43
|
+
|
|
44
|
+
- `src/nabs-workbench/src/pages/TypographyContrastPage.tsx` renders plain typography elements (`h1`, `h2`, `h3`, `p`, `a`, `ul`) without explicit text-color utility classes.
|
|
45
|
+
- `src/nabs-workbench/src/WorkbenchApp.tsx` renders `Shell` without a shell-level text/background override class, and the contrast check is isolated to the dedicated page.
|
|
46
|
+
|
|
47
|
+
When switching between light and dark themes in the workbench:
|
|
48
|
+
|
|
49
|
+
- The shell should fill the viewport with header at the top, content in the middle, and footer at the bottom.
|
|
50
|
+
- Plain typography inside shell content should inherit theme-correct contrast from shell defaults.
|
package/dist/Shell.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export interface ShellProps extends ComponentPropsWithoutRef<"div"> {
|
|
3
|
+
header?: ReactNode;
|
|
4
|
+
navigation?: ReactNode;
|
|
5
|
+
footer?: ReactNode;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
headerClassName?: string;
|
|
8
|
+
navigationClassName?: string;
|
|
9
|
+
contentClassName?: string;
|
|
10
|
+
footerClassName?: string;
|
|
11
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export { Shell } from './Shell';
|
|
2
|
+
export type { ShellProps } from './Shell.types';
|
|
3
|
+
export * from '@net-advantage/nabs-ui-accordion';
|
|
4
|
+
export * from '@net-advantage/nabs-ui-avatar';
|
|
5
|
+
export * from '@net-advantage/nabs-ui-buttons';
|
|
6
|
+
export * from '@net-advantage/nabs-ui-cards';
|
|
7
|
+
export * from '@net-advantage/nabs-ui-checkbox';
|
|
8
|
+
export * from '@net-advantage/nabs-ui-code';
|
|
9
|
+
export * from '@net-advantage/nabs-ui-combobox';
|
|
10
|
+
export * from '@net-advantage/nabs-ui-datepicker';
|
|
11
|
+
export * from '@net-advantage/nabs-ui-dialog';
|
|
12
|
+
export * from '@net-advantage/nabs-ui-dropdownlist';
|
|
13
|
+
export * from '@net-advantage/nabs-ui-dropdownmenu';
|
|
14
|
+
export * from '@net-advantage/nabs-ui-dynamicform';
|
|
15
|
+
export * from '@net-advantage/nabs-ui-fileupload';
|
|
16
|
+
export * from '@net-advantage/nabs-ui-graph';
|
|
17
|
+
export * from '@net-advantage/nabs-ui-grid';
|
|
18
|
+
export * from '@net-advantage/nabs-ui-layout';
|
|
19
|
+
export * from '@net-advantage/nabs-ui-markdown';
|
|
20
|
+
export * from '@net-advantage/nabs-ui-navigation';
|
|
21
|
+
export * from '@net-advantage/nabs-ui-panel';
|
|
22
|
+
export * from '@net-advantage/nabs-ui-radiobutton';
|
|
23
|
+
export * from '@net-advantage/nabs-ui-signature';
|
|
24
|
+
export * from '@net-advantage/nabs-ui-slider';
|
|
25
|
+
export * from '@net-advantage/nabs-ui-stepper';
|
|
26
|
+
export * from '@net-advantage/nabs-ui-tab';
|
|
27
|
+
export * from '@net-advantage/nabs-ui-textarea';
|
|
28
|
+
export * from '@net-advantage/nabs-ui-textbox';
|
|
29
|
+
export * from '@net-advantage/nabs-ui-toolbar';
|
package/dist/nabs-ui-shell.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("@net-advantage/nabs-ui-layout
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react"),t=require("@net-advantage/nabs-ui-layout"),n=require("react/jsx-runtime");var r=(0,e.forwardRef)(({header:e,navigation:r,footer:i,children:a,className:o=``,headerClassName:s=``,navigationClassName:c=``,contentClassName:l=``,footerClassName:u=``,...d},f)=>{let p=[`nabs-ui-shell`,o].filter(Boolean).join(` `),m=[`nabs-ui-shell__header`,s].filter(Boolean).join(` `),h=[`nabs-ui-shell__navigation`,c].filter(Boolean).join(` `),g=[`nabs-ui-shell__content`,l].filter(Boolean).join(` `),_=[`nabs-ui-shell__footer`,u].filter(Boolean).join(` `);return(0,n.jsx)(`div`,{ref:f,className:p,...d,children:(0,n.jsx)(t.Layout,{className:`nabs-ui-shell__layout`,header:e,footer:i,leftSidePanel:r,headerClassName:m,footerClassName:_,leftSidePanelClassName:h,contentClassName:g,children:a})})});r.displayName=`Shell`,exports.Shell=r;var i=require("@net-advantage/nabs-ui-accordion");Object.keys(i).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return i[e]}})});var a=require("@net-advantage/nabs-ui-avatar");Object.keys(a).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return a[e]}})});var o=require("@net-advantage/nabs-ui-buttons");Object.keys(o).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return o[e]}})});var s=require("@net-advantage/nabs-ui-cards");Object.keys(s).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return s[e]}})});var c=require("@net-advantage/nabs-ui-checkbox");Object.keys(c).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return c[e]}})});var l=require("@net-advantage/nabs-ui-code");Object.keys(l).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return l[e]}})});var u=require("@net-advantage/nabs-ui-combobox");Object.keys(u).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return u[e]}})});var d=require("@net-advantage/nabs-ui-datepicker");Object.keys(d).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return d[e]}})});var f=require("@net-advantage/nabs-ui-dialog");Object.keys(f).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return f[e]}})});var p=require("@net-advantage/nabs-ui-dropdownlist");Object.keys(p).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});var m=require("@net-advantage/nabs-ui-dropdownmenu");Object.keys(m).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return m[e]}})});var h=require("@net-advantage/nabs-ui-dynamicform");Object.keys(h).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return h[e]}})});var g=require("@net-advantage/nabs-ui-fileupload");Object.keys(g).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return g[e]}})});var _=require("@net-advantage/nabs-ui-graph");Object.keys(_).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _[e]}})});var v=require("@net-advantage/nabs-ui-grid");Object.keys(v).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return v[e]}})}),Object.keys(t).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});var y=require("@net-advantage/nabs-ui-markdown");Object.keys(y).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return y[e]}})});var b=require("@net-advantage/nabs-ui-navigation");Object.keys(b).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return b[e]}})});var x=require("@net-advantage/nabs-ui-panel");Object.keys(x).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return x[e]}})});var S=require("@net-advantage/nabs-ui-radiobutton");Object.keys(S).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return S[e]}})});var C=require("@net-advantage/nabs-ui-signature");Object.keys(C).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return C[e]}})});var w=require("@net-advantage/nabs-ui-slider");Object.keys(w).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return w[e]}})});var T=require("@net-advantage/nabs-ui-stepper");Object.keys(T).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return T[e]}})});var E=require("@net-advantage/nabs-ui-tab");Object.keys(E).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return E[e]}})});var D=require("@net-advantage/nabs-ui-textarea");Object.keys(D).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return D[e]}})});var O=require("@net-advantage/nabs-ui-textbox");Object.keys(O).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return O[e]}})});var k=require("@net-advantage/nabs-ui-toolbar");Object.keys(k).forEach(function(e){e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return k[e]}})});
|
package/dist/nabs-ui-shell.css
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
.nabs-ui-shell {
|
|
2
|
-
|
|
2
|
+
min-height: 100vh;
|
|
3
3
|
height: 100dvh;
|
|
4
|
-
|
|
4
|
+
width: 100%;
|
|
5
5
|
min-width: 0;
|
|
6
|
+
color: var(--nabs-ui-color-text);
|
|
7
|
+
background: var(--nabs-ui-color-bg);
|
|
8
|
+
font-family: var(--nabs-ui-font-family-base, inherit);
|
|
6
9
|
}
|
|
7
10
|
|
|
8
11
|
.nabs-ui-shell__layout {
|
|
12
|
+
display: grid;
|
|
13
|
+
grid-template-rows: auto minmax(0, 1fr) auto;
|
|
9
14
|
min-height: 0;
|
|
10
15
|
height: 100%;
|
|
11
16
|
}
|
|
@@ -14,6 +19,13 @@
|
|
|
14
19
|
min-height: 0;
|
|
15
20
|
}
|
|
16
21
|
|
|
22
|
+
.nabs-ui-shell__header,
|
|
23
|
+
.nabs-ui-shell__navigation,
|
|
24
|
+
.nabs-ui-shell__content,
|
|
25
|
+
.nabs-ui-shell__footer {
|
|
26
|
+
color: inherit;
|
|
27
|
+
}
|
|
28
|
+
|
|
17
29
|
.nabs-ui-shell__layout .nabs-ui-layout__panel--left {
|
|
18
30
|
min-height: 0;
|
|
19
31
|
overflow-y: auto;
|
|
@@ -23,6 +35,80 @@
|
|
|
23
35
|
min-height: 0;
|
|
24
36
|
overflow: auto;
|
|
25
37
|
}
|
|
38
|
+
|
|
39
|
+
.nabs-ui-shell__content :where(h1, h2, h3, h4, h5, h6) {
|
|
40
|
+
color: inherit;
|
|
41
|
+
font-family: inherit;
|
|
42
|
+
font-weight: var(--nabs-ui-shell-heading-font-weight, 600);
|
|
43
|
+
line-height: var(--nabs-ui-shell-heading-line-height, 1.2);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.nabs-ui-shell__content h1 {
|
|
47
|
+
font-size: var(--nabs-ui-shell-h1-font-size, 2rem);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.nabs-ui-shell__content h2 {
|
|
51
|
+
font-size: var(--nabs-ui-shell-h2-font-size, 1.625rem);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.nabs-ui-shell__content h3 {
|
|
55
|
+
font-size: var(--nabs-ui-shell-h3-font-size, 1.375rem);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nabs-ui-shell__content h4 {
|
|
59
|
+
font-size: var(--nabs-ui-shell-h4-font-size, 1.125rem);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.nabs-ui-shell__content h5 {
|
|
63
|
+
font-size: var(--nabs-ui-shell-h5-font-size, 1rem);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.nabs-ui-shell__content h6 {
|
|
67
|
+
font-size: var(--nabs-ui-shell-h6-font-size, 0.9rem);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nabs-ui-shell__content :where(p, li) {
|
|
71
|
+
color: inherit;
|
|
72
|
+
font-size: var(--nabs-ui-shell-body-font-size, 1rem);
|
|
73
|
+
line-height: var(--nabs-ui-shell-body-line-height, 1.55);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.nabs-ui-shell__content :where(ul, ol) {
|
|
77
|
+
padding-inline-start: var(--nabs-ui-shell-list-padding-inline-start, 1.25rem);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nabs-ui-shell__content ul {
|
|
81
|
+
list-style: var(--nabs-ui-shell-ul-list-style, disc);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nabs-ui-shell__content ol {
|
|
85
|
+
list-style: var(--nabs-ui-shell-ol-list-style, decimal);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.nabs-ui-shell__content li::marker {
|
|
89
|
+
color: var(--nabs-ui-shell-list-marker-color, var(--nabs-ui-color-text));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.nabs-ui-shell__content a {
|
|
93
|
+
color: var(--nabs-ui-shell-link-color, var(--nabs-ui-color-primary));
|
|
94
|
+
text-decoration-color: currentColor;
|
|
95
|
+
text-underline-offset: var(--nabs-ui-shell-link-underline-offset, 0.12em);
|
|
96
|
+
text-decoration-thickness: var(--nabs-ui-shell-link-underline-thickness, 0.08em);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.nabs-ui-shell__content a:visited {
|
|
100
|
+
color: var(--nabs-ui-shell-link-visited-color, var(--nabs-ui-shell-link-color, var(--nabs-ui-color-primary)));
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.nabs-ui-shell__content a:hover {
|
|
104
|
+
color: var(--nabs-ui-shell-link-hover-color, var(--nabs-ui-color-primary-hover, var(--nabs-ui-color-primary)));
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.nabs-ui-shell__content a:focus-visible {
|
|
108
|
+
outline: 2px solid var(--nabs-ui-color-focus);
|
|
109
|
+
outline-offset: 2px;
|
|
110
|
+
border-radius: 2px;
|
|
111
|
+
}
|
|
26
112
|
.nabs-ui-accordion{gap:var(--nabs-ui-density-accordion-gap,.75rem);width:100%;display:grid}.nabs-ui-accordion__item{border:1px solid var(--nabs-ui-color-border);border-radius:var(--nabs-ui-density-accordion-item-radius,.75rem);overflow:clip}.nabs-ui-accordion__trigger{background:var(--nabs-ui-color-bg);color:inherit;cursor:pointer;font:inherit;font-size:var(--nabs-ui-density-accordion-trigger-font-size,1rem);min-height:var(--nabs-ui-density-accordion-trigger-min-height,3rem);padding:var(--nabs-ui-density-accordion-trigger-padding-y,.9rem) var(--nabs-ui-density-accordion-trigger-padding-x,1rem);text-align:left;border:0;justify-content:space-between;align-items:center;width:100%;font-weight:600;line-height:1.3;display:flex}.nabs-ui-accordion__trigger:disabled{cursor:not-allowed;opacity:.75}.nabs-ui-accordion__triggerIcon{font-size:var(--nabs-ui-density-accordion-trigger-icon-font-size,.95rem);flex:none;margin-inline-start:var(--nabs-ui-density-accordion-trigger-icon-margin-start,.5rem);font-weight:700;line-height:1;transition:transform .16s}.nabs-ui-accordion__item--expanded .nabs-ui-accordion__triggerIcon{transform:rotate(45deg)}.nabs-ui-accordion__panel{border-top:1px solid var(--nabs-ui-color-border);gap:var(--nabs-ui-density-accordion-panel-gap,.75rem);padding:var(--nabs-ui-density-accordion-panel-padding-top,.9rem) var(--nabs-ui-density-accordion-panel-padding-x,1rem) var(--nabs-ui-density-accordion-panel-padding-bottom,1rem);line-height:1.5;display:grid}
|
|
27
113
|
/*$vite$:1*/.nabs-ui-dropdownmenu{align-items:flex-start;display:inline-flex;position:relative}.nabs-ui-dropdownmenu__trigger{cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-menu-trigger-gap,.6rem);padding:var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-x,.8rem) var(--nabs-ui-density-menu-trigger-padding-y,.55rem) var(--nabs-ui-density-menu-trigger-padding-left,1rem);transition:background-color .12s,border-color .12s,box-shadow .12s,transform .12s;display:inline-flex}.nabs-ui-dropdownmenu__trigger:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-dropdownmenu__triggerLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__triggerChevron{font-size:var(--nabs-ui-density-menu-chevron-font-size,.8rem);padding-right:var(--nabs-ui-density-menu-chevron-padding-right,.1rem);line-height:1}.nabs-ui-dropdownmenu__menu{gap:var(--nabs-ui-density-menu-gap,.25rem);min-width:var(--nabs-ui-density-menu-min-width,13rem);padding:var(--nabs-ui-density-menu-padding,.5rem);left:0;top:calc(100% + var(--nabs-ui-density-menu-offset,.6rem));z-index:2147483647;display:grid;position:absolute}.nabs-ui-dropdownmenu__item[aria-disabled=true]{pointer-events:none}.nabs-ui-dropdownmenu__item{cursor:pointer;align-items:flex-start;gap:var(--nabs-ui-density-menu-item-gap,.15rem);padding:var(--nabs-ui-density-menu-item-padding-y,.75rem) var(--nabs-ui-density-menu-item-padding-x,.9rem);text-align:left;border:0;justify-items:start;transition:background-color .12s,color .12s;display:grid}.nabs-ui-dropdownmenu__item--disabled{cursor:not-allowed}.nabs-ui-dropdownmenu__itemLabel{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-dropdownmenu__itemDescription{font-size:var(--nabs-ui-density-description-font-size,.82rem);line-height:1.25}.nabs-ui-dropdownmenu__divider{margin:var(--nabs-ui-density-menu-divider-margin-y,.25rem) 0}.nabs-ui-avatar{align-items:center;display:inline-flex;position:relative}.nabs-ui-avatar__login,.nabs-ui-avatar__trigger{cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-avatar-trigger-gap,.75rem);padding:var(--nabs-ui-density-avatar-trigger-padding-top,.35rem) var(--nabs-ui-density-avatar-trigger-padding-right,.45rem) var(--nabs-ui-density-avatar-trigger-padding-bottom,.35rem) var(--nabs-ui-density-avatar-trigger-padding-left,.35rem);text-decoration:none;transition:background-color .12s,border-color .12s,box-shadow .12s,transform .12s;display:inline-flex}.nabs-ui-avatar__login:hover,.nabs-ui-avatar__trigger:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-avatar__avatar{font-size:var(--nabs-ui-density-font-size-control,.95rem);height:var(--nabs-ui-density-avatar-size,2.5rem);width:var(--nabs-ui-density-avatar-size,2.5rem);flex:none;justify-content:center;align-items:center;font-weight:700;display:inline-flex;overflow:hidden}.nabs-ui-avatar__image{object-fit:cover;width:100%;height:100%;display:block}.nabs-ui-avatar__loginText,.nabs-ui-avatar__name{font-size:var(--nabs-ui-density-font-size-control,.95rem);font-weight:600;line-height:var(--nabs-ui-density-line-height-control,1.2)}.nabs-ui-avatar__name{max-width:var(--nabs-ui-density-avatar-name-max-width,10rem);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.nabs-ui-avatar__chevron{font-size:var(--nabs-ui-density-menu-chevron-font-size,.8rem);padding-right:var(--nabs-ui-density-avatar-chevron-padding-right,.15rem);line-height:1}.nabs-ui-avatar__menu{gap:var(--nabs-ui-density-avatar-menu-gap,.25rem);min-width:var(--nabs-ui-density-avatar-menu-min-width,12rem);padding:var(--nabs-ui-density-avatar-menu-padding,.5rem);left:auto;right:0;top:calc(100% + var(--nabs-ui-density-avatar-menu-offset,.75rem));z-index:2147483647;display:grid;position:absolute}.nabs-ui-avatar__menuItem{font-size:var(--nabs-ui-density-font-size-control,.95rem);padding:var(--nabs-ui-density-avatar-menu-item-padding-y,.8rem) var(--nabs-ui-density-avatar-menu-item-padding-x,.9rem);justify-content:flex-start;align-items:center;font-weight:600;text-decoration:none;transition:background-color .12s,color .12s;display:flex}
|
|
28
114
|
/*$vite$:1*/.nabs-ui-button{cursor:pointer;font:inherit;align-items:center;gap:var(--nabs-ui-density-button-gap,.5rem);padding:var(--nabs-ui-density-button-padding-y,.75rem) var(--nabs-ui-density-button-padding-x,1rem);justify-content:center;font-weight:600;line-height:1;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s,border-color .12s;display:inline-flex}.nabs-ui-button:hover{transform:translateY(var(--nabs-ui-density-control-hover-translate-y,-1px))}.nabs-ui-button:active{transform:translateY(0)}.nabs-ui-button:disabled{cursor:not-allowed;transform:none}
|
package/dist/nabs-ui-shell.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { forwardRef as e } from "react";
|
|
2
|
-
import { Layout as t } from "@net-advantage/nabs-ui-layout
|
|
2
|
+
import { Layout as t } from "@net-advantage/nabs-ui-layout";
|
|
3
3
|
import { jsx as n } from "react/jsx-runtime";
|
|
4
|
+
export * from "@net-advantage/nabs-ui-layout";
|
|
4
5
|
export * from "@net-advantage/nabs-ui-accordion";
|
|
5
6
|
export * from "@net-advantage/nabs-ui-avatar";
|
|
6
7
|
export * from "@net-advantage/nabs-ui-buttons";
|
|
@@ -16,7 +17,6 @@ export * from "@net-advantage/nabs-ui-dynamicform";
|
|
|
16
17
|
export * from "@net-advantage/nabs-ui-fileupload";
|
|
17
18
|
export * from "@net-advantage/nabs-ui-graph";
|
|
18
19
|
export * from "@net-advantage/nabs-ui-grid";
|
|
19
|
-
export * from "@net-advantage/nabs-ui-layout";
|
|
20
20
|
export * from "@net-advantage/nabs-ui-markdown";
|
|
21
21
|
export * from "@net-advantage/nabs-ui-navigation";
|
|
22
22
|
export * from "@net-advantage/nabs-ui-panel";
|
|
@@ -30,21 +30,13 @@ export * from "@net-advantage/nabs-ui-textbox";
|
|
|
30
30
|
export * from "@net-advantage/nabs-ui-toolbar";
|
|
31
31
|
//#region src/Shell.tsx
|
|
32
32
|
var r = e(({ header: e, navigation: r, footer: i, children: a, className: o = "", headerClassName: s = "", navigationClassName: c = "", contentClassName: l = "", footerClassName: u = "", ...d }, f) => {
|
|
33
|
-
let p = [
|
|
34
|
-
"nabs-ui-shell",
|
|
35
|
-
"grid",
|
|
36
|
-
"h-dvh",
|
|
37
|
-
"w-dvw",
|
|
38
|
-
"min-w-0",
|
|
39
|
-
"grid-rows-[auto_minmax(0,1fr)_auto]",
|
|
40
|
-
o
|
|
41
|
-
].filter(Boolean).join(" "), m = ["nabs-ui-shell__header", s].filter(Boolean).join(" "), h = ["nabs-ui-shell__navigation", c].filter(Boolean).join(" "), g = ["nabs-ui-shell__content", l].filter(Boolean).join(" "), _ = ["nabs-ui-shell__footer", u].filter(Boolean).join(" ");
|
|
33
|
+
let p = ["nabs-ui-shell", o].filter(Boolean).join(" "), m = ["nabs-ui-shell__header", s].filter(Boolean).join(" "), h = ["nabs-ui-shell__navigation", c].filter(Boolean).join(" "), g = ["nabs-ui-shell__content", l].filter(Boolean).join(" "), _ = ["nabs-ui-shell__footer", u].filter(Boolean).join(" ");
|
|
42
34
|
return /* @__PURE__ */ n("div", {
|
|
43
35
|
ref: f,
|
|
44
36
|
className: p,
|
|
45
37
|
...d,
|
|
46
38
|
children: /* @__PURE__ */ n(t, {
|
|
47
|
-
className: "nabs-ui-shell__layout
|
|
39
|
+
className: "nabs-ui-shell__layout",
|
|
48
40
|
header: e,
|
|
49
41
|
footer: i,
|
|
50
42
|
leftSidePanel: r,
|
package/package.json
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@net-advantage/nabs-ui-shell",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.36.0",
|
|
4
4
|
"description": "Reusable React app shell for the Nabs UI library.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/nabs-ui-shell.cjs",
|
|
7
7
|
"module": "./dist/nabs-ui-shell.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
8
9
|
"exports": {
|
|
9
10
|
".": {
|
|
10
11
|
"import": "./dist/nabs-ui-shell.js",
|
|
@@ -18,36 +19,36 @@
|
|
|
18
19
|
],
|
|
19
20
|
"dependencies": {
|
|
20
21
|
"react": "^19.0.0",
|
|
21
|
-
"@net-advantage/nabs-ui-accordion": "0.
|
|
22
|
-
"@net-advantage/nabs-ui-avatar": "0.
|
|
23
|
-
"@net-advantage/nabs-ui-buttons": "0.
|
|
24
|
-
"@net-advantage/nabs-ui-cards": "0.
|
|
25
|
-
"@net-advantage/nabs-ui-checkbox": "0.
|
|
26
|
-
"@net-advantage/nabs-ui-code": "0.
|
|
27
|
-
"@net-advantage/nabs-ui-combobox": "0.
|
|
28
|
-
"@net-advantage/nabs-ui-datepicker": "0.
|
|
29
|
-
"@net-advantage/nabs-ui-dialog": "0.
|
|
30
|
-
"@net-advantage/nabs-ui-dropdownlist": "0.
|
|
31
|
-
"@net-advantage/nabs-ui-dropdownmenu": "0.
|
|
32
|
-
"@net-advantage/nabs-ui-dynamicform": "0.
|
|
33
|
-
"@net-advantage/nabs-ui-fileupload": "0.
|
|
34
|
-
"@net-advantage/nabs-ui-graph": "0.
|
|
35
|
-
"@net-advantage/nabs-ui-grid": "0.
|
|
36
|
-
"@net-advantage/nabs-ui-layout": "0.
|
|
37
|
-
"@net-advantage/nabs-ui-markdown": "0.
|
|
38
|
-
"@net-advantage/nabs-ui-navigation": "0.
|
|
39
|
-
"@net-advantage/nabs-ui-panel": "0.
|
|
40
|
-
"@net-advantage/nabs-ui-radiobutton": "0.
|
|
41
|
-
"@net-advantage/nabs-ui-signature": "0.
|
|
42
|
-
"@net-advantage/nabs-ui-slider": "0.
|
|
43
|
-
"@net-advantage/nabs-ui-stepper": "0.
|
|
44
|
-
"@net-advantage/nabs-ui-tab": "0.
|
|
45
|
-
"@net-advantage/nabs-ui-textarea": "0.
|
|
46
|
-
"@net-advantage/nabs-ui-textbox": "0.
|
|
47
|
-
"@net-advantage/nabs-ui-themes": "0.
|
|
48
|
-
"@net-advantage/nabs-ui-themes-dark": "0.
|
|
49
|
-
"@net-advantage/nabs-ui-themes-light": "0.
|
|
50
|
-
"@net-advantage/nabs-ui-toolbar": "0.
|
|
22
|
+
"@net-advantage/nabs-ui-accordion": "0.36.0",
|
|
23
|
+
"@net-advantage/nabs-ui-avatar": "0.36.0",
|
|
24
|
+
"@net-advantage/nabs-ui-buttons": "0.36.0",
|
|
25
|
+
"@net-advantage/nabs-ui-cards": "0.36.0",
|
|
26
|
+
"@net-advantage/nabs-ui-checkbox": "0.36.0",
|
|
27
|
+
"@net-advantage/nabs-ui-code": "0.36.0",
|
|
28
|
+
"@net-advantage/nabs-ui-combobox": "0.36.0",
|
|
29
|
+
"@net-advantage/nabs-ui-datepicker": "0.36.0",
|
|
30
|
+
"@net-advantage/nabs-ui-dialog": "0.36.0",
|
|
31
|
+
"@net-advantage/nabs-ui-dropdownlist": "0.36.0",
|
|
32
|
+
"@net-advantage/nabs-ui-dropdownmenu": "0.36.0",
|
|
33
|
+
"@net-advantage/nabs-ui-dynamicform": "0.36.0",
|
|
34
|
+
"@net-advantage/nabs-ui-fileupload": "0.36.0",
|
|
35
|
+
"@net-advantage/nabs-ui-graph": "0.36.0",
|
|
36
|
+
"@net-advantage/nabs-ui-grid": "0.36.0",
|
|
37
|
+
"@net-advantage/nabs-ui-layout": "0.36.0",
|
|
38
|
+
"@net-advantage/nabs-ui-markdown": "0.36.0",
|
|
39
|
+
"@net-advantage/nabs-ui-navigation": "0.36.0",
|
|
40
|
+
"@net-advantage/nabs-ui-panel": "0.36.0",
|
|
41
|
+
"@net-advantage/nabs-ui-radiobutton": "0.36.0",
|
|
42
|
+
"@net-advantage/nabs-ui-signature": "0.36.0",
|
|
43
|
+
"@net-advantage/nabs-ui-slider": "0.36.0",
|
|
44
|
+
"@net-advantage/nabs-ui-stepper": "0.36.0",
|
|
45
|
+
"@net-advantage/nabs-ui-tab": "0.36.0",
|
|
46
|
+
"@net-advantage/nabs-ui-textarea": "0.36.0",
|
|
47
|
+
"@net-advantage/nabs-ui-textbox": "0.36.0",
|
|
48
|
+
"@net-advantage/nabs-ui-themes": "0.36.0",
|
|
49
|
+
"@net-advantage/nabs-ui-themes-dark": "0.36.0",
|
|
50
|
+
"@net-advantage/nabs-ui-themes-light": "0.36.0",
|
|
51
|
+
"@net-advantage/nabs-ui-toolbar": "0.36.0"
|
|
51
52
|
},
|
|
52
53
|
"devDependencies": {
|
|
53
54
|
"@types/react": "^19.0.0",
|