@bysages/svelte 0.2.2 → 0.2.3

package/dist/cascade-select-C-eBcN_4.mjs

@@ -0,0 +1,287 @@
+import { t as Input } from "./Input-Biz4J1B6.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Portal } from "@ark-ui/svelte/portal";
+import { useEnvironmentContext } from "@ark-ui/svelte/environment";
+import { useFilter, useLocaleContext } from "@ark-ui/svelte/locale";
+import * as cascade from "@zag-js/cascade-select";
+import { normalizeProps, useMachine } from "@zag-js/svelte";
+//#region src/components/cascade-select/CascadeSelect.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"data",
+	"placeholder",
+	"highlightTrigger",
+	"filterable",
+	"size",
+	"multiple",
+	"disabled"
+]);
+var root = $.from_html(`<span data-part="branch-indicator" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span>`);
+var root_1 = $.from_html(`<li><span> </span> <!> <span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 5 5L19 7"></path></svg></span></li>`);
+var root_2 = $.from_html(`<ul></ul> <!>`, 1);
+var root_3 = $.from_html(`<div data-part="search"><!></div>`);
+var root_4 = $.from_html(`<p data-part="empty">Nothing matches</p>`);
+var root_5 = $.from_html(`<button type="button" data-part="match"> </button>`);
+var root_6 = $.from_html(`<div><div><!> <div data-part="corridor"><!></div></div></div>`);
+var root_7 = $.from_html(`<div><div><button><span> </span> <span><svg viewBox="0 0 24 24" 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></span></button></div> <!></div>`);
+function CascadeSelect$1($$anchor, $$props) {
+	const id = $.props_id();
+	$.push($$props, true);
+	const column = ($$anchor, node = $.noop, indexPath = $.noop, valuePath = $.noop) => {
+		const nodeState = $.derived(() => $.get(api).getItemState({
+			item: node(),
+			indexPath: indexPath(),
+			value: valuePath()
+		}));
+		const children = $.derived(() => $.get(collection).getNodeChildren(node()));
+		var fragment = root_2();
+		var ul = $.first_child(fragment);
+		$.attribute_effect(ul, ($0) => ({ ...$0 }), [() => $.get(api).getListProps({
+			item: node(),
+			indexPath: indexPath(),
+			value: valuePath()
+		})]);
+		$.each(ul, 23, () => $.get(children), (item) => $.get(collection).getNodeValue(item), ($$anchor, item, index) => {
+			const itemValue = $.derived(() => $.get(collection).getNodeValue($.get(item)));
+			const itemProps = $.derived(() => ({
+				item: $.get(item),
+				indexPath: [...indexPath(), $.get(index)],
+				value: [...valuePath(), $.get(itemValue)]
+			}));
+			const itemState = $.derived(() => $.get(api).getItemState($.get(itemProps)));
+			var li = root_1();
+			$.attribute_effect(li, ($0) => ({ ...$0 }), [() => $.get(api).getItemProps($.get(itemProps))]);
+			var span = $.child(li);
+			$.attribute_effect(span, ($0) => ({ ...$0 }), [() => $.get(api).getItemTextProps($.get(itemProps))]);
+			var text = $.only_child(span, true);
+			var node_1 = $.sibling(span, 2);
+			var consequent = ($$anchor) => {
+				var span_1 = root();
+				$.append($$anchor, span_1);
+			};
+			$.if(node_1, ($$render) => {
+				if ($.get(itemState).hasChildren) $$render(consequent);
+			});
+			var span_2 = $.sibling(node_1, 2);
+			$.attribute_effect(span_2, ($0) => ({ ...$0 }), [() => $.get(api).getItemIndicatorProps($.get(itemProps))]);
+			$.reset(li);
+			$.template_effect(() => $.set_text(text, $.get(item).label));
+			$.append($$anchor, li);
+		});
+		$.reset(ul);
+		var node_2 = $.sibling(ul, 2);
+		var consequent_1 = ($$anchor) => {
+			{
+				let $0 = $.derived(() => [...indexPath(), $.get(nodeState).highlightedIndex]);
+				let $1 = $.derived(() => [...valuePath(), $.get(collection).getNodeValue($.get(nodeState).highlightedChild)]);
+				column($$anchor, () => $.get(nodeState).highlightedChild, () => $.get($0), () => $.get($1));
+			}
+		};
+		var d = $.derived(() => $.get(nodeState).highlightedChild != null && $.get(collection).isBranchNode($.get(nodeState).highlightedChild));
+		$.if(node_2, ($$render) => {
+			if ($.get(d)) $$render(consequent_1);
+		});
+		$.append($$anchor, fragment);
+	};
+	injectComponentStyle("cascade-select");
+	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), size = $.prop($$props, "size", 3, "md"), multiple = $.prop($$props, "multiple", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const locale = useLocaleContext();
+	const env = useEnvironmentContext();
+	const collection = $.derived(() => cascade.collection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		nodeToChildren: (node) => node.children ?? [],
+		rootNode: {
+			value: "ROOT",
+			label: "",
+			children: $$props.data
+		}
+	}));
+	const service = useMachine(cascade.machine, () => ({
+		id,
+		collection: $.get(collection),
+		dir: locale().dir,
+		getRootNode: env().getRootNode,
+		disabled: disabled() || void 0,
+		multiple: multiple() || void 0,
+		...value() !== void 0 ? { value: value() } : null,
+		...$$props.highlightTrigger != null ? { highlightTrigger: $$props.highlightTrigger } : null,
+		onValueChange(details) {
+			value(details.value);
+		}
+	}));
+	const api = $.derived(() => cascade.connect(service, normalizeProps));
+	let query = $.state("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = $.derived(() => filterable() && $.get(query).trim().length > 0);
+	/** The corridor's answer to a query: every leaf whose route matches —
+	* the query may land on any hop, and the whole route still shows. */
+	const matchPaths = $.derived(() => {
+		if (!$.get(filtering)) return [];
+		const q = $.get(query).trim();
+		const hits = [];
+		const walk = (nodes, path, labels, matched) => {
+			for (const node of nodes ?? []) {
+				const hit = matched || filterFns.contains(node.label, q);
+				const nextPath = [...path, node.value];
+				const nextLabels = [...labels, node.label];
+				if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
+				else if (hit) hits.push({
+					path: nextPath,
+					labels: nextLabels
+				});
+			}
+		};
+		walk($$props.data, [], [], false);
+		return hits;
+	});
+	const isSelected = (path) => (value() ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (multiple()) {
+			const current = value() ?? [];
+			const key = path.join("/");
+			const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
+			$.get(api).setValue(next);
+		} else {
+			$.get(api).selectValue(path);
+			$.get(api).setOpen(false);
+		}
+	}
+	/** The machine's `valueAsString` only updates through its select event,
+	* so an externally-set `value` would render the placeholder forever —
+	* resolve the labels from the data instead. */
+	function labelsFor(path) {
+		const out = [];
+		let nodes = $$props.data;
+		for (const segment of path) {
+			const node = nodes?.find((n) => n.value === segment);
+			if (!node) return null;
+			out.push(node.label);
+			nodes = node.children;
+		}
+		return out;
+	}
+	const display = $.derived(() => {
+		const parts = (value() ?? []).map((path) => labelsFor(path)?.join(" / ")).filter((label) => label != null);
+		return parts.length > 0 ? parts.join(", ") : null;
+	});
+	var div = root_7();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		...$0,
+		"data-size": size()
+	}), [() => $.get(api).getRootProps()]);
+	var div_1 = $.child(div);
+	$.attribute_effect(div_1, ($0) => ({ ...$0 }), [() => $.get(api).getControlProps()]);
+	var button = $.child(div_1);
+	var event_handler = (event) => {
+		$.get(api).getTriggerProps().onclick?.(event);
+		$.set(query, "");
+	};
+	$.attribute_effect(button, ($0) => ({
+		...$0,
+		onclick: event_handler,
+		disabled: disabled() || void 0
+	}), [() => $.get(api).getTriggerProps()]);
+	var span_3 = $.child(button);
+	$.attribute_effect(span_3, ($0) => ({ ...$0 }), [() => $.get(api).getValueTextProps()]);
+	var text_1 = $.only_child(span_3, true);
+	var span_4 = $.sibling(span_3, 2);
+	$.attribute_effect(span_4, ($0) => ({ ...$0 }), [() => $.get(api).getIndicatorProps()]);
+	$.reset(button);
+	$.reset(div_1);
+	var node_3 = $.sibling(div_1, 2);
+	Portal(node_3, {
+		children: ($$anchor, $$slotProps) => {
+			var div_2 = root_6();
+			$.attribute_effect(div_2, ($0) => ({ ...$0 }), [() => $.get(api).getPositionerProps()]);
+			var div_3 = $.child(div_2);
+			$.attribute_effect(div_3, ($0) => ({
+				...$0,
+				"data-size": size()
+			}), [() => $.get(api).getContentProps()]);
+			var node_4 = $.child(div_3);
+			var consequent_2 = ($$anchor) => {
+				var div_4 = root_3();
+				var node_5 = $.child(div_4);
+				Input(node_5, {
+					size: "sm",
+					placeholder: "Filter…",
+					"aria-label": "Filter options",
+					get value() {
+						return $.get(query);
+					},
+					set value($$value) {
+						$.set(query, $$value, true);
+					}
+				});
+				$.reset(div_4);
+				$.append($$anchor, div_4);
+			};
+			$.if(node_4, ($$render) => {
+				if (filterable()) $$render(consequent_2);
+			});
+			var div_5 = $.sibling(node_4, 2);
+			var node_6 = $.child(div_5);
+			var consequent_4 = ($$anchor) => {
+				var fragment_2 = $.comment();
+				var node_7 = $.first_child(fragment_2);
+				var consequent_3 = ($$anchor) => {
+					var p_1 = root_4();
+					$.append($$anchor, p_1);
+				};
+				var alternate = ($$anchor) => {
+					var fragment_3 = $.comment();
+					var node_8 = $.first_child(fragment_3);
+					$.each(node_8, 17, () => $.get(matchPaths), (hit) => hit.path.join("/"), ($$anchor, hit) => {
+						var button_1 = root_5();
+						var text_2 = $.only_child(button_1, true);
+						$.template_effect(($0, $1) => {
+							$.set_attribute(button_1, "data-selected", $0);
+							$.set_text(text_2, $1);
+						}, [() => isSelected($.get(hit).path) || void 0, () => $.get(hit).labels.join(" / ")]);
+						$.delegated("click", button_1, () => pickMatch($.get(hit).path));
+						$.append($$anchor, button_1);
+					});
+					$.append($$anchor, fragment_3);
+				};
+				$.if(node_7, ($$render) => {
+					if ($.get(matchPaths).length === 0) $$render(consequent_3);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_2);
+			};
+			var alternate_1 = ($$anchor) => {
+				column($$anchor, () => $.get(collection).rootNode, () => [], () => []);
+			};
+			$.if(node_6, ($$render) => {
+				if ($.get(filtering)) $$render(consequent_4);
+				else $$render(alternate_1, -1);
+			});
+			$.reset(div_5);
+			$.reset(div_3);
+			$.reset(div_2);
+			$.template_effect(() => $.set_attribute(div_5, "data-flow", $.get(filtering) ? "flat" : "columns"));
+			$.append($$anchor, div_2);
+		},
+		$$slots: { default: true }
+	});
+	$.reset(div);
+	$.template_effect(() => $.set_text(text_1, $.get(display) ?? placeholder()));
+	$.append($$anchor, div);
+	$.pop();
+}
+$.delegate(["click"]);
+//#endregion
+//#region src/components/cascade-select/index.ts
+/** A corridor of linked columns: pick a branch and the next column
+* dissolves open beside it, until a leaf click settles the whole
+* path. */
+const CascadeSelect = CascadeSelect$1;
+//#endregion
+export { CascadeSelect as t };

package/dist/checkbox-group-ARW_z7gp.mjs

@@ -0,0 +1,130 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { useFieldContext } from "@ark-ui/svelte/field";
+import { Checkbox } from "@ark-ui/svelte/checkbox";
+//#region src/components/checkbox-group/CheckboxGroup.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"options",
+	"layout",
+	"size",
+	"invalid",
+	"disabled"
+]);
+var root = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12.5 5 5L19 7"></path></svg>`);
+var root_1 = $.from_html(`<!> <!> <!>`, 1);
+var root_2 = $.from_html(`<div></div>`);
+function CheckboxGroup$1($$anchor, $$props) {
+	const uid = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("checkbox-group");
+	let value = $.prop($$props, "value", 31, () => $.proxy([])), layout = $.prop($$props, "layout", 3, "vertical"), 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 selected = $.derived(() => new Set(value()));
+	const isInvalid = $.derived(() => invalid() || field?.()?.invalid === true);
+	const isDisabled = $.derived(() => disabled() || field?.()?.disabled === true);
+	function toggle(option) {
+		const next = new Set($.get(selected));
+		if (next.has(option)) next.delete(option);
+		else next.add(option);
+		value([...next]);
+	}
+	var div = root_2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		role: "group",
+		"data-scope": "checkbox-group",
+		"data-part": "root",
+		"data-layout": layout(),
+		"data-invalid": $.get(isInvalid) ? "" : void 0
+	}));
+	$.each(div, 21, () => $$props.options, (option) => option.value, ($$anchor, option) => {
+		var fragment = $.comment();
+		var node = $.first_child(fragment);
+		{
+			let $0 = $.derived(() => ({
+				label: `${uid}:${$.get(option).value}:label`,
+				hiddenInput: `${uid}:${$.get(option).value}:input`
+			}));
+			let $1 = $.derived(() => $.get(selected).has($.get(option).value));
+			let $2 = $.derived(() => $.get(isDisabled) || $.get(option).disabled === true);
+			$.component(node, () => Checkbox.Root, ($$anchor, ArkCheckbox_Root) => {
+				ArkCheckbox_Root($$anchor, {
+					get ids() {
+						return $.get($0);
+					},
+					get checked() {
+						return $.get($1);
+					},
+					get invalid() {
+						return $.get(isInvalid);
+					},
+					get "data-size"() {
+						return size();
+					},
+					get disabled() {
+						return $.get($2);
+					},
+					onCheckedChange: () => toggle($.get(option).value),
+					children: ($$anchor, $$slotProps) => {
+						var fragment_1 = root_1();
+						var node_1 = $.first_child(fragment_1);
+						$.component(node_1, () => Checkbox.Control, ($$anchor, ArkCheckbox_Control) => {
+							ArkCheckbox_Control($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_2 = $.comment();
+									var node_2 = $.first_child(fragment_2);
+									$.component(node_2, () => Checkbox.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
+										ArkCheckbox_Indicator($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												var svg = root();
+												$.append($$anchor, svg);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_2);
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_3 = $.sibling(node_1, 2);
+						$.component(node_3, () => Checkbox.Label, ($$anchor, ArkCheckbox_Label) => {
+							ArkCheckbox_Label($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text = $.text();
+									$.template_effect(() => $.set_text(text, $.get(option).label));
+									$.append($$anchor, text);
+								},
+								$$slots: { default: true }
+							});
+						});
+						var node_4 = $.sibling(node_3, 2);
+						$.component(node_4, () => Checkbox.HiddenInput, ($$anchor, ArkCheckbox_HiddenInput) => {
+							ArkCheckbox_HiddenInput($$anchor, {});
+						});
+						$.append($$anchor, fragment_1);
+					},
+					$$slots: { default: true }
+				});
+			});
+		}
+		$.append($$anchor, fragment);
+	});
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/checkbox-group/index.ts
+/** One question, many answers: a labelled stack (or row) of the
+* seal-cut checkboxes bound to a single array. */
+const CheckboxGroup = CheckboxGroup$1;
+injectComponentStyle("checkbox");
+//#endregion
+export { CheckboxGroup as t };

package/dist/chip-mjLlbQ2t.mjs

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/chip/Chip.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"max",
+	"tone",
+	"variant"
+]);
+var root = $.from_html(`<span> </span>`);
+function Chip$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("chip");
+	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), rest = $.rest_props($$props, rest_excludes);
+	var span = root();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "chip",
+		"data-part": "root",
+		"data-tone": tone(),
+		"data-variant": variant()
+	}));
+	var text = $.only_child(span, true);
+	$.template_effect(($0) => $.set_text(text, $0), [() => $$props.max != null && $$props.value > $$props.max ? `${$$props.max}+` : String($$props.value)]);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/chip/index.ts
+/** A counting coin: the numeric value, capped at `max` with an ellipsis
+* of the remainder ("99+"). */
+const Chip = Chip$1;
+//#endregion
+export { Chip as t };