adjacent-ui 0.1.0

package/dist/navigation/tabs/tabs.css

@@ -0,0 +1,390 @@
+@layer components {
+/*
+ * The navigation is fixed, so it is out of flow and the page has to reserve its
+ * own room for it. These publish how much, so nothing has to hardcode a height
+ * the framework is free to change. Scoped with :has(), so a page rendering no
+ * navigation reserves nothing.
+ */
+:root {
+  --adj-navigation-inset-block-end: 0px;
+  --adj-navigation-inset-inline-start: 0px;
+}
+
+:root:has(.adj-navigation-tabs) {
+  --adj-navigation-inset-block-end: calc(
+    var(--adj-navigation-bar-height, 4rem) + env(safe-area-inset-bottom, 0)
+  );
+}
+
+@media (min-width: 48rem) {
+  /* A rail takes width from the side rather than height from the bottom. */
+  :root:has(.adj-navigation-tabs) {
+    --adj-navigation-inset-block-end: 0px;
+    --adj-navigation-inset-inline-start: calc(
+      var(--adj-navigation-rail-width, 6rem) + env(safe-area-inset-left, 0)
+    );
+  }
+
+  :root:has(.adj-navigation-tabs[data-rail-expanded="true"]) {
+    --adj-navigation-inset-inline-start: calc(
+      clamp(
+        13.75rem,
+        var(--adj-navigation-expanded-rail-width, 14rem),
+        22.5rem
+      ) +
+      env(safe-area-inset-left, 0)
+    );
+  }
+}
+
+.adj-navigation-tabs {
+  position: fixed;
+  z-index: var(--adj-navigation-z-index, 40);
+  inset-inline: 0;
+  inset-block-end: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  min-height: var(--adj-navigation-bar-height, 4rem);
+  padding-block-end: env(safe-area-inset-bottom, 0);
+  background: var(--adj-navigation-background, var(--background, Canvas));
+  transition: width 220ms cubic-bezier(0.2, 0, 0, 1), padding 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.adj-navigation-tab {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  min-width: 4rem;
+  max-width: 10.5rem;
+  height: 4rem;
+  padding: 0.375rem 0.75rem;
+  color: var(--adj-navigation-color, color-mix(in srgb, currentColor 64%, transparent));
+  font: inherit;
+  text-decoration: none;
+  appearance: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  transition: background-color 160ms ease;
+}
+
+.adj-navigation-tab[data-active="true"] {
+  color: var(--adj-navigation-active-color, currentColor);
+}
+
+.adj-navigation-tab:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}
+
+.adj-navigation-tab__icon {
+  position: relative;
+  display: grid;
+  min-height: 1.5rem;
+  place-items: center;
+}
+
+.adj-navigation-tab__indicator {
+  display: grid;
+  width: 3.5rem;
+  height: 2rem;
+  flex: none;
+  background: transparent;
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  place-items: center;
+  transition: background-color 160ms ease;
+}
+
+.adj-navigation-tab[data-active="true"] .adj-navigation-tab__indicator {
+  color: var(--adj-navigation-indicator-color, currentColor);
+  background: var(--adj-navigation-indicator-background, color-mix(in srgb, currentColor 14%, transparent));
+  transition: width 220ms cubic-bezier(0.2, 0, 0, 1), height 220ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms ease;
+}
+
+.adj-navigation-tab__badge {
+  position: absolute;
+  inset-block-start: -0.375rem;
+  inset-inline-start: calc(100% - 0.25rem);
+  display: grid;
+  min-width: 1rem;
+  height: 1rem;
+  padding-inline: 0.25rem;
+  color: var(--adj-navigation-badge-color, var(--background, Canvas));
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1;
+  background: var(--adj-navigation-badge-background, var(--foreground, CanvasText));
+  border-radius: var(--radius-lg, var(--radius, 0.625rem));
+  place-items: center;
+}
+
+.adj-navigation-tab__label {
+  max-width: 12rem;
+  overflow: hidden;
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: max-width 220ms cubic-bezier(0.2, 0, 0, 1), opacity 160ms ease;
+}
+
+.adj-navigation-tab__label[data-visible="false"] {
+  width: 0;
+  height: 0;
+  max-width: 0;
+  opacity: 0;
+}
+
+.adj-navigation-tabs__toggle {
+  display: none;
+}
+
+@media (min-width: 48rem) {
+  .adj-navigation-tabs {
+    /*
+     * The surface runs the full height, so the corner beside the header is the
+     * rail rather than a hole in it. The tabs still begin below the header's
+     * height, which is what lines the first one up with the content beside it,
+     * and leaves room for the toggle: that inset is padding now, not an offset
+     * the background starts after.
+     */
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline: 0 auto;
+    flex-direction: column;
+    gap: 0.25rem;
+    justify-content: flex-start;
+    width: calc(var(--adj-navigation-rail-width, 6rem) + env(safe-area-inset-left, 0));
+    height: auto;
+    min-height: 0;
+    /*
+     * The tabs start below the header's action row, which is the same height
+     * whichever variant it is: a large header grows its title underneath, and
+     * the rail lining up with that title rather than the row above it would put
+     * the first tab a long way down. The safe area is added here, so the rail
+     * still clears a display cutout when there is no header at all.
+     */
+    padding-block: calc(
+        env(safe-area-inset-top, 0px) +
+        var(
+          --adj-navigation-rail-offset,
+          calc(var(--adj-header-bar-block-size, 0px) + 2.75rem)
+        )
+      )
+      env(safe-area-inset-bottom, 0);
+    padding-inline: env(safe-area-inset-left, 0) 0;
+
+    /*
+     * A rail is a sidebar, so it reads shadcn's sidebar tokens when the
+     * application defines them and falls back to the bar's own colours when it
+     * does not. The bottom bar is left alone: it is chrome along the edge of
+     * the content, not a surface beside it.
+     */
+    background: var(
+      --adj-navigation-rail-background,
+      var(--sidebar, var(--adj-navigation-background, var(--background, Canvas)))
+    );
+    /* Tabs and indicators derive from currentColor, so this carries them all. */
+    color: var(
+      --adj-navigation-rail-color,
+      var(--sidebar-foreground, var(--foreground, CanvasText))
+    );
+  }
+
+  .adj-navigation-tabs .adj-navigation-tab[data-active="true"] .adj-navigation-tab__indicator {
+    color: var(
+      --adj-navigation-rail-indicator-color,
+      var(
+        --sidebar-accent-foreground,
+        var(--adj-navigation-indicator-color, currentColor)
+      )
+    );
+    background: var(
+      --adj-navigation-rail-indicator-background,
+      var(
+        --sidebar-accent,
+        var(
+          --adj-navigation-indicator-background,
+          color-mix(in srgb, currentColor 14%, transparent)
+        )
+      )
+    );
+  }
+
+  .adj-navigation-tab {
+    width: var(--adj-navigation-rail-width, 6rem);
+    min-width: var(--adj-navigation-rail-width, 6rem);
+    max-width: var(--adj-navigation-rail-width, 6rem);
+    height: 4rem;
+    flex: 0 0 4rem;
+    padding-block: 0.375rem 0.25rem;
+  }
+
+  .adj-navigation-tabs__toggle {
+    position: fixed;
+    inset-block-start: calc(env(safe-area-inset-top, 0) + 0.5rem);
+    inset-inline-start: calc(
+      env(safe-area-inset-left, 0) +
+      var(--adj-navigation-toggle-inset, 1.5rem)
+    );
+    display: grid;
+    width: 3rem;
+    height: 3rem;
+    flex: 0 0 3rem;
+    margin: 0;
+    color: currentColor;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-lg, var(--radius, 0.625rem));
+    cursor: pointer;
+    place-items: center;
+    transition: inset-inline-start 220ms cubic-bezier(0.2, 0, 0, 1), background-color 160ms ease;
+  }
+
+  .adj-navigation-tabs__toggle:hover {
+    background: color-mix(in srgb, currentColor 8%, transparent);
+  }
+
+  .adj-navigation-tabs__toggle:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: -2px;
+  }
+
+  .adj-navigation-tabs__toggle-inner {
+    position: relative;
+    display: block;
+    width: 1.375rem;
+    height: 0.875rem;
+  }
+
+  .adj-navigation-tabs__toggle-inner > span {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: calc(50% - 1px);
+    display: block;
+    height: 2px;
+    background: currentColor;
+    border-radius: var(--radius-full, 9999px);
+    transition: transform 200ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 200ms ease;
+  }
+
+  .adj-navigation-tabs__toggle-inner > span:first-child {
+    transform: translateY(-0.375rem);
+  }
+
+  .adj-navigation-tabs__toggle-inner > span:last-child {
+    transform: translateY(0.375rem);
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tabs__toggle-inner > span:first-child {
+    transform: rotate(45deg);
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tabs__toggle-inner > span:nth-child(2) {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tabs__toggle-inner > span:last-child {
+    transform: rotate(-45deg);
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] {
+    width: calc(
+      clamp(
+        13.75rem,
+        var(--adj-navigation-expanded-rail-width, 14rem),
+        22.5rem
+      ) +
+      env(safe-area-inset-left, 0)
+    );
+    padding-inline-end: 0.75rem;
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tabs__toggle {
+    inset-inline-start: calc(
+      env(safe-area-inset-left, 0) +
+      var(
+        --adj-navigation-expanded-toggle-inset,
+        var(--adj-navigation-expanded-content-inset, 1.5rem)
+      )
+    );
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tab {
+    align-self: flex-start;
+    flex: 0 0 3.5rem;
+    flex-direction: row;
+    gap: 0.75rem;
+    justify-content: flex-start;
+    width: calc(100% - var(--adj-navigation-expanded-content-inset, 2.25rem));
+    min-width: 0;
+    max-width: none;
+    height: 3.5rem;
+    margin-inline-start: var(--adj-navigation-expanded-content-inset, 1.5rem);
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+  }
+
+  /* Expanded, the whole row is the highlight rather than the icon's pill. */
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tab[data-active="true"] {
+    background: var(
+      --adj-navigation-rail-indicator-background,
+      var(
+        --sidebar-accent,
+        var(
+          --adj-navigation-indicator-background,
+          color-mix(in srgb, currentColor 14%, transparent)
+        )
+      )
+    );
+    color: var(
+      --adj-navigation-rail-indicator-color,
+      var(
+        --sidebar-accent-foreground,
+        var(--adj-navigation-active-color, currentColor)
+      )
+    );
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tab__indicator {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tab[data-active="true"] .adj-navigation-tab__indicator {
+    background: transparent;
+  }
+
+  .adj-navigation-tabs[data-rail-expanded="true"] .adj-navigation-tab__label {
+    width: auto;
+    height: auto;
+    max-width: 12rem;
+    font-size: 0.875rem;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adj-navigation-tabs,
+  .adj-navigation-tabs__toggle,
+  .adj-navigation-tab,
+  .adj-navigation-tab__indicator,
+  .adj-navigation-tab__label {
+    transition: none;
+  }
+}
+
+.adj-navigation-tabs[data-rail-transitioning="true"] .adj-navigation-tab[data-active="true"],
+.adj-navigation-tabs[data-rail-transitioning="true"] .adj-navigation-tab[data-active="true"] .adj-navigation-tab__indicator {
+  background: transparent;
+  transition: none;
+}
+}

package/dist/navigation/tabs/tabs.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import "./tabs.css";
+export type NavigationLabelVisibility = "auto" | "labeled" | "selected" | "unlabeled";
+export interface NavigationTabsProps extends HTMLAttributes<HTMLElement> {
+    readonly children: ReactNode;
+    readonly defaultRailExpanded?: boolean;
+    readonly labelVisibility?: NavigationLabelVisibility;
+    readonly onRailExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Renders the toggle that widens the rail. On by default, because a rail
+     * with no way to widen it shows icons and nothing else. The toggle only
+     * exists from 768px: below that the navigation is a bottom bar with nothing
+     * to collapse.
+     */
+    readonly railCollapsible?: boolean;
+    readonly railExpanded?: boolean;
+}
+export declare function Tabs({ children, className, defaultRailExpanded, labelVisibility, onRailExpandedChange, railCollapsible, railExpanded, ...props }: NavigationTabsProps): import("react").JSX.Element;
+interface NavigationTabRootProps {
+    readonly "aria-current"?: "page";
+    readonly children?: ReactNode;
+    readonly className?: string;
+    readonly "data-active"?: "false" | "true";
+}
+export interface NavigationTabProps {
+    readonly active?: boolean;
+    readonly activeIcon?: ReactNode;
+    readonly badge?: ReactNode;
+    readonly className?: string;
+    readonly icon: ReactNode;
+    readonly label: ReactNode;
+    readonly render?: ReactElement<NavigationTabRootProps>;
+    readonly showLabel?: boolean;
+}
+export declare function Tab({ active, activeIcon, badge, className, icon, label, render, showLabel, }: NavigationTabProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/navigation/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/navigation/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,yBAAyB,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;AAYtF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACtE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5D;;;;;OAKG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACnC,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,mBAA2B,EAC3B,eAAwB,EACxB,oBAAoB,EACpB,eAAsB,EACtB,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,mBAAmB,+BA4ErB;AAED,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;IACjC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC3C;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,YAAY,CAAC,sBAAsB,CAAC,CAAC;IACvD,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,wBAAgB,GAAG,CAAC,EAClB,MAAc,EACd,UAAU,EACV,KAAK,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EACL,MAAM,EACN,SAAS,GACV,EAAE,kBAAkB,+BAuCpB"}

package/dist/navigation/tabs/tabs.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, Children, createContext, useContext, useEffect, useRef, useState, } from "react";
+import "./tabs.css";
+const NavigationContext = createContext({
+    count: 0,
+    labelVisibility: "auto",
+});
+export function Tabs({ children, className, defaultRailExpanded = false, labelVisibility = "auto", onRailExpandedChange, railCollapsible = true, railExpanded, ...props }) {
+    const classes = ["adj-navigation-tabs", className].filter(Boolean).join(" ");
+    const count = Children.count(children);
+    const [internalRailExpanded, setInternalRailExpanded] = useState(defaultRailExpanded);
+    const [railTransitioning, setRailTransitioning] = useState(false);
+    const transitionFrame = useRef(undefined);
+    const transitionTimeout = useRef(undefined);
+    const expanded = railExpanded ?? internalRailExpanded;
+    useEffect(() => {
+        return () => {
+            if (transitionFrame.current !== undefined) {
+                cancelAnimationFrame(transitionFrame.current);
+            }
+            if (transitionTimeout.current !== undefined) {
+                clearTimeout(transitionTimeout.current);
+            }
+        };
+    }, []);
+    function toggleRail() {
+        const nextExpanded = !expanded;
+        const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        const applyExpandedState = () => {
+            if (railExpanded === undefined)
+                setInternalRailExpanded(nextExpanded);
+            onRailExpandedChange?.(nextExpanded);
+        };
+        if (transitionFrame.current !== undefined) {
+            cancelAnimationFrame(transitionFrame.current);
+        }
+        if (transitionTimeout.current !== undefined) {
+            clearTimeout(transitionTimeout.current);
+        }
+        setRailTransitioning(true);
+        if (reducedMotion) {
+            applyExpandedState();
+            setRailTransitioning(false);
+            return;
+        }
+        transitionFrame.current = requestAnimationFrame(() => {
+            applyExpandedState();
+            transitionTimeout.current = setTimeout(() => setRailTransitioning(false), 220);
+        });
+    }
+    return (_jsx(NavigationContext, { value: { count, labelVisibility }, children: _jsxs("nav", { className: classes, "data-rail-expanded": expanded ? "true" : "false", "data-rail-transitioning": railTransitioning ? "true" : "false", "data-tab-count": count, ...props, children: [railCollapsible ? (_jsx("button", { "aria-expanded": expanded, "aria-label": expanded ? "Collapse navigation" : "Expand navigation", className: "adj-navigation-tabs__toggle", onClick: toggleRail, type: "button", children: _jsxs("span", { className: "adj-navigation-tabs__toggle-inner", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) })) : null, children] }) }));
+}
+export function Tab({ active = false, activeIcon, badge, className, icon, label, render, showLabel, }) {
+    const { count, labelVisibility } = useContext(NavigationContext);
+    const automaticLabelVisible = count <= 3 || active;
+    const labelVisible = showLabel ??
+        (labelVisibility === "labeled" ||
+            (labelVisibility === "selected" && active) ||
+            (labelVisibility === "auto" && automaticLabelVisible));
+    const classes = ["adj-navigation-tab", className].filter(Boolean).join(" ");
+    const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "adj-navigation-tab__icon", children: [_jsx("span", { className: "adj-navigation-tab__indicator", children: active && activeIcon !== undefined ? activeIcon : icon }), badge !== undefined ? (_jsx("span", { className: "adj-navigation-tab__badge", children: badge })) : null] }), _jsx("span", { className: "adj-navigation-tab__label", "data-visible": labelVisible ? "true" : "false", children: label })] }));
+    const rootProps = {
+        "aria-current": active ? "page" : undefined,
+        children: content,
+        className: classes,
+        "data-active": active ? "true" : "false",
+    };
+    if (render) {
+        return cloneElement(render, rootProps);
+    }
+    return _jsx("button", { type: "button", ...rootProps });
+}
+//# sourceMappingURL=tabs.js.map

package/dist/navigation/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/navigation/tabs/tabs.tsx"],"names":[],"mappings":"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"}

package/dist/page/page.css

@@ -0,0 +1,15 @@
+@layer components {
+    .adj-page {
+        container-type: inline-size;
+        min-width: 0;
+        min-height: 100%;
+    }
+
+    .adj-page-content {
+        box-sizing: border-box;
+        width: 100%;
+        min-width: 0;
+        max-width: var(--adj-page-content-width, none);
+        margin-inline: auto;
+    }
+}

package/dist/page/page.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import { type HeaderAlign } from "../navigation/header/header.js";
+import "./page.css";
+interface PageHeaderOptions {
+    /**
+     * Where a compact title sits. Left alone it is centred on a phone and
+     * aligned start on a larger display.
+     */
+    readonly headerAlign?: HeaderAlign;
+    readonly headerClassName?: string;
+    readonly headerLeft?: ReactNode;
+    readonly headerRight?: ReactNode;
+    readonly headerShown?: boolean;
+    readonly headerSticky?: boolean;
+    readonly title?: ReactNode;
+}
+export type PageOptions = PageHeaderOptions & ({
+    readonly headerVariant?: "compact";
+    readonly subtitle?: never;
+} | {
+    readonly headerVariant: "large";
+    readonly subtitle?: ReactNode;
+});
+export interface PageProps {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly contentClassName?: string;
+    readonly options?: PageOptions;
+}
+export declare function Page({ children, className, contentClassName, options, }: PageProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=page.d.ts.map

package/dist/page/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../src/page/page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAML,KAAK,WAAW,EACjB,MAAM,gCAAgC,CAAC;AAExC,OAAO,YAAY,CAAC;AAEpB,UAAU,iBAAiB;IACzB;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IACnC,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,CACI;IAAE,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACjE;IAAE,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CACrE,CAAC;AAEJ,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC;CAChC;AAED,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,OAAY,GACb,EAAE,SAAS,+BA6BX"}

package/dist/page/page.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Header, HeaderLeft, HeaderRight, HeaderSubtitle, HeaderTitle, } from "../navigation/header/header.js";
+import "./page.css";
+export function Page({ children, className, contentClassName, options = {}, }) {
+    const { headerClassName, headerAlign, headerLeft, headerRight, headerShown = true, headerSticky = false, headerVariant = "compact", subtitle, title, } = options;
+    const pageClassName = ["adj-page", className].filter(Boolean).join(" ");
+    const contentClasses = ["adj-page-content", contentClassName].filter(Boolean).join(" ");
+    return (_jsxs("section", { className: pageClassName, children: [headerShown ? (_jsxs(Header, { align: headerAlign, className: headerClassName, sticky: headerSticky, variant: headerVariant, children: [_jsx(HeaderLeft, { children: headerLeft }), _jsx(HeaderTitle, { children: title }), subtitle ? _jsx(HeaderSubtitle, { children: subtitle }) : null, _jsx(HeaderRight, { children: headerRight })] })) : null, _jsx("main", { className: contentClasses, children: children })] }));
+}
+//# sourceMappingURL=page.js.map

package/dist/page/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/page/page.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,GAEZ,MAAM,gCAAgC,CAAC;AAExC,OAAO,YAAY,CAAC;AA6BpB,MAAM,UAAU,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,OAAO,GAAG,EAAE,GACF;IACV,MAAM,EACJ,eAAe,EACf,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,KAAK,EACpB,aAAa,GAAG,SAAS,EACzB,QAAQ,EACR,KAAK,GACN,GAAG,OAAO,CAAC;IACZ,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxE,MAAM,cAAc,GAAG,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAExF,OAAO,CACL,mBAAS,SAAS,EAAE,aAAa,aAC9B,WAAW,CAAC,CAAC,CAAC,CACb,MAAC,MAAM,IAAC,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,aAClG,KAAC,UAAU,cAAE,UAAU,GAAc,EACrC,KAAC,WAAW,cAAE,KAAK,GAAe,EACjC,QAAQ,CAAC,CAAC,CAAC,KAAC,cAAc,cAAE,QAAQ,GAAkB,CAAC,CAAC,CAAC,IAAI,EAC9D,KAAC,WAAW,cAAE,WAAW,GAAe,IACjC,CACV,CAAC,CAAC,CAAC,IAAI,EAER,eAAM,SAAS,EAAE,cAAc,YAAG,QAAQ,GAAQ,IAC1C,CACX,CAAC;AACJ,CAAC"}