@chayns-ui/layout 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tobit.Software
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @chayns-ui/layout
+
+Accessible layout components for chayns UI.
+
+## Installation
+
+```sh
+pnpm add @chayns-ui/layout @chayns-ui/core @chayns-ui/tokens react
+```
+
+Load the resolved token stylesheet, Core stylesheet required by the host
+application, and the AppLayout stylesheet:
+
+```tsx
+import '@chayns-ui/tokens/baseline.css';
+import '@chayns-ui/tokens/patch.css';
+import '@chayns-ui/core/styles.css';
+import '@chayns-ui/layout/app-layout.css';
+
+import { AppLayout } from '@chayns-ui/layout';
+```
+
+`AppLayout` renders the application shell with a 64px header, recursive
+navigation, controlled or uncontrolled sidebar collapse, and consumer content.

package/dist/app-layout.css

@@ -0,0 +1,420 @@
+@layer chayns.components {
+  .chayns-app-layout {
+    display: grid;
+    grid-template: var(--k64) minmax(0, 1fr) / calc(var(--k64) * 3) minmax(0, 1fr);
+    grid-template-areas:
+      'header header'
+      'sidebar content';
+    min-block-size: 100%;
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-tabs {
+    display: flex;
+    flex-direction: column;
+    container-type: inline-size;
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .chayns-tabs__list {
+    display: flex;
+    gap: var(--sp-1);
+    align-items: stretch;
+    min-inline-size: 0;
+    overflow-x: auto;
+    background: transparent;
+  }
+
+  .chayns-tabs__bar {
+    display: flex;
+    align-items: stretch;
+    block-size: var(--ctrl-h);
+    min-inline-size: 0;
+  }
+
+  .chayns-tabs__item {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: stretch;
+    border-radius: var(--k12) var(--k12) 0 0;
+    overflow: hidden;
+  }
+
+  .chayns-tabs__tab {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--sp-2);
+    block-size: var(--ctrl-h);
+    min-block-size: var(--ctrl-h);
+    min-inline-size: var(--ctrl-h);
+    padding-block: 0;
+    padding-inline: var(--sp-3) var(--sp-2);
+    border: 0;
+    border-radius: 0;
+    color: var(--on-accent);
+    font: inherit;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) {
+    background: var(--surface);
+  }
+
+  .chayns-tabs__item:not(:has(.chayns-tabs__tab--active)) {
+    background: color-mix(in srgb, var(--surface) 10%, transparent);
+  }
+
+  .chayns-tabs__remove,
+  .chayns-tabs__add {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ctrl-h);
+    block-size: var(--ctrl-h);
+    min-block-size: var(--ctrl-h);
+    padding: 0 var(--sp-2);
+    border: 0;
+    color: var(--on-accent);
+    font: inherit;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .chayns-tabs__remove {
+    inline-size: var(--icon);
+    padding: 0;
+    border-radius: 0;
+  }
+
+  .chayns-tabs__add {
+    flex: 0 0 auto;
+    border-radius: 0;
+    color: var(--on-accent);
+  }
+
+  .chayns-tabs__item:has(:focus-visible) {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-size)
+      rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-strong));
+  }
+
+  .chayns-tabs__tab:focus-visible,
+  .chayns-tabs__remove:focus-visible,
+  .chayns-tabs__add:focus-visible {
+    outline: none;
+  }
+
+  .chayns-tabs__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon);
+    block-size: var(--icon);
+  }
+
+  .chayns-tabs__remove .chayns-tabs__icon {
+    inline-size: var(--fs-meta);
+    block-size: var(--fs-meta);
+    font-size: var(--fs-meta);
+  }
+
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__tab,
+  .chayns-tabs__item:has(.chayns-tabs__tab--active) .chayns-tabs__remove {
+    color: var(--accent);
+  }
+
+  .chayns-tabs__panel {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--sp-4);
+    overflow: auto;
+    background: var(--surface);
+  }
+
+  @container (max-width: 20rem) {
+    .chayns-tabs__label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+  }
+
+  .chayns-app-layout__header {
+    display: flex;
+    grid-area: header;
+    align-items: center;
+    min-inline-size: 0;
+    padding-inline: var(--sp-4);
+  }
+
+  .chayns-app-layout__logo {
+    display: block;
+    max-block-size: calc(var(--k32) + var(--k8));
+    max-inline-size: 100%;
+  }
+
+  .chayns-app-layout__sidebar {
+    display: flex;
+    grid-area: sidebar;
+    flex-direction: column;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding: var(--sp-2);
+  }
+
+  .chayns-app-layout__navigation {
+    min-block-size: 0;
+    overflow: auto;
+  }
+
+  .chayns-app-layout__list {
+    display: grid;
+    gap: var(--sp-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .chayns-app-layout__children {
+    display: grid;
+    grid-template-rows: 0fr;
+    min-inline-size: 0;
+    padding-inline-start: var(--sp-4);
+    overflow: hidden;
+  }
+
+  .chayns-app-layout__children--open {
+    grid-template-rows: 1fr;
+  }
+
+  .chayns-app-layout__children > .chayns-app-layout__list {
+    min-block-size: 0;
+    overflow: hidden;
+  }
+
+  .chayns-app-layout__row {
+    display: flex;
+    align-items: stretch;
+    min-inline-size: 0;
+  }
+
+  .chayns-app-layout__item {
+    min-inline-size: 0;
+    border-radius: var(--k8);
+  }
+
+  .chayns-app-layout__item:hover,
+  .chayns-app-layout__item:focus-within,
+  .chayns-app-layout__item--active {
+    background: color-mix(in srgb, var(--on-accent) 12%, transparent);
+  }
+
+  .chayns-app-layout__action,
+  .chayns-app-layout__disclosure,
+  .chayns-app-layout__collapse {
+    border: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+    background: transparent;
+  }
+
+  .chayns-app-layout__action {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--sp-2);
+    min-block-size: var(--ctrl-h);
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding: var(--sp-2) var(--sp-3);
+    border-radius: var(--k8);
+    background: transparent;
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  .chayns-app-layout__label {
+    min-inline-size: 0;
+    opacity: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .chayns-app-layout--collapsed {
+    grid-template-columns: calc(var(--ctrl-h) + var(--sp-4)) minmax(0, 1fr);
+  }
+
+  .chayns-app-layout__disclosure {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--ctrl-h);
+    border-radius: var(--k8);
+    background: transparent;
+  }
+
+  .chayns-app-layout__collapse {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ctrl-h);
+    block-size: var(--ctrl-h);
+    align-self: flex-end;
+    border-radius: 50%;
+    background: transparent;
+  }
+
+  .chayns-app-layout__footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-block-start: auto;
+    padding-block-start: var(--sp-2);
+    border-block-start: 1px solid color-mix(in srgb, var(--on-accent) 35%, transparent);
+  }
+
+  .chayns-app-layout__collapse:hover {
+    background: color-mix(in srgb, var(--on-accent) 12%, transparent);
+  }
+
+  :where(
+    .chayns-app-layout__action,
+    .chayns-app-layout__disclosure,
+    .chayns-app-layout__collapse
+  ):focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-size) var(--on-accent);
+  }
+
+  .chayns-app-layout__icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--icon);
+    block-size: var(--icon);
+    line-height: 1;
+  }
+
+  .chayns-app-layout__disclosure[aria-expanded='true'] .chayns-app-layout__icon {
+    transform: rotate(180deg);
+  }
+
+  .chayns-app-layout__weight {
+    display: inline-flex;
+  }
+
+  .chayns-app-layout__weight--active {
+    display: none;
+  }
+
+  :where(
+      .chayns-app-layout__action:hover,
+      .chayns-app-layout__action:focus-visible,
+      .chayns-app-layout__disclosure:hover,
+      .chayns-app-layout__collapse:hover
+    )
+    .chayns-app-layout__weight:not(.chayns-app-layout__weight--active) {
+    display: none;
+  }
+
+  :where(
+      .chayns-app-layout__action:hover,
+      .chayns-app-layout__action:focus-visible,
+      .chayns-app-layout__disclosure:hover,
+      .chayns-app-layout__collapse:hover
+    )
+    .chayns-app-layout__weight--active {
+    display: inline-flex;
+  }
+
+  .chayns-app-layout__content {
+    grid-area: content;
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+    border-start-start-radius: var(--k12);
+    background: var(--accent);
+    color: var(--on-accent);
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__sidebar {
+    align-items: stretch;
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__row {
+    position: relative;
+    inline-size: 100%;
+    max-inline-size: 100%;
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__action {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    justify-content: flex-start;
+    padding-inline: var(--sp-3);
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__navigation {
+    overflow: hidden;
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__disclosure {
+    display: none;
+  }
+
+  .chayns-app-layout--collapsed .chayns-app-layout__children {
+    display: none;
+  }
+
+  .chayns-app-layout__label--hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    min-inline-size: auto;
+    opacity: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .chayns-app-layout {
+      transition: grid-template-columns 160ms ease;
+    }
+
+    .chayns-app-layout__children {
+      transition: grid-template-rows 160ms ease;
+    }
+
+    .chayns-app-layout__disclosure .chayns-app-layout__icon {
+      transition: transform 160ms ease;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(
+      .chayns-app-layout__action,
+      .chayns-app-layout__disclosure,
+      .chayns-app-layout__collapse
+    ):focus-visible {
+      outline: 2px solid ButtonText;
+      outline-offset: -2px;
+      box-shadow: none;
+    }
+  }
+}

package/dist/components/app-layout/AppLayout.d.ts

@@ -0,0 +1,3 @@
+import type { AppLayoutProps } from './AppLayout.types.js';
+export declare const AppLayout: import("react").ForwardRefExoticComponent<Omit<AppLayoutProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=AppLayout.d.ts.map

package/dist/components/app-layout/AppLayout.d.ts.map

@@ -0,0 +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"}

package/dist/components/app-layout/AppLayout.js

@@ -0,0 +1,78 @@
+import AppLayoutIcon from "./app-layout-icon/AppLayoutIcon.js";
+import NavigationItems from "./navigation-items/NavigationItems.js";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-layout/AppLayout.tsx
+var AppLayout = forwardRef(({ activeItemId, children, className, collapseLabel, collapsed, defaultCollapsed = false, expandLabel, items, logo, navigationLabel, onClick, onCollapsedChange, ...rootProps }, ref) => {
+	const baseId = useId();
+	const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+	const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+	const isCollapsed = collapsed ?? internalCollapsed;
+	const rootClassName = [
+		"chayns-app-layout",
+		isCollapsed ? "chayns-app-layout--collapsed" : void 0,
+		className
+	].filter(Boolean).join(" ");
+	const handleCollapsedChange = () => {
+		const nextCollapsed = !isCollapsed;
+		if (collapsed === void 0) setInternalCollapsed(nextCollapsed);
+		onCollapsedChange?.(nextCollapsed);
+	};
+	const handleToggle = (id) => {
+		setExpandedIds((current) => {
+			const next = new Set(current);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: rootClassName,
+		ref,
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "chayns-app-layout__header",
+				children: /* @__PURE__ */ jsx("img", {
+					alt: "",
+					className: "chayns-app-layout__logo",
+					src: logo
+				})
+			}),
+			/* @__PURE__ */ jsxs("aside", {
+				className: "chayns-app-layout__sidebar",
+				children: [/* @__PURE__ */ jsx("nav", {
+					"aria-label": navigationLabel,
+					className: "chayns-app-layout__navigation",
+					children: /* @__PURE__ */ jsx(NavigationItems, {
+						activeItemId,
+						collapsed: isCollapsed,
+						expandedIds,
+						items,
+						onClick,
+						onToggle: handleToggle,
+						parentId: baseId
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "chayns-app-layout__footer",
+					children: /* @__PURE__ */ jsx("button", {
+						"aria-label": isCollapsed ? expandLabel : collapseLabel,
+						className: "chayns-app-layout__collapse",
+						onClick: handleCollapsedChange,
+						type: "button",
+						children: /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-sidebar" })
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("main", {
+				className: "chayns-app-layout__content",
+				children
+			})
+		]
+	});
+});
+AppLayout.displayName = "AppLayout";
+//#endregion
+export { AppLayout };
+
+//# sourceMappingURL=AppLayout.js.map

package/dist/components/app-layout/AppLayout.js.map

@@ -0,0 +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"}

package/dist/components/app-layout/AppLayout.types.d.ts

@@ -0,0 +1,103 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * @description A FontAwesome Classic icon name in its Regular form, used for
+ * navigation item icons in `AppLayout`.
+ */
+export type AppLayoutIcon = `fa-${string}`;
+/**
+ * @description A single, recursively composable navigation entry in the
+ * `AppLayout` sidebar. Parent and child items each act as their own action
+ * button; a parent item with `children` additionally exposes a separate
+ * disclosure control, so activating the parent's own action and toggling its
+ * nested children are independent.
+ */
+export interface AppLayoutItem {
+    /**
+     * @description Stable identifier passed to `onClick` and compared against
+     * `activeItemId`.
+     */
+    id: string;
+    /**
+     * @description Visible, localized navigation label. Remains accessible for
+     * each item even while the sidebar is collapsed.
+     */
+    name: string;
+    /**
+     * @description FontAwesome Classic icon name shown for this item, including
+     * in the collapsed sidebar.
+     */
+    icon: AppLayoutIcon;
+    /**
+     * @description Nested child items, rendered behind this item's own
+     * disclosure control and hidden while the sidebar is collapsed.
+     */
+    children?: AppLayoutItem[];
+}
+/**
+ * @description Props for the top-level application shell: a header with a
+ * logo, a collapsible sidebar of recursively nested navigation items, and a
+ * consumer-owned content area. Forwards all remaining native `div` props
+ * (except `children` and `onClick`, which have `AppLayout`-specific meaning),
+ * `className` and `ref`.
+ */
+export interface AppLayoutProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onClick'> {
+    /**
+     * @description URL of an image or SVG resource rendered as the header logo.
+     * Always decorative (`alt=""`); it does not itself provide any accessible
+     * name.
+     */
+    logo: string;
+    /**
+     * @description Top-level navigation items, recursively composable via each
+     * item's own `children`. An empty array renders an empty navigation list.
+     */
+    items: AppLayoutItem[];
+    /**
+     * @description Called with an item's `id` when that item's own action is
+     * activated, for both parent and child items. Toggling a parent's
+     * disclosure control does not call `onClick`.
+     */
+    onClick: (id: string) => void;
+    /**
+     * @description Localized accessible name for the navigation landmark.
+     */
+    navigationLabel: string;
+    /**
+     * @description Localized accessible name for the sidebar toggle control
+     * when activating it will collapse the sidebar.
+     */
+    collapseLabel: string;
+    /**
+     * @description Localized accessible name for the sidebar toggle control
+     * when activating it will expand the sidebar.
+     */
+    expandLabel: string;
+    /**
+     * @description `id` of the currently active navigation item. `AppLayout`
+     * only renders the active visual state; it does not derive or own
+     * activeness from routing.
+     */
+    activeItemId?: string;
+    /**
+     * @description Consumer-provided content rendered in the area beside the
+     * sidebar. Owns its own internal semantics and scrolling.
+     */
+    children?: ReactNode;
+    /**
+     * @description Controlled collapsed state of the sidebar.
+     */
+    collapsed?: boolean;
+    /**
+     * @description Uncontrolled initial collapsed state of the sidebar.
+     * Persisting the collapsed state across sessions is outside `AppLayout`'s
+     * responsibility.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * @description Called with the next collapsed state when the sidebar
+     * toggle is activated, for both the controlled and uncontrolled usage.
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+//# sourceMappingURL=AppLayout.types.d.ts.map

package/dist/components/app-layout/AppLayout.types.d.ts.map

@@ -0,0 +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"}

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.d.ts

@@ -0,0 +1,6 @@
+import type { AppLayoutItem } from '../AppLayout.types.js';
+declare const AppLayoutIcon: ({ icon }: {
+    icon: AppLayoutItem["icon"];
+}) => import("react").JSX.Element;
+export default AppLayoutIcon;
+//# sourceMappingURL=AppLayoutIcon.d.ts.map

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayoutIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,QAAA,MAAM,aAAa,GAAI,UAAU;IAAE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;CAAE,gCAS/D,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx
+var AppLayoutIcon = ({ icon }) => /* @__PURE__ */ jsxs("span", {
+	"aria-hidden": "true",
+	className: "chayns-app-layout__icon",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "chayns-app-layout__weight",
+		children: /* @__PURE__ */ jsx("i", { className: `far ${icon}` })
+	}), /* @__PURE__ */ jsx("span", {
+		className: "chayns-app-layout__weight chayns-app-layout__weight--active",
+		children: /* @__PURE__ */ jsx("i", { className: `fas ${icon}` })
+	})]
+});
+//#endregion
+export { AppLayoutIcon as default };
+
+//# sourceMappingURL=AppLayoutIcon.js.map

package/dist/components/app-layout/app-layout-icon/AppLayoutIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLayoutIcon.js","names":[],"sources":["../../../../src/components/app-layout/app-layout-icon/AppLayoutIcon.tsx"],"sourcesContent":["import type { AppLayoutItem } from '../AppLayout.types.js';\n\nconst AppLayoutIcon = ({ icon }: { icon: AppLayoutItem['icon'] }) => (\n  <span aria-hidden=\"true\" className=\"chayns-app-layout__icon\">\n    <span className=\"chayns-app-layout__weight\">\n      <i className={`far ${icon}`} />\n    </span>\n    <span className=\"chayns-app-layout__weight chayns-app-layout__weight--active\">\n      <i className={`fas ${icon}`} />\n    </span>\n  </span>\n);\n\nexport default AppLayoutIcon;\n"],"mappings":";;AAEA,IAAM,iBAAiB,EAAE,WACvB,qBAAC,QAAD;CAAM,eAAY;CAAO,WAAU;CAAnC,UAAA,CACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;CAC1B,CAAA,GACN,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;CAC1B,CAAA,CACF"}

package/dist/components/app-layout/navigation-items/NavigationItems.d.ts

@@ -0,0 +1,13 @@
+import type { AppLayoutItem } from '../AppLayout.types.js';
+interface NavigationItemsProps {
+    items: AppLayoutItem[];
+    activeItemId?: string | undefined;
+    collapsed: boolean;
+    onClick: (id: string) => void;
+    expandedIds: ReadonlySet<string>;
+    onToggle: (id: string) => void;
+    parentId?: string;
+}
+declare const NavigationItems: ({ activeItemId, collapsed, expandedIds, items, onClick, onToggle, parentId, }: NavigationItemsProps) => import("react").JSX.Element;
+export default NavigationItems;
+//# sourceMappingURL=NavigationItems.d.ts.map

package/dist/components/app-layout/navigation-items/NavigationItems.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItems.d.ts","sourceRoot":"","sources":["../../../../src/components/app-layout/navigation-items/NavigationItems.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,oBAAoB;IAC5B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,eAAe,GAAI,+EAQtB,oBAAoB,gCAoEtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/app-layout/navigation-items/NavigationItems.js

@@ -0,0 +1,54 @@
+import AppLayoutIcon from "../app-layout-icon/AppLayoutIcon.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/app-layout/navigation-items/NavigationItems.tsx
+var NavigationItems = ({ activeItemId, collapsed, expandedIds, items, onClick, onToggle, parentId }) => /* @__PURE__ */ jsx("ul", {
+	className: "chayns-app-layout__list",
+	children: items.map((item) => {
+		const hasChildren = Boolean(item.children?.length);
+		const isExpanded = expandedIds.has(item.id);
+		const panelId = `${parentId ?? "root"}-${item.id}-children`;
+		return /* @__PURE__ */ jsxs("li", {
+			className: `chayns-app-layout__item${activeItemId === item.id ? " chayns-app-layout__item--active" : ""}`,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "chayns-app-layout__row",
+				children: [/* @__PURE__ */ jsxs("button", {
+					"aria-current": activeItemId === item.id ? "page" : void 0,
+					"aria-label": item.name,
+					className: "chayns-app-layout__action",
+					onClick: () => onClick(item.id),
+					type: "button",
+					children: [/* @__PURE__ */ jsx(AppLayoutIcon, { icon: item.icon }), /* @__PURE__ */ jsx("span", {
+						className: `chayns-app-layout__label${collapsed ? " chayns-app-layout__label--hidden" : ""}`,
+						children: item.name
+					})]
+				}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("button", {
+					"aria-controls": panelId,
+					"aria-expanded": isExpanded,
+					"aria-label": item.name,
+					className: "chayns-app-layout__disclosure",
+					onClick: () => onToggle(item.id),
+					type: "button",
+					children: /* @__PURE__ */ jsx(AppLayoutIcon, { icon: "fa-chevron-down" })
+				}) : null]
+			}), hasChildren && !collapsed ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": !isExpanded,
+				className: `chayns-app-layout__children${isExpanded ? " chayns-app-layout__children--open" : ""}`,
+				id: panelId,
+				inert: !isExpanded,
+				children: /* @__PURE__ */ jsx(NavigationItems, {
+					activeItemId,
+					collapsed,
+					expandedIds,
+					items: item.children ?? [],
+					onClick,
+					onToggle,
+					parentId: item.id
+				})
+			}) : null]
+		}, item.id);
+	})
+});
+//#endregion
+export { NavigationItems as default };
+
+//# sourceMappingURL=NavigationItems.js.map

package/dist/components/app-layout/navigation-items/NavigationItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItems.js","names":[],"sources":["../../../../src/components/app-layout/navigation-items/NavigationItems.tsx"],"sourcesContent":["import AppLayoutIcon from '../app-layout-icon/AppLayoutIcon.js';\nimport type { AppLayoutItem } from '../AppLayout.types.js';\n\ninterface NavigationItemsProps {\n  items: AppLayoutItem[];\n  activeItemId?: string | undefined;\n  collapsed: boolean;\n  onClick: (id: string) => void;\n  expandedIds: ReadonlySet<string>;\n  onToggle: (id: string) => void;\n  parentId?: string;\n}\n\nconst NavigationItems = ({\n  activeItemId,\n  collapsed,\n  expandedIds,\n  items,\n  onClick,\n  onToggle,\n  parentId,\n}: NavigationItemsProps) => (\n  <ul className=\"chayns-app-layout__list\">\n    {items.map((item) => {\n      const hasChildren = Boolean(item.children?.length);\n      const isExpanded = expandedIds.has(item.id);\n      const panelId = `${parentId ?? 'root'}-${item.id}-children`;\n\n      return (\n        <li\n          className={`chayns-app-layout__item${\n            activeItemId === item.id ? ' chayns-app-layout__item--active' : ''\n          }`}\n          key={item.id}\n        >\n          <div className=\"chayns-app-layout__row\">\n            <button\n              aria-current={activeItemId === item.id ? 'page' : undefined}\n              aria-label={item.name}\n              className=\"chayns-app-layout__action\"\n              onClick={() => onClick(item.id)}\n              type=\"button\"\n            >\n              <AppLayoutIcon icon={item.icon} />\n              <span\n                className={`chayns-app-layout__label${\n                  collapsed ? ' chayns-app-layout__label--hidden' : ''\n                }`}\n              >\n                {item.name}\n              </span>\n            </button>\n            {hasChildren && !collapsed ? (\n              <button\n                aria-controls={panelId}\n                aria-expanded={isExpanded}\n                aria-label={item.name}\n                className=\"chayns-app-layout__disclosure\"\n                onClick={() => onToggle(item.id)}\n                type=\"button\"\n              >\n                <AppLayoutIcon icon=\"fa-chevron-down\" />\n              </button>\n            ) : null}\n          </div>\n          {hasChildren && !collapsed ? (\n            <div\n              aria-hidden={!isExpanded}\n              className={`chayns-app-layout__children${\n                isExpanded ? ' chayns-app-layout__children--open' : ''\n              }`}\n              id={panelId}\n              inert={!isExpanded}\n            >\n              <NavigationItems\n                activeItemId={activeItemId}\n                collapsed={collapsed}\n                expandedIds={expandedIds}\n                items={item.children ?? []}\n                onClick={onClick}\n                onToggle={onToggle}\n                parentId={item.id}\n              />\n            </div>\n          ) : null}\n        </li>\n      );\n    })}\n  </ul>\n);\n\nexport default NavigationItems;\n"],"mappings":";;;AAaA,IAAM,mBAAmB,EACvB,cACA,WACA,aACA,OACA,SACA,UACA,eAEA,oBAAC,MAAD;CAAI,WAAU;CACX,UAAA,MAAM,KAAK,SAAS;EACnB,MAAM,cAAc,QAAQ,KAAK,UAAU,MAAM;EACjD,MAAM,aAAa,YAAY,IAAI,KAAK,EAAE;EAC1C,MAAM,UAAU,GAAG,YAAY,OAAO,GAAG,KAAK,GAAG;EAEjD,OACE,qBAAC,MAAD;GACE,WAAW,0BACT,iBAAiB,KAAK,KAAK,qCAAqC;GAFpE,UAAA,CAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,UAAD;KACE,gBAAc,iBAAiB,KAAK,KAAK,SAAS,KAAA;KAClD,cAAY,KAAK;KACjB,WAAU;KACV,eAAe,QAAQ,KAAK,EAAE;KAC9B,MAAK;KALP,UAAA,CAOE,oBAAC,eAAD,EAAe,MAAM,KAAK,KAAO,CAAA,GACjC,oBAAC,QAAD;MACE,WAAW,2BACT,YAAY,sCAAsC;MAGnD,UAAA,KAAK;KACF,CAAA,CACA;IACP,CAAA,GAAA,eAAe,CAAC,YACf,oBAAC,UAAD;KACE,iBAAe;KACf,iBAAe;KACf,cAAY,KAAK;KACjB,WAAU;KACV,eAAe,SAAS,KAAK,EAAE;KAC/B,MAAK;KAEL,UAAA,oBAAC,eAAD,EAAe,MAAK,kBAAmB,CAAA;IACjC,CAAA,IACN,IACD;GACJ,CAAA,GAAA,eAAe,CAAC,YACf,oBAAC,OAAD;IACE,eAAa,CAAC;IACd,WAAW,8BACT,aAAa,uCAAuC;IAEtD,IAAI;IACJ,OAAO,CAAC;IAER,UAAA,oBAAC,iBAAD;KACgB;KACH;KACE;KACb,OAAO,KAAK,YAAY,CAAC;KAChB;KACC;KACV,UAAU,KAAK;IAChB,CAAA;GACE,CAAA,IACH,IACF;EApDG,GAAA,KAAK,EAoDR;CAER,CAAC;AACC,CAAA"}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,3 @@
+import type { TabsProps } from './Tabs.types.js';
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tabs/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGjD,eAAO,MAAM,IAAI,mHA6Gf,CAAC"}

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,102 @@
+import TabsIcon from "./tabs-icon/TabsIcon.js";
+import { forwardRef, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/Tabs.tsx
+var Tabs = forwardRef(function Tabs({ addLabel, className, onAdd, tabs, ...rootProps }, ref) {
+	const baseId = useId();
+	const tabRefs = useRef([]);
+	const activeIndex = Math.max(0, tabs.findIndex((tab) => tab.isActive));
+	const rootClassName = ["chayns-tabs", className].filter(Boolean).join(" ");
+	const focusTab = (index) => {
+		const nextIndex = (index + tabs.length) % tabs.length;
+		tabs[nextIndex]?.onClick();
+		tabRefs.current[nextIndex]?.focus();
+	};
+	const handleKeyDown = (event, index) => {
+		if ((event.key === "Delete" || event.key === "Backspace") && tabs[index]?.onRemove) {
+			event.preventDefault();
+			tabs[index].onRemove();
+			return;
+		}
+		if (tabs.length === 0) return;
+		const nextIndex = event.key === "ArrowRight" || event.key === "ArrowDown" ? index + 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? index - 1 : event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : -1;
+		if (nextIndex === -1) return;
+		event.preventDefault();
+		focusTab(nextIndex);
+	};
+	const activeTab = tabs[activeIndex];
+	const activeTabId = activeTab ? `${baseId}-tab-${activeIndex}` : void 0;
+	const activePanelId = activeTab ? `${baseId}-panel-${activeIndex}` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: rootClassName,
+		ref,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "chayns-tabs__bar",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "chayns-tabs__list",
+				role: "tablist",
+				children: tabs.map((tab, index) => {
+					const tabId = `${baseId}-tab-${index}`;
+					const panelId = `${baseId}-panel-${index}`;
+					const isSelected = index === activeIndex;
+					return /* @__PURE__ */ jsx("div", {
+						className: "chayns-tabs__item",
+						role: "presentation",
+						children: /* @__PURE__ */ jsxs("button", {
+							"aria-controls": isSelected ? panelId : void 0,
+							"aria-selected": isSelected,
+							className: `chayns-tabs__tab${isSelected ? " chayns-tabs__tab--active" : ""}`,
+							id: tabId,
+							onClick: (event) => {
+								if (event.target.closest("[data-tabs-remove]")) {
+									tab.onRemove?.();
+									return;
+								}
+								tab.onClick();
+							},
+							onKeyDown: (event) => handleKeyDown(event, index),
+							ref: (element) => {
+								tabRefs.current[index] = element;
+							},
+							role: "tab",
+							tabIndex: isSelected ? 0 : -1,
+							type: "button",
+							children: [
+								/* @__PURE__ */ jsx(TabsIcon, { icon: tab.icon }),
+								/* @__PURE__ */ jsx("span", {
+									className: "chayns-tabs__label",
+									children: tab.name
+								}),
+								tab.onRemove ? /* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "chayns-tabs__remove",
+									"data-tabs-remove": true,
+									children: /* @__PURE__ */ jsx(TabsIcon, { icon: "fa-xmark" })
+								}) : null
+							]
+						})
+					}, tabId);
+				})
+			}), onAdd && addLabel ? /* @__PURE__ */ jsx("button", {
+				"aria-label": addLabel,
+				className: "chayns-tabs__add",
+				onClick: onAdd,
+				type: "button",
+				children: /* @__PURE__ */ jsx(TabsIcon, { icon: "fa-plus" })
+			}) : null]
+		}), activeTab && activeTabId && activePanelId ? /* @__PURE__ */ jsx("div", {
+			"aria-labelledby": activeTabId,
+			className: "chayns-tabs__panel",
+			id: activePanelId,
+			role: "tabpanel",
+			tabIndex: 0,
+			children: activeTab.content
+		}) : null]
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { forwardRef, useId, useRef } from 'react';\nimport type { KeyboardEvent } from 'react';\n\nimport type { TabsProps } from './Tabs.types.js';\nimport TabsIcon from './tabs-icon/TabsIcon.js';\n\nexport const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(\n  { addLabel, className, onAdd, tabs, ...rootProps },\n  ref,\n) {\n  const baseId = useId();\n  const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const activeIndex = Math.max(\n    0,\n    tabs.findIndex((tab) => tab.isActive),\n  );\n  const rootClassName = ['chayns-tabs', className].filter(Boolean).join(' ');\n\n  const focusTab = (index: number) => {\n    const nextIndex = (index + tabs.length) % tabs.length;\n    tabs[nextIndex]?.onClick();\n    tabRefs.current[nextIndex]?.focus();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\n    if ((event.key === 'Delete' || event.key === 'Backspace') && tabs[index]?.onRemove) {\n      event.preventDefault();\n      tabs[index].onRemove();\n      return;\n    }\n\n    if (tabs.length === 0) return;\n\n    const nextIndex =\n      event.key === 'ArrowRight' || event.key === 'ArrowDown'\n        ? index + 1\n        : event.key === 'ArrowLeft' || event.key === 'ArrowUp'\n          ? index - 1\n          : event.key === 'Home'\n            ? 0\n            : event.key === 'End'\n              ? tabs.length - 1\n              : -1;\n\n    if (nextIndex === -1) return;\n    event.preventDefault();\n    focusTab(nextIndex);\n  };\n\n  const activeTab = tabs[activeIndex];\n  const activeTabId = activeTab ? `${baseId}-tab-${activeIndex}` : undefined;\n  const activePanelId = activeTab ? `${baseId}-panel-${activeIndex}` : undefined;\n\n  return (\n    <div {...rootProps} className={rootClassName} ref={ref}>\n      <div className=\"chayns-tabs__bar\">\n        <div className=\"chayns-tabs__list\" role=\"tablist\">\n          {tabs.map((tab, index) => {\n            const tabId = `${baseId}-tab-${index}`;\n            const panelId = `${baseId}-panel-${index}`;\n            const isSelected = index === activeIndex;\n\n            return (\n              <div className=\"chayns-tabs__item\" key={tabId} role=\"presentation\">\n                <button\n                  aria-controls={isSelected ? panelId : undefined}\n                  aria-selected={isSelected}\n                  className={`chayns-tabs__tab${isSelected ? ' chayns-tabs__tab--active' : ''}`}\n                  id={tabId}\n                  onClick={(event) => {\n                    if ((event.target as HTMLElement).closest('[data-tabs-remove]')) {\n                      tab.onRemove?.();\n                      return;\n                    }\n                    tab.onClick();\n                  }}\n                  onKeyDown={(event) => handleKeyDown(event, index)}\n                  ref={(element) => {\n                    tabRefs.current[index] = element;\n                  }}\n                  role=\"tab\"\n                  tabIndex={isSelected ? 0 : -1}\n                  type=\"button\"\n                >\n                  <TabsIcon icon={tab.icon} />\n                  <span className=\"chayns-tabs__label\">{tab.name}</span>\n                  {tab.onRemove ? (\n                    <span aria-hidden=\"true\" className=\"chayns-tabs__remove\" data-tabs-remove>\n                      <TabsIcon icon=\"fa-xmark\" />\n                    </span>\n                  ) : null}\n                </button>\n              </div>\n            );\n          })}\n        </div>\n        {onAdd && addLabel ? (\n          <button aria-label={addLabel} className=\"chayns-tabs__add\" onClick={onAdd} type=\"button\">\n            <TabsIcon icon=\"fa-plus\" />\n          </button>\n        ) : null}\n      </div>\n      {activeTab && activeTabId && activePanelId ? (\n        <div\n          aria-labelledby={activeTabId}\n          className=\"chayns-tabs__panel\"\n          id={activePanelId}\n          role=\"tabpanel\"\n          tabIndex={0}\n        >\n          {activeTab.content}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nTabs.displayName = 'Tabs';\n"],"mappings":";;;;AAMA,IAAa,OAAO,WAAsC,SAAS,KACjE,EAAE,UAAU,WAAW,OAAO,MAAM,GAAG,aACvC,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAAqC,CAAC,CAAC;CACvD,MAAM,cAAc,KAAK,IACvB,GACA,KAAK,WAAW,QAAQ,IAAI,QAAQ,CACtC;CACA,MAAM,gBAAgB,CAAC,eAAe,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAEzE,MAAM,YAAY,UAAkB;EAClC,MAAM,aAAa,QAAQ,KAAK,UAAU,KAAK;EAC/C,KAAK,UAAU,EAAE,QAAQ;EACzB,QAAQ,QAAQ,UAAU,EAAE,MAAM;CACpC;CAEA,MAAM,iBAAiB,OAAyC,UAAkB;EAChF,KAAK,MAAM,QAAQ,YAAY,MAAM,QAAQ,gBAAgB,KAAK,MAAM,EAAE,UAAU;GAClF,MAAM,eAAe;GACrB,KAAK,MAAM,CAAC,SAAS;GACrB;EACF;EAEA,IAAI,KAAK,WAAW,GAAG;EAEvB,MAAM,YACJ,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,cACxC,QAAQ,IACR,MAAM,QAAQ,eAAe,MAAM,QAAQ,YACzC,QAAQ,IACR,MAAM,QAAQ,SACZ,IACA,MAAM,QAAQ,QACZ,KAAK,SAAS,IACd;EAEZ,IAAI,cAAc,IAAI;EACtB,MAAM,eAAe;EACrB,SAAS,SAAS;CACpB;CAEA,MAAM,YAAY,KAAK;CACvB,MAAM,cAAc,YAAY,GAAG,OAAO,OAAO,gBAAgB,KAAA;CACjE,MAAM,gBAAgB,YAAY,GAAG,OAAO,SAAS,gBAAgB,KAAA;CAErE,OACE,qBAAC,OAAD;EAAK,GAAI;EAAW,WAAW;EAAoB;EAAnD,UAAA,CACE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,OAAD;IAAK,WAAU;IAAoB,MAAK;IACrC,UAAA,KAAK,KAAK,KAAK,UAAU;KACxB,MAAM,QAAQ,GAAG,OAAO,OAAO;KAC/B,MAAM,UAAU,GAAG,OAAO,SAAS;KACnC,MAAM,aAAa,UAAU;KAE7B,OACE,oBAAC,OAAD;MAAK,WAAU;MAAgC,MAAK;MAClD,UAAA,qBAAC,UAAD;OACE,iBAAe,aAAa,UAAU,KAAA;OACtC,iBAAe;OACf,WAAW,mBAAmB,aAAa,8BAA8B;OACzE,IAAI;OACJ,UAAU,UAAU;QAClB,IAAK,MAAM,OAAuB,QAAQ,oBAAoB,GAAG;SAC/D,IAAI,WAAW;SACf;QACF;QACA,IAAI,QAAQ;OACd;OACA,YAAY,UAAU,cAAc,OAAO,KAAK;OAChD,MAAM,YAAY;QAChB,QAAQ,QAAQ,SAAS;OAC3B;OACA,MAAK;OACL,UAAU,aAAa,IAAI;OAC3B,MAAK;OAlBP,UAAA;QAoBE,oBAAC,UAAD,EAAU,MAAM,IAAI,KAAO,CAAA;QAC3B,oBAAC,QAAD;SAAM,WAAU;SAAsB,UAAA,IAAI;QAAW,CAAA;QACpD,IAAI,WACH,oBAAC,QAAD;SAAM,eAAY;SAAO,WAAU;SAAsB,oBAAA;SACvD,UAAA,oBAAC,UAAD,EAAU,MAAK,WAAY,CAAA;QACvB,CAAA,IACJ;OACE;;KACL,GA7BmC,KA6BnC;IAET,CAAC;GACE,CAAA,GACJ,SAAS,WACR,oBAAC,UAAD;IAAQ,cAAY;IAAU,WAAU;IAAmB,SAAS;IAAO,MAAK;IAC9E,UAAA,oBAAC,UAAD,EAAU,MAAK,UAAW,CAAA;GACpB,CAAA,IACN,IACD;EACJ,CAAA,GAAA,aAAa,eAAe,gBAC3B,oBAAC,OAAD;GACE,mBAAiB;GACjB,WAAU;GACV,IAAI;GACJ,MAAK;GACL,UAAU;GAET,UAAA,UAAU;EACR,CAAA,IACH,IACD;;AAET,CAAC;AAED,KAAK,cAAc"}

package/dist/components/tabs/Tabs.types.d.ts

@@ -0,0 +1,69 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * @description A FontAwesome Classic icon name in its Regular form, used for
+ * tab entry icons.
+ */
+export type TabsIcon = `fa-${string}`;
+/**
+ * @description A single tab: its trigger button and the peer content it
+ * represents. Selection is externally owned — `Tabs` never infers or
+ * reconciles `isActive` itself; the consumer must update it on `onClick`.
+ */
+export interface TabsEntry {
+    /**
+     * @description FontAwesome Classic icon name shown on the tab trigger.
+     */
+    icon: TabsIcon;
+    /**
+     * @description Visible, already-resolved localized tab label.
+     */
+    name: string;
+    /**
+     * @description Whether this entry is the currently selected tab. Exactly
+     * one entry in a `tabs` array is expected to be active at a time; the
+     * consumer, not `Tabs`, is responsible for keeping this consistent.
+     */
+    isActive: boolean;
+    /**
+     * @description Called when this tab's trigger is activated. The consumer
+     * is expected to update `isActive` in response.
+     */
+    onClick: () => void;
+    /**
+     * @description Optional remove handler. When supplied, a remove affordance
+     * is rendered as part of the same native tab button, and `Delete` or
+     * `Backspace` triggers it while the tab is focused.
+     */
+    onRemove?: () => void;
+    /**
+     * @description Peer panel content for this tab. Only the active entry's
+     * `content` is rendered.
+     */
+    content: ReactNode;
+}
+/**
+ * @description Props for a tabbed layout pattern that switches between peer
+ * content regions. `Tabs` owns no routing, persistence, business state or
+ * translation; selection state lives entirely in `tabs[].isActive`. Forwards
+ * remaining native `div` props (except `children`, which `Tabs` derives from
+ * `tabs`), `className` and `ref`.
+ */
+export interface TabsProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * @description Ordered tab entries; exactly one should have `isActive`
+     * `true`.
+     */
+    tabs: TabsEntry[];
+    /**
+     * @description Optional handler that renders an add-tab trigger when
+     * supplied together with `addLabel`.
+     */
+    onAdd?: () => void;
+    /**
+     * @description Localized accessible name for the add-tab trigger. Required
+     * for the add trigger to render; supplying `onAdd` without `addLabel` does
+     * not render the control.
+     */
+    addLabel?: string;
+}
+//# sourceMappingURL=Tabs.types.d.ts.map

package/dist/components/tabs/Tabs.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.types.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/Tabs.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,EAAE,CAAC;AAEtC;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,QAAQ,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/E;;;OAGG;IACH,IAAI,EAAE,SAAS,EAAE,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/components/tabs/tabs-icon/TabsIcon.d.ts

@@ -0,0 +1,6 @@
+import type { TabsEntry } from '../Tabs.types.js';
+declare const TabsIcon: ({ icon }: {
+    icon: TabsEntry["icon"];
+}) => import("react").JSX.Element;
+export default TabsIcon;
+//# sourceMappingURL=TabsIcon.d.ts.map

package/dist/components/tabs/tabs-icon/TabsIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/tabs/tabs-icon/TabsIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,QAAA,MAAM,QAAQ,GAAI,UAAU;IAAE,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;CAAE,gCAItD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/tabs/tabs-icon/TabsIcon.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tabs/tabs-icon/TabsIcon.tsx
+var TabsIcon = ({ icon }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: "chayns-tabs__icon",
+	children: /* @__PURE__ */ jsx("i", { className: `far ${icon}` })
+});
+//#endregion
+export { TabsIcon as default };
+
+//# sourceMappingURL=TabsIcon.js.map

package/dist/components/tabs/tabs-icon/TabsIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsIcon.js","names":[],"sources":["../../../../src/components/tabs/tabs-icon/TabsIcon.tsx"],"sourcesContent":["import type { TabsEntry } from '../Tabs.types.js';\n\nconst TabsIcon = ({ icon }: { icon: TabsEntry['icon'] }) => (\n  <span aria-hidden=\"true\" className=\"chayns-tabs__icon\">\n    <i className={`far ${icon}`} />\n  </span>\n);\n\nexport default TabsIcon;\n"],"mappings":";;AAEA,IAAM,YAAY,EAAE,WAClB,oBAAC,QAAD;CAAM,eAAY;CAAO,WAAU;CACjC,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;AAC1B,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { AppLayout } from './components/app-layout/AppLayout.js';
+export type { AppLayoutIcon, AppLayoutItem, AppLayoutProps, } from './components/app-layout/AppLayout.types.js';
+export { Tabs } from './components/tabs/Tabs.js';
+export type { TabsEntry, TabsIcon, TabsProps } from './components/tabs/Tabs.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sCAAsC,CAAC;AACjE,YAAY,EACV,aAAa,EACb,aAAa,EACb,cAAc,GACf,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AACjD,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+import { AppLayout } from "./components/app-layout/AppLayout.js";
+import { Tabs } from "./components/tabs/Tabs.js";
+export { AppLayout, Tabs };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@chayns-ui/layout",
+  "version": "0.1.0",
+  "description": "Accessible application layout components for chayns UI",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TobitSoftware/chayns-ui.git",
+    "directory": "packages/layout"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./app-layout.css": "./dist/app-layout.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "@chayns-ui/core": ">=0.2.1",
+    "react": ">=18 <20"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "vite build && node ../../tooling/copy-layout-css.mjs && tsc -b tsconfig.build.json --force",
+    "clean": "node ../../tooling/clean-package.mjs layout",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}