@bysages/svelte 0.2.1 → 0.2.3

package/dist/textarea-DzDc678j.mjs

@@ -0,0 +1,44 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { useFieldContext } from "@ark-ui/svelte/field";
+//#region src/components/textarea/Textarea.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"invalid"
+]);
+var root = $.from_html(`<textarea></textarea>`);
+function Textarea$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("textarea");
+	let value = $.prop($$props, "value", 15), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const field = useFieldContext();
+	const fieldProps = $.derived(() => field?.()?.getTextareaProps() ?? {});
+	var textarea = root();
+	$.remove_textarea_child(textarea);
+	var event_handler = (event) => {
+		value(event.currentTarget.value);
+	};
+	$.attribute_effect(textarea, () => ({
+		...$.get(fieldProps),
+		...rest,
+		"data-scope": "textarea",
+		"data-part": "root",
+		"data-invalid": invalid() || $.get(fieldProps)["data-invalid"] != null ? "" : void 0,
+		oninput: event_handler
+	}));
+	$.bind_value(textarea, value);
+	$.append($$anchor, textarea);
+	$.pop();
+}
+//#endregion
+//#region src/components/textarea/index.ts
+/** The bare multi-line input, dressed in the field recipe: border,
+* surface, focus halo — no shadow. Inside a Field.Root it picks up the
+* label wiring and the invalid state from the context. */
+const Textarea = Textarea$1;
+//#endregion
+export { Textarea as t };

package/dist/timeline-BV4eahUx.mjs

@@ -0,0 +1,115 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/timeline/Timeline.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<ol><!></ol>`);
+function Timeline$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("timeline");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var ol = root$3();
+	$.attribute_effect(ol, () => ({
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "root"
+	}));
+	var node = $.child(ol);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(ol);
+	$.append($$anchor, ol);
+	$.pop();
+}
+//#endregion
+//#region src/components/timeline/TimelineContent.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<div><!></div>`);
+function TimelineContent($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("timeline");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "content"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/timeline/TimelineItem.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<li><!></li>`);
+function TimelineItem($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("timeline");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var li = root$1();
+	$.attribute_effect(li, () => ({
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "item"
+	}));
+	var node = $.child(li);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(li);
+	$.append($$anchor, li);
+	$.pop();
+}
+//#endregion
+//#region src/components/timeline/TimelineMarker.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<span><!></span>`);
+function TimelineMarker($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("timeline");
+	let rest = $.rest_props($$props, rest_excludes);
+	var span = root();
+	$.attribute_effect(span, () => ({
+		...rest,
+		"data-scope": "timeline",
+		"data-part": "marker"
+	}));
+	var node = $.child(span);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(span);
+	$.append($$anchor, span);
+	$.pop();
+}
+//#endregion
+//#region src/components/timeline/index.ts
+/** A line of moments: Root is the ordered thread, Item one moment on it,
+* Marker the point where the thread passes, Content what the moment
+* holds. The hairline between markers is drawn by the stylesheet. */
+const Timeline = Object.assign(Timeline$1, {
+	Root: Timeline$1,
+	Item: TimelineItem,
+	Marker: TimelineMarker,
+	Content: TimelineContent
+});
+//#endregion
+export { Timeline as t };

package/dist/transfer-0IAuhFCe.mjs

@@ -0,0 +1,235 @@
+import { t as Button } from "./button-BCcX7lHq.mjs";
+import { Input } from "./components/input/index.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Checkbox } from "@ark-ui/svelte/checkbox";
+//#region src/components/transfer/Transfer.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"data",
+	"titles",
+	"searchable",
+	"disabled"
+]);
+var root = $.from_html(`<div data-scope="transfer" data-part="search"><!></div>`);
+var root_1 = $.from_html(`<p data-scope="transfer" data-part="empty">Nothing here</p>`);
+var root_2 = $.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_3 = $.from_html(`<!> <!> <!>`, 1);
+var root_4 = $.from_html(`<div data-scope="transfer" data-part="panel"><div data-scope="transfer" data-part="head"><span data-scope="transfer" data-part="title"> </span> <span data-scope="transfer" data-part="count"> </span></div> <!> <div data-scope="transfer" data-part="list"><!></div></div>`);
+var root_5 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"></path></svg>`);
+var root_6 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"></path></svg>`);
+var root_7 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
+function Transfer$1($$anchor, $$props) {
+	$.push($$props, true);
+	const panel = ($$anchor, side = $.noop, title = $.noop, items = $.noop, checked = $.noop) => {
+		var div = root_4();
+		var div_1 = $.child(div);
+		var span = $.child(div_1);
+		var text = $.only_child(span, true);
+		var span_1 = $.sibling(span, 2);
+		var text_1 = $.only_child(span_1, true);
+		$.reset(div_1);
+		var node = $.sibling(div_1, 2);
+		var consequent = ($$anchor) => {
+			var div_2 = root();
+			var node_1 = $.child(div_2);
+			{
+				let $0 = $.derived(() => side() === "source" ? $.get(sourceQuery) : $.get(targetQuery));
+				let $1 = $.derived(() => `Filter ${title()}`);
+				Input(node_1, {
+					size: "sm",
+					get value() {
+						return $.get($0);
+					},
+					placeholder: "Filter…",
+					get "aria-label"() {
+						return $.get($1);
+					},
+					oninput: (event) => {
+						const query = event.currentTarget.value;
+						if (side() === "source") $.set(sourceQuery, query, true);
+						else $.set(targetQuery, query, true);
+					}
+				});
+			}
+			$.reset(div_2);
+			$.append($$anchor, div_2);
+		};
+		$.if(node, ($$render) => {
+			if (searchable()) $$render(consequent);
+		});
+		var div_3 = $.sibling(node, 2);
+		var node_2 = $.child(div_3);
+		var consequent_1 = ($$anchor) => {
+			var p = root_1();
+			$.append($$anchor, p);
+		};
+		var alternate = ($$anchor) => {
+			var fragment = $.comment();
+			var node_3 = $.first_child(fragment);
+			$.each(node_3, 17, items, (item) => item.value, ($$anchor, item) => {
+				var fragment_1 = $.comment();
+				var node_4 = $.first_child(fragment_1);
+				{
+					let $0 = $.derived(() => checked().has($.get(item).value));
+					let $1 = $.derived(() => disabled() || $.get(item).disabled === true);
+					$.component(node_4, () => Checkbox.Root, ($$anchor, ArkCheckbox_Root) => {
+						ArkCheckbox_Root($$anchor, {
+							get checked() {
+								return $.get($0);
+							},
+							get disabled() {
+								return $.get($1);
+							},
+							onCheckedChange: () => toggle(checked(), $.get(item).value),
+							children: ($$anchor, $$slotProps) => {
+								var fragment_2 = root_3();
+								var node_5 = $.first_child(fragment_2);
+								$.component(node_5, () => Checkbox.Control, ($$anchor, ArkCheckbox_Control) => {
+									ArkCheckbox_Control($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											var fragment_3 = $.comment();
+											var node_6 = $.first_child(fragment_3);
+											$.component(node_6, () => Checkbox.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
+												ArkCheckbox_Indicator($$anchor, {
+													children: ($$anchor, $$slotProps) => {
+														var svg = root_2();
+														$.append($$anchor, svg);
+													},
+													$$slots: { default: true }
+												});
+											});
+											$.append($$anchor, fragment_3);
+										},
+										$$slots: { default: true }
+									});
+								});
+								var node_7 = $.sibling(node_5, 2);
+								$.component(node_7, () => Checkbox.Label, ($$anchor, ArkCheckbox_Label) => {
+									ArkCheckbox_Label($$anchor, {
+										"data-part": "label",
+										children: ($$anchor, $$slotProps) => {
+											$.next();
+											var text_2 = $.text();
+											$.template_effect(() => $.set_text(text_2, $.get(item).label));
+											$.append($$anchor, text_2);
+										},
+										$$slots: { default: true }
+									});
+								});
+								var node_8 = $.sibling(node_7, 2);
+								$.component(node_8, () => Checkbox.HiddenInput, ($$anchor, ArkCheckbox_HiddenInput) => {
+									ArkCheckbox_HiddenInput($$anchor, {});
+								});
+								$.append($$anchor, fragment_2);
+							},
+							$$slots: { default: true }
+						});
+					});
+				}
+				$.append($$anchor, fragment_1);
+			});
+			$.append($$anchor, fragment);
+		};
+		$.if(node_2, ($$render) => {
+			if (items().length === 0) $$render(consequent_1);
+			else $$render(alternate, -1);
+		});
+		$.reset(div_3);
+		$.reset(div);
+		$.template_effect(() => {
+			$.set_attribute(div, "data-side", side());
+			$.set_text(text, title());
+			$.set_text(text_1, items().length);
+		});
+		$.append($$anchor, div);
+	};
+	injectComponentStyle("transfer");
+	let value = $.prop($$props, "value", 31, () => $.proxy([])), titles = $.prop($$props, "titles", 19, () => ["Source", "Target"]), searchable = $.prop($$props, "searchable", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	let checkedSource = $.proxy(/* @__PURE__ */ new Set());
+	let checkedTarget = $.proxy(/* @__PURE__ */ new Set());
+	let sourceQuery = $.state("");
+	let targetQuery = $.state("");
+	const target = $.derived(() => new Set(value()));
+	function panelItems(values, inTarget, query) {
+		return values.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()) && $.get(target).has(item.value) === inTarget);
+	}
+	const sourceItems = $.derived(() => panelItems($$props.data, false, $.get(sourceQuery)));
+	const targetItems = $.derived(() => panelItems($$props.data, true, $.get(targetQuery)));
+	function toggle(set, item) {
+		if (set.has(item)) set.delete(item);
+		else set.add(item);
+	}
+	function move(toTarget) {
+		const moving = toTarget ? checkedSource : checkedTarget;
+		if (moving.size === 0) return;
+		const next = toTarget ? [...value(), ...moving].filter((item, index, all) => all.indexOf(item) === index) : value().filter((item) => !moving.has(item));
+		moving.clear();
+		value(next);
+	}
+	var div_4 = root_7();
+	$.attribute_effect(div_4, () => ({
+		...rest,
+		"data-scope": "transfer",
+		"data-part": "root"
+	}));
+	var node_9 = $.child(div_4);
+	panel(node_9, () => "source", () => titles()[0], () => $.get(sourceItems), () => checkedSource);
+	var div_5 = $.sibling(node_9, 2);
+	var node_10 = $.child(div_5);
+	{
+		let $0 = $.derived(() => checkedSource.size === 0 || disabled());
+		Button(node_10, {
+			variant: "outline",
+			size: "sm",
+			square: true,
+			get disabled() {
+				return $.get($0);
+			},
+			"aria-label": "Move right",
+			onclick: () => move(true),
+			children: ($$anchor, $$slotProps) => {
+				var svg_1 = root_5();
+				$.append($$anchor, svg_1);
+			},
+			$$slots: { default: true }
+		});
+	}
+	var node_11 = $.sibling(node_10, 2);
+	{
+		let $0 = $.derived(() => checkedTarget.size === 0 || disabled());
+		Button(node_11, {
+			variant: "outline",
+			size: "sm",
+			square: true,
+			get disabled() {
+				return $.get($0);
+			},
+			"aria-label": "Move left",
+			onclick: () => move(false),
+			children: ($$anchor, $$slotProps) => {
+				var svg_2 = root_6();
+				$.append($$anchor, svg_2);
+			},
+			$$slots: { default: true }
+		});
+	}
+	$.reset(div_5);
+	panel($.sibling(div_5, 2), () => "target", () => titles()[1], () => $.get(targetItems), () => checkedTarget);
+	$.reset(div_4);
+	$.append($$anchor, div_4);
+	$.pop();
+}
+//#endregion
+//#region src/components/transfer/index.ts
+/** Two ledgers and a crossing: items sit in the source column until
+* the reader checks them and walks them across — and back, the same
+* way. */
+const Transfer = Transfer$1;
+injectComponentStyle("checkbox");
+//#endregion
+export { Transfer as t };