@bysages/svelte 0.4.1 → 0.4.3

package/dist/{table-847YLjld.mjs → table-HzpYIOst.mjs}

@@ -1,9 +1,9 @@
 import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
-import { t as iconHtml } from "./icon-lWVQxDG6.mjs";
-import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { n as iconHtml } from "./icon-CKL_BxrZ.mjs";
+import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
 import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Pagination } from "./components/pagination/index.mjs";
-import { n as Select$1 } from "./select-E3cvud0r.mjs";
+import { n as Select$1 } from "./select-CVMOvviD.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
@@ -83,6 +83,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"pageSizeOptions",
 	"stickyFooter",
 	"initialSorting",
+	"striped",
 	"globalFilterPlaceholder",
 	"emptyText",
 	"reorderable",
@@ -206,7 +207,7 @@ function DataTable$1($$anchor, $$props) {
 		10,
 		20,
 		50
-	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), striped = $.prop($$props, "striped", 3, false), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
 	const messages = useComponentMessages();
 	const globalFilterText = $.derived(() => $$props.globalFilterPlaceholder ?? messages().table.filterAll);
 	const SELECT_COL_ID = "__select";
@@ -549,6 +550,7 @@ function DataTable$1($$anchor, $$props) {
 		"data-scope": "table",
 		"data-part": "root",
 		"data-reorderable": reorderable() || void 0,
+		"data-striped": striped() || void 0,
 		[$.STYLE]: { "--bs-table-row-height": $0 }
 	}), [() => `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`]);
 	var node_5 = $.child(div_3);

package/dist/tag-CXAD4ox2.mjs

@@ -0,0 +1,141 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+//#region src/components/tag/Tag.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"tone",
+	"variant",
+	"checkable",
+	"checked",
+	"defaultValue",
+	"closable",
+	"disabled",
+	"onClose",
+	"children"
+]);
+var root = $.from_html(`<span><button type="button" data-scope="tag" data-part="check"><!></button> <button type="button" data-scope="tag" data-part="close" aria-label="Remove"><!></button></span>`);
+var root_1 = $.from_html(`<button><!></button>`);
+var root_2 = $.from_html(`<button type="button" data-scope="tag" data-part="close" aria-label="Remove"><!></button>`);
+var root_3 = $.from_html(`<span><!> <!></span>`);
+function Tag$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("tag");
+	let tone = $.prop($$props, "tone", 3, "ink"), variant = $.prop($$props, "variant", 3, "solid"), checkable = $.prop($$props, "checkable", 3, false), checked = $.prop($$props, "checked", 15), defaultValue = $.prop($$props, "defaultValue", 3, false), closable = $.prop($$props, "closable", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	let internalChecked = $.state($.proxy(defaultValue()));
+	const isChecked = $.derived(() => checkable() && (checked() ?? $.get(internalChecked)));
+	function toggle() {
+		if (disabled()) return;
+		const next = !(checked() ?? $.get(internalChecked));
+		$.set(internalChecked, next);
+		checked(next);
+	}
+	function dismiss(event) {
+		event.stopPropagation();
+		if (disabled()) return;
+		$$props.onClose?.(event);
+	}
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent = ($$anchor) => {
+		var span = root();
+		$.attribute_effect(span, () => ({
+			...rest,
+			"data-scope": "tag",
+			"data-part": "root",
+			"data-tone": tone(),
+			"data-variant": variant(),
+			"data-checkable": "true",
+			"data-checked": $.get(isChecked) || void 0,
+			"data-disabled": disabled() || void 0
+		}));
+		var button = $.child(span);
+		var node_1 = $.child(button);
+		$.snippet(node_1, () => $$props.children ?? $.noop);
+		$.reset(button);
+		var button_1 = $.sibling(button, 2);
+		var node_2 = $.child(button_1);
+		InternalIcon(node_2, { name: "x" });
+		$.reset(button_1);
+		$.reset(span);
+		$.template_effect(() => {
+			$.set_attribute(button, "aria-pressed", $.get(isChecked));
+			button.disabled = disabled();
+			button_1.disabled = disabled();
+		});
+		$.delegated("click", button, toggle);
+		$.delegated("click", button_1, dismiss);
+		$.append($$anchor, span);
+	};
+	var consequent_1 = ($$anchor) => {
+		var button_2 = root_1();
+		$.attribute_effect(button_2, () => ({
+			...rest,
+			type: "button",
+			"data-scope": "tag",
+			"data-part": "root",
+			"data-tone": tone(),
+			"data-variant": variant(),
+			"data-checkable": "true",
+			"data-checked": $.get(isChecked) || void 0,
+			"data-disabled": disabled() || void 0,
+			"aria-pressed": $.get(isChecked),
+			disabled: disabled(),
+			onclick: toggle
+		}));
+		var node_3 = $.child(button_2);
+		$.snippet(node_3, () => $$props.children ?? $.noop);
+		$.reset(button_2);
+		$.append($$anchor, button_2);
+	};
+	var alternate = ($$anchor) => {
+		var span_1 = root_3();
+		$.attribute_effect(span_1, () => ({
+			...rest,
+			"data-scope": "tag",
+			"data-part": "root",
+			"data-tone": tone(),
+			"data-variant": variant(),
+			"data-disabled": disabled() || void 0,
+			"aria-disabled": disabled() || void 0
+		}));
+		var node_4 = $.child(span_1);
+		$.snippet(node_4, () => $$props.children ?? $.noop);
+		var node_5 = $.sibling(node_4, 2);
+		var consequent_2 = ($$anchor) => {
+			var button_3 = root_2();
+			var node_6 = $.child(button_3);
+			InternalIcon(node_6, { name: "x" });
+			$.reset(button_3);
+			$.template_effect(() => button_3.disabled = disabled());
+			$.delegated("click", button_3, dismiss);
+			$.append($$anchor, button_3);
+		};
+		$.if(node_5, ($$render) => {
+			if (closable()) $$render(consequent_2);
+		});
+		$.reset(span_1);
+		$.append($$anchor, span_1);
+	};
+	$.if(node, ($$render) => {
+		if (checkable() && closable()) $$render(consequent);
+		else if (checkable()) $$render(consequent_1, 1);
+		else $$render(alternate, -1);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+$.delegate(["click"]);
+//#endregion
+//#region src/components/tag/index.ts
+/** A small named seal for filtering and cataloguing. The resting shape
+* is a span; `checkable` raises it to a pressed button, and `closable`
+* hangs the removal seal inside — dismissal stays the consumer's state,
+* the way the banner's does. */
+const Tag = withSelfRoot(Tag$1);
+//#endregion
+export { Tag as t };

package/dist/{transfer-D4UANNwH.mjs → transfer-CnfoiJ8O.mjs}

@@ -1,5 +1,5 @@
 import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
-import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
 import { t as Button } from "./button-Cl45zjdj.mjs";
 import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";

package/dist/{tree-select-CyjhG4ZB.mjs → tree-select-CR2-Jskd.mjs}

@@ -1,5 +1,5 @@
 import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
-import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as InternalIcon } from "./InternalIcon-Dr81WIG1.mjs";
 import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { t as Input } from "./Input-DLfLshYU.mjs";
 import "svelte/internal/disclose-version";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/svelte",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -52,7 +52,7 @@
     "@tanstack/svelte-virtual": "3.13.40",
     "@zag-js/cascade-select": "1.45.0",
     "@zag-js/svelte": "1.45.0",
-    "@bysages/core": "0.4.1"
+    "@bysages/core": "0.4.3"
   },
   "devDependencies": {
     "@json-render/core": "0.21.0",

package/dist/Pagination-OpR284GX.mjs

@@ -1,180 +0,0 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { injectComponentStyle } from "@bysages/core/styling";
-import { Pagination } from "@ark-ui/svelte/pagination";
-//#region src/components/pagination/PaginationRoot.svelte
-var rest_excludes$1 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function PaginationRoot($$anchor, $$props) {
-	const generatedId = $.props_id();
-	$.push($$props, true);
-	injectComponentStyle("pagination");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$1);
-	const id = $.derived(() => useElementId("pagination", generatedId, $$props.id));
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Pagination.Root, ($$anchor, ArkPagination_Root) => {
-		ArkPagination_Root($$anchor, $.spread_props(() => rest, {
-			get id() {
-				return $.get(id);
-			},
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-//#region src/components/pagination/Pagination.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"page",
-	"defaultValue",
-	"count",
-	"pageSize",
-	"defaultPageSize",
-	"siblingCount",
-	"label",
-	"children"
-]);
-var root = $.from_html(`<!> <!> <!> <!>`, 1);
-function Pagination$1($$anchor, $$props) {
-	$.push($$props, true);
-	let page = $.prop($$props, "page", 15), count = $.prop($$props, "count", 3, 0), siblingCount = $.prop($$props, "siblingCount", 3, 1), rest = $.rest_props($$props, rest_excludes);
-	PaginationRoot($$anchor, $.spread_props({
-		get count() {
-			return count();
-		},
-		get defaultPage() {
-			return $$props.defaultValue;
-		},
-		get pageSize() {
-			return $$props.pageSize;
-		},
-		get defaultPageSize() {
-			return $$props.defaultPageSize;
-		},
-		get siblingCount() {
-			return siblingCount();
-		},
-		get "aria-label"() {
-			return $$props.label;
-		}
-	}, () => rest, {
-		get page() {
-			return page();
-		},
-		set page($$value) {
-			page($$value);
-		},
-		children: ($$anchor, $$slotProps) => {
-			var fragment_1 = root();
-			var node = $.first_child(fragment_1);
-			$.component(node, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
-				ArkPagination_PrevTrigger($$anchor, {
-					"aria-label": "Previous page",
-					children: ($$anchor, $$slotProps) => {
-						InternalIcon($$anchor, { name: "chevron-left" });
-					},
-					$$slots: { default: true }
-				});
-			});
-			var node_1 = $.sibling(node, 2);
-			{
-				const render = ($$anchor, pagination = $.noop) => {
-					var fragment_3 = $.comment();
-					var node_2 = $.first_child(fragment_3);
-					$.each(node_2, 19, () => pagination()().pages, (item, index) => item.type === "page" ? item.value : `ellipsis-${index}`, ($$anchor, item, index) => {
-						var fragment_4 = $.comment();
-						var node_3 = $.first_child(fragment_4);
-						var consequent = ($$anchor) => {
-							var fragment_5 = $.comment();
-							var node_4 = $.first_child(fragment_5);
-							$.component(node_4, () => Pagination.Item, ($$anchor, ArkPagination_Item) => {
-								ArkPagination_Item($$anchor, {
-									type: "page",
-									get value() {
-										return $.get(item).value;
-									},
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text = $.text();
-										$.template_effect(() => $.set_text(text, $.get(item).value));
-										$.append($$anchor, text);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_5);
-						};
-						var alternate = ($$anchor) => {
-							var fragment_7 = $.comment();
-							var node_5 = $.first_child(fragment_7);
-							$.component(node_5, () => Pagination.Ellipsis, ($$anchor, ArkPagination_Ellipsis) => {
-								ArkPagination_Ellipsis($$anchor, {
-									get index() {
-										return $.get(index);
-									},
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_1 = $.text("…");
-										$.append($$anchor, text_1);
-									},
-									$$slots: { default: true }
-								});
-							});
-							$.append($$anchor, fragment_7);
-						};
-						$.if(node_3, ($$render) => {
-							if ($.get(item).type === "page") $$render(consequent);
-							else $$render(alternate, -1);
-						});
-						$.append($$anchor, fragment_4);
-					});
-					$.append($$anchor, fragment_3);
-				};
-				$.component(node_1, () => Pagination.Context, ($$anchor, ArkPagination_Context) => {
-					ArkPagination_Context($$anchor, {
-						render,
-						$$slots: { render: true }
-					});
-				});
-			}
-			var node_6 = $.sibling(node_1, 2);
-			$.component(node_6, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
-				ArkPagination_NextTrigger($$anchor, {
-					"aria-label": "Next page",
-					children: ($$anchor, $$slotProps) => {
-						InternalIcon($$anchor, { name: "chevron-right" });
-					},
-					$$slots: { default: true }
-				});
-			});
-			var node_7 = $.sibling(node_6, 2);
-			$.snippet(node_7, () => $$props.children ?? $.noop);
-			$.append($$anchor, fragment_1);
-		},
-		$$slots: { default: true }
-	}));
-	$.pop();
-}
-//#endregion
-export { PaginationRoot as n, Pagination$1 as t };

package/dist/Progress-ZSXSq5na.mjs

@@ -1,115 +0,0 @@
-import { t as useElementId } from "./id-Alz497yI.mjs";
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-import { injectComponentStyle } from "@bysages/core/styling";
-import { Progress } from "@ark-ui/svelte/progress";
-//#region src/components/progress/ProgressRoot.svelte
-var rest_excludes$1 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"size",
-	"children"
-]);
-function ProgressRoot($$anchor, $$props) {
-	const generatedId = $.props_id();
-	$.push($$props, true);
-	injectComponentStyle("progress");
-	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$1);
-	const id = $.derived(() => useElementId("progress", generatedId, $$props.id));
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Progress.Root, ($$anchor, ArkProgress_Root) => {
-		ArkProgress_Root($$anchor, $.spread_props(() => rest, {
-			get id() {
-				return $.get(id);
-			},
-			get "data-size"() {
-				return size();
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = $.comment();
-				var node_1 = $.first_child(fragment_1);
-				$.snippet(node_1, () => $$props.children ?? $.noop);
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		}));
-	});
-	$.append($$anchor, fragment);
-	$.pop();
-}
-//#endregion
-//#region src/components/progress/Progress.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"value",
-	"label",
-	"disabled",
-	"children"
-]);
-var root = $.from_html(`<!> <!> <!> <!>`, 1);
-function Progress$1($$anchor, $$props) {
-	$.push($$props, true);
-	let value = $.prop($$props, "value", 15), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	ProgressRoot($$anchor, $.spread_props({ get disabled() {
-		return disabled();
-	} }, () => rest, {
-		get value() {
-			return value();
-		},
-		set value($$value) {
-			value($$value);
-		},
-		children: ($$anchor, $$slotProps) => {
-			var fragment_1 = root();
-			var node = $.first_child(fragment_1);
-			var consequent = ($$anchor) => {
-				var fragment_2 = $.comment();
-				var node_1 = $.first_child(fragment_2);
-				$.component(node_1, () => Progress.Label, ($$anchor, ArkProgress_Label) => {
-					ArkProgress_Label($$anchor, {
-						children: ($$anchor, $$slotProps) => {
-							$.next();
-							var text = $.text();
-							$.template_effect(() => $.set_text(text, $$props.label));
-							$.append($$anchor, text);
-						},
-						$$slots: { default: true }
-					});
-				});
-				$.append($$anchor, fragment_2);
-			};
-			$.if(node, ($$render) => {
-				if ($$props.label) $$render(consequent);
-			});
-			var node_2 = $.sibling(node, 2);
-			$.component(node_2, () => Progress.ValueText, ($$anchor, ArkProgress_ValueText) => {
-				ArkProgress_ValueText($$anchor, {});
-			});
-			var node_3 = $.sibling(node_2, 2);
-			$.component(node_3, () => Progress.Track, ($$anchor, ArkProgress_Track) => {
-				ArkProgress_Track($$anchor, {
-					children: ($$anchor, $$slotProps) => {
-						var fragment_4 = $.comment();
-						var node_4 = $.first_child(fragment_4);
-						$.component(node_4, () => Progress.Range, ($$anchor, ArkProgress_Range) => {
-							ArkProgress_Range($$anchor, {});
-						});
-						$.append($$anchor, fragment_4);
-					},
-					$$slots: { default: true }
-				});
-			});
-			var node_5 = $.sibling(node_3, 2);
-			$.snippet(node_5, () => $$props.children ?? $.noop);
-			$.append($$anchor, fragment_1);
-		},
-		$$slots: { default: true }
-	}));
-	$.pop();
-}
-//#endregion
-export { ProgressRoot as n, Progress$1 as t };