adjacent-ui 0.1.0

package/dist/navigation/header/header.css

@@ -0,0 +1,182 @@
+@layer components {
+/*
+ * Two heights, because they answer different questions. Both are zero when
+ * there is no header, and neither includes the safe area except where it says.
+ */
+:root {
+  --adj-header-bar-block-size: 0px;
+  --adj-header-block-size: 0px;
+  --adj-header-inset-block-start: 0px;
+}
+
+:root:has(.adj-header) {
+  /*
+   * The row the actions sit in, which is the same height in either variant: a
+   * large header keeps this row and grows its title underneath. Chrome lining
+   * up with the header lines up with this, and adds the safe area itself.
+   */
+  --adj-header-bar-block-size: var(--adj-header-height, 4rem);
+  --adj-header-block-size: calc(
+    var(--adj-header-bar-block-size) + env(safe-area-inset-top, 0px)
+  );
+}
+
+:root:has(.adj-header[data-variant="large"]) {
+  /* Only the full height grows. The row above the title does not. */
+  --adj-header-block-size: calc(
+    var(--adj-header-large-height, 12rem) + env(safe-area-inset-top, 0px)
+  );
+}
+
+/*
+ * How much of that covers the viewport once scrolling starts, which is all of
+ * it while the header is sticky and none of it otherwise: a header in flow is
+ * scrolled past rather than scrolled under.
+ */
+:root:has(.adj-header[data-sticky="true"]) {
+  --adj-header-inset-block-start: var(--adj-header-block-size);
+}
+
+.adj-header {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: minmax(3rem, 1fr) minmax(0, auto) minmax(3rem, 1fr);
+  grid-template-areas: "left title right";
+  align-items: center;
+  /*
+   * The height is the title's room plus the safe area, not the two sharing it.
+   * Under border-box a bare min-height counts the padding, so a display cutout
+   * ate into the title's row until the content overflowed and forced it back.
+   */
+  min-height: calc(var(--adj-header-height, 4rem) + env(safe-area-inset-top, 0px));
+  padding-block: env(safe-area-inset-top, 0) 0;
+  padding-inline: max(0.5rem, env(safe-area-inset-left, 0)) max(0.5rem, env(safe-area-inset-right, 0));
+  width: 100%;
+  min-width: 0;
+}
+
+.adj-header[data-sticky="true"] {
+  position: sticky;
+  inset-block-start: 0;
+  background: var(--background, Canvas);
+  backdrop-filter: blur(var(--adj-header-backdrop-blur, 1rem));
+  z-index: var(--adj-header-z-index, 40);
+}
+
+.adj-header__left,
+.adj-header__right {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.adj-header__left {
+  grid-area: left;
+}
+
+.adj-header__right {
+  grid-area: right;
+  justify-content: flex-end;
+}
+
+.adj-header__title {
+  grid-area: title;
+  min-width: 0;
+  overflow: hidden;
+  margin: 0;
+  font-size: inherit;
+  font-weight: 500;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adj-header__subtitle {
+  grid-area: subtitle;
+  min-width: 0;
+  overflow: hidden;
+  margin: 0;
+  color: var(--adj-header-subtitle-color, color-mix(in srgb, currentColor 72%, transparent));
+  font-size: var(--adj-header-subtitle-size, 1rem);
+  font-weight: 500;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/*
+ * A compact header has one row, so a subtitle has nowhere to go. Hidden rather
+ * than squeezed in: `Page` refuses one at the type level, and this covers a
+ * `HeaderSubtitle` written into a compact header by hand.
+ */
+.adj-header[data-variant="compact"] .adj-header__subtitle {
+  display: none;
+}
+
+/*
+ * A centred title is the convention on a phone and reads as a mobile artefact
+ * on anything wider, so from 768px the title aligns to the start and takes the
+ * room the centred layout was reserving on either side of it.
+ */
+@media (min-width: 48rem) {
+  .adj-header[data-variant="compact"] {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+
+  .adj-header[data-variant="compact"] .adj-header__title {
+    text-align: start;
+  }
+}
+
+/* An explicit choice holds at every width. */
+.adj-header[data-variant="compact"][data-align="center"] {
+  grid-template-columns: minmax(3rem, 1fr) minmax(0, auto) minmax(3rem, 1fr);
+}
+
+.adj-header[data-variant="compact"][data-align="center"] .adj-header__title {
+  text-align: center;
+}
+
+.adj-header[data-variant="compact"][data-align="start"] {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.adj-header[data-variant="compact"][data-align="start"] .adj-header__title {
+  text-align: start;
+}
+
+.adj-header[data-variant="large"] {
+  grid-template-columns: minmax(3rem, 1fr) minmax(3rem, 1fr);
+  grid-template-areas:
+    "left right"
+    "title title"
+    "subtitle subtitle";
+  grid-template-rows: var(--adj-header-height, 4rem) auto auto;
+  gap: 0.25rem 1rem;
+  min-height: calc(var(--adj-header-large-height, 12rem) + env(safe-area-inset-top, 0px));
+  padding-block-end: var(--adj-header-large-padding-bottom, 1.5rem);
+}
+
+.adj-header[data-variant="large"] .adj-header__title {
+  align-self: end;
+  margin-block-start: 1rem;
+  padding-inline: 0.75rem;
+  font-size: var(--adj-header-large-title-size, clamp(2rem, 10cqi, 3.5rem));
+  font-weight: 400;
+  line-height: 1.08;
+  text-align: start;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.adj-header[data-variant="large"] .adj-header__subtitle {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--adj-header-subtitle-lines, 2);
+  line-clamp: var(--adj-header-subtitle-lines, 2);
+  align-self: start;
+  padding-inline: 0.75rem;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+}

package/dist/navigation/header/header.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+import "./header.css";
+export type HeaderVariant = "compact" | "large";
+export type HeaderAlign = "center" | "start";
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Where a compact title sits. Left alone it is centred on a phone and aligned
+     * to the start from 768px, which is the convention on each. Setting it holds
+     * at every width.
+     */
+    readonly align?: HeaderAlign;
+    readonly sticky?: boolean;
+    readonly variant?: HeaderVariant;
+}
+export declare function Header({ align, className, sticky, variant, ...props }: HeaderProps): import("react").JSX.Element;
+export declare function HeaderLeft({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function HeaderRight({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function HeaderTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): import("react").JSX.Element;
+export declare function HeaderSubtitle({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+//# sourceMappingURL=header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/navigation/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE7C,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC9D;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,SAAS,EACT,MAAc,EACd,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,WAAW,+BAWb;AAED,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGjF;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,cAAc,CAAC,+BAGlF;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,kBAAkB,CAAC,+BAGtF;AAED,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,oBAAoB,CAAC,+BAG3F"}

package/dist/navigation/header/header.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./header.css";
+export function Header({ align, className, sticky = false, variant = "compact", ...props }) {
+    const classes = ["adj-header", className].filter(Boolean).join(" ");
+    return (_jsx("header", { className: classes, "data-align": align, "data-sticky": sticky ? "true" : "false", "data-variant": variant, ...props }));
+}
+export function HeaderLeft({ className, ...props }) {
+    const classes = ["adj-header__left", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+export function HeaderRight({ className, ...props }) {
+    const classes = ["adj-header__right", className].filter(Boolean).join(" ");
+    return _jsx("div", { className: classes, ...props });
+}
+export function HeaderTitle({ className, ...props }) {
+    const classes = ["adj-header__title", className].filter(Boolean).join(" ");
+    return _jsx("h1", { className: classes, ...props });
+}
+export function HeaderSubtitle({ className, ...props }) {
+    const classes = ["adj-header__subtitle", className].filter(Boolean).join(" ");
+    return _jsx("p", { className: classes, ...props });
+}
+//# sourceMappingURL=header.js.map

package/dist/navigation/header/header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../../src/navigation/header/header.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AAgBtB,MAAM,UAAU,MAAM,CAAC,EACrB,KAAK,EACL,SAAS,EACT,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACI;IACZ,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpE,OAAO,CACL,iBACE,SAAS,EAAE,OAAO,gBACN,KAAK,iBACJ,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,kBACxB,OAAO,KACjB,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IAChF,MAAM,OAAO,GAAG,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1E,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkC;IACjF,MAAM,OAAO,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3E,OAAO,cAAK,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAChD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAsC;IACrF,MAAM,OAAO,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC3E,OAAO,aAAI,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAwC;IAC1F,MAAM,OAAO,GAAG,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9E,OAAO,YAAG,SAAS,EAAE,OAAO,KAAM,KAAK,GAAI,CAAC;AAC9C,CAAC"}

package/dist/navigation/index.d.ts

@@ -0,0 +1,5 @@
+export { Header, HeaderLeft, HeaderRight, HeaderSubtitle, HeaderTitle, type HeaderAlign, type HeaderProps, type HeaderVariant, } from "./header/header.js";
+export { NavigationLink, type NavigationLinkProps } from "./link/link.js";
+export { NavigationShell, type NavigationShellProps, } from "./shell/shell.js";
+export { Tab, Tabs, type NavigationLabelVisibility, type NavigationTabProps, type NavigationTabsProps, } from "./tabs/tabs.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,aAAa,GACnB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,GAC1B,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,GAAG,EACH,IAAI,EACJ,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,gBAAgB,CAAC"}

package/dist/navigation/index.js

@@ -0,0 +1,5 @@
+export { Header, HeaderLeft, HeaderRight, HeaderSubtitle, HeaderTitle, } from "./header/header.js";
+export { NavigationLink } from "./link/link.js";
+export { NavigationShell, } from "./shell/shell.js";
+export { Tab, Tabs, } from "./tabs/tabs.js";
+//# sourceMappingURL=index.js.map

package/dist/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,cAAc,EACd,WAAW,GAIZ,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,cAAc,EAA4B,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EACL,eAAe,GAEhB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,GAAG,EACH,IAAI,GAIL,MAAM,gBAAgB,CAAC"}

package/dist/navigation/link/link.d.ts

@@ -0,0 +1,5 @@
+import { type LinkProps as NextLinkProps } from "next/link";
+import type { AnchorHTMLAttributes } from "react";
+export type NavigationLinkProps = NextLinkProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof NextLinkProps>;
+export declare function NavigationLink({ prefetch, ...props }: NavigationLinkProps): import("react").JSX.Element;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/navigation/link/link.tsx"],"names":[],"mappings":"AAAA,OAAiB,EAAE,KAAK,SAAS,IAAI,aAAa,EAAE,MAAM,WAAW,CAAC;AACtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAC7C,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;AAErE,wBAAgB,cAAc,CAAC,EAAE,QAAe,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,+BAEhF"}

package/dist/navigation/link/link.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NextLink from "next/link";
+export function NavigationLink({ prefetch = true, ...props }) {
+    return _jsx(NextLink, { prefetch: prefetch, ...props });
+}
+//# sourceMappingURL=link.js.map

package/dist/navigation/link/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/navigation/link/link.tsx"],"names":[],"mappings":";AAAA,OAAO,QAA6C,MAAM,WAAW,CAAC;AAMtE,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,EAAuB;IAC/E,OAAO,KAAC,QAAQ,IAAC,QAAQ,EAAE,QAAQ,KAAM,KAAK,GAAI,CAAC;AACrD,CAAC"}

package/dist/navigation/shell/shell.css

@@ -0,0 +1,21 @@
+@layer components {
+.adj-navigation-shell {
+  box-sizing: border-box;
+  min-block-size: 100dvh;
+  min-inline-size: 0;
+  /* The rail takes width from the side, the bar height from the bottom. */
+  margin-inline-start: var(--adj-navigation-inset-inline-start, 0px);
+  inline-size: calc(100% - var(--adj-navigation-inset-inline-start, 0px));
+  padding-block-end: var(--adj-navigation-inset-block-end, 0px);
+  /* Matches the rail's own timing, so the two move together as it expands. */
+  transition:
+    margin-inline-start 220ms cubic-bezier(0.2, 0, 0, 1),
+    inline-size 220ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .adj-navigation-shell {
+    transition: none;
+  }
+}
+}

package/dist/navigation/shell/shell.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import "./shell.css";
+export interface NavigationShellProps extends HTMLAttributes<HTMLDivElement> {
+    readonly children: ReactNode;
+    /**
+     * Rendered last, so a fixed navigation paints over the page rather than under
+     * it. Passed in rather than rendered here because a navigation that reads
+     * per-visitor state can then stream in behind Suspense without holding the
+     * page back.
+     */
+    readonly navigation?: ReactNode;
+}
+/**
+ * Reserves the room a fixed navigation takes: height at the bottom while it is
+ * a bar, width at the side once it is a rail, widening when that rail expands.
+ * It reads the insets Adjacent publishes, so nothing here repeats a measurement
+ * the framework is free to change.
+ *
+ * It sets no colour of its own. Pass `className` for the surface.
+ */
+export declare function NavigationShell({ children, className, navigation, ...props }: NavigationShellProps): import("react").JSX.Element;
+//# sourceMappingURL=shell.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shell.d.ts","sourceRoot":"","sources":["../../../src/navigation/shell/shell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;CACjC;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,+BAStB"}

package/dist/navigation/shell/shell.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import "./shell.css";
+/**
+ * Reserves the room a fixed navigation takes: height at the bottom while it is
+ * a bar, width at the side once it is a rail, widening when that rail expands.
+ * It reads the insets Adjacent publishes, so nothing here repeats a measurement
+ * the framework is free to change.
+ *
+ * It sets no colour of its own. Pass `className` for the surface.
+ */
+export function NavigationShell({ children, className, navigation, ...props }) {
+    const classes = ["adj-navigation-shell", className].filter(Boolean).join(" ");
+    return (_jsxs("div", { className: classes, ...props, children: [children, navigation] }));
+}
+//# sourceMappingURL=shell.js.map

package/dist/navigation/shell/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","sourceRoot":"","sources":["../../../src/navigation/shell/shell.tsx"],"names":[],"mappings":";AAEA,OAAO,aAAa,CAAC;AAarB;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACa;IACrB,MAAM,OAAO,GAAG,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE9E,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,KAAM,KAAK,aAC/B,QAAQ,EACR,UAAU,IACP,CACP,CAAC;AACJ,CAAC"}