@proyecto-viviana/ui 0.4.0 → 0.5.0

package/dist/ProjectCard.js

@@ -1,164 +0,0 @@
-import { className, effect, getNextElement, insert, setAttribute, template } from "solid-js/web";
-//#region src/custom/project-card/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<img class=" Za13 fa13 _Ha13 oa13 na13 ka13 ja13">`), _tmpl$2 = /*#__PURE__*/ template(`<span>`), _tmpl$3 = /*#__PURE__*/ template(`<a target=_blank rel="noopener noreferrer">`), _tmpl$4 = /*#__PURE__*/ template(`<div>`);
-const card = function anonymous(props) {
-	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " eb13";
-	rules += " Ue13";
-	rules += " qe13";
-	rules += " Za13";
-	rules += " oc13";
-	rules += " nc13";
-	rules += " kc13";
-	rules += " jc13";
-	rules += " _kb13";
-	rules += " hb13";
-	rules += " mb13";
-	rules += " lb13";
-	rules += " _jf13";
-	rules += " izfTM513";
-	rules += " gDE5VE13";
-	rules += " pXDQpyb13";
-	rules += " _Xa13";
-	if (props.size === "lg") rules += " Tg13";
-	else if (props.size === "md") rules += " Tf13";
-	else if (props.size === "sm") rules += " Te13";
-	if (props.size === "lg") rules += " Qg13";
-	else if (props.size === "md") rules += " Qf13";
-	else if (props.size === "sm") rules += " Qe13";
-	if (props.size === "lg") rules += " Sg13";
-	else if (props.size === "md") rules += " Sf13";
-	else if (props.size === "sm") rules += " Se13";
-	if (props.size === "lg") rules += " Rg13";
-	else if (props.size === "md") rules += " Rf13";
-	else if (props.size === "sm") rules += " Re13";
-	if (props.isInactive) rules += " _IqmMfn13";
-	else rules += " _Ib13";
-	return rules;
-};
-const caption = function anonymous(props) {
-	let rules = " ";
-	rules += " Za13";
-	rules += " _Wa13";
-	rules += " _Nc13";
-	rules += " Pc13";
-	rules += " _Yb13";
-	rules += " _7c13";
-	if (props.size === "lg") rules += " pt13";
-	else if (props.size === "md") rules += " pt13";
-	else if (props.size === "sm") rules += " pt13";
-	if (props.size === "lg") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	} else if (props.size === "md") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	} else if (props.size === "sm") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	}
-	if (props.size === "lg") {
-		rules += " -_6BNtrc-d13";
-		rules += " vx13";
-	} else if (props.size === "md") {
-		rules += " -_6BNtrc-c13";
-		rules += " vx13";
-	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-b13";
-		rules += " vx13";
-	}
-	if (props.size === "lg") {
-		rules += " xb13";
-		rules += " _xa13";
-	} else if (props.size === "md") {
-		rules += " xb13";
-		rules += " _xa13";
-	} else if (props.size === "sm") {
-		rules += " xb13";
-		rules += " _xa13";
-	}
-	if (props.size === "lg") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	} else if (props.size === "md") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	} else if (props.size === "sm") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	}
-	return rules;
-};
-function ProjectCard(props) {
-	const size = () => props.size ?? "sm";
-	const inactive = () => props.inactive ?? false;
-	const cardContent = () => [(() => {
-		var _el$ = getNextElement(_tmpl$);
-		effect((_p$) => {
-			var _v$ = props.imageSrc, _v$2 = props.imageAlt ?? props.name;
-			_v$ !== _p$.e && setAttribute(_el$, "src", _p$.e = _v$);
-			_v$2 !== _p$.t && setAttribute(_el$, "alt", _p$.t = _v$2);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$;
-	})(), (() => {
-		var _el$2 = getNextElement(_tmpl$2);
-		insert(_el$2, () => props.name);
-		effect(() => className(_el$2, caption({ size: size() })));
-		return _el$2;
-	})()];
-	const classes = () => `${card({
-		size: size(),
-		isInactive: inactive()
-	})} ${props.class ?? ""}`;
-	if (props.href) return (() => {
-		var _el$3 = getNextElement(_tmpl$3);
-		insert(_el$3, cardContent);
-		effect((_p$) => {
-			var _v$3 = props.href, _v$4 = classes();
-			_v$3 !== _p$.e && setAttribute(_el$3, "href", _p$.e = _v$3);
-			_v$4 !== _p$.t && className(_el$3, _p$.t = _v$4);
-			return _p$;
-		}, {
-			e: void 0,
-			t: void 0
-		});
-		return _el$3;
-	})();
-	return (() => {
-		var _el$4 = getNextElement(_tmpl$4);
-		insert(_el$4, cardContent);
-		effect(() => className(_el$4, classes()));
-		return _el$4;
-	})();
-}
-//#endregion
-export { ProjectCard };
-
-//# sourceMappingURL=ProjectCard.js.map

package/dist/ProjectCard.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProjectCard.js","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n  name: string;\n  imageSrc: string;\n  imageAlt?: string;\n  href?: string;\n  size?: ProjectCardSize;\n  inactive?: boolean;\n  class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  gap: 8,\n  width: \"full\",\n  borderRadius: \"lg\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-border)]\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  color: \"[var(--color-primary-100)]\",\n  textDecoration: \"none\",\n  padding: { size: { sm: 12, md: 16, lg: 20 } },\n  opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n  width: \"full\",\n  aspectRatio: \"square\",\n  objectFit: \"contain\",\n  borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n  width: \"full\",\n  textAlign: \"center\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  color: \"[var(--color-primary-200)]\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n});\n\nexport function ProjectCard(props: ProjectCardProps): JSX.Element {\n  const size = () => props.size ?? \"sm\";\n  const inactive = () => props.inactive ?? false;\n\n  const cardContent = () => (\n    <>\n      <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />\n      <span class={caption({ size: size() })}>{props.name}</span>\n    </>\n  );\n\n  const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? \"\"}`;\n\n  if (props.href) {\n    return (\n      <a href={props.href} target=\"_blank\" rel=\"noopener noreferrer\" class={classes()}>\n        {cardContent()}\n      </a>\n    );\n  }\n\n  return <div class={classes()}>{cardContent()}</div>;\n}\n"],"mappings":";;;AAmBA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM,UAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUN,SAAgB,YAAY,OAA8B;CACxD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,iBAAiB,MAAM,YAAY;CAEzC,MAAM,oBAAc,QAAA;EAAA,IAAA,OAAA,eAAA,MAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAEQ,MAAM,UAAQ,OAAO,MAAM,YAAY,MAAM;GAAI,QAAA,IAAA,KAAA,aAAA,MAAA,OAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,aAAA,MAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA,UAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,aAChC,MAAM,IAAI;EAAA,aAAA,UAAA,OAAtC,QAAQ,EAAE,MAAM,KAAA,EAAO,CAAA,CAAA,CAAA;EAAA,OAAA;CAAA,GAAA,CAAA;CAIxC,MAAM,gBAAgB,GAAG,KAAK;EAAE,MAAM,KAAA;EAAQ,YAAY,SAAA;CAAW,CAAA,EAAA,GAAM,MAAM,SAAS;CAE1F,IAAI,MAAM,MACR,cAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,OAEK,WAAA;EAAA,QAAA,QAAA;GAAA,IAAA,OADM,MAAM,MAAI,OAAmD,QAAA;GAAA,SAAA,IAAA,KAAA,aAAA,OAAA,QAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;CAM1E,cAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,OAA+B,WAAA;EAAA,aAAA,UAAA,OAAZ,QAAA,CAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AACrB"}

package/dist/ProjectCard.jsx

@@ -1,133 +0,0 @@
-//#region src/custom/project-card/index.tsx
-const card = function anonymous(props) {
-	let rules = " ";
-	rules += " sd13";
-	rules += " _ta13";
-	rules += " eb13";
-	rules += " Ue13";
-	rules += " qe13";
-	rules += " Za13";
-	rules += " oc13";
-	rules += " nc13";
-	rules += " kc13";
-	rules += " jc13";
-	rules += " _kb13";
-	rules += " hb13";
-	rules += " mb13";
-	rules += " lb13";
-	rules += " _jf13";
-	rules += " izfTM513";
-	rules += " gDE5VE13";
-	rules += " pXDQpyb13";
-	rules += " _Xa13";
-	if (props.size === "lg") rules += " Tg13";
-	else if (props.size === "md") rules += " Tf13";
-	else if (props.size === "sm") rules += " Te13";
-	if (props.size === "lg") rules += " Qg13";
-	else if (props.size === "md") rules += " Qf13";
-	else if (props.size === "sm") rules += " Qe13";
-	if (props.size === "lg") rules += " Sg13";
-	else if (props.size === "md") rules += " Sf13";
-	else if (props.size === "sm") rules += " Se13";
-	if (props.size === "lg") rules += " Rg13";
-	else if (props.size === "md") rules += " Rf13";
-	else if (props.size === "sm") rules += " Re13";
-	if (props.isInactive) rules += " _IqmMfn13";
-	else rules += " _Ib13";
-	return rules;
-};
-const image = " Za13 fa13 _Ha13 oa13 na13 ka13 ja13";
-const caption = function anonymous(props) {
-	let rules = " ";
-	rules += " Za13";
-	rules += " _Wa13";
-	rules += " _Nc13";
-	rules += " Pc13";
-	rules += " _Yb13";
-	rules += " _7c13";
-	if (props.size === "lg") rules += " pt13";
-	else if (props.size === "md") rules += " pt13";
-	else if (props.size === "sm") rules += " pt13";
-	if (props.size === "lg") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	} else if (props.size === "md") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	} else if (props.size === "sm") {
-		rules += " uk13";
-		rules += " ucJ9TBTb13";
-		rules += " ud3Euai13";
-		rules += " uea13";
-		rules += " ugb13";
-		rules += " uhd13";
-		rules += " uje13";
-		rules += " u2NhKxcl13";
-		rules += " uic13";
-	}
-	if (props.size === "lg") {
-		rules += " -_6BNtrc-d13";
-		rules += " vx13";
-	} else if (props.size === "md") {
-		rules += " -_6BNtrc-c13";
-		rules += " vx13";
-	} else if (props.size === "sm") {
-		rules += " -_6BNtrc-b13";
-		rules += " vx13";
-	}
-	if (props.size === "lg") {
-		rules += " xb13";
-		rules += " _xa13";
-	} else if (props.size === "md") {
-		rules += " xb13";
-		rules += " _xa13";
-	} else if (props.size === "sm") {
-		rules += " xb13";
-		rules += " _xa13";
-	}
-	if (props.size === "lg") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	} else if (props.size === "md") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	} else if (props.size === "sm") {
-		rules += " _Fd13";
-		rules += " _FnuYUweb13";
-	}
-	return rules;
-};
-function ProjectCard(props) {
-	const size = () => props.size ?? "sm";
-	const inactive = () => props.inactive ?? false;
-	const cardContent = () => <>
-      <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />
-      <span class={caption({ size: size() })}>{props.name}</span>
-    </>;
-	const classes = () => `${card({
-		size: size(),
-		isInactive: inactive()
-	})} ${props.class ?? ""}`;
-	if (props.href) return <a href={props.href} target="_blank" rel="noopener noreferrer" class={classes()}>
-        {cardContent()}
-      </a>;
-	return <div class={classes()}>{cardContent()}</div>;
-}
-//#endregion
-export { ProjectCard };
-
-//# sourceMappingURL=ProjectCard.jsx.map

package/dist/ProjectCard.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProjectCard.jsx","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n  name: string;\n  imageSrc: string;\n  imageAlt?: string;\n  href?: string;\n  size?: ProjectCardSize;\n  inactive?: boolean;\n  class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  alignItems: \"center\",\n  gap: 8,\n  width: \"full\",\n  borderRadius: \"lg\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-border)]\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n  color: \"[var(--color-primary-100)]\",\n  textDecoration: \"none\",\n  padding: { size: { sm: 12, md: 16, lg: 20 } },\n  opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n  width: \"full\",\n  aspectRatio: \"square\",\n  objectFit: \"contain\",\n  borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n  width: \"full\",\n  textAlign: \"center\",\n  overflow: \"hidden\",\n  textOverflow: \"ellipsis\",\n  whiteSpace: \"nowrap\",\n  color: \"[var(--color-primary-200)]\",\n  font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n});\n\nexport function ProjectCard(props: ProjectCardProps): JSX.Element {\n  const size = () => props.size ?? \"sm\";\n  const inactive = () => props.inactive ?? false;\n\n  const cardContent = () => (\n    <>\n      <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />\n      <span class={caption({ size: size() })}>{props.name}</span>\n    </>\n  );\n\n  const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? \"\"}`;\n\n  if (props.href) {\n    return (\n      <a href={props.href} target=\"_blank\" rel=\"noopener noreferrer\" class={classes()}>\n        {cardContent()}\n      </a>\n    );\n  }\n\n  return <div class={classes()}>{cardContent()}</div>;\n}\n"],"mappings":";AAmBA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM,QAAA;AAON,MAAM,UAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUN,SAAgB,YAAY,OAA8B;CACxD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,iBAAiB,MAAM,YAAY;CAEzC,MAAM,oBAAoB,EACtB;MACA,CAAC,IAAI,OAAO,OAAO,KAAK,MAAM,UAAU,KAAK,MAAM,YAAY,MAAM,QAAQ;MAC7E,CAAC,KAAK,OAAO,QAAQ,EAAE,MAAM,KAAA,EAAO,CAAA,IAAK,MAAM,KAAI,EAAG,KAAK;IAC7D;CAGF,MAAM,gBAAgB,GAAG,KAAK;EAAE,MAAM,KAAA;EAAQ,YAAY,SAAA;CAAW,CAAA,EAAG,GAAG,MAAM,SAAS;CAE1F,IAAI,MAAM,MACR,OAAO,CACJ,EAAE,MAAM,MAAM,MAAM,gBAAgB,0BAA0B,OAAO,QAAA,GAAW;SAC9E,YAAA,EAAc;MACjB,EAAE;CAIN,OAAA,CAAQ,IAAI,OAAO,QAAA,IAAY,YAAA,EAAA,EAAgB;AACjD"}

package/dist/TimelineItem.d.ts

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

package/dist/TimelineItem.d.ts.map

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

package/dist/TimelineItem.js

@@ -1,137 +0,0 @@
-/* empty css                                                                       */
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-import { className, createComponent, effect, getNextElement, getNextMarker, insert, template } from "solid-js/web";
-import { Show } from "solid-js";
-//#region src/custom/timeline-item/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pj1j4Pd13">`), _tmpl$2 = /*#__PURE__*/ template(`<div><div class=" sd13 eb13 _Ca13 Ug13 qg13"><!$><!/><!$><!/><!$><!/></div><div class=" sd13 eb13 _Ca13 _Wa13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13"><span>`);
-const eventMessages = {
-	follow: (left, right) => [
-		(() => {
-			var _el$ = getNextElement(_tmpl$);
-			insert(_el$, left);
-			return _el$;
-		})(),
-		" ha empezado a seguir a ",
-		(() => {
-			var _el$2 = getNextElement(_tmpl$);
-			insert(_el$2, right);
-			return _el$2;
-		})()
-	],
-	like: (left, right) => [
-		(() => {
-			var _el$3 = getNextElement(_tmpl$);
-			insert(_el$3, left);
-			return _el$3;
-		})(),
-		" le ha dado like a ",
-		(() => {
-			var _el$4 = getNextElement(_tmpl$);
-			insert(_el$4, right);
-			return _el$4;
-		})()
-	],
-	comment: (left, right) => [
-		(() => {
-			var _el$5 = getNextElement(_tmpl$);
-			insert(_el$5, left);
-			return _el$5;
-		})(),
-		" ha comentado en ",
-		(() => {
-			var _el$6 = getNextElement(_tmpl$);
-			insert(_el$6, right);
-			return _el$6;
-		})()
-	],
-	event: (left, right) => [
-		(() => {
-			var _el$7 = getNextElement(_tmpl$);
-			insert(_el$7, left);
-			return _el$7;
-		})(),
-		" asistirá al evento de ",
-		(() => {
-			var _el$8 = getNextElement(_tmpl$);
-			insert(_el$8, right);
-			return _el$8;
-		})()
-	],
-	custom: () => null
-};
-const card = " sh13 _ta13 Ui13 qi13 Tg13 Qg13 Sg13 Rg13 oe13 ne13 ke13 je13 _kb13 hb13 mb13 lb13 _jf13 iJJKqyb13 gDE5VE13";
-function TimelineItem(props) {
-	const type = () => props.type ?? "follow";
-	const leftName = () => props.leftUser?.name ?? "";
-	const rightName = () => props.rightUser?.name ?? "";
-	const renderIcon = () => {
-		const icon = props.icon;
-		if (!icon) return null;
-		if (typeof icon === "string") return icon;
-		return icon();
-	};
-	const renderMessage = () => {
-		const message = props.message;
-		if (!message) return null;
-		if (typeof message === "string") return message;
-		return message();
-	};
-	return (() => {
-		var _el$9 = getNextElement(_tmpl$2), _el$0 = _el$9.firstChild, _el$1 = _el$0.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling), _el$13 = _el$12.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$16 = _el$0.nextSibling.firstChild;
-		insert(_el$0, createComponent(Show, {
-			get when() {
-				return props.leftUser;
-			},
-			get children() {
-				return createComponent(Avatar, {
-					get src() {
-						return props.leftUser.avatar;
-					},
-					get alt() {
-						return props.leftUser.name;
-					}
-				});
-			}
-		}), _el$10, _co$);
-		insert(_el$0, createComponent(Show, {
-			get when() {
-				return props.icon;
-			},
-			get children() {
-				return renderIcon();
-			}
-		}), _el$12, _co$2);
-		insert(_el$0, createComponent(Show, {
-			get when() {
-				return props.rightUser;
-			},
-			get children() {
-				return createComponent(Avatar, {
-					get src() {
-						return props.rightUser.avatar;
-					},
-					get alt() {
-						return props.rightUser.name;
-					}
-				});
-			}
-		}), _el$14, _co$3);
-		insert(_el$16, createComponent(Show, {
-			get when() {
-				return props.message;
-			},
-			get fallback() {
-				return eventMessages[type()](leftName(), rightName());
-			},
-			get children() {
-				return renderMessage();
-			}
-		}));
-		effect(() => className(_el$9, `${card} ${props.class ?? ""}`));
-		return _el$9;
-	})();
-}
-//#endregion
-export { TimelineItem };
-
-//# sourceMappingURL=TimelineItem.js.map

package/dist/TimelineItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineItem.js","names":[],"sources":["../src/custom/timeline-item/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A social timeline event card (two avatars + icon + message)\n// on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type TimelineEventType = \"follow\" | \"like\" | \"comment\" | \"event\" | \"custom\";\n\nexport interface TimelineItemProps {\n  type?: TimelineEventType;\n  /**\n   * Icon to display between the two avatars.\n   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`\n   * Or pass a simple string for text-based icons: `icon=\"👋\"`\n   */\n  icon?: string | (() => JSX.Element);\n  leftUser?: {\n    name: string;\n    avatar?: string;\n  };\n  rightUser?: {\n    name: string;\n    avatar?: string;\n  };\n  /**\n   * Custom message content.\n   * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`\n   * Or pass a simple string.\n   */\n  message?: string | (() => JSX.Element);\n  class?: string;\n}\n\nconst nameEmph = style({\n  fontWeight: \"bold\",\n  color: \"[var(--color-accent)]\",\n});\n\nconst eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {\n  follow: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" ha empezado a seguir a \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  like: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" le ha dado like a \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  comment: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" ha comentado en \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  event: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" asistirá al evento de \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  custom: () => null,\n};\n\nconst card = style({\n  display: \"inline-flex\",\n  flexDirection: \"column\",\n  gap: 20,\n  padding: 20,\n  borderRadius: \"xl\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-primary-700)]\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n});\n\nconst avatarsRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  gap: 12,\n});\n\nconst messageRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n  font: \"ui\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nexport function TimelineItem(props: TimelineItemProps) {\n  const type = () => props.type ?? \"follow\";\n  const leftName = () => props.leftUser?.name ?? \"\";\n  const rightName = () => props.rightUser?.name ?? \"\";\n\n  const renderIcon = () => {\n    const icon = props.icon;\n    if (!icon) return null;\n    if (typeof icon === \"string\") return icon;\n    return icon();\n  };\n\n  const renderMessage = () => {\n    const message = props.message;\n    if (!message) return null;\n    if (typeof message === \"string\") return message;\n    return message();\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <div class={avatarsRow}>\n        <Show when={props.leftUser}>\n          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />\n        </Show>\n        <Show when={props.icon}>{renderIcon()}</Show>\n        <Show when={props.rightUser}>\n          <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />\n        </Show>\n      </div>\n      <div class={messageRow}>\n        <span>\n          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>\n            {renderMessage()}\n          </Show>\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/TimelineItem.jsx

@@ -1,70 +0,0 @@
-/* empty css                                                                        */
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-import { Show } from "solid-js";
-//#region src/custom/timeline-item/index.tsx
-const nameEmph = " xd13 _xa13 xX0cczbc13 _xX0cczba13 pj1j4Pd13";
-const eventMessages = {
-	follow: (left, right) => <>
-      <span class={nameEmph}>{left}</span>
-      {" ha empezado a seguir a "}
-      <span class={nameEmph}>{right}</span>
-    </>,
-	like: (left, right) => <>
-      <span class={nameEmph}>{left}</span>
-      {" le ha dado like a "}
-      <span class={nameEmph}>{right}</span>
-    </>,
-	comment: (left, right) => <>
-      <span class={nameEmph}>{left}</span>
-      {" ha comentado en "}
-      <span class={nameEmph}>{right}</span>
-    </>,
-	event: (left, right) => <>
-      <span class={nameEmph}>{left}</span>
-      {" asistirá al evento de "}
-      <span class={nameEmph}>{right}</span>
-    </>,
-	custom: () => null
-};
-const card = " sh13 _ta13 Ui13 qi13 Tg13 Qg13 Sg13 Rg13 oe13 ne13 ke13 je13 _kb13 hb13 mb13 lb13 _jf13 iJJKqyb13 gDE5VE13";
-const avatarsRow = " sd13 eb13 _Ca13 Ug13 qg13";
-const messageRow = " sd13 eb13 _Ca13 _Wa13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
-function TimelineItem(props) {
-	const type = () => props.type ?? "follow";
-	const leftName = () => props.leftUser?.name ?? "";
-	const rightName = () => props.rightUser?.name ?? "";
-	const renderIcon = () => {
-		const icon = props.icon;
-		if (!icon) return null;
-		if (typeof icon === "string") return icon;
-		return icon();
-	};
-	const renderMessage = () => {
-		const message = props.message;
-		if (!message) return null;
-		if (typeof message === "string") return message;
-		return message();
-	};
-	return <div class={`${card} ${props.class ?? ""}`}>
-      <div class={avatarsRow}>
-        <Show when={props.leftUser}>
-          <Avatar src={props.leftUser.avatar} alt={props.leftUser.name} />
-        </Show>
-        <Show when={props.icon}>{renderIcon()}</Show>
-        <Show when={props.rightUser}>
-          <Avatar src={props.rightUser.avatar} alt={props.rightUser.name} />
-        </Show>
-      </div>
-      <div class={messageRow}>
-        <span>
-          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
-            {renderMessage()}
-          </Show>
-        </span>
-      </div>
-    </div>;
-}
-//#endregion
-export { TimelineItem };
-
-//# sourceMappingURL=TimelineItem.jsx.map

package/dist/TimelineItem.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimelineItem.jsx","names":[],"sources":["../src/custom/timeline-item/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show } from \"solid-js\";\nimport { Avatar } from \"@proyecto-viviana/solid-spectrum\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A social timeline event card (two avatars + icon + message)\n// on the S2 spacing/radius ramps in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type TimelineEventType = \"follow\" | \"like\" | \"comment\" | \"event\" | \"custom\";\n\nexport interface TimelineItemProps {\n  type?: TimelineEventType;\n  /**\n   * Icon to display between the two avatars.\n   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`\n   * Or pass a simple string for text-based icons: `icon=\"👋\"`\n   */\n  icon?: string | (() => JSX.Element);\n  leftUser?: {\n    name: string;\n    avatar?: string;\n  };\n  rightUser?: {\n    name: string;\n    avatar?: string;\n  };\n  /**\n   * Custom message content.\n   * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`\n   * Or pass a simple string.\n   */\n  message?: string | (() => JSX.Element);\n  class?: string;\n}\n\nconst nameEmph = style({\n  fontWeight: \"bold\",\n  color: \"[var(--color-accent)]\",\n});\n\nconst eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {\n  follow: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" ha empezado a seguir a \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  like: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" le ha dado like a \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  comment: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" ha comentado en \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  event: (left, right) => (\n    <>\n      <span class={nameEmph}>{left}</span>\n      {\" asistirá al evento de \"}\n      <span class={nameEmph}>{right}</span>\n    </>\n  ),\n  custom: () => null,\n};\n\nconst card = style({\n  display: \"inline-flex\",\n  flexDirection: \"column\",\n  gap: 20,\n  padding: 20,\n  borderRadius: \"xl\",\n  borderWidth: 1,\n  borderStyle: \"solid\",\n  borderColor: \"[var(--color-primary-700)]\",\n  backgroundColor: \"[var(--color-bg-200)]\",\n});\n\nconst avatarsRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  gap: 12,\n});\n\nconst messageRow = style({\n  display: \"flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  textAlign: \"center\",\n  font: \"ui\",\n  color: \"[var(--color-text-secondary)]\",\n});\n\nexport function TimelineItem(props: TimelineItemProps) {\n  const type = () => props.type ?? \"follow\";\n  const leftName = () => props.leftUser?.name ?? \"\";\n  const rightName = () => props.rightUser?.name ?? \"\";\n\n  const renderIcon = () => {\n    const icon = props.icon;\n    if (!icon) return null;\n    if (typeof icon === \"string\") return icon;\n    return icon();\n  };\n\n  const renderMessage = () => {\n    const message = props.message;\n    if (!message) return null;\n    if (typeof message === \"string\") return message;\n    return message();\n  };\n\n  return (\n    <div class={`${card} ${props.class ?? \"\"}`}>\n      <div class={avatarsRow}>\n        <Show when={props.leftUser}>\n          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />\n        </Show>\n        <Show when={props.icon}>{renderIcon()}</Show>\n        <Show when={props.rightUser}>\n          <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />\n        </Show>\n      </div>\n      <div class={messageRow}>\n        <span>\n          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>\n            {renderMessage()}\n          </Show>\n        </span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;MAmCM,CAAA,KAAA,OAAA,WAAA,KAAA,EAAA,KAAA;OAKA,2BAAyF;MAC7F,CAAA,KAAS,OAAM,WACX,MAAA,EAAA,KAAA;;QAEC,MAAA,UAAA,EAAA;MACD,CAAC,KAAK,OAAO,WAAW,KAAA,EAAA,KAAQ;OAClC,sBAAA;MAEF,CAAA,KAAO,OAAM,WACT,MAAA,EAAA,KAAA;;WAEC,MAAA,UAAA,EAAsB;MACvB,CAAC,KAAK,OAAO,WAAW,KAAA,EAAA,KAAQ;OAClC,oBAAA;MAEF,CAAA,KAAU,OAAM,WACZ,MAAA,EAAA,KAAA;;SAEC,MAAA,UAAA,EAAoB;MACrB,CAAC,KAAK,OAAO,WAAW,KAAA,EAAA,KAAQ;OAClC,0BAAA;MAEF,CAAA,KAAQ,OAAM,WACV,MAAA,EAAA,KAAA;;eAEC;;MAEH,OAAA;MAEF,aAAc;AAChB,MAAA,aAAA;AAEA,SAAM,aAAA,OAAA;CAYN,MAAM,aAAA,MAAA,QAAA;CAON,MAAM,iBAAA,MAAA,UAAA,QAAA;CASN,MAAA,kBAA6B,MAAwB,WAAA,QAAA;CACnD,MAAM,mBAAmB;EACzB,MAAM,OAAA,MAAA;EACN,IAAA,CAAM,MAAA,OAAA;EAEN,IAAA,OAAM,SAAA,UAAa,OAAA;EACjB,OAAM,KAAA;;OAEF,sBAAgB;EACpB,MAAA,UAAO,MAAA;EACT,IAAA,CAAA,SAAA,OAAA;EAEA,IAAA,OAAM,YAAA,UAAgB,OAAA;EACpB,OAAM,QAAA;;QAEF,CAAA,IAAO,OAAA,GAAA,KAAY,GAAA,MAAU,SAAO,MAAA;MACxC,CAAA,IAAO,OAAA,YAAA;QACT,CAAA,KAAA,MAAA,MAAA,UAAA;UAGG,CAAA,OAAI,KAAU,MAAK,SAAS,QAAS,KAAA,MAAM,SAAA,QAAA;QACzC,EAAA,KAAI;QACH,CAAC,KAAK,MAAM,MAAM,OAAA,WAAU,EAAA,EAAA,KAAA;cACzB,MAAO,MAAK,WAAM;UACnB,CAAA,OAAK,KAAA,MAAA,UAAA,QAAA,KAAA,MAAA,UAAA,QAAA;QACP,EAAC,KAAK;QACN,IAAC;WACE,OAAO,YAAW;QACrB,CAAA,KAAE;UACF,CAAA,KAAI,MAAA,MAAA,SAAA,UAAA,cAAA,KAAA,GAAA,SAAA,GAAA,UAAA,CAAA,GAAA;aACD,cAAO,EAAA;UACT,EAAA,KAAK;UACJ,KAAC;;;;;AAOX,SAAA"}

package/dist/chip2.js

@@ -1,82 +0,0 @@
-import { createComponent, getNextElement, insert, memo, template } from "solid-js/web";
-import { Show } from "solid-js";
-import { Button } from "@proyecto-viviana/solidaria-components";
-//#region src/custom/chip/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
-const chip = function anonymous(props) {
-	let rules = " ";
-	rules += " sh13";
-	rules += " eb13";
-	rules += " _Ca13";
-	rules += " qc13";
-	rules += " qsd13";
-	rules += " Mg13";
-	rules += " ZJ13";
-	rules += " Se13";
-	rules += " Re13";
-	rules += " og13";
-	rules += " ng13";
-	rules += " kg13";
-	rules += " jg13";
-	rules += " _jf13";
-	rules += " _kc13";
-	rules += " hc13";
-	rules += " mc13";
-	rules += " lc13";
-	rules += " uk13";
-	rules += " ucJ9TBTb13";
-	rules += " ud3Euai13";
-	rules += " uea13";
-	rules += " ugb13";
-	rules += " uhd13";
-	rules += " uje13";
-	rules += " u2NhKxcl13";
-	rules += " uic13";
-	rules += " -_6BNtrc-b13";
-	rules += " vx13";
-	rules += " xb13";
-	rules += " _xa13";
-	rules += " _Fd13";
-	rules += " _FnuYUweb13";
-	if (props.variant === "outline") rules += " pAZZpyb13";
-	else if (props.variant === "accent") rules += " pTloWE13";
-	else if (props.variant === "secondary") rules += " pAZZpyb13";
-	else if (props.variant === "primary") rules += " pXDQpyb13";
-	if (props.variant === "outline") rules += " i6nBqyb13";
-	else rules += " iA13";
-	if (props.variant === "outline") rules += " g913";
-	else if (props.variant === "accent") rules += " gj1j4Pd13";
-	else if (props.variant === "secondary") rules += " g0iWVE13";
-	else if (props.variant === "primary") rules += " gJJKqyb13";
-	return rules;
-};
-function Chip(props) {
-	const renderIcon = () => {
-		const icon = props.icon;
-		if (!icon) return null;
-		if (typeof icon === "string") return icon;
-		return icon();
-	};
-	return createComponent(Button, {
-		get ["class"]() {
-			return `${chip({ variant: props.variant ?? "primary" })} ${props.class ?? ""}`;
-		},
-		onPress: () => props.onClick?.(),
-		get children() {
-			return [createComponent(Show, {
-				get when() {
-					return props.icon;
-				},
-				get children() {
-					var _el$ = getNextElement(_tmpl$);
-					insert(_el$, renderIcon);
-					return _el$;
-				}
-			}), memo(() => props.text)];
-		}
-	});
-}
-//#endregion
-export { Chip as t };
-
-//# sourceMappingURL=chip2.js.map

package/dist/chip2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chip2.js","names":[],"sources":["../src/custom/chip/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\nimport { Show } from \"solid-js\";\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). S2 named tokens carry the shape (mirrors Badge's size-S\n// control: minHeight 24, 2px border, ui-sm font, pill radius); Silapse colors\n// ride in as arbitrary `[var(--color-*)]` values.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ChipVariant = \"primary\" | \"secondary\" | \"accent\" | \"outline\";\n\nexport interface ChipProps {\n  text: string;\n  variant?: ChipVariant;\n  onClick?: () => void;\n  /**\n   * Icon to display before the text.\n   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`\n   * Or pass a simple string for text-based icons: `icon=\"★\"`\n   */\n  icon?: string | (() => JSX.Element);\n  class?: string;\n}\n\nconst chip = style<{ variant: ChipVariant }>({\n  display: \"inline-flex\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  columnGap: \"text-to-visual\",\n  minHeight: 24,\n  width: \"fit\",\n  paddingX: 12,\n  borderRadius: \"full\",\n  borderStyle: \"solid\",\n  borderWidth: 2,\n  font: \"ui-sm\",\n  borderColor: {\n    default: \"transparent\",\n    variant: { outline: \"[var(--color-primary-600)]\" },\n  },\n  backgroundColor: {\n    variant: {\n      primary: \"[var(--color-primary-700)]\",\n      secondary: \"[var(--color-bg-100)]\",\n      accent: \"[var(--color-accent)]\",\n      outline: \"transparent\",\n    },\n  },\n  color: {\n    variant: {\n      primary: \"[var(--color-primary-100)]\",\n      secondary: \"[var(--color-primary-200)]\",\n      accent: \"[var(--color-bg-400)]\",\n      outline: \"[var(--color-primary-200)]\",\n    },\n  },\n});\n\nexport function Chip(props: ChipProps) {\n  const renderIcon = () => {\n    const icon = props.icon;\n    if (!icon) return null;\n    if (typeof icon === \"string\") return icon;\n    return icon();\n  };\n\n  return (\n    <HeadlessButton\n      class={`${chip({ variant: props.variant ?? \"primary\" })} ${props.class ?? \"\"}`}\n      onPress={() => props.onClick?.()}\n    >\n      <Show when={props.icon}>\n        <span>{renderIcon()}</span>\n      </Show>\n      {props.text}\n    </HeadlessButton>\n  );\n}\n"],"mappings":";;;;;AAwBA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCN,SAAgB,KAAK,OAAgB;CACnC,MAAM,mBAAa;EACjB,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,OAAO,SAAS,UAAU,OAAO;EACrC,OAAO,KAAA;CACT;CAEA,OAAA,gBACG,QAAA;EAAA,KAAA,WAAA;GAAA,OACQ,GAAG,KAAK,EAAE,SAAS,MAAM,WAAW,UAAU,CAAA,EAAA,GAAM,MAAM,SAAS;EAAI;EAC9E,eAAe,MAAM,UAAO;EAAA,IAAA,WAAA;GAAA,OAAA,CAAA,gBAE3B,MAAA;IAAA,IAAK,OAAA;KAAA,OAAM,MAAM;IAAI;IAAA,IAAA,WAAA;KAAA,IAAA,OAAA,eAAA,MAAA;KAAA,OAAA,MACb,UAAA;KAAA,OAAA;IAAA;GAAA,CAAA,GAAA,WAER,MAAM,IAAI,CAAA;EAAA;CAAA,CAAA;AAGjB"}