@proyecto-viviana/ui 0.3.5 → 0.4.1

package/dist/ColorField.js

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

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,176 @@
+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=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xc151 _xa151 xfd151 _xfa151 xfX0cczbc151 _xfX0cczba151 _Fd151 _FnuYUweb151 pO550xe151 _va151">`), _tmpl$2 = /*#__PURE__*/ template(`<p class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151 _Nc151 Pc151 _Yb151 _7c151">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd151 _ta151 Ua151 qa151 _ub151 Na151"><div class=" sd151 eb151 _Ce151 Ue151 qe151"><span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></span><!$><!/></div><!$><!/>`), _tmpl$4 = /*#__PURE__*/ template(`<span class=" sd151 eb151 _Ca151 _va151 Zm151 Fn151 og151 ng151 kg151 jg151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 padAQ7151 gj1j4Pd151">`), _tmpl$5 = /*#__PURE__*/ template(`<span>`), _tmpl$6 = /*#__PURE__*/ template(`<div><div><p></p><!$><!/>`), _tmpl$7 = /*#__PURE__*/ template(`<div>`);
+const preview = " sd151 eb151 Ug151 qg151 Za151 Te151 Qe151 Se151 Re151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
+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 += " sd151";
+	if (props.isUser) rules += " _Cb151";
+	else rules += " _Cg151";
+	return rules;
+};
+const bubble = function anonymous(props) {
+	let rules = " ";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Ua151";
+	rules += " qa151";
+	rules += " LbmOfn151";
+	rules += " Sf151";
+	rules += " Rf151";
+	rules += " Tt151";
+	rules += " Qt151";
+	rules += " oc151";
+	rules += " nc151";
+	rules += " kc151";
+	rules += " jc151";
+	if (props.isUser) rules += " gj1j4Pd151";
+	else rules += " gg0eWE151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pXDQpyb151";
+	return rules;
+};
+const bubbleTime = function anonymous(props) {
+	let rules = " ";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xc151";
+	rules += " _xa151";
+	rules += " xfd151";
+	rules += " _xfa151";
+	rules += " xfX0cczbc151";
+	rules += " _xfX0cczba151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pO550xe151";
+	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 = " sd151 _ta151 Ue151 qe151 Tf151 Qf151 Sf151 Rf151";
+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-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`\n  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting\n  // is carried by the smaller `detail-sm` size, not a sub-AA color.\n  color: \"[var(--color-text)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails\n  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.\n  color: \"[var(--color-text)]\",\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  // Text on the non-flipping pink `--color-accent` fill: the near-white\n  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`\n  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill\n  // resolution.\n  color: \"[var(--color-grey-900)]\",\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    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both\n    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white\n    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1\n    // light / ~6.1:1 dark), the Chip accent-fill resolution.\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes\n    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp\n    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →\n    // `--color-grey-900` (matching the bubble body).\n    default: \"[var(--color-text)]\",\n    isUser: \"[var(--color-grey-900)]\",\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,106 @@
+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 = " sd151 eb151 Ug151 qg151 Za151 Te151 Qe151 Se151 Re151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
+const previewBody = " sd151 _ta151 Ua151 qa151 _ub151 Na151";
+const previewTop = " sd151 eb151 _Ce151 Ue151 qe151";
+const previewName = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151";
+const previewTime = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xc151 _xa151 xfd151 _xfa151 xfX0cczbc151 _xfX0cczba151 _Fd151 _FnuYUweb151 pO550xe151 _va151";
+const previewMessage = " uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151 _Nc151 Pc151 _Yb151 _7c151";
+const unread = " sd151 eb151 _Ca151 _va151 Zm151 Fn151 og151 ng151 kg151 jg151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xd151 _xa151 xX0cczbc151 _xX0cczba151 _Fd151 _FnuYUweb151 padAQ7151 gj1j4Pd151";
+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 += " sd151";
+	if (props.isUser) rules += " _Cb151";
+	else rules += " _Cg151";
+	return rules;
+};
+const bubble = function anonymous(props) {
+	let rules = " ";
+	rules += " sd151";
+	rules += " _ta151";
+	rules += " Ua151";
+	rules += " qa151";
+	rules += " LbmOfn151";
+	rules += " Sf151";
+	rules += " Rf151";
+	rules += " Tt151";
+	rules += " Qt151";
+	rules += " oc151";
+	rules += " nc151";
+	rules += " kc151";
+	rules += " jc151";
+	if (props.isUser) rules += " gj1j4Pd151";
+	else rules += " gg0eWE151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pXDQpyb151";
+	return rules;
+};
+const bubbleTime = function anonymous(props) {
+	let rules = " ";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xc151";
+	rules += " _xa151";
+	rules += " xfd151";
+	rules += " _xfa151";
+	rules += " xfX0cczbc151";
+	rules += " _xfX0cczba151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isUser) rules += " padAQ7151";
+	else rules += " pO550xe151";
+	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 = " sd151 _ta151 Ue151 qe151 Tf151 Qf151 Sf151 Rf151";
+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-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`\n  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting\n  // is carried by the smaller `detail-sm` size, not a sub-AA color.\n  color: \"[var(--color-text)]\",\n  flexShrink: 0,\n});\n\nconst previewMessage = style({\n  font: \"ui-sm\",\n  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails\n  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.\n  color: \"[var(--color-text)]\",\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  // Text on the non-flipping pink `--color-accent` fill: the near-white\n  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`\n  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill\n  // resolution.\n  color: \"[var(--color-grey-900)]\",\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    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both\n    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white\n    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1\n    // light / ~6.1:1 dark), the Chip accent-fill resolution.\n    default: \"[var(--color-primary-100)]\",\n    isUser: \"[var(--color-grey-900)]\",\n  },\n});\n\nconst bubbleTime = style<{ isUser: boolean }>({\n  font: \"detail-sm\",\n  color: {\n    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes\n    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp\n    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →\n    // `--color-grey-900` (matching the bubble body).\n    default: \"[var(--color-text)]\",\n    isUser: \"[var(--color-grey-900)]\",\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,UAAA;AAaN,MAAM,cAAA;AAQN,MAAM,aAAA;AAON,MAAM,cAAA;AASN,MAAM,cAAA;AASN,MAAM,iBAAA;AAUN,MAAM,SAAA;AAkBN,SAAgB,oBAAoB,OAA+B;CACjE,OAAO,CACJ,OACC,cACA,OAAO,GAAG,QAAQ,GAAG,MAAM,SAAS,MACpC,eAAe,MAAM,UAAO,GAC7B;MACC,CAAC,OAAO,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM,KAAK,MAAM,QAAQ,MAAM,KAAK,QAAQ,YAAY;MAC7F,CAAC,IAAI,OAAO,aAAa;QACvB,CAAC,IAAI,OAAO,YAAY;UACtB,CAAC,KAAK,OAAO,cAAc,MAAM,KAAK,KAAI,EAAG,KAAK;UAClD,CAAC,KAAK,MAAM,MAAM,WAAW;YAC3B,CAAC,KAAK,OAAO,cAAc,MAAM,UAAS,EAAG,KAAK;UACpD,EAAE,KAAK;QACT,EAAE,IAAI;QACN,CAAC,KAAK,MAAM,MAAM,aAAa;UAC7B,CAAC,EAAE,OAAO,iBAAiB,MAAM,YAAW,EAAG,EAAE;QACnD,EAAE,KAAK;MACT,EAAE,IAAI;MACN,CAAC,KAAK,MAAM,MAAM,eAAe,MAAM,cAAc,GAAG;QACtD,CAAC,KAAK,OAAO,SAAS,MAAM,YAAW,EAAG,KAAK;MACjD,EAAE,KAAK;IACT,EAAE;AAEN;AASA,MAAM,YAAA,SAAA,UAAA,OAAA;;;;;;;AAKN,MAAM,SAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;AAsBN,MAAM,aAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAYN,SAAgB,mBAAmB,OAA8B;CAC/D,MAAM,eAAe,MAAM,WAAW;CAEtC,OAAO,CACJ,IAAI,OAAO,GAAG,UAAU,EAAE,QAAQ,OAAA,EAAS,CAAA,EAAG,GAAG,MAAM,SAAS,MAAM;MACrE,CAAC,IAAI,OAAO,OAAO,EAAE,QAAQ,OAAA,EAAS,CAAA,GAAI;QACxC,CAAC,GAAG,MAAM,QAAO,EAAG,EAAE;QACtB,CAAC,KAAK,MAAM,MAAM,WAAW;UAC3B,CAAC,KAAK,OAAO,WAAW,EAAE,QAAQ,OAAA,EAAS,CAAA,IAAK,MAAM,UAAS,EAAG,KAAK;QACzE,EAAE,KAAK;MACT,EAAE,IAAI;IACR,EAAE;AAEN;AAOA,MAAM,SAAA;AAON,SAAgB,aAAa,OAAwB;CACnD,OAAO,CACJ,IAAI,OAAO,GAAG,OAAO,GAAG,MAAM,SAAS,MAAM;MAC5C,CAAC,IAAI,MAAM,MAAM,UAAU;UACvB,YAAY,CACX,mBACC,SAAS,QAAQ,SACjB,QAAQ,QAAQ,QAChB,WAAW,QAAQ,cAErB;MACJ,EAAE,IAAI;IACR,EAAE;AAEN"}

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,171 @@
+/* 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=" _Pa151 WJ151 _zI151 ZC151 Fx151 _Ha151"alt>`), _tmpl$2 = /*#__PURE__*/ template(`<img class=" Za151 fu4qurc151 _Hb151">`), _tmpl$3 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ub151 qb151"><span class=" pO550xe151">@</span><span>`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ub151 qb151"><span class=" pO550xe151">⏱</span><span>`), _tmpl$5 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ul151 ql151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151"><!$><!/><!$><!/>`), _tmpl$6 = /*#__PURE__*/ template(`<span class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151">+<!$><!/> más`), _tmpl$7 = /*#__PURE__*/ template(`<div class=" sd151 eb151 Ue151 qe151"><div class=" sd151 eb151 Ub151 qb151"></div><!$><!/>`), _tmpl$8 = /*#__PURE__*/ template(`<div class=" sd151 Ue151 qe151">`), _tmpl$9 = /*#__PURE__*/ template(`<div><!$><!/><!$><!/><div class=" sd151 _ta151 Ug151 qg151 Tf151 Qf151 Sf151 Rf151"><h3 class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-g151 vx151 xe151 _xa151 xX0cczbd151 _xX0cczba151 xfe151 _xfa151 xfX0cczbd151 _xfX0cczba151 _Fd151 _FnuYUweb151 pH0v9Fe151"></h3><!$><!/><!$><!/><!$><!/>`), _tmpl$0 = /*#__PURE__*/ template(`<img class=" ZF151 Fz151 _va151 ob151 nb151 kb151 jb151 _Hb151">`), _tmpl$1 = /*#__PURE__*/ template(`<p class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-b151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pxeCuqc151 _Nc151 Pc151 _Yb151 _7c151">`), _tmpl$10 = /*#__PURE__*/ template(`<div class=" sd151 _ta151 _ub151 Na151"><h4 class=" uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xc151 _xa151 _Fd151 _FnuYUweb151 pXDQpyb151 _Nc151 Pc151 _Yb151 _7c151"></h4><!$><!/>`);
+const card = " _Pc151 sd151 _ta151 _Nc151 Pc151 oe151 ne151 ke151 je151 gDE5VE151 _nLeasBb151";
+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 = " sd151 eb151 Ug151 qg151 Za151 Tt151 Qt151 St151 Rt151 oc151 nc151 kc151 jc151 _Wd151 ry151 g9151 _je151";
+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  // WCAG AA fix: the title sits on the `--color-bg-200` card. `--color-accent`\n  // (#df5c9a) is a fixed pink in BOTH themes, so it does not flip against a card\n  // that is dark-grey in dark mode and light-blue in light mode — it read 4.48:1\n  // dark / 1.89:1 light. `font: heading` renders 22px / weight 800, which is WCAG\n  // large text via the BOLD path (≥18.66px && ≥700), NOT because it is ≥24px — so\n  // the 3:1 large-text floor applies. `--color-accent-500` is the smallest ramp\n  // step that flips with the theme (bright pink dark / deep magenta light) AND\n  // clears 3:1 both ways (3.87:1 dark / 4.91:1 light), keeping the brand accent.\n  color: \"[var(--color-accent-500)]\",\n});\n\nconst meta = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 16,\n  font: \"ui-sm\",\n  // WCAG AA fix: the meta text is small (`ui-sm`), so the 4.5:1 normal-text\n  // floor applies. `--color-text-secondary` read only 3.84:1 on the light\n  // `--color-bg-200` card; `--color-text` flips and clears 4.5:1 both ways\n  // (15.33:1 dark / 7.53:1 light). Secondary de-emphasis rides on the smaller\n  // `ui-sm` size rather than a sub-AA color.\n  color: \"[var(--color-text)]\",\n});\n\nconst metaItem = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: 4,\n});\n\nconst metaIcon = style({\n  // WCAG AA fix: the meta glyphs (@ / ⏱) are small (inherit `ui-sm`), so the\n  // 4.5:1 floor applies. `--color-accent` fails on the card (4.48:1 dark /\n  // 1.89:1 light) and no pink ramp step clears 4.5:1 on both the dark-grey and\n  // light-blue card, so the glyphs take the flipping `--color-text` like the\n  // meta text they prefix.\n  color: \"[var(--color-text)]\",\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  // WCAG AA fix: the \"+N más\" overflow count is small text on the same\n  // `--color-bg-200` card as the meta, so it shares the same 3.84:1-light\n  // failure and the same `--color-text` fix.\n  color: \"[var(--color-text)]\",\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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"}