@bysages/svelte 0.2.3 → 0.3.1

package/dist/order-list-D3EhH7EX.mjs

@@ -0,0 +1,129 @@
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/order-list/OrderList.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"options",
+	"label"
+]);
+var root = $.from_html(`<li draggable="" aria-roledescription="Sortable item" data-scope="order-list" data-part="item"><span data-scope="order-list" data-part="grip" aria-hidden="true">⋮⋮</span> <span data-scope="order-list" data-part="label"> </span> <span data-scope="order-list" data-part="controls"><button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path><path d="M5 4h14"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path><path d="M5 20h14"></path></svg></button></span></li>`);
+var root_1 = $.from_html(`<div><ol data-scope="order-list" data-part="list"></ol></div>`);
+function OrderList$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("order-list");
+	let value = $.prop($$props, "value", 31, () => $.proxy([])), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
+	let dragging = $.state(null);
+	let dropLine = $.state(null);
+	const rows = $.derived(() => value().map((entry) => $$props.options.find((option) => option.value === entry)).filter((option) => option != null));
+	function move(entry, offset) {
+		const next = [...value()];
+		const from = next.indexOf(entry);
+		const to = Math.max(0, Math.min(next.length - 1, from + offset));
+		if (from === to) return;
+		next.splice(to, 0, ...next.splice(from, 1));
+		value(next);
+	}
+	function reset() {
+		$.set(dragging, null);
+		$.set(dropLine, null);
+	}
+	function drop() {
+		const entry = $.get(dragging);
+		if (entry == null) return;
+		const seam = $.get(dropLine);
+		const from = value().indexOf(entry);
+		if (seam && seam.index === from) return reset();
+		const next = value().filter((candidate) => candidate !== entry);
+		let at = seam ? seam.before ? seam.index : seam.index + 1 : next.length;
+		if (from < at) at -= 1;
+		next.splice(Math.max(0, Math.min(next.length, at)), 0, entry);
+		value(next);
+		reset();
+	}
+	var div = root_1();
+	var event_handler = (event) => {
+		const host = event.currentTarget;
+		if (!event.relatedTarget || !host.contains(event.relatedTarget)) $.set(dropLine, null);
+	};
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "order-list",
+		"data-part": "root",
+		ondragleave: event_handler
+	}));
+	var ol = $.child(div);
+	$.each(ol, 23, () => $.get(rows), (option) => option.value, ($$anchor, option, index) => {
+		var li = root();
+		var span = $.sibling($.child(li), 2);
+		var text = $.only_child(span, true);
+		var span_1 = $.sibling(span, 2);
+		var button = $.child(span_1);
+		var button_1 = $.sibling(button, 2);
+		var button_2 = $.sibling(button_1, 2);
+		var button_3 = $.sibling(button_2, 2);
+		$.reset(span_1);
+		$.reset(li);
+		$.template_effect(($0, $1, $2, $3) => {
+			$.set_attribute(li, "data-dragging", $.get(dragging) === $.get(option).value ? "" : void 0);
+			$.set_attribute(li, "data-drop-line", $.get(dropLine) && $.get(dropLine).index === $.get(index) ? $.get(dropLine).before ? "top" : "bottom" : void 0);
+			$.set_text(text, $.get(option).label);
+			$.set_attribute(button, "aria-label", $0);
+			button.disabled = $.get(index) === 0;
+			$.set_attribute(button_1, "aria-label", $1);
+			button_1.disabled = $.get(index) === 0;
+			$.set_attribute(button_2, "aria-label", $2);
+			button_2.disabled = $.get(index) === $.get(rows).length - 1;
+			$.set_attribute(button_3, "aria-label", $3);
+			button_3.disabled = $.get(index) === $.get(rows).length - 1;
+		}, [
+			() => messages().orderList.toTop,
+			() => messages().orderList.moveUp,
+			() => messages().orderList.moveDown,
+			() => messages().orderList.toBottom
+		]);
+		$.event("dragstart", li, (event) => {
+			$.set(dragging, $.get(option).value, true);
+			event.dataTransfer?.setData("text/plain", $.get(option).value);
+			if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+		});
+		$.event("dragend", li, reset);
+		$.event("dragover", li, (event) => {
+			event.preventDefault();
+			if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+			const rect = event.currentTarget.getBoundingClientRect();
+			const before = event.clientY < rect.top + rect.height / 2;
+			$.set(dropLine, $.get(dragging) != null && !($.get(option).value === $.get(dragging) && before) ? {
+				index: $.get(index),
+				before
+			} : null, true);
+		});
+		$.event("drop", li, (event) => {
+			event.preventDefault();
+			drop();
+		});
+		$.delegated("click", button, () => move($.get(option).value, -$.get(index)));
+		$.delegated("click", button_1, () => move($.get(option).value, -1));
+		$.delegated("click", button_2, () => move($.get(option).value, 1));
+		$.delegated("click", button_3, () => move($.get(option).value, $.get(rows).length - 1 - $.get(index)));
+		$.append($$anchor, li);
+	});
+	$.reset(ol);
+	$.reset(div);
+	$.template_effect(() => $.set_attribute(ol, "aria-label", $$props.label));
+	$.append($$anchor, div);
+	$.pop();
+}
+$.delegate(["click"]);
+//#endregion
+//#region src/components/order-list/index.ts
+/** A ledger the reader may rewrite: rows move by grip or by the side
+* arrows; the value is the order. */
+const OrderList = OrderList$1;
+//#endregion
+export { OrderList as t };

package/dist/result-4Oee2ndu.mjs

@@ -0,0 +1,159 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/result/Description.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$4 = $.from_html(`<p><!></p>`);
+function Description($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	var p = root$4();
+	$.attribute_effect(p, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "description"
+	}));
+	var node = $.child(p);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(p);
+	$.append($$anchor, p);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Extra.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function Extra($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "extra"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Result.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"status",
+	"children"
+]);
+var root$2 = $.from_html(`<div><!></div>`);
+function Result$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	/** The verdict the operation returned; the fixed pigments speak it. */
+	let status = $.prop($$props, "status", 3, "info"), rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-status": status(),
+		"data-scope": "result",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/ResultIcon.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_svg(`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"></svg>`);
+var root_1 = $.from_html(`<div><!></div>`);
+function ResultIcon($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	const MARK = "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>";
+	var div = root_1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "icon"
+	}));
+	var node = $.child(div);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children ?? $.noop);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var svg = root$1();
+		$.html(svg, () => MARK, true);
+		$.reset(svg);
+		$.append($$anchor, svg);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/Title.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<h3><!></h3>`);
+function Title($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("result");
+	let rest = $.rest_props($$props, rest_excludes);
+	var h3 = root();
+	$.attribute_effect(h3, () => ({
+		...rest,
+		"data-scope": "result",
+		"data-part": "title"
+	}));
+	var node = $.child(h3);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(h3);
+	$.append($$anchor, h3);
+	$.pop();
+}
+//#endregion
+//#region src/components/result/index.ts
+/** A verdict drawn after the deed — Result, Result.Icon, Result.Title,
+* Result.Description, Result.Extra. */
+const Result = Object.assign(Result$1, {
+	Icon: ResultIcon,
+	Title,
+	Description,
+	Extra
+});
+//#endregion
+export { Result as t };

package/dist/select-8ume4i2e.mjs

@@ -0,0 +1,99 @@
+import { t as SelectRoot } from "./SelectRoot-l-rb18FH.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { useFieldContext } from "@ark-ui/svelte/field";
+import { Select } from "@ark-ui/svelte/select";
+//#region src/components/select/NativeSelect.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"options",
+	"size",
+	"invalid",
+	"placeholder",
+	"disabled",
+	"aria-label",
+	"aria-labelledby"
+]);
+var root = $.from_html(`<option disabled=""> </option>`);
+var root_1 = $.from_html(`<option> </option>`);
+var root_2 = $.from_html(`<span><select><!><!></select> <svg data-scope="select" data-part="native-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>`);
+function NativeSelect$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("select");
+	let value = $.prop($$props, "value", 15, ""), size = $.prop($$props, "size", 3, "md"), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const field = useFieldContext();
+	const fieldProps = $.derived(() => field?.()?.getInputProps() ?? {});
+	const isInvalid = $.derived(() => invalid() || field?.()?.invalid === true);
+	const isDisabled = $.derived(() => disabled() || field?.()?.disabled === true);
+	const isEmpty = $.derived(() => value() == null || value() === "");
+	var span = root_2();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "select",
+		"data-part": "native-root",
+		"data-size": size(),
+		"data-invalid": $.get(isInvalid) ? "" : void 0,
+		"data-disabled": $.get(isDisabled) ? "" : void 0,
+		"data-placeholder-shown": $.get(isEmpty) ? "" : void 0
+	}));
+	var select = $.child(span);
+	$.attribute_effect(select, () => ({
+		...$.get(fieldProps),
+		"aria-label": $$props["aria-label"],
+		"aria-labelledby": $$props["aria-labelledby"],
+		"data-scope": "select",
+		"data-part": "native",
+		disabled: $.get(isDisabled) || void 0
+	}));
+	var node = $.child(select);
+	var consequent = ($$anchor) => {
+		var option_1 = root();
+		var text = $.only_child(option_1, true);
+		option_1.value = option_1.__value = "";
+		$.template_effect(() => {
+			$.set_attribute(option_1, "hidden", $.get(isEmpty) ? void 0 : true);
+			$.set_text(text, $$props.placeholder);
+		});
+		$.append($$anchor, option_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.placeholder) $$render(consequent);
+	});
+	var node_1 = $.sibling(node);
+	$.each(node_1, 17, () => $$props.options, (option) => option.value, ($$anchor, option) => {
+		var option_2 = root_1();
+		var text_1 = $.only_child(option_2, true);
+		var option_2_value = {};
+		$.template_effect(() => {
+			option_2.disabled = $.get(option).disabled;
+			$.set_text(text_1, $.get(option).label);
+			if (option_2_value !== (option_2_value = $.get(option).value)) option_2.value = (option_2.__value = option_2_value) ?? "";
+		});
+		$.append($$anchor, option_2);
+	});
+	$.reset(select);
+	$.next(2);
+	$.reset(span);
+	$.bind_select_value(select, value);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/select/index.ts
+/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
+* whole control and its list dissolves open as a paper vessel, the checked
+* row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
+* Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
+* Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
+const Select$1 = {
+	...Select,
+	Root: SelectRoot
+};
+/** The platform's own list wearing the control recipe. */
+const NativeSelect = NativeSelect$1;
+//#endregion
+export { Select$1 as n, NativeSelect as t };

package/dist/{split-button-CGjPB9DQ.mjs → split-button-DnmVc_J0.mjs}

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -25,6 +26,7 @@ function SplitButton$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("split-button");
 	let items = $.prop($$props, "items", 19, () => []), variant = $.prop($$props, "variant", 3, "solid"), tone = $.prop($$props, "tone", 3, "ink"), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	var div = root_2();
 	$.attribute_effect(div, () => ({
 		...rest,
@@ -64,16 +66,16 @@ function SplitButton$1($$anchor, $$props) {
 				{
 					const asChild = ($$anchor, props = $.noop) => {
 						var button = root();
-						$.attribute_effect(button, ($0) => ({
+						$.attribute_effect(button, ($0, $1) => ({
 							...$0,
 							disabled: disabled(),
-							"aria-label": "More actions",
+							"aria-label": $1,
 							"data-variant": variant(),
 							"data-tone": tone(),
 							"data-size": size(),
 							"data-square": "true",
 							"data-motion": "ink-ripple lit"
-						}), [() => props()()]);
+						}), [() => props()(), () => messages().more.actions]);
 						$.append($$anchor, button);
 					};
 					$.component(node_2, () => Menu.Trigger, ($$anchor, ArkMenu_Trigger) => {

package/dist/spotlight-DMC5E1eS.mjs

@@ -0,0 +1,51 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/spotlight/Spotlight.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"radius",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function Spotlight$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("spotlight");
+	/** How far the lamp throws before the ink swallows it. */
+	let rest = $.rest_props($$props, rest_excludes);
+	function track(event) {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	}
+	var div = root();
+	var event_handler = (event) => {
+		track(event);
+		event.currentTarget.setAttribute("data-hovered", "");
+	};
+	var event_handler_1 = (event) => event.currentTarget.removeAttribute("data-hovered");
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "spotlight",
+		"data-part": "root",
+		onpointermove: track,
+		onpointerenter: event_handler,
+		onpointerleave: event_handler_1,
+		[$.STYLE]: { "--bs-spot-radius": $$props.radius }
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/spotlight/index.ts
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. */
+const Spotlight = Spotlight$1;
+//#endregion
+export { Spotlight as t };