@proyecto-viviana/ui 0.3.5 → 0.4.1

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=" xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151">`), _tmpl$2 = /*#__PURE__*/ template(`<div><div class=" sd151 eb151 _Ca151 Ug151 qg151"><!$><!/><!$><!/><!$><!/></div><div class=" sd151 eb151 _Ca151 _Wa151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151"><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 = " sh151 _ta151 Ui151 qi151 Tg151 Qg151 Sg151 Rg151 oe151 ne151 ke151 je151 _kb151 hb151 mb151 lb151 _jf151 iJJKqyb151 gDE5VE151";
+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  // Emphasis via weight, not color: `--color-accent` (#df5c9a) fails AA on the\n  // `--color-bg-200` card (~1.9:1 light, ~4.48:1 dark) and no accent shade clears\n  // 4.5:1 in BOTH themes. The flipping `--color-text` does (7.53 light / 15.33\n  // dark); the `bold` weight sets the names apart from the message body.\n  color: \"[var(--color-text)]\",\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-text-secondary` renders 3.84:1 on the light `--color-bg-200` card\n  // (fails the 4.5:1 small-text floor); the flipping `--color-text` clears it in\n  // both themes. `color` stays after `font` (the S2 macro font-shorthand default\n  // color would otherwise win on source order).\n  color: \"[var(--color-text)]\",\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 = " xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151";
+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 = " sh151 _ta151 Ui151 qi151 Tg151 Qg151 Sg151 Rg151 oe151 ne151 ke151 je151 _kb151 hb151 mb151 lb151 _jf151 iJJKqyb151 gDE5VE151";
+const avatarsRow = " sd151 eb151 _Ca151 Ug151 qg151";
+const messageRow = " sd151 eb151 _Ca151 _Wa151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
+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  // Emphasis via weight, not color: `--color-accent` (#df5c9a) fails AA on the\n  // `--color-bg-200` card (~1.9:1 light, ~4.48:1 dark) and no accent shade clears\n  // 4.5:1 in BOTH themes. The flipping `--color-text` does (7.53 light / 15.33\n  // dark); the `bold` weight sets the names apart from the message body.\n  color: \"[var(--color-text)]\",\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-text-secondary` renders 3.84:1 on the light `--color-bg-200` card\n  // (fails the 4.5:1 small-text floor); the flipping `--color-text` clears it in\n  // both themes. `color` stays after `font` (the S2 macro font-shorthand default\n  // color would otherwise win on source order).\n  color: \"[var(--color-text)]\",\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":";;;;AAmCA,MAAM,WAAA;AASN,MAAM,gBAAyF;CAC7F,SAAS,MAAM,UAAU,EACrB;MACA,CAAC,KAAK,OAAO,WAAW,KAAA,EAAO,KAAK;OACnC,2BAA2B;MAC5B,CAAC,KAAK,OAAO,WAAW,MAAA,EAAQ,KAAK;IACvC;CAEF,OAAO,MAAM,UAAU,EACnB;MACA,CAAC,KAAK,OAAO,WAAW,KAAA,EAAO,KAAK;OACnC,sBAAsB;MACvB,CAAC,KAAK,OAAO,WAAW,MAAA,EAAQ,KAAK;IACvC;CAEF,UAAU,MAAM,UAAU,EACtB;MACA,CAAC,KAAK,OAAO,WAAW,KAAA,EAAO,KAAK;OACnC,oBAAoB;MACrB,CAAC,KAAK,OAAO,WAAW,MAAA,EAAQ,KAAK;IACvC;CAEF,QAAQ,MAAM,UAAU,EACpB;MACA,CAAC,KAAK,OAAO,WAAW,KAAA,EAAO,KAAK;OACnC,0BAA0B;MAC3B,CAAC,KAAK,OAAO,WAAW,MAAA,EAAQ,KAAK;IACvC;CAEF,cAAc;AAChB;AAEA,MAAM,OAAA;AAYN,MAAM,aAAA;AAON,MAAM,aAAA;AAaN,SAAgB,aAAa,OAAwB;CACnD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,iBAAiB,MAAM,UAAU,QAAQ;CAC/C,MAAM,kBAAkB,MAAM,WAAW,QAAQ;CAEjD,MAAM,mBAAa;EACjB,MAAM,OAAO,MAAM;EACnB,IAAI,CAAC,MAAM,OAAO;EAClB,IAAI,OAAO,SAAS,UAAU,OAAO;EACrC,OAAO,KAAA;CACT;CAEA,MAAM,sBAAgB;EACpB,MAAM,UAAU,MAAM;EACtB,IAAI,CAAC,SAAS,OAAO;EACrB,IAAI,OAAO,YAAY,UAAU,OAAO;EACxC,OAAO,QAAA;CACT;CAEA,OAAO,CACJ,IAAI,OAAO,GAAG,KAAK,GAAG,MAAM,SAAS,MAAM;MAC1C,CAAC,IAAI,OAAO,YAAY;QACtB,CAAC,KAAK,MAAM,MAAM,UAAU;UAC1B,CAAC,OAAO,KAAK,MAAM,SAAU,QAAQ,KAAK,MAAM,SAAU,QAAQ;QACpE,EAAE,KAAK;QACP,CAAC,KAAK,MAAM,MAAM,OAAO,WAAA,EAAA,EAAe,KAAK;QAC7C,CAAC,KAAK,MAAM,MAAM,WAAW;UAC3B,CAAC,OAAO,KAAK,MAAM,UAAW,QAAQ,KAAK,MAAM,UAAW,QAAQ;QACtE,EAAE,KAAK;MACT,EAAE,IAAI;MACN,CAAC,IAAI,OAAO,YAAY;QACtB,CAAC,KAAK;UACJ,CAAC,KAAK,MAAM,MAAM,SAAS,UAAU,cAAc,KAAA,GAAQ,SAAA,GAAY,UAAA,CAAA,GAAc;aAClF,cAAA,EAAgB;UACnB,EAAE,KAAK;QACT,EAAE,KAAK;MACT,EAAE,IAAI;IACR,EAAE;AAEN"}

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 += " sh151";
+	rules += " eb151";
+	rules += " _Ca151";
+	rules += " qc151";
+	rules += " qsd151";
+	rules += " Mg151";
+	rules += " ZJ151";
+	rules += " Se151";
+	rules += " Re151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _jf151";
+	rules += " _kc151";
+	rules += " hc151";
+	rules += " mc151";
+	rules += " lc151";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xb151";
+	rules += " _xa151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.variant === "outline") rules += " pAZZpyb151";
+	else if (props.variant === "accent") rules += " padAQ7151";
+	else if (props.variant === "secondary") rules += " pAZZpyb151";
+	else if (props.variant === "primary") rules += " pXDQpyb151";
+	if (props.variant === "outline") rules += " i6nBqyb151";
+	else rules += " iA151";
+	if (props.variant === "outline") rules += " g9151";
+	else if (props.variant === "accent") rules += " gj1j4Pd151";
+	else if (props.variant === "secondary") rules += " g0iWVE151";
+	else if (props.variant === "primary") rules += " gJJKqyb151";
+	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      // WCAG AA fix: accent text on the pink accent fill. The near-white\n      // `--color-bg-400` gave only 2.74:1 in light mode (fail); the darkest\n      // grey token reaches 5.24:1 light / 6.14:1 dark — the smallest existing-\n      // token change that clears the 4.5:1 floor for this ui-sm label.\n      accent: \"[var(--color-grey-900)]\",\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCN,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 += " sh151";
+	rules += " eb151";
+	rules += " _Ca151";
+	rules += " qc151";
+	rules += " qsd151";
+	rules += " Mg151";
+	rules += " ZJ151";
+	rules += " Se151";
+	rules += " Re151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _jf151";
+	rules += " _kc151";
+	rules += " hc151";
+	rules += " mc151";
+	rules += " lc151";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	rules += " -_6BNtrc-b151";
+	rules += " vx151";
+	rules += " xb151";
+	rules += " _xa151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.variant === "outline") rules += " pAZZpyb151";
+	else if (props.variant === "accent") rules += " padAQ7151";
+	else if (props.variant === "secondary") rules += " pAZZpyb151";
+	else if (props.variant === "primary") rules += " pXDQpyb151";
+	if (props.variant === "outline") rules += " i6nBqyb151";
+	else rules += " iA151";
+	if (props.variant === "outline") rules += " g9151";
+	else if (props.variant === "accent") rules += " gj1j4Pd151";
+	else if (props.variant === "secondary") rules += " g0iWVE151";
+	else if (props.variant === "primary") rules += " gJJKqyb151";
+	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      // WCAG AA fix: accent text on the pink accent fill. The near-white\n      // `--color-bg-400` gave only 2.74:1 in light mode (fail); the darkest\n      // grey token reaches 5.24:1 light / 6.14:1 dark — the smallest existing-\n      // token change that clears the 4.5:1 floor for this ui-sm label.\n      accent: \"[var(--color-grey-900)]\",\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCN,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,OAAO,CACJ,OACC,OAAO,GAAG,KAAK,EAAE,SAAS,MAAM,WAAW,UAAU,CAAA,EAAG,GAAG,MAAM,SAAS,MAC1E,eAAe,MAAM,UAAO,GAC7B;MACC,CAAC,KAAK,MAAM,MAAM,MAAM;QACtB,CAAC,MAAM,WAAA,EAAA,EAAe,KAAK;MAC7B,EAAE,KAAK;OACN,MAAM,KAAK;IACd,EAAE;AAEN"}