@mechane-ai/ui 0.0.0-stage → 0.2.1

package/dist/charts/index.d.ts

@@ -0,0 +1,2 @@
+export { Waterfall } from './waterfall.tsx';
+export type { WaterfallItem } from './waterfall.tsx';

package/dist/charts/waterfall.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+type WaterfallGeometry = {
+    readonly kind: 'interval';
+    readonly start: number;
+    readonly end: number;
+} | {
+    readonly kind: 'point';
+    readonly at: number;
+    readonly marker: 'filled' | 'hollow' | 'diamond';
+} | {
+    readonly kind: 'unavailable';
+};
+export type WaterfallItem = {
+    readonly id: string;
+    readonly label: string;
+    readonly detail: string;
+    readonly summary: string;
+    readonly tone: 'neutral' | 'positive' | 'negative';
+    readonly geometry: WaterfallGeometry;
+};
+type WaterfallProps = {
+    readonly items: ReadonlyArray<WaterfallItem>;
+    readonly start: number;
+    readonly end: number;
+    readonly label: string;
+    readonly rowLabel: string;
+    readonly summaryLabel: string;
+    readonly emptyLabel: string;
+    readonly selectedId: string | undefined;
+    readonly onSelect: (id: string) => void;
+    readonly formatOffset: (offset: number) => string;
+};
+export declare function Waterfall({ items, start, end, label, rowLabel, summaryLabel, emptyLabel, selectedId, onSelect, formatOffset, }: WaterfallProps): ReactNode;
+export {};

package/dist/charts.js

@@ -0,0 +1,198 @@
+import { N as e } from "./src-Czfi0YQa.js";
+import * as t from "@stylexjs/stylex";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { scaleLinear as i } from "@visx/scale";
+import { Bar as a } from "@visx/shape";
+// src/charts/waterfall.tsx
+var o = {
+	plot: {
+		k7Eaqz: "xeuugli",
+		kUOVxO: "xl4o6ss",
+		kBCFzs: "x1npkx4u xp7zxbh",
+		kbNqZ1: "x1ms6mhf xq5skvx",
+		$$css: !0
+	},
+	neutral: {
+		kMwMTN: "x1ns7tj1",
+		$$css: !0
+	},
+	positive: {
+		kMwMTN: "x1swbf3d",
+		$$css: !0
+	},
+	negative: {
+		kMwMTN: "x11ep619",
+		$$css: !0
+	}
+}, s = {
+	neutral: o.neutral,
+	positive: o.positive,
+	negative: o.negative
+}, c = [
+	0,
+	.5,
+	1
+], l = 100;
+function u({ items: a, start: u, end: p, label: m, rowLabel: h, summaryLabel: g, emptyLabel: _, selectedId: v, onSelect: y, formatOffset: b }) {
+	let x = p - u, S = i({
+		domain: [u, p],
+		range: [0, x === 0 ? 0 : l]
+	}), C = x > 0 ? c : [0];
+	return /* @__PURE__ */ r("div", {
+		role: "group",
+		"aria-label": m,
+		className: "xeuugli x1o2ymkw",
+		children: [
+			/* @__PURE__ */ r("div", {
+				className: "xrvj5dj x13sfnbj xj8mwme x6s0dn4 x1y871oy xq5c7ks xh8yej3 x9f619 xqin4a2 xu0aao5 x1ns7tj1 x1755wjq xso031l x1q0q8m5 xx6l4uz",
+				children: [
+					/* @__PURE__ */ n(e, {
+						variant: "caption",
+						tone: "muted",
+						children: h
+					}),
+					/* @__PURE__ */ n("div", {
+						className: "xeuugli xl4o6ss x1npkx4u xp7zxbh x1ms6mhf xq5skvx x78zum5 x1qughib x6s0dn4 x1755wjq x1df3ybb xss6m8b",
+						children: C.map((e) => /* @__PURE__ */ n("span", { children: b(x * e) }, e))
+					}),
+					/* @__PURE__ */ n("span", {
+						className: "xeuugli x1k3v4rp x1moszlt x1ms6mhf xp4054r xj0a0fe xss6m8b",
+						children: /* @__PURE__ */ n(e, {
+							variant: "caption",
+							tone: "muted",
+							children: g
+						})
+					})
+				]
+			}),
+			a.length === 0 && /* @__PURE__ */ n("p", {
+				className: "x1ghz6dp x805nir",
+				children: /* @__PURE__ */ n(e, {
+					tone: "muted",
+					children: _
+				})
+			}),
+			a.map((i) => {
+				let a = f({
+					geometry: i.geometry,
+					start: u,
+					formatOffset: b
+				});
+				return /* @__PURE__ */ r("button", {
+					type: "button",
+					"aria-pressed": v === i.id,
+					"aria-label": `${i.label} · ${i.detail} · ${i.summary} · ${a}`,
+					onClick: () => y(i.id),
+					...{
+						0: { className: "xrvj5dj x13sfnbj xj8mwme x6s0dn4 x1y871oy xq5c7ks xh8yej3 x9f619 xqin4a2 x1r1ej2n x1wiwyrm xc342km xso031l x1q0q8m5 xx6l4uz x1kb4e9r xn4qiis x1o2ymkw x1yc453h x1ypdohk x1p052by x1f1h9gf x9v5kkp xdv554w x1bqaal x1t1lzn6" },
+						1: { className: "xrvj5dj x13sfnbj xj8mwme x6s0dn4 x1y871oy xq5c7ks xh8yej3 x9f619 xqin4a2 x1r1ej2n x1wiwyrm xc342km xso031l x1q0q8m5 xx6l4uz xn4qiis x1o2ymkw x1yc453h x1ypdohk x1p052by x1f1h9gf x9v5kkp xdv554w x1bqaal x1t1lzn6 xco4m3t x1jmj9dw" }
+					}[v === i.id | 0],
+					children: [
+						/* @__PURE__ */ r("span", {
+							className: "xeuugli xrvj5dj x1tothx9",
+							children: [/* @__PURE__ */ n("span", {
+								className: "xk50ysn xj0a0fe",
+								children: /* @__PURE__ */ n(e, { children: i.label })
+							}), /* @__PURE__ */ n("span", {
+								title: i.detail,
+								className: "xb3r6kr xuxw1ft xlyipyv",
+								children: /* @__PURE__ */ n(e, {
+									variant: "caption",
+									tone: "muted",
+									children: i.detail
+								})
+							})]
+						}),
+						/* @__PURE__ */ n("span", {
+							title: a,
+							...t.props(o.plot, s[i.tone]),
+							children: i.geometry.kind === "unavailable" ? /* @__PURE__ */ n(e, {
+								variant: "caption",
+								tone: "muted",
+								children: a
+							}) : /* @__PURE__ */ r("svg", {
+								"aria-hidden": !0,
+								className: "x1lliihq xh8yej3 xmix8c7 x1rea2x4",
+								children: [C.map((e) => /* @__PURE__ */ n("line", {
+									x1: `${e * l}%`,
+									x2: `${e * l}%`,
+									y1: "0",
+									y2: "18",
+									className: "xi5i0ux"
+								}, e)), /* @__PURE__ */ n(d, {
+									geometry: i.geometry,
+									scale: S
+								})]
+							})
+						}),
+						/* @__PURE__ */ n("span", {
+							className: "xeuugli x1k3v4rp x1moszlt x1ms6mhf xp4054r xj0a0fe xss6m8b",
+							children: /* @__PURE__ */ n(e, {
+								variant: "caption",
+								tone: "muted",
+								children: i.summary
+							})
+						})
+					]
+				}, i.id);
+			})
+		]
+	});
+}
+function d({ geometry: e, scale: t }) {
+	switch (e.kind) {
+		case "unavailable": return null;
+		case "interval": {
+			let r = t(e.start), i = t(e.end) - r;
+			return i === 0 ? /* @__PURE__ */ n("circle", {
+				cx: `${r}%`,
+				cy: 9,
+				r: 3,
+				className: "x117rol3"
+			}) : /* @__PURE__ */ n(a, {
+				x: `${r}%`,
+				y: 6,
+				width: `${i}%`,
+				height: 6,
+				rx: 2,
+				className: "x117rol3"
+			});
+		}
+		case "point": {
+			let r = t(e.at);
+			switch (e.marker) {
+				case "filled": return /* @__PURE__ */ n("circle", {
+					cx: `${r}%`,
+					cy: 9,
+					r: 3,
+					className: "x117rol3"
+				});
+				case "hollow": return /* @__PURE__ */ n("circle", {
+					cx: `${r}%`,
+					cy: 9,
+					r: 3.5,
+					className: "x17dcl0o x73je2i xvlca1e"
+				});
+				case "diamond": return /* @__PURE__ */ n("svg", {
+					x: `${r}%`,
+					y: 9,
+					width: 1,
+					height: 1,
+					overflow: "visible",
+					children: /* @__PURE__ */ n("path", {
+						d: "M0 -5 5 0 0 5 -5 0Z",
+						className: "x117rol3"
+					})
+				});
+			}
+		}
+	}
+}
+function f({ geometry: e, start: t, formatOffset: n }) {
+	switch (e.kind) {
+		case "interval": return `Start ${n(e.start - t)}, end ${n(e.end - t)}, duration ${n(e.end - e.start)}`;
+		case "point": return `At ${n(e.at - t)}`;
+		case "unavailable": return "Timing unavailable";
+	}
+}
+export { u as Waterfall };

package/dist/control-state.d.ts

@@ -0,0 +1,51 @@
+import type { Dialog } from '@base-ui/react/dialog';
+import type { ComponentProps } from 'react';
+export type OpenStateProperties<Change> = {
+    readonly open: NonNullable<Dialog.Root.Props['open']>;
+    readonly defaultOpen?: never;
+    readonly onOpenChange: Change;
+} | {
+    readonly open?: never;
+    readonly defaultOpen?: Dialog.Root.Props['defaultOpen'];
+    readonly onOpenChange?: Change;
+};
+export type ValueStateProperties<Value, Change> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onValueChange: Change;
+} | {
+    readonly value?: never;
+    readonly defaultValue?: Value;
+    readonly onValueChange?: Change;
+};
+export type ReadOnlyValueProperties<Value, Change> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onValueChange?: Change;
+    readonly readOnly: true;
+};
+export type TextValueProperties<Value, Change, ValueChange> = {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+} | {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange?: Change;
+    readonly onValueChange: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+} | {
+    readonly value: Value;
+    readonly defaultValue?: never;
+    readonly onChange?: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly: true;
+} | {
+    readonly value?: never;
+    readonly defaultValue?: Value;
+    readonly onChange?: Change;
+    readonly onValueChange?: ValueChange;
+    readonly readOnly?: ComponentProps<'input'>['readOnly'];
+};

package/dist/copy-value.d.ts

@@ -0,0 +1,8 @@
+import { Button as BaseButton } from '@base-ui/react/button';
+import type { ComponentProps, ReactNode } from 'react';
+type CopyValueProps = Omit<ComponentProps<typeof BaseButton>, 'value'> & {
+    readonly value: string;
+    readonly label: string;
+};
+export declare function CopyValue({ value, label, children, className, style, disabled, onClick, ...props }: CopyValueProps): ReactNode;
+export {};

package/dist/dialog.d.ts

@@ -0,0 +1,27 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import type { ComponentProps, ReactNode } from 'react';
+import type { OpenStateProperties } from './control-state.ts';
+import type { PlacementStyle } from './style-composition.ts';
+type DialogRootProps<Payload> = Omit<BaseDialog.Root.Props<Payload>, 'open' | 'defaultOpen' | 'onOpenChange'> & OpenStateProperties<NonNullable<BaseDialog.Root.Props<Payload>['onOpenChange']>>;
+type DialogBackdropProps = ComponentProps<typeof BaseDialog.Backdrop>;
+type DialogPopupProps = ComponentProps<typeof BaseDialog.Popup> & {
+    readonly xstyle?: PlacementStyle;
+};
+type DialogTitleProps = ComponentProps<typeof BaseDialog.Title>;
+type DialogDescriptionProps = ComponentProps<typeof BaseDialog.Description>;
+declare function DialogRoot<Payload = unknown>(props: DialogRootProps<Payload>): ReactNode;
+declare function DialogBackdrop({ className, style, ...props }: DialogBackdropProps): ReactNode;
+declare function DialogPopup({ className, style, xstyle, ...props }: DialogPopupProps): ReactNode;
+declare function DialogTitle({ className, style, ...props }: DialogTitleProps): ReactNode;
+declare function DialogDescription({ className, style, ...props }: DialogDescriptionProps): ReactNode;
+export declare const Dialog: {
+    Root: typeof DialogRoot;
+    Trigger: BaseDialog.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Backdrop: typeof DialogBackdrop;
+    Popup: typeof DialogPopup;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/drawer.d.ts

@@ -0,0 +1,33 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import type { ComponentProps, ReactNode } from 'react';
+import type { OpenStateProperties } from './control-state.ts';
+import type { PlacementStyle } from './style-composition.ts';
+type DrawerRootProps<Payload> = Omit<BaseDrawer.Root.Props<Payload>, 'open' | 'defaultOpen' | 'onOpenChange' | 'swipeDirection' | 'snapPoints' | 'snapPoint' | 'defaultSnapPoint' | 'onSnapPointChange' | 'snapToSequentialPoints'> & OpenStateProperties<NonNullable<BaseDrawer.Root.Props<Payload>['onOpenChange']>>;
+type DrawerBackdropProps = ComponentProps<typeof BaseDrawer.Backdrop>;
+type DrawerViewportProps = ComponentProps<typeof BaseDrawer.Viewport>;
+type DrawerPopupProps = ComponentProps<typeof BaseDrawer.Popup> & {
+    readonly xstyle?: PlacementStyle;
+};
+type DrawerTitleProps = ComponentProps<typeof BaseDrawer.Title> & {
+    readonly visuallyHidden?: boolean;
+};
+type DrawerDescriptionProps = ComponentProps<typeof BaseDrawer.Description>;
+declare function DrawerRoot<Payload = unknown>(props: DrawerRootProps<Payload>): ReactNode;
+declare function DrawerBackdrop({ className, style, ...props }: DrawerBackdropProps): ReactNode;
+declare function DrawerViewport({ className, style, ...props }: DrawerViewportProps): ReactNode;
+declare function DrawerPopup({ className, style, xstyle, ...props }: DrawerPopupProps): ReactNode;
+declare function DrawerTitle({ className, style, visuallyHidden, ...props }: DrawerTitleProps): ReactNode;
+declare function DrawerDescription({ className, style, ...props }: DrawerDescriptionProps): ReactNode;
+export declare const Drawer: {
+    createHandle: typeof BaseDrawer.createHandle;
+    Root: typeof DrawerRoot;
+    Trigger: BaseDrawer.Trigger;
+    Portal: BaseDrawer.Portal;
+    Backdrop: typeof DrawerBackdrop;
+    Viewport: typeof DrawerViewport;
+    Popup: typeof DrawerPopup;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+    Close: BaseDrawer.Close;
+};
+export {};

package/dist/forms.d.ts

@@ -0,0 +1,32 @@
+import { Field as BaseField } from '@base-ui/react/field';
+import { Input as BaseInput } from '@base-ui/react/input';
+import type { ComponentProps, ReactNode } from 'react';
+import type { TextValueProperties } from './control-state.ts';
+import type { PlacementStyle } from './style-composition.ts';
+type FieldRootProps = ComponentProps<typeof BaseField.Root> & {
+    readonly xstyle?: PlacementStyle;
+};
+type FieldLabelProps = ComponentProps<typeof BaseField.Label>;
+type FieldDescriptionProps = ComponentProps<typeof BaseField.Description>;
+type FieldErrorProps = ComponentProps<typeof BaseField.Error>;
+type BaseInputProps = ComponentProps<typeof BaseInput>;
+type InputProps = Omit<BaseInputProps, 'value' | 'defaultValue' | 'onChange' | 'onValueChange' | 'readOnly'> & TextValueProperties<NonNullable<BaseInputProps['value']>, NonNullable<BaseInputProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
+    readonly xstyle?: PlacementStyle;
+};
+type NativeTextareaProps = ComponentProps<'textarea'>;
+type TextareaProps = Omit<NativeTextareaProps, 'value' | 'defaultValue' | 'onChange' | 'readOnly'> & TextValueProperties<NonNullable<NativeTextareaProps['value']>, NonNullable<NativeTextareaProps['onChange']>, NonNullable<BaseInputProps['onValueChange']>> & {
+    readonly xstyle?: PlacementStyle;
+};
+declare function FieldRoot({ className, style, xstyle, ...props }: FieldRootProps): ReactNode;
+declare function FieldLabel({ className, style, ...props }: FieldLabelProps): ReactNode;
+declare function FieldDescription({ className, style, ...props }: FieldDescriptionProps): ReactNode;
+declare function FieldError({ className, style, ...props }: FieldErrorProps): ReactNode;
+export declare const Field: {
+    Root: typeof FieldRoot;
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+};
+export declare function Input({ className, style, xstyle, ...props }: InputProps): ReactNode;
+export declare function Textarea({ value, defaultValue, onValueChange, name, disabled, readOnly, required, className, style, xstyle, ...props }: TextareaProps): ReactNode;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { Button, IconButton, TextButton, TextLink } from './actions.tsx';
+export { Badge, Heading, Identifier, Muted, Prose, Status, Subheading, Text } from './text.tsx';
+export { Field, Input, Textarea } from './forms.tsx';
+export { Select } from './select.tsx';
+export { Dialog } from './dialog.tsx';
+export { Drawer } from './drawer.tsx';
+export { Tooltip } from './tooltip.tsx';
+export { Columns, Divider, EmptyState, Notice, Panel, Row, Stack } from './surfaces.tsx';
+export { ListFooter } from './list-footer.tsx';
+export { Cell, Table } from './table.tsx';
+export { Metric, MetricGrid } from './metrics.tsx';
+export { CopyValue } from './copy-value.tsx';
+export { Loading } from './loading.tsx';
+export { Tabs } from './tabs.tsx';
+export { Inspector, Details } from './inspector.tsx';
+export { SkipLink } from './skip-link.tsx';

package/dist/index.js

@@ -0,0 +1 @@
+export { E as Badge, P as Button, l as Cell, f as Columns, o as CopyValue, n as Details, x as Dialog, p as Divider, b as Drawer, m as EmptyState, C as Field, D as Heading, F as IconButton, O as Identifier, w as Input, r as Inspector, d as ListFooter, a as Loading, s as Metric, c as MetricGrid, k as Muted, h as Notice, g as Panel, A as Prose, _ as Row, S as Select, t as SkipLink, v as Stack, j as Status, M as Subheading, u as Table, i as Tabs, N as Text, I as TextButton, L as TextLink, T as Textarea, y as Tooltip } from "./src-Czfi0YQa.js";

package/dist/inspector.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+type InspectorProps = ComponentProps<'div'> & {
+    readonly master: ReactNode;
+    readonly detail: ReactNode;
+    readonly label: string;
+};
+type DetailItem = {
+    readonly label: string;
+    readonly value: ReactNode;
+};
+type DetailsProps = ComponentProps<'dl'> & {
+    readonly items: ReadonlyArray<DetailItem>;
+};
+export declare function Inspector({ master, detail, label, ...props }: InspectorProps): ReactNode;
+export declare function Details({ items, ...props }: DetailsProps): ReactNode;
+export {};

package/dist/layout/app-shell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+type AppShellProps = {
+    readonly sidebarHeader?: ReactNode;
+    readonly sidebar: ReactNode;
+    readonly footer?: ReactNode;
+    readonly children: ReactNode;
+};
+export declare function AppShell({ sidebarHeader, sidebar, footer, children }: AppShellProps): ReactNode;
+export {};

package/dist/layout/detail-page.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+type DetailPageProps = {
+    readonly children: ReactNode;
+};
+export declare function DetailPage({ children }: DetailPageProps): ReactNode;
+export {};

package/dist/layout/frame.stylex.d.ts

@@ -0,0 +1,23 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const frame: stylex.VarGroup<Readonly<{
+    sidebarWidth: string;
+    toolbarHeight: string;
+    navigationHeight: string;
+    navigationInset: string;
+    navigationPadding: string;
+    footerHeight: string;
+    footerPadding: string;
+    detailWidth: string;
+    detailMaxWidth: string;
+    detailTop: string;
+    detailBottom: string;
+    detailMobileTop: string;
+    detailMobileBottom: string;
+}>, symbol>;
+export declare const frameConditions: {
+    sidebarMobile: string;
+    sidebarDesktopQuery: string;
+    sidebarCoarse: string;
+    detailMobile: string;
+    toolbarCompact: string;
+};

package/dist/layout/index.d.ts

@@ -0,0 +1,4 @@
+export { AppShell } from './app-shell.tsx';
+export { PageToolbar, ToolbarAction } from './page-toolbar.tsx';
+export { DetailPage } from './detail-page.tsx';
+export { Navigation, NavigationItem, NavigationLink, SidebarLabel, SidebarFooter } from './sidebar.tsx';

package/dist/layout/page-toolbar.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../index.ts';
+type PageToolbarProps = {
+    readonly title: ReactNode;
+    readonly actions?: ReactNode;
+    readonly breadcrumb?: boolean;
+    readonly navigation?: boolean;
+};
+type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'xstyle'> & {
+    readonly icon?: ReactNode;
+};
+export declare function PageToolbar({ title, actions, breadcrumb, navigation }: PageToolbarProps): ReactNode;
+export declare function ToolbarAction({ icon, children, ...props }: ToolbarActionProps): ReactNode;
+export {};

package/dist/layout/sidebar.d.ts

@@ -0,0 +1,45 @@
+import type { ComponentProps, ReactNode, RefObject } from 'react';
+import { Button, Drawer } from '../index.ts';
+type SidebarState = {
+    readonly isExpanded: boolean;
+    readonly sidebarId: string;
+    readonly drawerHandle: ReturnType<typeof Drawer.createHandle>;
+    readonly navigationToggleRef: RefObject<HTMLButtonElement | null>;
+    readonly onToggle: () => void;
+    readonly onNavigate: () => void;
+};
+export declare const SidebarContext: import("react").Context<SidebarState | null>;
+type SidebarProps = {
+    readonly header?: ReactNode;
+    readonly footer?: ReactNode;
+    readonly close?: ReactNode;
+    readonly children: ReactNode;
+};
+type NavigationProps = {
+    readonly children: ReactNode;
+    readonly label?: string;
+};
+type NavigationItemProps = Omit<ComponentProps<typeof Button>, 'variant' | 'tone' | 'size' | 'xstyle'> & {
+    readonly icon?: ReactNode;
+    readonly selected?: boolean;
+};
+type NavigationLinkProps = ComponentProps<'a'> & {
+    readonly icon?: ReactNode;
+    readonly selected?: boolean;
+};
+type SidebarLabelProps = {
+    readonly children: ReactNode;
+    readonly grow?: boolean;
+};
+type SidebarFooterProps = {
+    readonly children: ReactNode;
+};
+export declare function Sidebar({ header, footer, close, children }: SidebarProps): ReactNode;
+export declare function SidebarClose(): ReactNode;
+export declare function Navigation({ children, label }: NavigationProps): ReactNode;
+export declare function NavigationItem({ children, icon, selected, onClick, ...props }: NavigationItemProps): ReactNode;
+export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
+export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
+export declare function SidebarFooter({ children }: SidebarFooterProps): ReactNode;
+export declare function SidebarToggle(): ReactNode;
+export {};