@proyecto-viviana/ui 0.3.5 → 0.4.0

package/dist/TimelineItem.js

@@ -0,0 +1,137 @@
+/* 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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,70 @@
+/* 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

@@ -0,0 +1 @@
+{"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/TreeView.d.ts

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

package/dist/TreeView.d.ts.map

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

package/dist/TreeView.js

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

package/dist/TreeView.jsx

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

package/dist/chip2.js

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1 @@
+{"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"}

package/dist/chip2.jsx

@@ -0,0 +1,68 @@
+import { Show } from "solid-js";
+import { Button } from "@proyecto-viviana/solidaria-components";
+//#region src/custom/chip/index.tsx
+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 <Button class={`${chip({ variant: props.variant ?? "primary" })} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
+      <Show when={props.icon}>
+        <span>{renderIcon()}</span>
+      </Show>
+      {props.text}
+    </Button>;
+}
+//#endregion
+export { Chip as t };
+
+//# sourceMappingURL=chip2.jsx.map

package/dist/chip2.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip2.jsx","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":";;;;CAwBA,IAAA,QAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCN,MAAA,mBAAqC;EACnC,MAAM,OAAA,MAAA;EACJ,IAAA,CAAA,MAAM,OAAO;EACb,IAAI,OAAO,SAAO,UAAA,OAAA;EAClB,OAAI,KAAO;;CAEb,OAAA,CAAA,OAAA,OAAA,GAAA,KAAA,EAAA,SAAA,MAAA,WAAA,UAAA,CAAA,EAAA,GAAA,MAAA,SAAA,MAAA,eAAA,MAAA,UAAA,GAAA;MAEA,CAAA,KACG,MACC,MAAO,MAAG;QAGT,CAAA,MAAK,WAAY,EAAA,EAAM,KAAA;QACtB,KAAC;OACH,MAAO,KAAA"}