@bysages/svelte 0.2.2 → 0.2.3

package/dist/input-group-DeKewnvZ.mjs

@@ -0,0 +1,62 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/input-group/InputGroup.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<div><!></div>`);
+function InputGroup$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("input-group");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var div = root$1();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "input-group",
+		"data-part": "root"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/input-group/InputGroupAddon.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function InputGroupAddon($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("input-group");
+	let rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "input-group",
+		"data-part": "addon"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/input-group/index.ts
+/** Merged controls: attachments and the entry fused into one seal —
+* Root, Addon. */
+const InputGroup = Object.assign(InputGroup$1, {
+	Root: InputGroup$1,
+	Addon: InputGroupAddon
+});
+//#endregion
+export { InputGroup as t };

package/dist/kbd-LXHpi4GM.mjs

@@ -0,0 +1,33 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/kbd/Kbd.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<kbd><!></kbd>`);
+function Kbd$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("kbd");
+	let rest = $.rest_props($$props, rest_excludes);
+	var kbd = root();
+	$.attribute_effect(kbd, () => ({
+		...rest,
+		"data-scope": "kbd",
+		"data-part": "root"
+	}));
+	var node = $.child(kbd);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(kbd);
+	$.append($$anchor, kbd);
+	$.pop();
+}
+//#endregion
+//#region src/components/kbd/index.ts
+/** A keycap in miniature, riding the type it annotates. */
+const Kbd = Kbd$1;
+//#endregion
+export { Kbd as t };

package/dist/layout-WRo4P9-_.mjs

@@ -0,0 +1,226 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { getContext, setContext } from "svelte";
+//#region src/components/layout/context.ts
+const LAYOUT_KEY = Symbol("bysages-layout");
+function provideLayout(context) {
+	setContext(LAYOUT_KEY, context);
+	return context;
+}
+function useLayout() {
+	return getContext(LAYOUT_KEY) ?? null;
+}
+//#endregion
+//#region src/components/layout/Layout.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"sider",
+	"children"
+]);
+var root$4 = $.from_html(`<div><!></div>`);
+function Layout$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("layout");
+	let rest = $.rest_props($$props, rest_excludes$4);
+	provideLayout({ siderPlacement: () => $$props.sider });
+	var div = root$4();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "layout",
+		"data-part": "root",
+		"data-sider": $$props.sider
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/layout/LayoutContent.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<main><!></main>`);
+function LayoutContent($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("layout");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var main = root$3();
+	$.attribute_effect(main, () => ({
+		...rest,
+		"data-scope": "layout",
+		"data-part": "content"
+	}));
+	var node = $.child(main);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(main);
+	$.append($$anchor, main);
+	$.pop();
+}
+//#endregion
+//#region src/components/layout/LayoutFooter.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$2 = $.from_html(`<footer><!></footer>`);
+function LayoutFooter($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("layout");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var footer = root$2();
+	$.attribute_effect(footer, () => ({
+		...rest,
+		"data-scope": "layout",
+		"data-part": "footer"
+	}));
+	var node = $.child(footer);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(footer);
+	$.append($$anchor, footer);
+	$.pop();
+}
+//#endregion
+//#region src/components/layout/LayoutHeader.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<header><!></header>`);
+function LayoutHeader($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("layout");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var header = root$1();
+	$.attribute_effect(header, () => ({
+		...rest,
+		"data-scope": "layout",
+		"data-part": "header"
+	}));
+	var node = $.child(header);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(header);
+	$.append($$anchor, header);
+	$.pop();
+}
+//#endregion
+//#region src/components/layout/LayoutSider.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"collapsed",
+	"width",
+	"collapsedWidth",
+	"resizable",
+	"minWidth",
+	"maxWidth",
+	"children"
+]);
+var root = $.from_html(`<div data-scope="layout" data-part="sider-resize" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>`);
+var root_1 = $.from_html(`<aside><!> <!></aside>`);
+function LayoutSider($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("layout");
+	let collapsed = $.prop($$props, "collapsed", 11, false), width = $.prop($$props, "width", 15, "16rem"), collapsedWidth = $.prop($$props, "collapsedWidth", 3, "3.5rem"), resizable = $.prop($$props, "resizable", 3, false), minWidth = $.prop($$props, "minWidth", 3, "12rem"), maxWidth = $.prop($$props, "maxWidth", 3, "24rem"), rest = $.rest_props($$props, rest_excludes);
+	const layout = useLayout();
+	/** One step of the arrow-key resize, in px. */
+	const RESIZE_STEP = 16;
+	let rail = $.state(null);
+	let dragging = $.state(false);
+	let startPointerX = 0;
+	let startWidth = 0;
+	const siderStyle = $.derived(() => [
+		typeof $$props.style === "string" ? $$props.style : null,
+		`--bs-layout-sider-width: ${collapsed() ? collapsedWidth() : width()}`,
+		`--bs-layout-sider-min: ${collapsed() ? collapsedWidth() : minWidth()}`,
+		`--bs-layout-sider-max: ${collapsed() ? collapsedWidth() : maxWidth()}`
+	].filter(Boolean).join("; "));
+	const towardFlow = $.derived(() => (layout?.siderPlacement() ?? "start") === "end" ? -1 : 1);
+	function onPointerDown(event) {
+		$.set(dragging, true);
+		startPointerX = event.clientX;
+		startWidth = $.get(rail) ? $.get(rail).getBoundingClientRect().width : 0;
+		event.currentTarget.setPointerCapture(event.pointerId);
+	}
+	function onPointerMove(event) {
+		if (!$.get(dragging)) return;
+		const next = Math.round(startWidth + $.get(towardFlow) * (event.clientX - startPointerX));
+		width(`${next}px`);
+	}
+	function onPointerUp(event) {
+		$.set(dragging, false);
+		event.currentTarget.releasePointerCapture(event.pointerId);
+	}
+	function onKeyDown(event) {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		event.preventDefault();
+		const widen = (layout?.siderPlacement() ?? "start") === "end" ? event.key === "ArrowLeft" : event.key === "ArrowRight";
+		const current = $.get(rail) ? $.get(rail).getBoundingClientRect().width : 0;
+		const next = Math.round(current + (widen ? RESIZE_STEP : -16));
+		width(`${next}px`);
+	}
+	var aside = root_1();
+	$.attribute_effect(aside, () => ({
+		...rest,
+		style: $.get(siderStyle),
+		"data-scope": "layout",
+		"data-part": "sider",
+		"data-collapsed": collapsed() ? "" : void 0,
+		"data-dragging": $.get(dragging) ? "" : void 0,
+		"data-resizable": resizable() ? "" : void 0
+	}));
+	var node = $.child(aside);
+	$.snippet(node, () => $$props.children ?? $.noop, () => ({ collapsed: collapsed() }));
+	var node_1 = $.sibling(node, 2);
+	var consequent = ($$anchor) => {
+		var div = root();
+		$.set_attribute(div, "tabindex", 0);
+		$.template_effect(($0) => {
+			$.set_attribute(div, "data-dragging", $.get(dragging) ? "" : void 0);
+			$.set_attribute(div, "aria-valuenow", $0);
+		}, [() => $.get(rail) ? Math.round($.get(rail).getBoundingClientRect().width) : 0]);
+		$.delegated("pointerdown", div, onPointerDown);
+		$.delegated("pointermove", div, onPointerMove);
+		$.delegated("pointerup", div, onPointerUp);
+		$.delegated("keydown", div, onKeyDown);
+		$.append($$anchor, div);
+	};
+	$.if(node_1, ($$render) => {
+		if (resizable() && !collapsed()) $$render(consequent);
+	});
+	$.reset(aside);
+	$.bind_this(aside, ($$value) => $.set(rail, $$value), () => $.get(rail));
+	$.append($$anchor, aside);
+	$.pop();
+}
+$.delegate([
+	"pointerdown",
+	"pointermove",
+	"pointerup",
+	"keydown"
+]);
+//#endregion
+//#region src/components/layout/index.ts
+/** The application skeleton: Root, Header, Sider, Content, Footer —
+* the admin arrangement dressed in the paper-and-ink surfaces. */
+const Layout = Object.assign(Layout$1, {
+	Root: Layout$1,
+	Header: LayoutHeader,
+	Sider: LayoutSider,
+	Content: LayoutContent,
+	Footer: LayoutFooter
+});
+//#endregion
+export { Layout as t };

package/dist/link-CuNiatc7.mjs

@@ -0,0 +1,36 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/link/Link.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"underline",
+	"children"
+]);
+var root = $.from_html(`<a><!></a>`);
+function Link$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("link");
+	let underline = $.prop($$props, "underline", 3, "hover"), rest = $.rest_props($$props, rest_excludes);
+	var a = root();
+	$.attribute_effect(a, () => ({
+		...rest,
+		"data-scope": "link",
+		"data-part": "root",
+		"data-underline": underline()
+	}));
+	var node = $.child(a);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(a);
+	$.append($$anchor, a);
+	$.pop();
+}
+//#endregion
+//#region src/components/link/index.ts
+/** A link is ink in the accent's voice: quiet at rest, deepening under
+* the hand, the halo at focus. */
+const Link = Link$1;
+//#endregion
+export { Link as t };

package/dist/list-B23lA_sc.mjs

@@ -0,0 +1,173 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/list/List.svelte
+var rest_excludes$4 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"bordered",
+	"hoverable",
+	"children"
+]);
+var root$4 = $.from_html(`<ul><!></ul>`);
+function List$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("list");
+	let bordered = $.prop($$props, "bordered", 3, false), hoverable = $.prop($$props, "hoverable", 3, false), rest = $.rest_props($$props, rest_excludes$4);
+	var ul = root$4();
+	$.attribute_effect(ul, () => ({
+		...rest,
+		"data-scope": "list",
+		"data-part": "root",
+		"data-bordered": bordered() || void 0,
+		"data-hoverable": hoverable() || void 0
+	}));
+	var node = $.child(ul);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(ul);
+	$.append($$anchor, ul);
+	$.pop();
+}
+//#endregion
+//#region src/components/list/ListActions.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$3 = $.from_html(`<div><!></div>`);
+function ListActions($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("list");
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var div = root$3();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "list",
+		"data-part": "actions"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/list/ListContent.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"title",
+	"description",
+	"children"
+]);
+var root$2 = $.from_html(`<div data-scope="list" data-part="title"><!></div>`);
+var root_1 = $.from_html(`<div data-scope="list" data-part="description"><!></div>`);
+var root_2 = $.from_html(`<div><!> <!> <!></div>`);
+function ListContent($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("list");
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var div = root_2();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "list",
+		"data-part": "content"
+	}));
+	var node = $.child(div);
+	var consequent = ($$anchor) => {
+		var div_1 = root$2();
+		var node_1 = $.child(div_1);
+		$.snippet(node_1, () => $$props.title);
+		$.reset(div_1);
+		$.append($$anchor, div_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.title) $$render(consequent);
+	});
+	var node_2 = $.sibling(node, 2);
+	var consequent_1 = ($$anchor) => {
+		var div_2 = root_1();
+		var node_3 = $.child(div_2);
+		$.snippet(node_3, () => $$props.description);
+		$.reset(div_2);
+		$.append($$anchor, div_2);
+	};
+	$.if(node_2, ($$render) => {
+		if ($$props.description) $$render(consequent_1);
+	});
+	var node_4 = $.sibling(node_2, 2);
+	$.snippet(node_4, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/list/ListItem.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root$1 = $.from_html(`<li><!></li>`);
+function ListItem($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("list");
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var li = root$1();
+	$.attribute_effect(li, () => ({
+		...rest,
+		"data-scope": "list",
+		"data-part": "item"
+	}));
+	var node = $.child(li);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(li);
+	$.append($$anchor, li);
+	$.pop();
+}
+//#endregion
+//#region src/components/list/ListLeading.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function ListLeading($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("list");
+	let rest = $.rest_props($$props, rest_excludes);
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "list",
+		"data-part": "leading"
+	}));
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/list/index.ts
+/** A ledger of rows: Root is the list, Item one row, Leading the mark
+* before the words, Content the title and its quiet echo, Actions the
+* way out. The bordered variant draws the hairlines; the hoverable
+* variant gives every row the wash — and any row the caller makes
+* clickable (role="button") answers the pointer on its own. */
+const List = Object.assign(List$1, {
+	Root: List$1,
+	Item: ListItem,
+	Leading: ListLeading,
+	Content: ListContent,
+	Actions: ListActions
+});
+//#endregion
+export { List as t };

package/dist/masonry-B4-v4kJ0.mjs

@@ -0,0 +1,52 @@
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+//#region src/components/masonry/Masonry.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"columns",
+	"gap",
+	"children"
+]);
+var root = $.from_html(`<div><!></div>`);
+function Masonry$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("masonry");
+	/** The same named steps of the space ramp the stack uses — one
+	* vocabulary of distance across the layout primitives. */
+	const gapVars = {
+		none: "0",
+		xs: "var(--bs-gap-xs)",
+		sm: "var(--bs-gap-sm)",
+		md: "var(--bs-gap-md)",
+		lg: "var(--bs-gap-lg)",
+		xl: "var(--bs-gap-xl)"
+	};
+	let columns = $.prop($$props, "columns", 3, 3), gap = $.prop($$props, "gap", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	const gapValue = $.derived(() => gapVars[gap()] ?? gapVars.md);
+	var div = root();
+	$.attribute_effect(div, ($0) => ({
+		...rest,
+		"data-scope": "masonry",
+		"data-part": "root",
+		[$.STYLE]: {
+			"--bs-masonry-columns": $0,
+			"--bs-masonry-gap": $.get(gapValue)
+		}
+	}), [() => String(columns())]);
+	var node = $.child(div);
+	$.snippet(node, () => $$props.children ?? $.noop);
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/masonry/index.ts
+/** A wall of uneven heights: items flow down each column before
+* crossing to the next, so the order is column-first. A row-flow wall
+* would need grid masonry, which browsers do not ship yet. */
+const Masonry = Masonry$1;
+//#endregion
+export { Masonry as t };