@bysages/react 0.3.1 → 0.4.1

package/dist/id-C37UYLwJ.mjs

@@ -0,0 +1,13 @@
+import { useId } from "react";
+//#region src/internal/id.ts
+/** Zag composes owned-part ids with separators, so React's generated id
+* is narrowed to characters that survive both markup and selectors. */
+const UNSAFE_ID_CHARACTERS = /[^a-zA-Z0-9_-]/g;
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, props = {}) {
+	const generated = useId();
+	const explicit = props.id;
+	return typeof explicit === "string" && explicit ? explicit : `bs-${scope}-${generated.replace(UNSAFE_ID_CHARACTERS, "-")}`;
+}
+//#endregion
+export { useElementId as t };

package/dist/image-viewer-B-hKFkEw.mjs

@@ -0,0 +1,141 @@
+import { t as iconNode } from "./icon-BALgGtNK.mjs";
+import { t as useElementId } from "./id-C37UYLwJ.mjs";
+import { n as useComponentMessages } from "./messages-1jJWtaYU.mjs";
+import { Button } from "./components/button/index.mjs";
+import { ButtonGroup } from "./components/button-group/index.mjs";
+import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Portal } from "@ark-ui/react/portal";
+import { Dialog } from "@ark-ui/react/dialog";
+//#region src/components/image-viewer/preview.tsx
+/** The default doorway is the curated preview icon; custom content keeps
+* that icon as its hover and focus affordance. */
+function ImageViewerPreview({ label, children, "data-part": dataPart, ...rest }) {
+	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
+	const parts = [dataPart, "preview"].filter(Boolean).join(" ");
+	const isIcon = children == null;
+	return /* @__PURE__ */ jsxs("span", {
+		...rest,
+		"data-scope": "image-viewer",
+		"data-part": parts,
+		...isIcon ? {
+			"data-empty": "true",
+			"aria-label": messages.imageViewer.preview
+		} : {},
+		children: [children ?? iconNode("eye"), isIcon ? null : /* @__PURE__ */ jsxs("span", {
+			"data-scope": "image-viewer",
+			"data-part": "preview-overlay",
+			"aria-hidden": true,
+			children: [iconNode("eye"), label ? /* @__PURE__ */ jsx("span", {
+				"data-part": "preview-label",
+				children: label
+			}) : null]
+		})]
+	});
+}
+//#endregion
+//#region src/components/image-viewer/index.tsx
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+const TOOL_ICONS = {
+	zoomIn: "zoom-in",
+	zoomOut: "zoom-out",
+	rotate: "rotate-cw",
+	close: "x"
+};
+function ImageViewerImpl({ src, alt = "", open, zoomable = true, width, height, children, onOpenChange, id }) {
+	injectComponentStyle("image-viewer");
+	const hostId = useElementId("image-viewer", { id });
+	const messages = useComponentMessages();
+	const [localOpen, setLocalOpen] = useState(false);
+	const [scale, setScale] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const isOpen = open ?? localOpen;
+	const setOpen = (value) => {
+		if (open === void 0) setLocalOpen(value);
+		onOpenChange?.(value);
+	};
+	useEffect(() => {
+		if (isOpen) {
+			setScale(1);
+			setRotation(0);
+		}
+	}, [isOpen]);
+	function zoom(step) {
+		setScale((current) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, current + step)));
+	}
+	function rotate() {
+		setRotation((current) => (current + 90) % 360);
+	}
+	function toolButton(label, icon, onClick) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			children: iconNode(icon)
+		});
+	}
+	function closeToolButton(label, icon) {
+		return /* @__PURE__ */ jsx(Dialog.CloseTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				square: true,
+				size: "lg",
+				"aria-label": label,
+				children: iconNode(icon)
+			})
+		});
+	}
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		id: `${hostId}:dialog`,
+		open: isOpen,
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		children: [/* @__PURE__ */ jsx(Dialog.Trigger, {
+			asChild: true,
+			"data-scope": "image-viewer",
+			"data-part": "trigger",
+			children: children ?? /* @__PURE__ */ jsx(ImageViewerPreview, {})
+		}), /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: "bs-image-viewer-backdrop" }), /* @__PURE__ */ jsx(Dialog.Positioner, {
+			className: "bs-image-viewer-positioner",
+			children: /* @__PURE__ */ jsxs(Dialog.Content, {
+				className: "bs-image-viewer-content",
+				"aria-label": alt || "Image preview",
+				onClick: (event) => {
+					if (event.target === event.currentTarget) setOpen(false);
+				},
+				children: [/* @__PURE__ */ jsx("img", {
+					"data-scope": "image-viewer",
+					"data-part": "viewport",
+					src,
+					alt,
+					width,
+					height,
+					style: { "--bs-image-viewer-transform": `scale(${scale}) rotate(${rotation}deg)` }
+				}), /* @__PURE__ */ jsx("div", {
+					"data-scope": "image-viewer",
+					"data-part": "toolbar",
+					children: /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+						zoomable ? [toolButton(messages.imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP)), toolButton(messages.imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25))] : null,
+						toolButton(messages.imageViewer.rotate, TOOL_ICONS.rotate, rotate),
+						closeToolButton(messages.imageViewer.close, TOOL_ICONS.close)
+					] })
+				})]
+			})
+		})] })]
+	});
+}
+const ImageViewer = Object.assign(ImageViewerImpl, {
+	...Dialog$1,
+	Preview: ImageViewerPreview
+});
+//#endregion
+export { ImageViewer as t };