@bysages/svelte 0.4.3 → 0.4.4

package/dist/AvatarFacade-BNErD2uE.mjs

@@ -0,0 +1,147 @@
+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 { Avatar } from "@ark-ui/svelte/avatar";
+//#region src/components/avatar/Avatar.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"shape",
+	"children"
+]);
+function Avatar$1($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("avatar");
+	let size = $.prop($$props, "size", 3, "md"), shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("avatar", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			get "data-shape"() {
+				return shape();
+			},
+			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/avatar/AvatarFacade.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"name",
+	"src",
+	"size",
+	"shape",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+function AvatarFacade($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("avatar");
+	let size = $.prop($$props, "size", 3, "md"), shape = $.prop($$props, "shape", 3, "circle"), rest = $.rest_props($$props, rest_excludes);
+	const id = $.derived(() => useElementId("avatar", generatedId, $$props.id));
+	const initials = $.derived(() => ($$props.name ?? "").trim().split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join(""));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Avatar.Root, ($$anchor, ArkAvatar_Root) => {
+		ArkAvatar_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			get "data-shape"() {
+				return shape();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				var consequent = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+					$.snippet(node_2, () => $$props.children);
+					$.append($$anchor, fragment_2);
+				};
+				var alternate = ($$anchor) => {
+					var fragment_3 = root();
+					var node_3 = $.first_child(fragment_3);
+					var consequent_1 = ($$anchor) => {
+						var fragment_4 = $.comment();
+						var node_4 = $.first_child(fragment_4);
+						{
+							let $0 = $.derived(() => $$props.name ?? void 0);
+							$.component(node_4, () => Avatar.Image, ($$anchor, ArkAvatar_Image) => {
+								ArkAvatar_Image($$anchor, {
+									get src() {
+										return $$props.src;
+									},
+									get alt() {
+										return $.get($0);
+									}
+								});
+							});
+						}
+						$.append($$anchor, fragment_4);
+					};
+					$.if(node_3, ($$render) => {
+						if ($$props.src) $$render(consequent_1);
+					});
+					var node_5 = $.sibling(node_3, 2);
+					var consequent_2 = ($$anchor) => {
+						var fragment_5 = $.comment();
+						var node_6 = $.first_child(fragment_5);
+						$.component(node_6, () => Avatar.Fallback, ($$anchor, ArkAvatar_Fallback) => {
+							ArkAvatar_Fallback($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text = $.text();
+									$.template_effect(() => $.set_text(text, $.get(initials)));
+									$.append($$anchor, text);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_5);
+					};
+					$.if(node_5, ($$render) => {
+						if ($$props.name) $$render(consequent_2);
+					});
+					$.append($$anchor, fragment_3);
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.children) $$render(consequent);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+export { Avatar$1 as n, AvatarFacade as t };

package/dist/{banner-CXrEuEc1.mjs → BannerIcon-DpvxwWCc.mjs}

@@ -4,19 +4,19 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/banner/Banner.svelte
-var rest_excludes$6 = /* @__PURE__ */ new Set([
+var rest_excludes$7 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"status",
 	"children"
 ]);
-var root$6 = $.from_html(`<div><!></div>`);
-function Banner$1($$anchor, $$props) {
+var root$7 = $.from_html(`<div><!></div>`);
+function Banner($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$6);
-	var div = root$6();
+	let status = $.prop($$props, "status", 3, "ink"), rest = $.rest_props($$props, rest_excludes$7);
+	var div = root$7();
 	$.attribute_effect(div, () => ({
 		...rest,
 		role: status() === "ink" ? void 0 : "status",
@@ -32,18 +32,18 @@ function Banner$1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerActions.svelte
-var rest_excludes$5 = /* @__PURE__ */ new Set([
+var rest_excludes$6 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$5 = $.from_html(`<div><!></div>`);
+var root$6 = $.from_html(`<div><!></div>`);
 function BannerActions($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let rest = $.rest_props($$props, rest_excludes$5);
-	var div = root$5();
+	let rest = $.rest_props($$props, rest_excludes$6);
+	var div = root$6();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -57,18 +57,18 @@ function BannerActions($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerBody.svelte
-var rest_excludes$4 = /* @__PURE__ */ new Set([
+var rest_excludes$5 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$4 = $.from_html(`<div><!></div>`);
+var root$5 = $.from_html(`<div><!></div>`);
 function BannerBody($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let rest = $.rest_props($$props, rest_excludes$4);
-	var div = root$4();
+	let rest = $.rest_props($$props, rest_excludes$5);
+	var div = root$5();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -82,20 +82,20 @@ function BannerBody($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerClose.svelte
-var rest_excludes$3 = /* @__PURE__ */ new Set([
+var rest_excludes$4 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"type",
 	"aria-label"
 ]);
-var root$3 = $.from_html(`<button><!></button>`);
+var root$4 = $.from_html(`<button><!></button>`);
 function BannerClose($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$3);
+	let type = $.prop($$props, "type", 3, "button"), rest = $.rest_props($$props, rest_excludes$4);
 	const messages = useComponentMessages();
-	var button = root$3();
+	var button = root$4();
 	$.attribute_effect(button, ($0) => ({
 		...rest,
 		type: type(),
@@ -111,18 +111,18 @@ function BannerClose($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/banner/BannerDescription.svelte
-var rest_excludes$2 = /* @__PURE__ */ new Set([
+var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$2 = $.from_html(`<p><!></p>`);
+var root$3 = $.from_html(`<p><!></p>`);
 function BannerDescription($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let rest = $.rest_props($$props, rest_excludes$2);
-	var p = root$2();
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var p = root$3();
 	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "banner",
@@ -135,69 +135,155 @@ function BannerDescription($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
-//#region src/components/banner/BannerIcon.svelte
-var rest_excludes$1 = /* @__PURE__ */ new Set([
+//#region src/components/banner/BannerTitle.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$1 = $.from_html(`<span><!></span>`);
-function BannerIcon($$anchor, $$props) {
+var root$2 = $.from_html(`<p><!></p>`);
+function BannerTitle($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
-	let rest = $.rest_props($$props, rest_excludes$1);
-	var span = root$1();
-	$.attribute_effect(span, () => ({
+	let rest = $.rest_props($$props, rest_excludes$2);
+	var p = root$2();
+	$.attribute_effect(p, () => ({
 		...rest,
 		"data-scope": "banner",
-		"data-part": "icon"
+		"data-part": "title"
 	}));
-	var node = $.child(span);
+	var node = $.child(p);
 	$.snippet(node, () => $$props.children ?? $.noop);
-	$.reset(span);
-	$.append($$anchor, span);
+	$.reset(p);
+	$.append($$anchor, p);
 	$.pop();
 }
 //#endregion
-//#region src/components/banner/BannerTitle.svelte
+//#region src/components/banner/BannerFacade.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"status",
+	"title",
+	"message",
+	"dismissible",
+	"children",
+	"actions"
+]);
+var root$1 = $.from_html(`<!> <!> <!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
+function BannerFacade($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("banner");
+	let status = $.prop($$props, "status", 3, "ink"), dismissible = $.prop($$props, "dismissible", 3, false), rest = $.rest_props($$props, rest_excludes$1);
+	let dismissed = $.state(false);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	var consequent_4 = ($$anchor) => {
+		Banner($$anchor, $.spread_props({ get status() {
+			return status();
+		} }, () => rest, {
+			children: ($$anchor, $$slotProps) => {
+				var fragment_2 = root_1();
+				var node_1 = $.first_child(fragment_2);
+				BannerBody(node_1, {
+					children: ($$anchor, $$slotProps) => {
+						var fragment_3 = root$1();
+						var node_2 = $.first_child(fragment_3);
+						var consequent = ($$anchor) => {
+							BannerTitle($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text = $.text();
+									$.template_effect(() => $.set_text(text, $$props.title));
+									$.append($$anchor, text);
+								},
+								$$slots: { default: true }
+							});
+						};
+						$.if(node_2, ($$render) => {
+							if ($$props.title) $$render(consequent);
+						});
+						var node_3 = $.sibling(node_2, 2);
+						var consequent_1 = ($$anchor) => {
+							BannerDescription($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text_1 = $.text();
+									$.template_effect(() => $.set_text(text_1, $$props.message));
+									$.append($$anchor, text_1);
+								},
+								$$slots: { default: true }
+							});
+						};
+						$.if(node_3, ($$render) => {
+							if ($$props.message) $$render(consequent_1);
+						});
+						var node_4 = $.sibling(node_3, 2);
+						$.snippet(node_4, () => $$props.children ?? $.noop);
+						var node_5 = $.sibling(node_4, 2);
+						var consequent_2 = ($$anchor) => {
+							BannerActions($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_9 = $.comment();
+									var node_6 = $.first_child(fragment_9);
+									$.snippet(node_6, () => $$props.actions);
+									$.append($$anchor, fragment_9);
+								},
+								$$slots: { default: true }
+							});
+						};
+						$.if(node_5, ($$render) => {
+							if ($$props.actions) $$render(consequent_2);
+						});
+						$.append($$anchor, fragment_3);
+					},
+					$$slots: { default: true }
+				});
+				var node_7 = $.sibling(node_1, 2);
+				var consequent_3 = ($$anchor) => {
+					BannerClose($$anchor, { onclick: () => $.set(dismissed, true) });
+				};
+				$.if(node_7, ($$render) => {
+					if (dismissible()) $$render(consequent_3);
+				});
+				$.append($$anchor, fragment_2);
+			},
+			$$slots: { default: true }
+		}));
+	};
+	$.if(node, ($$render) => {
+		if (!$.get(dismissed)) $$render(consequent_4);
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/banner/BannerIcon.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root = $.from_html(`<p><!></p>`);
-function BannerTitle($$anchor, $$props) {
+var root = $.from_html(`<span><!></span>`);
+function BannerIcon($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("banner");
 	let rest = $.rest_props($$props, rest_excludes);
-	var p = root();
-	$.attribute_effect(p, () => ({
+	var span = root();
+	$.attribute_effect(span, () => ({
 		...rest,
 		"data-scope": "banner",
-		"data-part": "title"
+		"data-part": "icon"
 	}));
-	var node = $.child(p);
+	var node = $.child(span);
 	$.snippet(node, () => $$props.children ?? $.noop);
-	$.reset(p);
-	$.append($$anchor, p);
+	$.reset(span);
+	$.append($$anchor, span);
 	$.pop();
 }
 //#endregion
-//#region src/components/banner/index.ts
-/** A page-level notice, spoken across the full measure: a wash of the
-* status pigment, one heavier hairline on the leading edge, and room
-* for actions and a quiet close. Ink is the neutral register; the four
-* semantic pigments are fixed. */
-const Banner = Object.assign(Banner$1, {
-	Root: Banner$1,
-	Icon: BannerIcon,
-	Body: BannerBody,
-	Title: BannerTitle,
-	Description: BannerDescription,
-	Actions: BannerActions,
-	Close: BannerClose
-});
-//#endregion
-export { Banner as t };
+export { BannerClose as a, Banner as c, BannerDescription as i, BannerFacade as n, BannerBody as o, BannerTitle as r, BannerActions as s, BannerIcon as t };