@bysages/svelte 0.4.4 → 0.5.0

package/dist/{FloatButtonFacade-C8nGcXe0.mjs → FloatButtonFacade-DWEaxhZ-.mjs}

@@ -1,19 +1,18 @@
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
-import { t as Button } from "./button-Cl45zjdj.mjs";
-import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
+import { t as Button } from "./button-D-u911qp.mjs";
+import { n as useComponentMessages } from "./messages-BZoDXYu3.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { getContext, setContext } from "svelte";
-//#region src/components/float-button/context.ts
+// src/components/float-button/context.ts
 /** Context key for {@link FloatButtonContext}, exported so a custom
 * part can read the group's state. */
 const FLOAT_BUTTON_KEY = Symbol("bysages-float-button");
 function useFloatButton() {
 	return getContext(FLOAT_BUTTON_KEY) ?? null;
 }
-//#endregion
-//#region src/components/float-button/FloatButton.svelte
+// src/components/float-button/FloatButton.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -58,8 +57,7 @@ function FloatButton($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-//#endregion
-//#region src/components/float-button/FloatButtonItem.svelte
+// src/components/float-button/FloatButtonItem.svelte
 var root$1 = $.from_html(`<div data-scope="float-button" data-part="item"><!> <span data-scope="float-button" data-part="item-label" aria-hidden="true"> </span></div>`);
 function FloatButtonItem($$anchor, $$props) {
 	$.push($$props, true);
@@ -107,8 +105,7 @@ function FloatButtonItem($$anchor, $$props) {
 	$.append($$anchor, div);
 	$.pop();
 }
-//#endregion
-//#region src/components/float-button/FloatButtonTrigger.svelte
+// src/components/float-button/FloatButtonTrigger.svelte
 function FloatButtonTrigger($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("float-button");
@@ -142,8 +139,7 @@ function FloatButtonTrigger($$anchor, $$props) {
 	}
 	$.pop();
 }
-//#endregion
-//#region src/components/float-button/FloatButtonFacade.svelte
+// src/components/float-button/FloatButtonFacade.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -234,5 +230,4 @@ function FloatButtonFacade($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { FLOAT_BUTTON_KEY as a, FloatButton as i, FloatButtonTrigger as n, FloatButtonItem as r, FloatButtonFacade as t };

package/dist/{FloatingPanel-nsymgBI7.mjs → FloatingPanel-Bzh9Xcpq.mjs}

@@ -1,11 +1,11 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Portal } from "@ark-ui/svelte/portal";
 import { FloatingPanel } from "@ark-ui/svelte/floating-panel";
-//#region src/components/floating-panel/FloatingPanelRoot.svelte
+// src/components/floating-panel/FloatingPanelRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -58,8 +58,7 @@ function FloatingPanelRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/floating-panel/FloatingPanel.svelte
+// src/components/floating-panel/FloatingPanel.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -261,5 +260,4 @@ function FloatingPanel$1($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { FloatingPanelRoot as n, FloatingPanel$1 as t };

package/dist/{HoverCard-c3tT648V.mjs → HoverCard-UD0UpoU2.mjs}

@@ -1,10 +1,10 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Portal } from "@ark-ui/svelte/portal";
 import { HoverCard } from "@ark-ui/svelte/hover-card";
-//#region src/components/hover-card/HoverCardRoot.svelte
+// src/components/hover-card/HoverCardRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -43,8 +43,7 @@ function HoverCardRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/hover-card/HoverCard.svelte
+// src/components/hover-card/HoverCard.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -150,5 +149,4 @@ function HoverCard$1($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { HoverCardRoot as n, HoverCard$1 as t };

package/dist/{ImageCropper-Dgyj2byr.mjs → ImageCropper-B0_WmsYX.mjs}

@@ -1,9 +1,9 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { ImageCropper } from "@ark-ui/svelte/image-cropper";
-//#region src/components/image-cropper/ImageCropperRoot.svelte
+// src/components/image-cropper/ImageCropperRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -63,8 +63,7 @@ function ImageCropperRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/image-cropper/ImageCropper.svelte
+// src/components/image-cropper/ImageCropper.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -151,5 +150,4 @@ function ImageCropper$1($$anchor, $$props) {
 		$$slots: { default: true }
 	}));
 }
-//#endregion
 export { ImageCropperRoot as n, ImageCropper$1 as t };

package/dist/{ImageViewer-s41DessS.mjs → ImageViewer-CJZnrFdu.mjs}

@@ -1,14 +1,15 @@
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
-import { t as Button } from "./button-Cl45zjdj.mjs";
-import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
-import { t as ButtonGroup } from "./button-group-D9mgSVlR.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
+import { t as Button } from "./button-D-u911qp.mjs";
+import { n as useComponentMessages } from "./messages-BZoDXYu3.mjs";
+import { t as ButtonGroup } from "./button-group-DTHZTPnA.mjs";
 import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { createImageViewerGestures } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Portal } from "@ark-ui/svelte/portal";
 import { Dialog } from "@ark-ui/svelte/dialog";
-//#region src/components/image-viewer/ImagePreview.svelte
+// src/components/image-viewer/ImagePreview.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -73,8 +74,7 @@ function ImagePreview($$anchor, $$props) {
 	$.append($$anchor, span);
 	$.pop();
 }
-//#endregion
-//#region src/components/image-viewer/ImageViewer.svelte
+// src/components/image-viewer/ImageViewer.svelte
 const tool = ($$anchor, label = $.noop, onclick = $.noop, icon = $.noop) => {
 	Button($$anchor, {
 		variant: "ghost",
@@ -100,28 +100,25 @@ var root_2 = $.from_html(`<img data-scope="image-viewer" data-part="viewport"/>
 function ImageViewer($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("image-viewer");
-	const MIN_SCALE = .5;
-	const MAX_SCALE = 3;
 	const SCALE_STEP = .25;
 	let alt = $.prop($$props, "alt", 3, ""), open = $.prop($$props, "open", 15, false), zoomable = $.prop($$props, "zoomable", 3, true);
 	const messages = useComponentMessages();
-	let scale = $.state(1);
-	let rotation = $.state(0);
+	let viewport = $.state(null);
+	let gestures = null;
 	function setOpen(value) {
 		open(value);
 		$$props.onOpenChange?.(value);
 	}
 	$.user_effect(() => {
-		if (open()) {
-			$.set(scale, 1);
-			$.set(rotation, 0);
-		}
+		gestures?.stop();
+		gestures = null;
+		if ($.get(viewport)) gestures = createImageViewerGestures($.get(viewport), { zoomable: zoomable() });
 	});
 	function zoom(step) {
-		$.set(scale, Math.min(MAX_SCALE, Math.max(MIN_SCALE, $.get(scale) + step)), true);
+		gestures?.zoomBy(step);
 	}
 	function turn() {
-		$.set(rotation, ($.get(rotation) + 90) % 360);
+		gestures?.rotate();
 	}
 	var fragment_2 = $.comment();
 	var node = $.first_child(fragment_2);
@@ -199,7 +196,7 @@ function ImageViewer($$anchor, $$props) {
 												children: ($$anchor, $$slotProps) => {
 													var fragment_9 = root_2();
 													var img = $.first_child(fragment_9);
-													let styles;
+													$.bind_this(img, ($$value) => $.set(viewport, $$value), () => $.get(viewport));
 													var div = $.sibling(img, 2);
 													var node_8 = $.child(div);
 													ButtonGroup(node_8, {
@@ -265,7 +262,6 @@ function ImageViewer($$anchor, $$props) {
 														$.set_attribute(img, "alt", alt());
 														$.set_attribute(img, "width", $$props.width);
 														$.set_attribute(img, "height", $$props.height);
-														styles = $.set_style(img, "", styles, { "--bs-image-viewer-transform": `scale(${$.get(scale)}) rotate(${$.get(rotation)}deg)` });
 													});
 													$.append($$anchor, fragment_9);
 												},
@@ -290,5 +286,4 @@ function ImageViewer($$anchor, $$props) {
 	$.append($$anchor, fragment_2);
 	$.pop();
 }
-//#endregion
 export { ImagePreview as n, ImageViewer as t };

package/dist/{Input-DLfLshYU.mjs → Input-DTXzYJnH.mjs}

@@ -2,7 +2,7 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { useFieldContext } from "@ark-ui/svelte/field";
-//#region src/components/input/mask.ts
+// src/components/input/mask.ts
 function accepts(slot, ch) {
 	if (slot === "9") return /\d/.test(ch);
 	if (slot === "a") return /[a-zA-Z]/.test(ch);
@@ -36,8 +36,7 @@ function applyMask(raw, mask) {
 	}
 	return out;
 }
-//#endregion
-//#region src/components/input/Input.svelte
+// src/components/input/Input.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -71,5 +70,4 @@ function Input($$anchor, $$props) {
 	$.append($$anchor, input);
 	$.pop();
 }
-//#endregion
 export { Input as t };

package/dist/{InternalIcon-Dr81WIG1.mjs → InternalIcon-34cw8jr_.mjs}

@@ -1,7 +1,7 @@
-import { n as iconHtml } from "./icon-CKL_BxrZ.mjs";
+import { n as iconHtml } from "./icon-CF5OqvV3.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-//#region src/internal/InternalIcon.svelte
+// src/internal/InternalIcon.svelte
 function InternalIcon($$anchor, $$props) {
 	$.push($$props, true);
 	let size = $.prop($$props, "size", 3, "md");
@@ -15,5 +15,4 @@ function InternalIcon($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
 export { InternalIcon as t };

package/dist/{JsonTreeViewTree-DkD987Zf.mjs → JsonTreeViewTree-DONQc4hx.mjs}

@@ -1,10 +1,10 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { JsonTreeView } from "@ark-ui/svelte/json-tree-view";
-//#region src/components/json-tree-view/JsonTreeViewRoot.svelte
+// src/components/json-tree-view/JsonTreeViewRoot.svelte
 var rest_excludes$2 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -36,8 +36,7 @@ function JsonTreeViewRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/json-tree-view/JsonTreeView.svelte
+// src/components/json-tree-view/JsonTreeView.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -97,8 +96,7 @@ function JsonTreeView$1($$anchor, $$props) {
 		$$slots: { default: true }
 	}));
 }
-//#endregion
-//#region src/components/json-tree-view/JsonTreeViewTree.svelte
+// src/components/json-tree-view/JsonTreeViewTree.svelte
 const defaultArrow = ($$anchor) => {
 	InternalIcon($$anchor, { name: "chevron-right" });
 };
@@ -156,5 +154,4 @@ function JsonTreeViewTree($$anchor, $$props) {
 	});
 	$.append($$anchor, fragment_1);
 }
-//#endregion
 export { JsonTreeView$1 as n, JsonTreeViewRoot as r, JsonTreeViewTree as t };

package/dist/{Listbox-C-u5WxHv.mjs → Listbox-B6AR7Q42.mjs}

@@ -1,10 +1,10 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
+import { t as InternalIcon } from "./InternalIcon-34cw8jr_.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Listbox, createListCollection } from "@ark-ui/svelte/listbox";
-//#region src/components/listbox/ListboxRoot.svelte
+// src/components/listbox/ListboxRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -40,8 +40,7 @@ function ListboxRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/listbox/Listbox.svelte
+// src/components/listbox/Listbox.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -185,5 +184,4 @@ function Listbox$1($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { ListboxRoot as n, Listbox$1 as t };

package/dist/{Marquee-BOpZFSCo.mjs → Marquee-D78rmIoV.mjs}

@@ -1,9 +1,9 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as useElementId } from "./id-Cu5GNK9U.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Marquee } from "@ark-ui/svelte/marquee";
-//#region src/components/marquee/MarqueeRoot.svelte
+// src/components/marquee/MarqueeRoot.svelte
 var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -42,8 +42,7 @@ function MarqueeRoot($$anchor, $$props) {
 	$.append($$anchor, fragment);
 	$.pop();
 }
-//#endregion
-//#region src/components/marquee/Marquee.svelte
+// src/components/marquee/Marquee.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
@@ -119,5 +118,4 @@ function Marquee$1($$anchor, $$props) {
 	}));
 	$.pop();
 }
-//#endregion
 export { MarqueeRoot as n, Marquee$1 as t };