@chayns-ui/layout 0.4.0 → 0.5.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.
Files changed (9) hide show
  1. package/README.md +2 -1
  2. package/dist/app-layout.css +10 -1
  3. package/dist/components/app-layout/AppLayout.d.ts.map +1 -1
  4. package/dist/components/app-layout/AppLayout.js +7 -4
  5. package/dist/components/app-layout/AppLayout.js.map +1 -1
  6. package/dist/components/app-layout/AppLayout.types.d.ts +5 -0
  7. package/dist/components/app-layout/AppLayout.types.d.ts.map +1 -1
  8. package/dist/tabs.css +1 -0
  9. package/package.json +3 -3
package/README.md CHANGED
@@ -21,7 +21,8 @@ import { AppLayout } from '@chayns-ui/layout';
21
21
  ```
22
22
 
23
23
  `AppLayout` renders the application shell with a 64px header, recursive
24
- navigation, controlled or uncontrolled sidebar collapse, and consumer content.
24
+ navigation, controlled or uncontrolled sidebar collapse, optional
25
+ `headerContent` beside the logo, and consumer content.
25
26
 
26
27
  Alternatively, the component stylesheet is available as
27
28
  `@chayns-ui/layout/app-layout.css` or
package/dist/app-layout.css CHANGED
@@ -18,6 +18,15 @@
18
18
  padding-inline: var(--sp-4);
19
19
  }
20
20
 
21
+ .chayns-app-layout__header-content {
22
+ display: flex;
23
+ flex: 1 1 auto;
24
+ align-items: center;
25
+ justify-content: flex-end;
26
+ min-inline-size: 0;
27
+ margin-inline-start: var(--sp-4);
28
+ }
29
+
21
30
  .chayns-app-layout__logo {
22
31
  display: block;
23
32
  max-block-size: calc(var(--k32) + var(--k8));
@@ -30,7 +39,7 @@
30
39
  flex-direction: column;
31
40
  min-inline-size: 0;
32
41
  min-block-size: 0;
33
- padding: var(--sp-2);
42
+ padding: 0 var(--sp-2) var(--sp-2);
34
43
  }
35
44
 
36
45
  .chayns-app-layout__navigation {
package/dist/components/app-layout/AppLayout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,SAAS,wHAmFrB,CAAC"}
1
+ {"version":3,"file":"AppLayout.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,eAAO,MAAM,SAAS,wHAqFrB,CAAC"}
package/dist/components/app-layout/AppLayout.js CHANGED
@@ -3,7 +3,7 @@ import NavigationItems from "./navigation-items/NavigationItems.js";
3
3
  import { forwardRef, useId, useState } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  //#region src/components/app-layout/AppLayout.tsx
6
- var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel, collapsed, defaultCollapsed = false, expandLabel, items, logo, navigationLabel, onClick, onCollapsedChange, ...rootProps }, ref) => {
6
+ var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel, collapsed, defaultCollapsed = false, expandLabel, headerContent, items, logo, navigationLabel, onClick, onCollapsedChange, ...rootProps }, ref) => {
7
7
  const baseId = useId();
8
8
  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
9
9
  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
@@ -31,13 +31,16 @@ var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel,
31
31
  className: rootClassName,
32
32
  ref,
33
33
  children: [
34
- /* @__PURE__ */ jsx("header", {
34
+ /* @__PURE__ */ jsxs("header", {
35
35
  className: "chayns-app-layout__header",
36
- children: /* @__PURE__ */ jsx("img", {
36
+ children: [/* @__PURE__ */ jsx("img", {
37
37
  alt: "",
38
38
  className: "chayns-app-layout__logo",
39
39
  src: logo
40
- })
40
+ }), /* @__PURE__ */ jsx("div", {
41
+ className: "chayns-app-layout__header-content",
42
+ children: headerContent
43
+ })]
41
44
  }),
42
45
  /* @__PURE__ */ jsxs("aside", {
43
46
  className: "chayns-app-layout__sidebar",
package/dist/components/app-layout/AppLayout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppLayout.js","names":[],"sources":["../../../src/components/app-layout/AppLayout.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\n\nimport type { AppLayoutProps } from './AppLayout.types.js';\nimport AppLayoutIcon from './app-layout-icon/AppLayoutIcon.js';\nimport NavigationItems from './navigation-items/NavigationItems.js';\n\nexport const AppLayout = forwardRef<HTMLDivElement, AppLayoutProps>(\n (\n {\n activeItemId,\n children,\n className,\n collapseLabel,\n collapsed,\n defaultCollapsed = false,\n expandLabel,\n items,\n logo,\n navigationLabel,\n onClick,\n onCollapsedChange,\n ...rootProps\n },\n ref,\n ) => {\n const baseId = useId();\n const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => new Set());\n const isCollapsed = collapsed ?? internalCollapsed;\n const rootClassName = [\n 'chayns-app-layout',\n isCollapsed ? 'chayns-app-layout--collapsed' : undefined,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleCollapsedChange = () => {\n const nextCollapsed = !isCollapsed;\n if (collapsed === undefined) {\n setInternalCollapsed(nextCollapsed);\n }\n onCollapsedChange?.(nextCollapsed);\n };\n\n const handleToggle = (id: string) => {\n setExpandedIds((current) => {\n const next = new Set(current);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n return next;\n });\n };\n\n return (\n <div {...rootProps} className={rootClassName} ref={ref}>\n <header className=\"chayns-app-layout__header\">\n <img alt=\"\" className=\"chayns-app-layout__logo\" src={logo} />\n </header>\n <aside className=\"chayns-app-layout__sidebar\">\n <nav aria-label={navigationLabel} className=\"chayns-app-layout__navigation\">\n <NavigationItems\n activeItemId={activeItemId}\n collapsed={isCollapsed}\n expandedIds={expandedIds}\n items={items}\n onClick={onClick}\n onToggle={handleToggle}\n parentId={baseId}\n />\n </nav>\n <div className=\"chayns-app-layout__footer\">\n <button\n aria-label={isCollapsed ? expandLabel : collapseLabel}\n className=\"chayns-app-layout__collapse\"\n onClick={handleCollapsedChange}\n type=\"button\"\n >\n <AppLayoutIcon icon=\"fa-sidebar\" />\n </button>\n </div>\n </aside>\n <main className=\"chayns-app-layout__content\">{children}</main>\n </div>\n );\n },\n);\n\nAppLayout.displayName = 'AppLayout';\n"],"mappings":";;;;;AAMA,IAAa,YAAY,YAErB,EACE,cACA,UACA,WACA,eACA,WACA,mBAAmB,OACnB,aACA,OACA,MACA,iBACA,SACA,mBACA,GAAG,aAEL,QACG;CACH,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,gBAAgB;CAC3E,MAAM,CAAC,aAAa,kBAAkB,+BAAoC,IAAI,IAAI,CAAC;CACnF,MAAM,cAAc,aAAa;CACjC,MAAM,gBAAgB;EACpB;EACA,cAAc,iCAAiC,KAAA;EAC/C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,8BAA8B;EAClC,MAAM,gBAAgB,CAAC;EACvB,IAAI,cAAc,KAAA,GAChB,qBAAqB,aAAa;EAEpC,oBAAoB,aAAa;CACnC;CAEA,MAAM,gBAAgB,OAAe;EACnC,gBAAgB,YAAY;GAC1B,MAAM,OAAO,IAAI,IAAI,OAAO;GAC5B,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;QAEd,KAAK,IAAI,EAAE;GAEb,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAoB;EAAnD,UAAA;GACE,oBAAC,UAAD;IAAQ,WAAU;IAChB,UAAA,oBAAC,OAAD;KAAK,KAAI;KAAG,WAAU;KAA0B,KAAK;IAAO,CAAA;GACtD,CAAA;GACR,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,OAAD;KAAK,cAAY;KAAiB,WAAU;KAC1C,UAAA,oBAAC,iBAAD;MACgB;MACd,WAAW;MACE;MACN;MACE;MACT,UAAU;MACV,UAAU;KACX,CAAA;IACE,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,UAAD;MACE,cAAY,cAAc,cAAc;MACxC,WAAU;MACV,SAAS;MACT,MAAK;MAEL,UAAA,oBAAC,eAAD,EAAe,MAAK,aAAc,CAAA;KAC5B,CAAA;IACL,CAAA,CACA;;GACP,oBAAC,QAAD;IAAM,WAAU;IAA8B;GAAe,CAAA;EAC1D;;AAET,CACF;AAEA,UAAU,cAAc"}
1
+ {"version":3,"file":"AppLayout.js","names":[],"sources":["../../../src/components/app-layout/AppLayout.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\n\nimport type { AppLayoutProps } from './AppLayout.types.js';\nimport AppLayoutIcon from './app-layout-icon/AppLayoutIcon.js';\nimport NavigationItems from './navigation-items/NavigationItems.js';\n\nexport const AppLayout = forwardRef<HTMLDivElement, AppLayoutProps>(\n (\n {\n activeItemId,\n children,\n className,\n collapseLabel,\n collapsed,\n defaultCollapsed = false,\n expandLabel,\n headerContent,\n items,\n logo,\n navigationLabel,\n onClick,\n onCollapsedChange,\n ...rootProps\n },\n ref,\n ) => {\n const baseId = useId();\n const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);\n const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() => new Set());\n const isCollapsed = collapsed ?? internalCollapsed;\n const rootClassName = [\n 'chayns-app-layout',\n isCollapsed ? 'chayns-app-layout--collapsed' : undefined,\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const handleCollapsedChange = () => {\n const nextCollapsed = !isCollapsed;\n if (collapsed === undefined) {\n setInternalCollapsed(nextCollapsed);\n }\n onCollapsedChange?.(nextCollapsed);\n };\n\n const handleToggle = (id: string) => {\n setExpandedIds((current) => {\n const next = new Set(current);\n if (next.has(id)) {\n next.delete(id);\n } else {\n next.add(id);\n }\n return next;\n });\n };\n\n return (\n <div {...rootProps} className={rootClassName} ref={ref}>\n <header className=\"chayns-app-layout__header\">\n <img alt=\"\" className=\"chayns-app-layout__logo\" src={logo} />\n <div className=\"chayns-app-layout__header-content\">{headerContent}</div>\n </header>\n <aside className=\"chayns-app-layout__sidebar\">\n <nav aria-label={navigationLabel} className=\"chayns-app-layout__navigation\">\n <NavigationItems\n activeItemId={activeItemId}\n collapsed={isCollapsed}\n expandedIds={expandedIds}\n items={items}\n onClick={onClick}\n onToggle={handleToggle}\n parentId={baseId}\n />\n </nav>\n <div className=\"chayns-app-layout__footer\">\n <button\n aria-label={isCollapsed ? expandLabel : collapseLabel}\n className=\"chayns-app-layout__collapse\"\n onClick={handleCollapsedChange}\n type=\"button\"\n >\n <AppLayoutIcon icon=\"fa-sidebar\" />\n </button>\n </div>\n </aside>\n <main className=\"chayns-app-layout__content\">{children}</main>\n </div>\n );\n },\n);\n\nAppLayout.displayName = 'AppLayout';\n"],"mappings":";;;;;AAMA,IAAa,YAAY,YAErB,EACE,cACA,UACA,WACA,eACA,WACA,mBAAmB,OACnB,aACA,eACA,OACA,MACA,iBACA,SACA,mBACA,GAAG,aAEL,QACG;CACH,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,gBAAgB;CAC3E,MAAM,CAAC,aAAa,kBAAkB,+BAAoC,IAAI,IAAI,CAAC;CACnF,MAAM,cAAc,aAAa;CACjC,MAAM,gBAAgB;EACpB;EACA,cAAc,iCAAiC,KAAA;EAC/C;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,MAAM,8BAA8B;EAClC,MAAM,gBAAgB,CAAC;EACvB,IAAI,cAAc,KAAA,GAChB,qBAAqB,aAAa;EAEpC,oBAAoB,aAAa;CACnC;CAEA,MAAM,gBAAgB,OAAe;EACnC,gBAAgB,YAAY;GAC1B,MAAM,OAAO,IAAI,IAAI,OAAO;GAC5B,IAAI,KAAK,IAAI,EAAE,GACb,KAAK,OAAO,EAAE;QAEd,KAAK,IAAI,EAAE;GAEb,OAAO;EACT,CAAC;CACH;CAEA,OACE,qBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAoB;EAAnD,UAAA;GACE,qBAAC,UAAD;IAAQ,WAAU;IAAlB,UAAA,CACE,oBAAC,OAAD;KAAK,KAAI;KAAG,WAAU;KAA0B,KAAK;IAAO,CAAA,GAC5D,oBAAC,OAAD;KAAK,WAAU;KAAqC,UAAA;IAAmB,CAAA,CACjE;;GACR,qBAAC,SAAD;IAAO,WAAU;IAAjB,UAAA,CACE,oBAAC,OAAD;KAAK,cAAY;KAAiB,WAAU;KAC1C,UAAA,oBAAC,iBAAD;MACgB;MACd,WAAW;MACE;MACN;MACE;MACT,UAAU;MACV,UAAU;KACX,CAAA;IACE,CAAA,GACL,oBAAC,OAAD;KAAK,WAAU;KACb,UAAA,oBAAC,UAAD;MACE,cAAY,cAAc,cAAc;MACxC,WAAU;MACV,SAAS;MACT,MAAK;MAEL,UAAA,oBAAC,eAAD,EAAe,MAAK,aAAc,CAAA;KAC5B,CAAA;IACL,CAAA,CACA;;GACP,oBAAC,QAAD;IAAM,WAAU;IAA8B;GAAe,CAAA;EAC1D;;AAET,CACF;AAEA,UAAU,cAAc"}
package/dist/components/app-layout/AppLayout.types.d.ts CHANGED
@@ -47,6 +47,11 @@ export interface AppLayoutProps extends Omit<ComponentPropsWithRef<'div'>, 'chil
47
47
  * name.
48
48
  */
49
49
  logo: string;
50
+ /**
51
+ * @description Optional consumer-provided content rendered in the remaining
52
+ * header area to the right of the logo.
53
+ */
54
+ headerContent?: ReactNode;
50
55
  /**
51
56
  * @description Top-level navigation items, recursively composable via each
52
57
  * item's own `children`. An empty array renders an empty navigation list.
package/dist/components/app-layout/AppLayout.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,MAAM,EAAE,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChG;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB;;;;OAIG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD"}
1
+ {"version":3,"file":"AppLayout.types.d.ts","sourceRoot":"","sources":["../../../src/components/app-layout/AppLayout.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG,MAAM,MAAM,EAAE,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,IAAI,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAChG;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B;;;OAGG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IAEvB;;;;OAIG;IACH,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAE9B;;OAEG;IACH,eAAe,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD"}
package/dist/tabs.css CHANGED
@@ -126,6 +126,7 @@
126
126
  padding: var(--sp-4);
127
127
  overflow: auto;
128
128
  background: var(--surface);
129
+ color: var(--text);
129
130
  }
130
131
 
131
132
  @container (max-width: 20rem) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-ui/layout",
3
- "version": "0.4.0",
3
+ "version": "0.5.0",
4
4
  "description": "Accessible application layout components for chayns UI",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -28,11 +28,11 @@
28
28
  "./package.json": "./package.json"
29
29
  },
30
30
  "peerDependencies": {
31
- "@chayns-ui/core": ">=0.3.0",
31
+ "@chayns-ui/core": ">=0.3.1",
32
32
  "react": ">=18 <20"
33
33
  },
34
34
  "devDependencies": {
35
- "@chayns-ui/core": "0.3.0"
35
+ "@chayns-ui/core": "0.3.1"
36
36
  },
37
37
  "engines": {
38
38
  "node": ">=18"