@proyecto-viviana/ui 0.3.4 → 0.4.0

package/dist/ColorField.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorField";

package/dist/ColorSlider.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSlider";
+//# sourceMappingURL=ColorSlider.d.ts.map

package/dist/ColorSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.d.ts","sourceRoot":"","sources":["../src/ColorSlider.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC"}

package/dist/ColorSlider.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSlider";

package/dist/ColorSlider.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSlider";

package/dist/ColorSwatch.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatch";
+//# sourceMappingURL=ColorSwatch.d.ts.map

package/dist/ColorSwatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatch.d.ts","sourceRoot":"","sources":["../src/ColorSwatch.ts"],"names":[],"mappings":"AAAA,cAAc,8CAA8C,CAAC"}

package/dist/ColorSwatch.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatch";

package/dist/ColorSwatch.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatch";

package/dist/ColorSwatchPicker.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatchPicker";
+//# sourceMappingURL=ColorSwatchPicker.d.ts.map

package/dist/ColorSwatchPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatchPicker.d.ts","sourceRoot":"","sources":["../src/ColorSwatchPicker.ts"],"names":[],"mappings":"AAAA,cAAc,oDAAoD,CAAC"}

package/dist/ColorSwatchPicker.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatchPicker";

package/dist/ColorSwatchPicker.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorSwatchPicker";

package/dist/ColorWheel.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorWheel";
+//# sourceMappingURL=ColorWheel.d.ts.map

package/dist/ColorWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorWheel.d.ts","sourceRoot":"","sources":["../src/ColorWheel.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC"}

package/dist/ColorWheel.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorWheel";

package/dist/ColorWheel.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/ColorWheel";

package/dist/ContrastIcon.d.ts

@@ -0,0 +1,3 @@
+export * from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+export { default } from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+//# sourceMappingURL=ContrastIcon.d.ts.map

package/dist/ContrastIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContrastIcon.d.ts","sourceRoot":"","sources":["../src/ContrastIcon.ts"],"names":[],"mappings":"AAAA,cAAc,+CAA+C,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,+CAA+C,CAAC"}

package/dist/ContrastIcon.js

@@ -0,0 +1,3 @@
+import ContrastIcon_default from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+export * from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+export { ContrastIcon_default as default };

package/dist/ContrastIcon.jsx

@@ -0,0 +1,3 @@
+import ContrastIcon_default from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+export * from "@proyecto-viviana/solid-spectrum/ContrastIcon";
+export { ContrastIcon_default as default };

package/dist/Conversation.d.ts

@@ -0,0 +1,2 @@
+export * from "./custom/conversation";
+//# sourceMappingURL=Conversation.d.ts.map

package/dist/Conversation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.d.ts","sourceRoot":"","sources":["../src/Conversation.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}

package/dist/Conversation.js

@@ -0,0 +1,177 @@
+/* empty css                                                                       */
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+import { Button } from "@proyecto-viviana/solidaria-components";
+//#region src/custom/conversation/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xc13 _xa13 xfd13 _xfa13 xfX0cczbc13 _xfX0cczba13 _Fd13 _FnuYUweb13 pcoywsd13 _va13">`), _tmpl$2 = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd13 _ta13 Ua13 qa13 _ub13 Na13"><div class=" sd13 eb13 _Ce13 Ue13 qe13"><span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></span><!$><!/></div><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span class=" sd13 eb13 _Ca13 _va13 Zm13 Fn13 og13 ng13 kg13 jg13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pTloWE13 gj1j4Pd13">`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div><div><p></p><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+const preview = " sd13 eb13 Ug13 qg13 Za13 Te13 Qe13 Se13 Re13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+function ConversationPreview(props) {
+	return createComponent(Button, {
+		type: "button",
+		get ["class"]() {
+			return `${preview} ${props.class ?? ""}`;
+		},
+		onPress: () => props.onClick?.(),
+		get children() {
+			return [
+				createComponent(Avatar, {
+					get src() {
+						return props.user.avatar;
+					},
+					get alt() {
+						return props.user.name;
+					},
+					get online() {
+						return props.user.online;
+					},
+					size: "md"
+				}),
+				(() => {
+					var _el$ = getNextElement(_tmpl$3), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, [_el$6, _co$] = getNextMarker(_el$5.nextSibling), _el$8 = _el$2.nextSibling, [_el$9, _co$2] = getNextMarker(_el$8.nextSibling);
+					insert(_el$3, () => props.user.name);
+					insert(_el$2, createComponent(Show, {
+						get when() {
+							return props.timestamp;
+						},
+						get children() {
+							var _el$4 = getNextElement(_tmpl$);
+							insert(_el$4, () => props.timestamp);
+							return _el$4;
+						}
+					}), _el$6, _co$);
+					insert(_el$, createComponent(Show, {
+						get when() {
+							return props.lastMessage;
+						},
+						get children() {
+							var _el$7 = getNextElement(_tmpl$2);
+							insert(_el$7, () => props.lastMessage);
+							return _el$7;
+						}
+					}), _el$9, _co$2);
+					return _el$;
+				})(),
+				createComponent(Show, {
+					get when() {
+						return memo(() => !!props.unreadCount)() && props.unreadCount > 0;
+					},
+					get children() {
+						var _el$0 = getNextElement(_tmpl$4);
+						insert(_el$0, () => props.unreadCount);
+						return _el$0;
+					}
+				})
+			];
+		}
+	});
+}
+const bubbleRow = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	if (props.isUser) rules += " _Cb13";
+	else rules += " _Cg13";
+	return rules;
+};
+const bubble = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	rules += " _ta13";
+	rules += " Ua13";
+	rules += " qa13";
+	rules += " LbmOfn13";
+	rules += " Sf13";
+	rules += " Rf13";
+	rules += " Tt13";
+	rules += " Qt13";
+	rules += " oc13";
+	rules += " nc13";
+	rules += " kc13";
+	rules += " jc13";
+	if (props.isUser) rules += " gj1j4Pd13";
+	else rules += " gg0eWE13";
+	if (props.isUser) rules += " pTloWE13";
+	else rules += " pXDQpyb13";
+	return rules;
+};
+const bubbleTime = function anonymous(props) {
+	let rules = " ";
+	rules += " uk13";
+	rules += " ucJ9TBTb13";
+	rules += " ud3Euai13";
+	rules += " uea13";
+	rules += " ugb13";
+	rules += " uhd13";
+	rules += " uje13";
+	rules += " u2NhKxcl13";
+	rules += " uic13";
+	rules += " -_6BNtrc-b13";
+	rules += " vx13";
+	rules += " xc13";
+	rules += " _xa13";
+	rules += " xfd13";
+	rules += " _xfa13";
+	rules += " xfX0cczbc13";
+	rules += " _xfX0cczba13";
+	rules += " _Fd13";
+	rules += " _FnuYUweb13";
+	if (props.isUser) rules += " pg0eWE13";
+	else rules += " pcoywsd13";
+	return rules;
+};
+function ConversationBubble(props) {
+	const isUser = () => props.sender === "user";
+	return (() => {
+		var _el$1 = getNextElement(_tmpl$6), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$13 = _el$11.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling);
+		insert(_el$11, () => props.content);
+		insert(_el$10, createComponent(Show, {
+			get when() {
+				return props.timestamp;
+			},
+			get children() {
+				var _el$12 = getNextElement(_tmpl$5);
+				insert(_el$12, () => props.timestamp);
+				effect(() => className(_el$12, bubbleTime({ isUser: isUser() })));
+				return _el$12;
+			}
+		}), _el$14, _co$3);
+		effect((_p$) => {
+			var _v$ = `${bubbleRow({ isUser: isUser() })} ${props.class ?? ""}`, _v$2 = bubble({ isUser: isUser() });
+			_v$ !== _p$.e && className(_el$1, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$10, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$1;
+	})();
+}
+const thread = " sd13 _ta13 Ue13 qe13 Tf13 Qf13 Sf13 Rf13";
+function Conversation(props) {
+	return (() => {
+		var _el$15 = getNextElement(_tmpl$7);
+		insert(_el$15, createComponent(For, {
+			get each() {
+				return props.messages;
+			},
+			children: (message) => createComponent(ConversationBubble, {
+				get content() {
+					return message.content;
+				},
+				get sender() {
+					return message.sender;
+				},
+				get timestamp() {
+					return message.timestamp;
+				}
+			})
+		}));
+		effect(() => className(_el$15, `${thread} ${props.class ?? ""}`));
+		return _el$15;
+	})();
+}
+//#endregion
+export { Conversation, ConversationBubble, ConversationPreview };
+
+//# sourceMappingURL=Conversation.js.map

package/dist/Conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.js","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  color: \"[var(--color-text-muted)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  color: \"[var(--color-bg-400)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-bg-400)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    default: \"[var(--color-text-muted)]\",\n    isUser: \"[var(--color-bg-300)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/Conversation.jsx

@@ -0,0 +1,107 @@
+/* empty css                                                                        */
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { For, Show } from "solid-js";
+import { Button } from "@proyecto-viviana/solidaria-components";
+//#region src/custom/conversation/index.tsx
+const preview = " sd13 eb13 Ug13 qg13 Za13 Te13 Qe13 Se13 Re13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+const previewBody = " sd13 _ta13 Ua13 qa13 _ub13 Na13";
+const previewTop = " sd13 eb13 _Ce13 Ue13 qe13";
+const previewName = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
+const previewTime = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xc13 _xa13 xfd13 _xfa13 xfX0cczbc13 _xfX0cczba13 _Fd13 _FnuYUweb13 pcoywsd13 _va13";
+const previewMessage = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13";
+const unread = " sd13 eb13 _Ca13 _va13 Zm13 Fn13 og13 ng13 kg13 jg13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xd13 _xa13 xX0cczbc13 _xX0cczba13 _Fd13 _FnuYUweb13 pTloWE13 gj1j4Pd13";
+function ConversationPreview(props) {
+	return <Button type="button" class={`${preview} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
+      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size="md" />
+      <div class={previewBody}>
+        <div class={previewTop}>
+          <span class={previewName}>{props.user.name}</span>
+          <Show when={props.timestamp}>
+            <span class={previewTime}>{props.timestamp}</span>
+          </Show>
+        </div>
+        <Show when={props.lastMessage}>
+          <p class={previewMessage}>{props.lastMessage}</p>
+        </Show>
+      </div>
+      <Show when={props.unreadCount && props.unreadCount > 0}>
+        <span class={unread}>{props.unreadCount}</span>
+      </Show>
+    </Button>;
+}
+const bubbleRow = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	if (props.isUser) rules += " _Cb13";
+	else rules += " _Cg13";
+	return rules;
+};
+const bubble = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	rules += " _ta13";
+	rules += " Ua13";
+	rules += " qa13";
+	rules += " LbmOfn13";
+	rules += " Sf13";
+	rules += " Rf13";
+	rules += " Tt13";
+	rules += " Qt13";
+	rules += " oc13";
+	rules += " nc13";
+	rules += " kc13";
+	rules += " jc13";
+	if (props.isUser) rules += " gj1j4Pd13";
+	else rules += " gg0eWE13";
+	if (props.isUser) rules += " pTloWE13";
+	else rules += " pXDQpyb13";
+	return rules;
+};
+const bubbleTime = function anonymous(props) {
+	let rules = " ";
+	rules += " uk13";
+	rules += " ucJ9TBTb13";
+	rules += " ud3Euai13";
+	rules += " uea13";
+	rules += " ugb13";
+	rules += " uhd13";
+	rules += " uje13";
+	rules += " u2NhKxcl13";
+	rules += " uic13";
+	rules += " -_6BNtrc-b13";
+	rules += " vx13";
+	rules += " xc13";
+	rules += " _xa13";
+	rules += " xfd13";
+	rules += " _xfa13";
+	rules += " xfX0cczbc13";
+	rules += " _xfX0cczba13";
+	rules += " _Fd13";
+	rules += " _FnuYUweb13";
+	if (props.isUser) rules += " pg0eWE13";
+	else rules += " pcoywsd13";
+	return rules;
+};
+function ConversationBubble(props) {
+	const isUser = () => props.sender === "user";
+	return <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? ""}`}>
+      <div class={bubble({ isUser: isUser() })}>
+        <p>{props.content}</p>
+        <Show when={props.timestamp}>
+          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>
+        </Show>
+      </div>
+    </div>;
+}
+const thread = " sd13 _ta13 Ue13 qe13 Tf13 Qf13 Sf13 Rf13";
+function Conversation(props) {
+	return <div class={`${thread} ${props.class ?? ""}`}>
+      <For each={props.messages}>
+        {(message) => <ConversationBubble content={message.content} sender={message.sender} timestamp={message.timestamp} />}
+      </For>
+    </div>;
+}
+//#endregion
+export { Conversation, ConversationBubble, ConversationPreview };
+
+//# sourceMappingURL=Conversation.jsx.map

package/dist/Conversation.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.jsx","names":[],"sources":["../src/custom/conversation/index.tsx"],"sourcesContent":["import { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A conversation preview row, message bubbles, and a thread\n// list, on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface Message {\n  id: string;\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n}\n\nexport interface ConversationPreviewProps {\n  user: {\n    name: string;\n    avatar?: string;\n    online?: boolean;\n  };\n  lastMessage?: string;\n  unreadCount?: number;\n  timestamp?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst preview = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 12,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst previewBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst previewTop = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"space-between\",\n  gap: 8,\n});\n\nconst previewName = style({\n  font: \"ui\",\n  fontWeight: \"bold\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst previewTime = style({\n  font: \"detail-sm\",\n  color: \"[var(--color-text-muted)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst unread = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  flexShrink: 0,\n  width: 20,\n  height: 20,\n  borderRadius: \"full\",\n  font: \"detail-sm\",\n  fontWeight: \"bold\",\n  backgroundColor: \"[var(--color-accent)]\",\n  color: \"[var(--color-bg-400)]\",\n});\n\nexport function ConversationPreview(props: ConversationPreviewProps) {\n  return (\n    <HeadlessButton\n      type=\"button\"\n      class={`${preview} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size=\"md\" />\n      <div class={previewBody}>\n        <div class={previewTop}>\n          <span class={previewName}>{props.user.name}</span>\n          <Show when={props.timestamp}>\n            <span class={previewTime}>{props.timestamp}</span>\n          </Show>\n        </div>\n        <Show when={props.lastMessage}>\n          <p class={previewMessage}>{props.lastMessage}</p>\n        </Show>\n      </div>\n      <Show when={props.unreadCount && props.unreadCount > 0}>\n        <span class={unread}>{props.unreadCount}</span>\n      </Show>\n    </HeadlessButton>\n  );\n}\n\nexport interface ConversationBubbleProps {\n  content: string;\n  sender: \"user\" | \"other\";\n  timestamp?: string;\n  class?: string;\n}\n\nconst bubbleRow = style<{ isUser: boolean }>({\n  display: \"flex\",\n  justifyContent: { default: \"start\", isUser: \"end\" },\n});\n\nconst bubble = style<{ isUser: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 2,\n  maxWidth: \"[70%]\",\n  paddingX: 16,\n  paddingY: 8,\n  borderRadius: \"lg\",\n  backgroundColor: {\n    default: \"[var(--color-bg-300)]\",\n    isUser: \"[var(--color-accent)]\",\n  },\n  color: {\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-bg-400)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    default: \"[var(--color-text-muted)]\",\n    isUser: \"[var(--color-bg-300)]\",\n  },\n});\n\nexport function ConversationBubble(props: ConversationBubbleProps) {\n  const isUser = () => props.sender === \"user\";\n\n  return (\n    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? \"\"}`}>\n      <div class={bubble({ isUser: isUser() })}>\n        <p>{props.content}</p>\n        <Show when={props.timestamp}>\n          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface ConversationProps {\n  messages: Message[];\n  class?: string;\n}\n\nconst thread = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 8,\n  padding: 16,\n});\n\nexport function Conversation(props: ConversationProps) {\n  return (\n    <div class={`${thread} ${props.class ?? \"\"}`}>\n      <For each={props.messages}>\n        {(message) => (\n          <ConversationBubble\n            content={message.content}\n            sender={message.sender}\n            timestamp={message.timestamp}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AA4BA,MAAM,cAAA;AAaN,MAAM,cAAA;AAQN,MAAM,iBAAA;AAON,MAAM,SAAA;AASN,SAAM,oBAAA,OAAA;CAMN,OAAM,CAAA,OAAA,cAAA,OAAA,GAAA,QAAA,GAAA,MAAA,SAAA,MAAA,eAAA,MAAA,UAAA,GAAA;MAQA,CAAA,OAAA,KAAA,MAAA,KAAA,QAAA,KAAA,MAAA,KAAA,MAAA,QAAA,MAAA,KAAA,QAAA,YAAA;MAcN,CAAA,IAAgB,OAAA,aAAoB;QAC3B,CACJ,IAAA,OACC,YACA;UAGC,CAAA,KAAO,OAAK,cAAW,MAAa,KAAA,KAAM,EAAK,KAAM;UACrD,CAAI,KAAA,MAAO,MAAA,WAAa;YACtB,CAAI,KAAA,OAAO,cAAY,MAAA,UAAA,EAAA,KAAA;UACtB,EAAC,KAAK;UACN,IAAC;cACE,MAAK,MAAO,aAAc;UAC7B,CAAA,EAAE,OAAK,iBAAA,MAAA,YAAA,EAAA,EAAA;QACT,EAAE,KAAI;QACN,IAAC;YACE,MAAE,MAAO,eAAiB,MAAM,cAAgB,GAAA;QACnD,CAAA,KAAE,OAAK,SAAA,MAAA,YAAA,EAAA,KAAA;MACT,EAAE,KAAI;MACN;;MAEA,YAAO,SAAA,UAAA,OAAA;KACT,QAAE;CAEN,SAAA;CASA,IAAA,MAAM,QAAA,SAAA;;;;;;;CAKN,SAAM;;;;;;;;;;;;;;;;;;;;;CAkBN,SAAM;;;;;;;;;;;;;;;;;;;;;;;;;MAQN,CAAA,IAAgB,OAAA,OAAA,EAAA,QAAiD,OAAA,EAAA,CAAA,GAAA;QACzD,CAAA,GAAA,MAAA,QAAe,EAAM,EAAA;QAEpB,CACJ,KAAI,MAAO,MAAG,WAAY;UACxB,CAAI,KAAA,OAAO,WAAS,EAAQ,QAAS,OAAI,EAAA,CAAA,IAAA,MAAA,UAAA,EAAA,KAAA;QACxC,EAAC,KAAG;QACJ,IAAC;;;MAGH,SAAM;SACN,aAAA,OAAA;CAEN,OAAA,CAAA,IAAA,OAAA,GAAA,OAAA,GAAA,MAAA,SAAA,MAAA;MAOM,CAAA,IAAA,MAAA,MAAA,UAAA;UAOU,YAAa,CAAA,mBAAwB,SAAA,QAAA,SAAA,QAAA,QAAA,QAAA,WAAA,QAAA,cAAA;MACnD,EAAO,IACJ;MACC;;;AAWN,SAAA,cAAA,oBAAA"}

package/dist/Disclosure.d.ts

@@ -0,0 +1,2 @@
+export * from "@proyecto-viviana/solid-spectrum/Disclosure";
+//# sourceMappingURL=Disclosure.d.ts.map

package/dist/Disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../src/Disclosure.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC"}

package/dist/Disclosure.js

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Disclosure";

package/dist/Disclosure.jsx

@@ -0,0 +1 @@
+export * from "@proyecto-viviana/solid-spectrum/Disclosure";

package/dist/EventCard.d.ts

@@ -0,0 +1,2 @@
+export * from "./custom/event-card";
+//# sourceMappingURL=EventCard.d.ts.map

package/dist/EventCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventCard.d.ts","sourceRoot":"","sources":["../src/EventCard.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/EventCard.js

@@ -0,0 +1,173 @@
+/* empty css                                                                       */
+/* empty css                                                                       */
+/* empty css                                                                       */
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, setAttribute, template } from "solid-js/web";
+import { For, Show } from "solid-js";
+import { Button } from "@proyecto-viviana/solidaria-components";
+//#region src/custom/event-card/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<img class=" _Pa13 WJ13 _zI13 ZC13 Fx13 _Ha13"alt>`), _tmpl$2 = /*#__PURE__*/ template(`<img class=" Za13 fu4qurc13 _Hb13">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ub13 qb13"><span class=" pj1j4Pd13">@</span><span>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ub13 qb13"><span class=" pj1j4Pd13">⏱</span><span>`), _tmpl$5 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13"><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13">+<!$><!/> más`), _tmpl$7 = /*#__PURE__*/ template(`<div class=" sd13 eb13 Ue13 qe13"><div class=" sd13 eb13 Ub13 qb13"></div><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<div class=" sd13 Ue13 qe13">`), _tmpl$9 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><div class=" sd13 _ta13 Ug13 qg13 Tf13 Qf13 Sf13 Rf13"><h3 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-g13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pj1j4Pd13"></h3><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /*#__PURE__*/ template(`<img class=" ZF13 Fz13 _va13 ob13 nb13 kb13 jb13 _Hb13">`), _tmpl$1 = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13">`), _tmpl$10 = /*#__PURE__*/ template(`<div class=" sd13 _ta13 _ub13 Na13"><h4 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xc13 _xa13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></h4><!$><!/>`);
+const card = " _Pc13 sd13 _ta13 _Nc13 Pc13 oe13 ne13 ke13 je13 gDE5VE13 _nLeasBb13";
+function EventCard(props) {
+	const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
+	const remainingCount = () => {
+		return (props.attendeeCount ?? props.attendees?.length ?? 0) - displayedAttendees().length;
+	};
+	return (() => {
+		var _el$ = getNextElement(_tmpl$9), _el$31 = _el$.firstChild, [_el$32, _co$8] = getNextMarker(_el$31.nextSibling), _el$33 = _el$32.nextSibling, [_el$34, _co$9] = getNextMarker(_el$33.nextSibling), _el$4 = _el$34.nextSibling, _el$5 = _el$4.firstChild, _el$25 = _el$5.nextSibling, [_el$26, _co$5] = getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$6] = getNextMarker(_el$27.nextSibling), _el$29 = _el$28.nextSibling, [_el$30, _co$7] = getNextMarker(_el$29.nextSibling);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.decorationImage;
+			},
+			get children() {
+				var _el$2 = getNextElement(_tmpl$);
+				effect(() => setAttribute(_el$2, "src", props.decorationImage));
+				return _el$2;
+			}
+		}), _el$32, _co$8);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.image;
+			},
+			get children() {
+				var _el$3 = getNextElement(_tmpl$2);
+				effect((_p$) => {
+					var _v$ = props.image, _v$2 = props.title;
+					_v$ !== _p$.e && setAttribute(_el$3, "src", _p$.e = _v$);
+					_v$2 !== _p$.t && setAttribute(_el$3, "alt", _p$.t = _v$2);
+					return _p$;
+				}, {
+					e: void 0,
+					t: void 0
+				});
+				return _el$3;
+			}
+		}), _el$34, _co$9);
+		insert(_el$5, () => props.title);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return props.date || props.author;
+			},
+			get children() {
+				var _el$6 = getNextElement(_tmpl$5), _el$11 = _el$6.firstChild, [_el$12, _co$] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$2] = getNextMarker(_el$13.nextSibling);
+				insert(_el$6, createComponent(Show, {
+					get when() {
+						return props.author;
+					},
+					get children() {
+						var _el$7 = getNextElement(_tmpl$3), _el$9 = _el$7.firstChild.nextSibling;
+						insert(_el$9, () => props.author);
+						return _el$7;
+					}
+				}), _el$12, _co$);
+				insert(_el$6, createComponent(Show, {
+					get when() {
+						return props.date;
+					},
+					get children() {
+						var _el$0 = getNextElement(_tmpl$4), _el$10 = _el$0.firstChild.nextSibling;
+						insert(_el$10, () => props.date);
+						return _el$0;
+					}
+				}), _el$14, _co$2);
+				return _el$6;
+			}
+		}), _el$26, _co$5);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return displayedAttendees().length > 0;
+			},
+			get children() {
+				var _el$15 = getNextElement(_tmpl$7), _el$16 = _el$15.firstChild, _el$22 = _el$16.nextSibling, [_el$23, _co$4] = getNextMarker(_el$22.nextSibling);
+				insert(_el$16, createComponent(For, {
+					get each() {
+						return displayedAttendees();
+					},
+					children: (attendee) => createComponent(Avatar, {
+						get src() {
+							return attendee.avatar;
+						},
+						get alt() {
+							return attendee.name;
+						},
+						size: "sm"
+					})
+				}));
+				insert(_el$15, createComponent(Show, {
+					get when() {
+						return remainingCount() > 0;
+					},
+					get children() {
+						var _el$17 = getNextElement(_tmpl$6), _el$20 = _el$17.firstChild.nextSibling, [_el$21, _co$3] = getNextMarker(_el$20.nextSibling);
+						_el$21.nextSibling;
+						insert(_el$17, remainingCount, _el$21, _co$3);
+						return _el$17;
+					}
+				}), _el$23, _co$4);
+				return _el$15;
+			}
+		}), _el$28, _co$6);
+		insert(_el$4, createComponent(Show, {
+			get when() {
+				return props.actions;
+			},
+			get children() {
+				var _el$24 = getNextElement(_tmpl$8);
+				insert(_el$24, (() => {
+					var _c$ = memo(() => typeof props.actions === "function");
+					return () => _c$() ? props.actions() : props.actions;
+				})());
+				return _el$24;
+			}
+		}), _el$30, _co$7);
+		effect(() => className(_el$, `${card} ${props.class ?? ""}`));
+		return _el$;
+	})();
+}
+const listItem = " sd13 eb13 Ug13 qg13 Za13 Tt13 Qt13 St13 Rt13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+function EventListItem(props) {
+	return createComponent(Button, {
+		get ["class"]() {
+			return `${listItem} ${props.class ?? ""}`;
+		},
+		onPress: () => props.onClick?.(),
+		get children() {
+			return [createComponent(Show, {
+				get when() {
+					return props.image;
+				},
+				get children() {
+					var _el$35 = getNextElement(_tmpl$0);
+					effect((_p$) => {
+						var _v$3 = props.image, _v$4 = props.title;
+						_v$3 !== _p$.e && setAttribute(_el$35, "src", _p$.e = _v$3);
+						_v$4 !== _p$.t && setAttribute(_el$35, "alt", _p$.t = _v$4);
+						return _p$;
+					}, {
+						e: void 0,
+						t: void 0
+					});
+					return _el$35;
+				}
+			}), (() => {
+				var _el$36 = getNextElement(_tmpl$10), _el$37 = _el$36.firstChild, _el$39 = _el$37.nextSibling, [_el$40, _co$0] = getNextMarker(_el$39.nextSibling);
+				insert(_el$37, () => props.title);
+				insert(_el$36, createComponent(Show, {
+					get when() {
+						return props.subtitle;
+					},
+					get children() {
+						var _el$38 = getNextElement(_tmpl$1);
+						insert(_el$38, () => props.subtitle);
+						return _el$38;
+					}
+				}), _el$40, _co$0);
+				return _el$36;
+			})()];
+		}
+	});
+}
+//#endregion
+export { EventCard, EventListItem };
+
+//# sourceMappingURL=EventCard.js.map

package/dist/EventCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventCard.js","names":[],"sources":["../src/custom/event-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show, For } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\nimport { Button as HeadlessButton } from \"@proyecto-viviana/solidaria-components\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). An event summary card (S2 Card shape: preview + content +\n// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface EventCardProps {\n  title: string;\n  image?: string;\n  date?: string;\n  author?: string;\n  authorAvatar?: string;\n  attendees?: { avatar?: string; name: string }[];\n  attendeeCount?: number;\n  decorationImage?: string;\n  /**\n   * Actions to display below the event.\n   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`\n   */\n  actions?: JSX.Element | (() => JSX.Element);\n  class?: string;\n}\n\nconst card = style({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  overflow: \"hidden\",\n  borderRadius: \"xl\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  boxShadow: \"elevated\",\n});\n\nconst decoration = style({\n  position: \"absolute\",\n  top: 8,\n  insetEnd: 8,\n  width: 32,\n  height: 32,\n  objectFit: \"contain\",\n});\n\nconst preview = style({\n  width: \"full\",\n  aspectRatio: \"16/9\",\n  objectFit: \"cover\",\n});\n\nconst body = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: 12,\n  padding: 16,\n});\n\nconst title = style({\n  font: \"heading\",\n  color: \"[var(--color-accent)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  color: \"[var(--color-accent)]\",\n});\n\nconst attendeesRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 8,\n});\n\nconst avatars = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst more = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nconst actionRow = style({\n  display: \"flex\",\n  gap: 8,\n});\n\nexport function EventCard(props: EventCardProps) {\n  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];\n  const remainingCount = () => {\n    const total = props.attendeeCount ?? props.attendees?.length ?? 0;\n    const displayed = displayedAttendees().length;\n    return total - displayed;\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <Show when={props.decorationImage}>\n        <img class={decoration} src={props.decorationImage} alt=\"\" />\n      </Show>\n\n      <Show when={props.image}>\n        <img class={preview} src={props.image} alt={props.title} />\n      </Show>\n\n      <div class={body}>\n        <h3 class={title}>{props.title}</h3>\n\n        <Show when={props.date || props.author}>\n          <div class={meta}>\n            <Show when={props.author}>\n              <div class={metaItem}>\n                <span class={metaIcon}>@</span>\n                <span>{props.author}</span>\n              </div>\n            </Show>\n            <Show when={props.date}>\n              <div class={metaItem}>\n                <span class={metaIcon}>⏱</span>\n                <span>{props.date}</span>\n              </div>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={displayedAttendees().length > 0}>\n          <div class={attendeesRow}>\n            <div class={avatars}>\n              <For each={displayedAttendees()}>\n                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size=\"sm\" />}\n              </For>\n            </div>\n            <Show when={remainingCount() > 0}>\n              <span class={more}>+{remainingCount()} más</span>\n            </Show>\n          </div>\n        </Show>\n\n        <Show when={props.actions}>\n          <div class={actionRow}>\n            {typeof props.actions === \"function\" ? props.actions() : props.actions}\n          </div>\n        </Show>\n      </div>\n    </div>\n  );\n}\n\nexport interface EventListItemProps {\n  title: string;\n  image?: string;\n  subtitle?: string;\n  onClick?: () => void;\n  class?: string;\n}\n\nconst listItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 12,\n  width: \"full\",\n  padding: 8,\n  borderRadius: \"lg\",\n  textAlign: \"start\",\n  cursor: \"pointer\",\n  backgroundColor: \"transparent\",\n  borderStyle: \"none\",\n});\n\nconst thumb = style({\n  width: 48,\n  height: 48,\n  flexShrink: 0,\n  borderRadius: \"default\",\n  objectFit: \"cover\",\n});\n\nconst listBody = style({\n  display: \"flex\",\n  flexDirection: \"column\",\n  flexGrow: 1,\n  minWidth: 0,\n});\n\nconst listTitle = style({\n  font: \"ui\",\n  fontWeight: \"medium\",\n  color: \"[var(--color-primary-100)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nconst listSubtitle = style({\n  font: \"ui-sm\",\n  color: \"[var(--color-text-secondary)]\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n});\n\nexport function EventListItem(props: EventListItemProps) {\n  return (\n    <HeadlessButton class={`${listItem} ${props.class ?? \"\"}`} onPress={() => props.onClick?.()}>\n      <Show when={props.image}>\n        <img class={thumb} src={props.image} alt={props.title} />\n      </Show>\n      <div class={listBody}>\n        <h4 class={listTitle}>{props.title}</h4>\n        <Show when={props.subtitle}>\n          <p class={listSubtitle}>{props.subtitle}</p>\n        </Show>\n      </div>\n    </HeadlessButton>\n  );\n}\n"],"mappings":"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"}