timvir 0.1.42

package/core/components/Page/docs/index.mdx

@@ -0,0 +1,37 @@
+import { Page, extendedWidth, fullWidth } from "timvir/core";
+
+# Page
+
+The `<Page>` component establishes the page layout (sidebar, center), and wraps the content in a `<MDXProvider>` so
+that the page MDX elements are correctly styled.
+
+The layout is currently based on CSS grid. The content can be placed into the following columns:
+
+ * A center column for the main content. It has a maximum width (up to 48rem) that is suited for regular text.
+ * An extended colum that is slightly wider than the main content (up to 72rem), giving a reasonable amount of space for text next to another block.
+   TODO: Document how to subdivide this space.
+ * A full-width column which spans across the whole page.
+
+Content placed into the full-width column extends to the very edges of the content area. Content placed into the center or extended column always has an appropriate amount of margin to the edges.
+
+All children are by default placed in the center column. In order to place an element into different columns, import one of the predefined class namess from the `timvir/page` package and apply them to your element:
+
+```
+import { extendedWidth, fullWidth } from "timvir/page"
+
+<div className={fullWidth}>
+  This element will span across all columns.
+</div>
+```
+
+<div style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
+  default
+</div>
+
+<div className={extendedWidth} style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
+  extendedWidth
+</div>
+
+<div className={fullWidth} style={{ marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", height: 40, background: "teal", color: "white" }}>
+  fullWidth
+</div>

package/core/components/Page/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Page } from "./Page";
+export * from "./types";

package/core/components/Page/internal/Section.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Node } from "../types";
+interface Props extends Node {
+    depth: number;
+}
+declare function Section(props: Props): JSX.Element;
+export default Section;

package/core/components/Page/internal/Sidebar.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Node } from "../types";
+interface Props {
+    toc: readonly Node[];
+    search?: {
+        open: () => void;
+        label?: React.ReactNode;
+        Component: React.ComponentType<{
+            open: boolean;
+            onClose: (ev: React.SyntheticEvent<HTMLElement>) => void;
+        }>;
+    };
+}
+declare function Sidebar(props: Props): JSX.Element;
+export default Sidebar;

package/core/components/Page/internal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Section } from "./Section";
+export { default as Sidebar } from "./Sidebar";

package/core/components/Page/samples/basic.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/core/components/Page/samples/layout.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Sample(): JSX.Element;

package/core/components/Page/types.d.ts

@@ -0,0 +1,5 @@
+export interface Node {
+    readonly label: string;
+    readonly path?: string;
+    readonly children?: readonly Node[];
+}

package/core/index.d.ts

@@ -0,0 +1,22 @@
+import { Source } from "wonka";
+import { Message } from "timvir/bus";
+export * from "./components/Footer";
+export * from "./components/Page";
+export { useContext } from "timvir/context";
+export { extendedWidth, fullWidth, grid } from "./layout";
+export { theme } from "timvir/core/theme";
+/**
+ * A mailbox is a wonka source which receives messages for one specific block (identified by its id).
+ */
+export declare function useMailbox(id?: string): Source<Message>;
+export declare function useBlock<P extends {
+    id?: string;
+}>(props: P): {
+    bus: import("timvir/bus").Bus;
+    mailbox: Source<Message>;
+    props: P & {
+        id?: P["id"] | undefined;
+    };
+    hasOverrides: boolean;
+    reset: () => void;
+};