@bysages/solid 0.2.2 → 0.3.0

package/dist/components/hover-card/index.d.mts

@@ -0,0 +1,7 @@
+import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
+//#region src/components/hover-card/index.d.ts
+/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
+ * that dissolves in over a quiet inline link, never stealing focus. The
+ * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
+export declare const HoverCard: typeof HoverCard$1;
+//#endregion

package/dist/components/hover-card/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
+//#region src/components/hover-card/index.ts
+/** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
+* that dissolves in over a quiet inline link, never stealing focus. The
+* API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
+const HoverCard = HoverCard$1;
+injectComponentStyle("hover-card");
+//#endregion
+export { HoverCard };

package/dist/components/icon/index.d.mts

@@ -0,0 +1,24 @@
+import { JSX } from "solid-js";
+import { IconifyIcon } from "@bysages/core/icons";
+//#region src/components/icon/index.d.ts
+/** The inkwell: a standard box that keeps any inline svg at its optical
+ * measure and in the text's own ink — the icon carries no pigment and no
+ * size of its own. Bring a glyph through `glyph` (a direct registry
+ * import), through `name` from the whitelisted registry, or bring your
+ * own; the well renders either. */
+export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  /** Size steps follow the surrounding font size; `inherit` is the
+   * default — one em of the text the icon sits in. */
+  size?: "inherit" | "sm" | "md" | "lg";
+  /** The accessible name. Without it the icon is presentation-only and
+   * hidden from the accessibility tree. */
+  label?: string;
+  /** A glyph from the registry, imported directly. Ignored when children
+   * are given — an explicit glyph always wins. */
+  glyph?: IconifyIcon;
+  /** A registry name — only the whitelisted set the wrappers draw
+   * themselves. Ignored when `glyph` or children are given. */
+  name?: string;
+}
+export declare function Icon(props: IconProps): JSX.Element;
+//#endregion

package/dist/components/icon/index.mjs

@@ -0,0 +1,54 @@
+import { injectComponentStyle } from "@bysages/core";
+import { effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+import { getIcon } from "@bysages/core/icons";
+//#region src/components/icon/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg fill=currentColor aria-hidden=true>`);
+function Icon(props) {
+	injectComponentStyle("icon");
+	const [own, rest] = splitProps(props, [
+		"size",
+		"label",
+		"glyph",
+		"name",
+		"children"
+	]);
+	const resolved = own.glyph ?? (own.name && own.children == null ? getIcon(own.name) : void 0);
+	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get role() {
+			return own.label != null ? "img" : void 0;
+		},
+		get "aria-label"() {
+			return own.label;
+		},
+		get "aria-hidden"() {
+			return own.label != null ? void 0 : "true";
+		},
+		"data-scope": "icon",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "inherit";
+		}
+	}], true);
+	insert(_el$, () => {
+		return own.children ?? (resolved ? (() => {
+			var _el$2 = _tmpl$2();
+			effect(() => {
+				return {
+					e: `0 0 ${resolved.width ?? 24} ${resolved.height ?? 24}`,
+					t: resolved.body
+				};
+			}, ({ e, t }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$2, "viewBox", e);
+				t !== _p$?.t && (_el$2.innerHTML = t);
+			});
+			return _el$2;
+		})() : null);
+	});
+	return _el$;
+}
+//#endregion
+export { Icon };

package/dist/components/image/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/image/index.d.ts
+/** A framed picture: while the source loads, the frame keeps the
+ * skeleton's breath; the picture dissolves in when it lands; a broken
+ * source leaves the `fallback` prop — or the placeholder glyph when the
+ * caller has nothing local to say. The frame's size is the consumer's
+ * to give. */
+export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
+  src: string;
+  alt?: string;
+  fit?: "cover" | "contain" | "fill" | "none";
+  loading?: "lazy" | "eager";
+  /** What a broken source leaves instead of the picture. */
+  fallback?: JSX.Element;
+}
+export declare function Image(props: ImageProps): JSX.Element;
+//#endregion

package/dist/components/image/index.mjs

@@ -0,0 +1,70 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
+//#region src/components/image/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, 2);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, 2);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, 2);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
+/** The mark for a source that never arrived: a quiet mountain-and-sun,
+* drawn in the stylesheet's stroke and hidden from the reader. */
+function placeholderGlyph() {
+	return [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3()
+	];
+}
+function Image(props) {
+	injectComponentStyle("image");
+	const [own, rest] = splitProps(props, [
+		"src",
+		"alt",
+		"fit",
+		"loading",
+		"fallback"
+	]);
+	const [state, setState] = createSignal("loading");
+	createEffect(on(() => own.src, () => setState("loading")));
+	var _el$4 = _tmpl$5();
+	var _el$5 = _el$4.firstChild;
+	spread(_el$4, [rest, {
+		"data-scope": "image",
+		"data-part": "root",
+		get "data-state"() {
+			return state();
+		},
+		get "data-fit"() {
+			return own.fit ?? "cover";
+		}
+	}], true);
+	_el$5.addEventListener("error", () => setState("error"));
+	_el$5.addEventListener("load", () => setState("loaded"));
+	insert(_el$4, createComponent(Show, {
+		get when() {
+			return state() === "error";
+		},
+		get children() {
+			var _el$6 = _tmpl$4();
+			insert(_el$6, () => {
+				return own.fallback ?? placeholderGlyph();
+			});
+			return _el$6;
+		}
+	}), null);
+	effect(() => {
+		return {
+			e: own.src,
+			t: own.alt ?? "",
+			a: own.loading ?? "lazy"
+		};
+	}, ({ e, t, a }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$5, "src", e);
+		t !== _p$?.t && setAttribute(_el$5, "alt", t);
+		a !== _p$?.a && setAttribute(_el$5, "loading", a);
+	});
+	return _el$4;
+}
+//#endregion
+export { Image };

package/dist/components/image-cropper/index.d.mts

@@ -0,0 +1,8 @@
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
+//#region src/components/image-cropper/index.d.ts
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+ * holding the photograph, one lit selection window framed by light hairlines.
+ * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+ * Context. */
+export declare const ImageCropper: typeof ImageCropper$1;
+//#endregion

package/dist/components/image-cropper/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
+//#region src/components/image-cropper/index.ts
+/** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
+* holding the photograph, one lit selection window framed by light hairlines.
+* The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
+* Context. */
+const ImageCropper = ImageCropper$1;
+injectComponentStyle("image-cropper");
+//#endregion
+export { ImageCropper };

package/dist/components/image-viewer/index.d.mts

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+//#region src/components/image-viewer/index.d.ts
+/**
+ * A lightbox: the picture over a dimmed page, with a small toolbar
+ * beneath it. Zoom is the reader's hand (half to three times, clamped),
+ * a quarter turn at a time rotates, Escape and the scrim close — the
+ * dialog machine carries the modal part. `open` may stay with the
+ * caller; left undefined the viewer keeps it to itself.
+ */
+export interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  open?: boolean;
+  zoomable?: boolean;
+  /** The openness changed — from the scrim, Escape or the toolbar. */
+  onOpenChange?: (open: boolean) => void;
+}
+export declare function ImageViewer(props: ImageViewerProps): JSX.Element;
+//#endregion

package/dist/components/image-viewer/index.mjs

@@ -0,0 +1,152 @@
+import { Button } from "../button/index.mjs";
+import { ButtonGroup } from "../button-group/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
+import { Show, createEffect, createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Dialog } from "@ark-ui/solid/dialog";
+//#region src/components/image-viewer/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg><circle cx=11 cy=11 r=7></svg>`, 2);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, 2);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="M8 11h6"></svg>`, 2);
+var _tmpl$4 = /* @__PURE__ */ template(`<svg><path d="M11 8v6"></svg>`, 2);
+var _tmpl$5 = /* @__PURE__ */ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, 2);
+var _tmpl$6 = /* @__PURE__ */ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, 2);
+var _tmpl$7 = /* @__PURE__ */ template(`<svg><path d="m6 6 12 12"></svg>`, 2);
+var _tmpl$8 = /* @__PURE__ */ template(`<svg><path d="M18 6 6 18"></svg>`, 2);
+var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's line-drawn glyphs, fresh per render. */
+const TOOL_GLYPHS = {
+	zoomIn: () => [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3(),
+		_tmpl$4()
+	],
+	zoomOut: () => [
+		_tmpl$(),
+		_tmpl$2(),
+		_tmpl$3()
+	],
+	rotate: () => [_tmpl$5(), _tmpl$6()],
+	close: () => [_tmpl$7(), _tmpl$8()]
+};
+function ImageViewer(props) {
+	injectComponentStyle("image-viewer");
+	const [own] = splitProps(props, [
+		"src",
+		"alt",
+		"open",
+		"zoomable",
+		"onOpenChange"
+	]);
+	const [localOpen, setLocalOpen] = createSignal(false);
+	const [scale, setScale] = createSignal(1);
+	const [rotation, setRotation] = createSignal(0);
+	const isOpen = () => own.open ?? localOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setLocalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (isOpen()) {
+			setScale(1);
+			setRotation(0);
+		}
+	});
+	function zoom(step) {
+		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
+	}
+	function rotate() {
+		setRotation((rotation() + 90) % 360);
+	}
+	function toolButton(label, glyph, onClick) {
+		return createComponent(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			get children() {
+				var _el$12 = _tmpl$9();
+				insert(_el$12, glyph);
+				return _el$12;
+			}
+		});
+	}
+	return createComponent(Dialog.Root, {
+		get open() {
+			return isOpen();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
+					class: "bs-image-viewer-positioner",
+					get children() {
+						return createComponent(Dialog.Content, {
+							class: "bs-image-viewer-content",
+							get "aria-label"() {
+								return own.alt || "Image preview";
+							},
+							onClick: (event) => {
+								if (event.target === event.currentTarget) setOpen(false);
+							},
+							get children() {
+								return [(() => {
+									var _el$13 = _tmpl$10();
+									effect(() => {
+										return {
+											e: own.src,
+											t: own.alt ?? "",
+											a: `scale(${scale()}) rotate(${rotation()}deg)`
+										};
+									}, ({ e, t, a }, _p$) => {
+										e !== _p$?.e && setAttribute(_el$13, "src", e);
+										t !== _p$?.t && setAttribute(_el$13, "alt", t);
+										a !== _p$?.a && setStyleProperty(_el$13, "transform", a);
+									});
+									return _el$13;
+								})(), (() => {
+									var _el$14 = _tmpl$11();
+									insert(_el$14, createComponent(ButtonGroup, { get children() {
+										return [
+											createComponent(Show, {
+												get when() {
+													return own.zoomable ?? true;
+												},
+												get children() {
+													return [memo(() => {
+														return toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
+													}), memo(() => {
+														return toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25));
+													})];
+												}
+											}),
+											memo(() => {
+												return toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate);
+											}),
+											memo(() => {
+												return toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false));
+											})
+										];
+									} }));
+									return _el$14;
+								})()];
+							}
+						});
+					}
+				})];
+			} });
+		}
+	});
+}
+//#endregion
+export { ImageViewer };

package/dist/components/input/index.d.mts

@@ -0,0 +1,19 @@
+import { JSX } from "solid-js";
+//#region src/components/input/index.d.ts
+export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
+  value?: string | number;
+  onValueChange?: (value: string) => void;
+  size?: "sm" | "md" | "lg";
+  invalid?: boolean;
+  /** Entry mask - `9` digit, `a` letter, `*` either, anything else is
+   * literal. e.g. `"999-99-9999"`, `"(999) 999-9999"`. */
+  mask?: string;
+}
+/** The bare text input: the field recipe — border, surface, focus halo —
+ * on a native control. Standing alone it styles itself from the `invalid`
+ * prop; inside a `Field.Root` it consumes the field context, picking up
+ * the label id, the described-by wiring and the invalid state for free,
+ * which is also the seam the Form validation layer will drive. Disabled
+ * rides the native attribute. */
+export declare function Input(props: InputProps): JSX.Element;
+//#endregion

package/dist/components/input/index.mjs

@@ -0,0 +1,2 @@
+import { t as Input } from "../../input-DoFQ7RXh.mjs";
+export { Input };

package/dist/components/input-group/index.d.mts

@@ -0,0 +1,18 @@
+import { JSX } from "solid-js";
+//#region src/components/input-group/index.d.ts
+/**
+ * Merged controls: attachments and the entry fused into one seal. The
+ * Root draws the single hairline and carries the group's focus halo;
+ * the Addon is a recessed cell for the reader's fixed words — a scheme,
+ * a unit, a quiet button — placed before or after the entry. Put our
+ * Input (or Textarea) inside and its own border and halo step aside in
+ * favor of the group's; the stylesheet does the merging, the wrapper
+ * adds no visuals of its own.
+ */
+declare function InputGroupRoot(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare function InputGroupAddon(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export declare const InputGroup: typeof InputGroupRoot & {
+  Root: typeof InputGroupRoot;
+  Addon: typeof InputGroupAddon;
+};
+//#endregion

package/dist/components/input-group/index.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+//#region src/components/input-group/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/**
+* Merged controls: attachments and the entry fused into one seal. The
+* Root draws the single hairline and carries the group's focus halo;
+* the Addon is a recessed cell for the reader's fixed words — a scheme,
+* a unit, a quiet button — placed before or after the entry. Put our
+* Input (or Textarea) inside and its own border and halo step aside in
+* favor of the group's; the stylesheet does the merging, the wrapper
+* adds no visuals of its own.
+*/
+function InputGroupRoot(props) {
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "input-group",
+		"data-part": "root"
+	}], false);
+	return _el$;
+}
+function InputGroupAddon(props) {
+	var _el$2 = _tmpl$();
+	spread(_el$2, [props, {
+		"data-scope": "input-group",
+		"data-part": "addon"
+	}], false);
+	return _el$2;
+}
+const InputGroup = Object.assign(InputGroupRoot, {
+	Root: InputGroupRoot,
+	Addon: InputGroupAddon
+});
+injectComponentStyle("input-group");
+//#endregion
+export { InputGroup };

package/dist/components/json-tree-view/index.d.mts

@@ -0,0 +1,7 @@
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+//#region src/components/json-tree-view/index.d.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+ * recipes re-scoped, with value nodes reading as tabular data. The API is
+ * Ark's own — Root, Tree, plus createJsonTreeCollection. */
+export declare const JsonTreeView: typeof JsonTreeView$1;
+//#endregion

package/dist/components/json-tree-view/index.mjs

@@ -0,0 +1,10 @@
+import { injectComponentStyle } from "@bysages/core";
+import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
+//#region src/components/json-tree-view/index.ts
+/** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
+* recipes re-scoped, with value nodes reading as tabular data. The API is
+* Ark's own — Root, Tree, plus createJsonTreeCollection. */
+const JsonTreeView = JsonTreeView$1;
+injectComponentStyle("json-tree-view");
+//#endregion
+export { JsonTreeView };

package/dist/components/kbd/index.d.mts

@@ -0,0 +1,6 @@
+import { JSX } from "solid-js";
+//#region src/components/kbd/index.d.ts
+/** A keycap in miniature, riding the type it annotates. */
+export type KbdProps = JSX.HTMLAttributes<HTMLElement>;
+export declare function Kbd(props: KbdProps): JSX.Element;
+//#endregion

package/dist/components/kbd/index.mjs

@@ -0,0 +1,15 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+//#region src/components/kbd/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<kbd>`);
+function Kbd(props) {
+	injectComponentStyle("kbd");
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "kbd",
+		"data-part": "root"
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Kbd };

package/dist/components/layout/index.d.mts

@@ -0,0 +1,60 @@
+import { JSX } from "solid-js";
+//#region src/components/layout/index.d.ts
+export interface LayoutRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Declare which edge the skeleton reserves for its sider — without
+   * it the root is a single column. */
+  sider?: "start" | "end";
+}
+/** Which edge the enclosing root reserves for its rail — shared so the
+ * sider's resize handle knows which way the hand pulls. */
+export interface LayoutContextValue {
+  siderPlacement: () => "start" | "end" | undefined;
+}
+/**
+ * The application skeleton: Root, Header, Sider, Content, Footer —
+ * the admin arrangement dressed in the paper-and-ink surfaces. The
+ * root is a full-height grid; a declared `sider` turns the columns
+ * around to meet whichever edge the rail stands on.
+ */
+declare function LayoutRoot(props: LayoutRootProps): JSX.Element;
+declare function LayoutHeader(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+declare function LayoutContent(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+declare function LayoutFooter(props: JSX.HTMLAttributes<HTMLElement>): JSX.Element;
+export interface LayoutSiderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** The caller drives the fold; the sider mirrors it and echoes every
+   * change back through `onCollapsedChange`. */
+  collapsed?: boolean;
+  /** The rail's resting inline size — a layout parameter, not a visual
+   * token, so it rides an inline variable. */
+  width?: string;
+  /** The inline size when folded. */
+  collapsedWidth?: string;
+  /** Offer the hairline at the flow edge: the rail's width follows the
+   * hand (and the arrow keys), clamped by `min-width`/`max-width`, and
+   * every change rides `onWidthChange`. */
+  resizable?: boolean;
+  /** The rail's narrowest inline size while resizing. */
+  minWidth?: string;
+  /** The rail's widest inline size while resizing. */
+  maxWidth?: string;
+  /** The fold flipped. */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** The rail's inline size changed — the hand, the arrow keys, or the
+   * caller's own width prop moving. */
+  onWidthChange?: (width: string) => void;
+  /** The children, or a function of the fold state — a rail can swap
+   * its labels for icons instead of being clipped mid-word by the
+   * narrowing edge. */
+  children?: JSX.Element | ((state: {
+    collapsed: boolean;
+  }) => JSX.Element);
+}
+declare function LayoutSider(props: LayoutSiderProps): JSX.Element;
+export declare const Layout: typeof LayoutRoot & {
+  Root: typeof LayoutRoot;
+  Header: typeof LayoutHeader;
+  Sider: typeof LayoutSider;
+  Content: typeof LayoutContent;
+  Footer: typeof LayoutFooter;
+};
+//#endregion