@bysages/react 0.2.2 → 0.3.0

package/dist/components/float-button/index.d.mts

@@ -0,0 +1,59 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#region src/components/float-button/index.d.ts
+export type FloatButtonPlacement = "bottom-end" | "bottom-start" | "top-end" | "top-start";
+export type FloatButtonSize = "sm" | "md" | "lg";
+/** The group's openness, shared from the mooring to its parts. */
+export interface FloatButtonContextValue {
+  open: boolean;
+  /** The group's button rung; the trigger takes it whole, the items
+   * step down one. */
+  size: FloatButtonSize;
+  toggle: () => void;
+  /** Folds the fan — an Item calls this once its action fires, the way
+   * a speed dial closes after a choice. */
+  close: () => void;
+}
+/** Context for {@link FloatButtonContextValue}, exported so a custom
+ * part can read the group's state. */
+export declare const FLOAT_BUTTON_CONTEXT: import("react").Context<FloatButtonContextValue | null>;
+export interface FloatButtonRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** Controlled openness: leave unset to let the group hold its own
+   * state; while set, the Trigger reports back through
+   * `onOpenChange`. */
+  open?: boolean;
+  /** Which corner the group moors at. */
+  placement?: FloatButtonPlacement;
+  /** One rung of the button ladder for the whole group. */
+  size?: FloatButtonSize;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+}
+/**
+ * A floating action and its fanned-out alternatives — FAB and speed
+ * dial in one family. The Root moors the group at a page corner and
+ * holds the openness (mirrored from `open` when controlled); the
+ * Trigger flips it; each Item is a round action with its name surfacing
+ * beside it while the group is open. The buttons are the shared recipe
+ * (vessels here: round); this family owns only the mooring, the fan
+ * and the fold.
+ */
+declare function Root({ open: openProp, placement, size, onOpenChange, children, ...rest }: FloatButtonRootProps): import("react").JSX.Element;
+declare function Trigger({ label, children }: {
+  label?: string;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+interface FloatButtonItemProps {
+  /** The action's name: the button's accessible name and the
+   * annotation surfaced beside it while the group is open. */
+  label: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  children?: ReactNode;
+}
+declare function Item({ label, disabled, onClick, children }: FloatButtonItemProps): import("react").JSX.Element;
+export declare const FloatButton: typeof Root & {
+  Root: typeof Root;
+  Trigger: typeof Trigger;
+  Item: typeof Item;
+};
+//#endregion

package/dist/components/float-button/index.mjs

@@ -0,0 +1,90 @@
+import { Button } from "../button/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState } from "react";
+//#region src/components/float-button/index.tsx
+/** Context for {@link FloatButtonContextValue}, exported so a custom
+* part can read the group's state. */
+const FLOAT_BUTTON_CONTEXT = createContext(null);
+/**
+* A floating action and its fanned-out alternatives — FAB and speed
+* dial in one family. The Root moors the group at a page corner and
+* holds the openness (mirrored from `open` when controlled); the
+* Trigger flips it; each Item is a round action with its name surfacing
+* beside it while the group is open. The buttons are the shared recipe
+* (vessels here: round); this family owns only the mooring, the fan
+* and the fold.
+*/
+function Root({ open: openProp, placement = "bottom-end", size, onOpenChange, children, ...rest }) {
+	const [inner, setInner] = useState(false);
+	const open = openProp !== void 0 ? openProp : inner;
+	const setOpen = (value) => {
+		setInner(value);
+		onOpenChange?.(value);
+	};
+	return /* @__PURE__ */ jsx(FLOAT_BUTTON_CONTEXT.Provider, {
+		value: {
+			open,
+			size: size ?? "lg",
+			toggle: () => setOpen(!open),
+			close: () => setOpen(false)
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			...rest,
+			"data-scope": "float-button",
+			"data-part": "root",
+			"data-placement": placement,
+			"data-state": open ? "open" : "closed",
+			children
+		})
+	});
+}
+const STEP_DOWN = {
+	lg: "md",
+	md: "sm",
+	sm: "sm"
+};
+function Trigger({ label, children }) {
+	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "solid",
+		square: true,
+		size: context?.size ?? "lg",
+		onClick: () => context?.toggle(),
+		"aria-label": label || "Actions",
+		"aria-expanded": context ? context.open : false,
+		children
+	});
+}
+function Item({ label, disabled = false, onClick, children }) {
+	const context = useContext(FLOAT_BUTTON_CONTEXT);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-scope": "float-button",
+		"data-part": "item",
+		children: [/* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			square: true,
+			size: context ? STEP_DOWN[context.size] : "md",
+			disabled,
+			"aria-label": label,
+			onClick: () => {
+				onClick?.();
+				context?.close();
+			},
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-scope": "float-button",
+			"data-part": "item-label",
+			"aria-hidden": "true",
+			children: label
+		})]
+	});
+}
+const FloatButton = Object.assign(Root, {
+	Root,
+	Trigger,
+	Item
+});
+injectComponentStyle("float-button");
+//#endregion
+export { FLOAT_BUTTON_CONTEXT, FloatButton };

package/dist/components/floating-panel/index.d.mts

@@ -0,0 +1,9 @@
+import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
+//#region src/components/floating-panel/index.d.ts
+/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
+ * popup vessel let loose — a draggable, resizable sheet whose header is the
+ * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
+ * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
+ * Body. */
+export declare const FloatingPanel: typeof FloatingPanel$1;
+//#endregion

package/dist/components/floating-panel/index.mjs

@@ -0,0 +1,12 @@
+import { injectComponentStyle } from "@bysages/core";
+import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/react/floating-panel";
+//#region src/components/floating-panel/index.tsx
+/** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
+* popup vessel let loose — a draggable, resizable sheet whose header is the
+* handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
+* Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
+* Body. */
+const FloatingPanel = FloatingPanel$1;
+injectComponentStyle("floating-panel");
+//#endregion
+export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -0,0 +1,2 @@
+import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/react/focus-trap";
+export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -0,0 +1,2 @@
+import { FocusTrap } from "@ark-ui/react/focus-trap";
+export { FocusTrap };

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

@@ -0,0 +1,2 @@
+import { a as useField, c as FieldApi, i as FormProps, n as FormField, o as useForm, r as FormFieldProps, s as FormApi, t as Form } from "../../index-uPyYiWaL.mjs";
+export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, useField, useForm };

package/dist/components/form/index.mjs

@@ -0,0 +1,67 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { Field } from "@ark-ui/react/field";
+import { useField, useForm } from "@tanstack/react-form";
+//#region src/components/form/index.tsx
+const FormContext = createContext(null);
+/** A validator's complaint is a string or a Standard Schema issue; both
+* reduce to the sentence the field shows. */
+function errorText(error) {
+	if (error == null) return "";
+	if (typeof error === "string") return error;
+	if (typeof error === "object" && "message" in error) return String(error.message);
+	return "";
+}
+function Form({ form, children, ...rest }) {
+	injectComponentStyle("form");
+	injectComponentStyle("field");
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: form,
+		children: /* @__PURE__ */ jsx("form", {
+			...rest,
+			"data-scope": "form",
+			"data-part": "root",
+			noValidate: true,
+			onSubmit: (event) => {
+				event.preventDefault();
+				form.handleSubmit();
+			},
+			children
+		})
+	});
+}
+function FormField({ form: formProp, name, label, hint, required = false, invalid = false, disabled = false, children, ...rest }) {
+	const injected = useContext(FormContext);
+	const form = formProp ?? injected;
+	const { className: klass, style, ...fieldOptions } = rest;
+	const assemble = (field) => {
+		const meta = field?.state.meta;
+		const errors = (!meta ? [] : meta.isTouched ? meta.errors ?? [] : [meta.errorMap?.onSubmit].flat().filter(Boolean)).map(errorText).filter(Boolean);
+		const isInvalid = invalid || errors.length > 0;
+		return /* @__PURE__ */ jsx("div", {
+			className: klass,
+			style,
+			"data-form-field": name,
+			children: /* @__PURE__ */ jsxs(Field.Root, {
+				invalid: isInvalid,
+				required,
+				disabled,
+				children: [
+					label ? /* @__PURE__ */ jsx(Field.Label, { children: label }) : null,
+					typeof children === "function" ? children(field) : children,
+					hint && errors.length === 0 ? /* @__PURE__ */ jsx(Field.HelperText, { children: hint }) : null,
+					errors.length > 0 ? /* @__PURE__ */ jsx(Field.ErrorText, { children: errors[0] }) : null
+				]
+			})
+		});
+	};
+	if (!form) return assemble(void 0);
+	return /* @__PURE__ */ jsx(form.Field, {
+		...fieldOptions,
+		name,
+		children: assemble
+	});
+}
+//#endregion
+export { Form, FormField, useField, useForm };

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

@@ -0,0 +1,9 @@
+import { Format as Format$1 } from "@ark-ui/react/format";
+//#region src/components/format/index.d.ts
+/** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
+ * numbers, currency, bytes and relative time. The components render bare
+ * text with no DOM of their own — typography flows from the token layer,
+ * so there is no component stylesheet. The API is Ark's own — Number,
+ * Byte, Time, RelativeTime. */
+export declare const Format: typeof Format$1;
+//#endregion

package/dist/components/format/index.mjs

@@ -0,0 +1,10 @@
+import { Format as Format$1 } from "@ark-ui/react/format";
+//#region src/components/format/index.tsx
+/** Ark's Format, dressed in the paper-and-ink system: Intl formatting for
+* numbers, currency, bytes and relative time. The components render bare
+* text with no DOM of their own — typography flows from the token layer,
+* so there is no component stylesheet. The API is Ark's own — Number,
+* Byte, Time, RelativeTime. */
+const Format = Format$1;
+//#endregion
+export { Format };

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

@@ -0,0 +1,10 @@
+//#region src/components/frame/index.d.ts
+/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
+ * iframe whose body teleports the children and whose `head` prop
+ * carries extra <head> nodes — styles the child renders must travel
+ * through that prop. The frame measures its content and grows to
+ * fit; the vessel's border and paper belong to the consumer, since
+ * an iframe carries no anatomy attributes for the core stylesheet
+ * to hook. The API is Ark's own. */
+export declare const Frame: import("react").ForwardRefExoticComponent<import("@ark-ui/react/frame").FrameProps & import("react").RefAttributes<HTMLIFrameElement>>;
+//#endregion

package/dist/components/frame/index.mjs

@@ -0,0 +1,12 @@
+import { Frame as Frame$1 } from "@ark-ui/react/frame";
+//#region src/components/frame/index.tsx
+/** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
+* iframe whose body teleports the children and whose `head` prop
+* carries extra <head> nodes — styles the child renders must travel
+* through that prop. The frame measures its content and grows to
+* fit; the vessel's border and paper belong to the consumer, since
+* an iframe carries no anatomy attributes for the core stylesheet
+* to hook. The API is Ark's own. */
+const Frame = Frame$1;
+//#endregion
+export { Frame };

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+//#region src/components/grid/index.d.ts
+/** An alignment lattice: tracks of equal measure, sized by column count
+ * — or, with `minChildWidth`, as many tracks as the container fits. */
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  columns?: number;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+  /** Switch to the auto-fill lattice: each track is at least this wide,
+   * and the container decides how many fit. */
+  minChildWidth?: string;
+}
+export declare function Grid({ columns, gap, minChildWidth, ...rest }: GridProps): import("react").JSX.Element;
+//#endregion

package/dist/components/grid/index.mjs

@@ -0,0 +1,31 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/grid/index.tsx
+/** The same named steps of the space ramp the stack uses — one
+* vocabulary of distance across the layout primitives. */
+const gapVars = {
+	none: "0",
+	xs: "var(--bs-gap-xs)",
+	sm: "var(--bs-gap-sm)",
+	md: "var(--bs-gap-md)",
+	lg: "var(--bs-gap-lg)",
+	xl: "var(--bs-gap-xl)"
+};
+function Grid({ columns = 12, gap = "md", minChildWidth, ...rest }) {
+	injectComponentStyle("grid");
+	const style = {
+		...rest.style,
+		"--bs-grid-columns": String(columns),
+		"--bs-grid-gap": gapVars[gap] ?? gapVars.md,
+		...minChildWidth != null ? { "--bs-grid-min-child-width": minChildWidth } : {}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		style,
+		"data-scope": "grid",
+		"data-part": "root",
+		"data-autofill": minChildWidth != null ? "" : void 0
+	});
+}
+//#endregion
+export { Grid };

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

@@ -0,0 +1,7 @@
+//#region src/components/highlight/index.d.ts
+/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
+ * strokes of pigment on the page — a quiet tint of the accent behind the
+ * ink, never neon. The component renders bare <mark> elements, so the
+ * document-wide mark default carries the look. The API is Ark's own. */
+export declare const Highlight: (props: import("@ark-ui/react/highlight").HighlightProps) => import("react").JSX.Element;
+//#endregion

package/dist/components/highlight/index.mjs

@@ -0,0 +1,11 @@
+import { injectComponentStyle } from "@bysages/core";
+import { Highlight as Highlight$1 } from "@ark-ui/react/highlight";
+//#region src/components/highlight/index.tsx
+/** Ark's Highlight, dressed in the paper-and-ink system: query hits are
+* strokes of pigment on the page — a quiet tint of the accent behind the
+* ink, never neon. The component renders bare <mark> elements, so the
+* document-wide mark default carries the look. The API is Ark's own. */
+const Highlight = Highlight$1;
+injectComponentStyle("highlight");
+//#endregion
+export { Highlight };

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

@@ -0,0 +1,7 @@
+import { HoverCard as HoverCard$1 } from "@ark-ui/react/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/react/hover-card";
+//#region src/components/hover-card/index.tsx
+/** 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 { HTMLAttributes } from "react";
+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 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({ size, label, glyph, name, children, ...rest }: IconProps): import("react").JSX.Element;
+//#endregion

package/dist/components/icon/index.mjs

@@ -0,0 +1,26 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx } from "react/jsx-runtime";
+import { getIcon } from "@bysages/core/icons";
+//#region src/components/icon/index.tsx
+function Icon({ size = "inherit", label, glyph, name, children, ...rest }) {
+	injectComponentStyle("icon");
+	const resolved = glyph ?? (name && children == null ? getIcon(name) : void 0);
+	if (name && children == null && glyph == null && !resolved) console.error(`[icons] unknown icon name "${name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	return /* @__PURE__ */ jsx("span", {
+		...rest,
+		role: label != null ? "img" : void 0,
+		"aria-label": label,
+		"aria-hidden": label != null ? void 0 : "true",
+		"data-scope": "icon",
+		"data-part": "root",
+		"data-size": size,
+		children: children ?? (resolved ? /* @__PURE__ */ jsx("svg", {
+			viewBox: `0 0 ${resolved.width ?? 24} ${resolved.height ?? 24}`,
+			fill: "currentColor",
+			"aria-hidden": "true",
+			dangerouslySetInnerHTML: { __html: resolved.body }
+		}) : null)
+	});
+}
+//#endregion
+export { Icon };

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from "react";
+//#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` — 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 Omit<HTMLAttributes<HTMLElement>, "onError" | "onLoad"> {
+  src: string;
+  alt?: string;
+  fit?: "cover" | "contain" | "fill" | "none";
+  loading?: "lazy" | "eager";
+  /** Shown in place of the picture when the source breaks. */
+  fallback?: ReactNode;
+}
+export declare function Image({ src, alt, fit, loading, fallback, ...rest }: ImageProps): import("react").JSX.Element;
+//#endregion

package/dist/components/image/index.mjs

@@ -0,0 +1,57 @@
+import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/components/image/index.tsx
+/** 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 /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: 3,
+				y: 4,
+				width: 18,
+				height: 16,
+				rx: 1.5
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: 9,
+				cy: 10,
+				r: 1.5
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5" })
+		]
+	});
+}
+function Image({ src, alt = "", fit = "cover", loading = "lazy", fallback, ...rest }) {
+	injectComponentStyle("image");
+	const [state, setState] = useState("loading");
+	useEffect(() => setState("loading"), [src]);
+	return /* @__PURE__ */ jsxs("figure", {
+		...rest,
+		"data-scope": "image",
+		"data-part": "root",
+		"data-state": state,
+		"data-fit": fit,
+		children: [/* @__PURE__ */ jsx("img", {
+			"data-scope": "image",
+			"data-part": "img",
+			src,
+			alt,
+			loading,
+			decoding: "async",
+			onLoad: () => setState("loaded"),
+			onError: () => setState("error")
+		}), state === "error" ? /* @__PURE__ */ jsx("div", {
+			"data-scope": "image",
+			"data-part": "fallback",
+			children: fallback ?? placeholderGlyph()
+		}) : null]
+	});
+}
+//#endregion
+export { Image };

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

@@ -0,0 +1,8 @@
+import { ImageCropper as ImageCropper$1 } from "@ark-ui/react/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/react/image-cropper";
+//#region src/components/image-cropper/index.tsx
+/** 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,18 @@
+//#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;
+  /** Reports the viewer's next state. */
+  onOpenChange?: (open: boolean) => void;
+}
+export declare function ImageViewer({ src, alt, open, zoomable, onOpenChange }: ImageViewerProps): import("react").JSX.Element;
+//#endregion