@proyecto-viviana/ui 0.3.4 → 0.4.0

package/dist/EventCard.jsx

@@ -0,0 +1,96 @@
+/* empty css                                                                        */
+/* empty css                                                                        */
+/* empty css                                                                        */
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { For, Show } from "solid-js";
+import { Button } from "@proyecto-viviana/solidaria-components";
+//#region src/custom/event-card/index.tsx
+const card = " _Pc13 sd13 _ta13 _Nc13 Pc13 oe13 ne13 ke13 je13 gDE5VE13 _nLeasBb13";
+const decoration = " _Pa13 WJ13 _zI13 ZC13 Fx13 _Ha13";
+const preview = " Za13 fu4qurc13 _Hb13";
+const body = " sd13 _ta13 Ug13 qg13 Tf13 Qf13 Sf13 Rf13";
+const title = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-g13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pj1j4Pd13";
+const meta = " sd13 eb13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
+const metaItem = " sd13 eb13 Ub13 qb13";
+const metaIcon = " pj1j4Pd13";
+const attendeesRow = " sd13 eb13 Ue13 qe13";
+const avatars = " sd13 eb13 Ub13 qb13";
+const more = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13";
+const actionRow = " sd13 Ue13 qe13";
+function EventCard(props) {
+	const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
+	const remainingCount = () => {
+		return (props.attendeeCount ?? props.attendees?.length ?? 0) - displayedAttendees().length;
+	};
+	return <div class={`${card} ${props.class ?? ""}`}>
+      <Show when={props.decorationImage}>
+        <img class={decoration} src={props.decorationImage} alt="" />
+      </Show>
+
+      <Show when={props.image}>
+        <img class={preview} src={props.image} alt={props.title} />
+      </Show>
+
+      <div class={body}>
+        <h3 class={title}>{props.title}</h3>
+
+        <Show when={props.date || props.author}>
+          <div class={meta}>
+            <Show when={props.author}>
+              <div class={metaItem}>
+                <span class={metaIcon}>@</span>
+                <span>{props.author}</span>
+              </div>
+            </Show>
+            <Show when={props.date}>
+              <div class={metaItem}>
+                <span class={metaIcon}>⏱</span>
+                <span>{props.date}</span>
+              </div>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={displayedAttendees().length > 0}>
+          <div class={attendeesRow}>
+            <div class={avatars}>
+              <For each={displayedAttendees()}>
+                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />}
+              </For>
+            </div>
+            <Show when={remainingCount() > 0}>
+              <span class={more}>+{remainingCount()} más</span>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={props.actions}>
+          <div class={actionRow}>
+            {typeof props.actions === "function" ? props.actions() : props.actions}
+          </div>
+        </Show>
+      </div>
+    </div>;
+}
+const listItem = " sd13 eb13 Ug13 qg13 Za13 Tt13 Qt13 St13 Rt13 oc13 nc13 kc13 jc13 _Wd13 ry13 g913 _je13";
+const thumb = " ZF13 Fz13 _va13 ob13 nb13 kb13 jb13 _Hb13";
+const listBody = " sd13 _ta13 _ub13 Na13";
+const listTitle = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-c13 vx13 xc13 _xa13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13";
+const listSubtitle = " uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13 _Nc13 Pc13 _Yb13 _7c13";
+function EventListItem(props) {
+	return <Button class={`${listItem} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
+      <Show when={props.image}>
+        <img class={thumb} src={props.image} alt={props.title} />
+      </Show>
+      <div class={listBody}>
+        <h4 class={listTitle}>{props.title}</h4>
+        <Show when={props.subtitle}>
+          <p class={listSubtitle}>{props.subtitle}</p>
+        </Show>
+      </div>
+    </Button>;
+}
+//#endregion
+export { EventCard, EventListItem };
+
+//# sourceMappingURL=EventCard.jsx.map

package/dist/EventCard.jsx.map

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

package/dist/FileTrigger.d.ts

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

package/dist/FileTrigger.d.ts.map

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

package/dist/FileTrigger.js

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

package/dist/FileTrigger.jsx

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

package/dist/GitHubIcon.d.ts

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

package/dist/GitHubIcon.d.ts.map

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

package/dist/GitHubIcon.js

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

package/dist/GitHubIcon.jsx

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

package/dist/LightenIcon.d.ts

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

package/dist/LightenIcon.d.ts.map

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

package/dist/LightenIcon.js

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

package/dist/LightenIcon.jsx

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

package/dist/LinkButton.d.ts

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

package/dist/LinkButton.d.ts.map

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

package/dist/LinkButton.js

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

package/dist/LinkButton.jsx

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

package/dist/ListView.d.ts

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

package/dist/ListView.d.ts.map

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

package/dist/ListView.js

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

package/dist/ListView.jsx

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

package/dist/Logo.d.ts

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

package/dist/Logo.d.ts.map

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

package/dist/Logo.js

@@ -0,0 +1,116 @@
+import { className, effect, getNextElement, insert, template } from "solid-js/web";
+//#region src/custom/logo/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span><span></span><span>`);
+const wordmark = function anonymous(props) {
+	let rules = " ";
+	rules += " sh13";
+	rules += " ea13";
+	rules += " qe13";
+	rules += " _7c13";
+	if (props.size === "xl") {
+		rules += " uk13";
+		rules += " ucJ9TBTb13";
+		rules += " ud3Euai13";
+		rules += " uea13";
+		rules += " ugb13";
+		rules += " uhd13";
+		rules += " uje13";
+		rules += " u2NhKxcl13";
+		rules += " uic13";
+	} else 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 === "xl") {
+		rules += " -_6BNtrc-KaY1Ce13";
+		rules += " vx13";
+	} else if (props.size === "lg") {
+		rules += " -_6BNtrc-f13";
+		rules += " vx13";
+	} else if (props.size === "md") {
+		rules += " -_6BNtrc-d13";
+		rules += " vx13";
+	} else if (props.size === "sm") {
+		rules += " -_6BNtrc-c13";
+		rules += " vx13";
+	}
+	rules += " xf13";
+	rules += " _xa13";
+	if (props.size === "xl") {
+		rules += " _Fd13";
+		rules += " _FnuYUweb13";
+	} else 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";
+	}
+	if (props.size === "xl") rules += " po13";
+	else if (props.size === "lg") rules += " po13";
+	else if (props.size === "md") rules += " po13";
+	else if (props.size === "sm") rules += " po13";
+	return rules;
+};
+const word = function anonymous(props) {
+	let rules = " ";
+	if (props.tone === "accent") rules += " pj1j4Pd13";
+	else if (props.tone === "primary") rules += " pXDQpyb13";
+	return rules;
+};
+function Logo(props) {
+	const firstWord = () => props.firstWord ?? "Proyecto";
+	const secondWord = () => props.secondWord ?? "Viviana";
+	const inverted = () => props.inverted ?? false;
+	return (() => {
+		var _el$ = getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+		insert(_el$2, firstWord);
+		insert(_el$3, secondWord);
+		effect((_p$) => {
+			var _v$ = `${wordmark({ size: props.size ?? "md" })} ${props.class ?? ""}`, _v$2 = word({ tone: inverted() ? "accent" : "primary" }), _v$3 = word({ tone: inverted() ? "primary" : "accent" });
+			_v$ !== _p$.e && className(_el$, _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$2, _p$.t = _v$2);
+			_v$3 !== _p$.a && className(_el$3, _p$.a = _v$3);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0,
+			a: void 0
+		});
+		return _el$;
+	})();
+}
+//#endregion
+export { Logo };
+
+//# sourceMappingURL=Logo.js.map

package/dist/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","names":[],"sources":["../src/custom/logo/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 clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      accent: \"[var(--color-accent)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";;;AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AASN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA,GAAA,QAAA,KAAA,YAAA,QAAA,MAAA;EAAA,OAAA,OAEqE,SAAA;EAAA,OAAA,OACA,UAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAFtD,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAA,GAAM,MAAM,SAAS,MAAI,OAC9D,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,GAAA,OAC/C,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA;GAAA,QAAA,IAAA,KAAA,UAAA,MAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AAGlE"}

package/dist/Logo.jsx

@@ -0,0 +1,101 @@
+//#region src/custom/logo/index.tsx
+const wordmark = function anonymous(props) {
+	let rules = " ";
+	rules += " sh13";
+	rules += " ea13";
+	rules += " qe13";
+	rules += " _7c13";
+	if (props.size === "xl") {
+		rules += " uk13";
+		rules += " ucJ9TBTb13";
+		rules += " ud3Euai13";
+		rules += " uea13";
+		rules += " ugb13";
+		rules += " uhd13";
+		rules += " uje13";
+		rules += " u2NhKxcl13";
+		rules += " uic13";
+	} else 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 === "xl") {
+		rules += " -_6BNtrc-KaY1Ce13";
+		rules += " vx13";
+	} else if (props.size === "lg") {
+		rules += " -_6BNtrc-f13";
+		rules += " vx13";
+	} else if (props.size === "md") {
+		rules += " -_6BNtrc-d13";
+		rules += " vx13";
+	} else if (props.size === "sm") {
+		rules += " -_6BNtrc-c13";
+		rules += " vx13";
+	}
+	rules += " xf13";
+	rules += " _xa13";
+	if (props.size === "xl") {
+		rules += " _Fd13";
+		rules += " _FnuYUweb13";
+	} else 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";
+	}
+	if (props.size === "xl") rules += " po13";
+	else if (props.size === "lg") rules += " po13";
+	else if (props.size === "md") rules += " po13";
+	else if (props.size === "sm") rules += " po13";
+	return rules;
+};
+const word = function anonymous(props) {
+	let rules = " ";
+	if (props.tone === "accent") rules += " pj1j4Pd13";
+	else if (props.tone === "primary") rules += " pXDQpyb13";
+	return rules;
+};
+function Logo(props) {
+	const firstWord = () => props.firstWord ?? "Proyecto";
+	const secondWord = () => props.secondWord ?? "Viviana";
+	const inverted = () => props.inverted ?? false;
+	return <span class={`${wordmark({ size: props.size ?? "md" })} ${props.class ?? ""}`}>
+      <span class={word({ tone: inverted() ? "accent" : "primary" })}>{firstWord()}</span>
+      <span class={word({ tone: inverted() ? "primary" : "accent" })}>{secondWord()}</span>
+    </span>;
+}
+//#endregion
+export { Logo };
+
+//# sourceMappingURL=Logo.jsx.map

package/dist/Logo.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.jsx","names":[],"sources":["../src/custom/logo/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 clean two-word wordmark: the S2 title ramp sizes it; Silapse\n// colors paint it (primary + accent). `inverted` swaps which word takes accent.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type LogoSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface LogoProps {\n  firstWord?: string;\n  secondWord?: string;\n  size?: LogoSize;\n  inverted?: boolean;\n  class?: string;\n}\n\nconst wordmark = style<{ size: LogoSize }>({\n  display: \"inline-flex\",\n  alignItems: \"baseline\",\n  columnGap: 8,\n  whiteSpace: \"nowrap\",\n  font: {\n    size: {\n      sm: \"title-sm\",\n      md: \"title\",\n      lg: \"title-xl\",\n      xl: \"title-3xl\",\n    },\n  },\n  fontWeight: \"black\",\n});\n\nconst word = style<{ tone: \"primary\" | \"accent\" }>({\n  color: {\n    tone: {\n      primary: \"[var(--color-primary-100)]\",\n      accent: \"[var(--color-accent)]\",\n    },\n  },\n});\n\nexport function Logo(props: LogoProps): JSX.Element {\n  const firstWord = () => props.firstWord ?? \"Proyecto\";\n  const secondWord = () => props.secondWord ?? \"Viviana\";\n  const inverted = () => props.inverted ?? false;\n\n  return (\n    <span class={`${wordmark({ size: props.size ?? \"md\" })} ${props.class ?? \"\"}`}>\n      <span class={word({ tone: inverted() ? \"accent\" : \"primary\" })}>{firstWord()}</span>\n      <span class={word({ tone: inverted() ? \"primary\" : \"accent\" })}>{secondWord()}</span>\n    </span>\n  );\n}\n"],"mappings":";AAgBA,MAAM,WAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;AASN,SAAgB,KAAK,OAAuB;CAC1C,MAAM,kBAAkB,MAAM,aAAa;CAC3C,MAAM,mBAAmB,MAAM,cAAc;CAC7C,MAAM,iBAAiB,MAAM,YAAY;CAEzC,OAAO,CACJ,KAAK,OAAO,GAAG,SAAS,EAAE,MAAM,MAAM,QAAQ,KAAK,CAAA,EAAG,GAAG,MAAM,SAAS,MAAM;MAC7E,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,WAAW,UAAU,CAAA,IAAK,UAAA,EAAA,EAAc,KAAK;MACpF,CAAC,KAAK,OAAO,KAAK,EAAE,MAAM,SAAA,IAAa,YAAY,SAAS,CAAA,IAAK,WAAA,EAAA,EAAe,KAAK;IACvF,EAAE;AAEN"}

package/dist/Menu.d.ts

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

package/dist/Menu.d.ts.map

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

package/dist/Menu.js

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

package/dist/Menu.jsx

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

package/dist/PageLayout.d.ts

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

package/dist/PageLayout.d.ts.map

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

package/dist/PageLayout.js

@@ -0,0 +1,31 @@
+import { getNextElement, insert, mergeProps, runHydrationEvents, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/custom/page-layout/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+const page = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	rules += " _ta13";
+	rules += " Mc13";
+	rules += " Za13";
+	rules += " g318zje13";
+	rules += " pO550xe13";
+	if (props.isWithHeader) rules += " Tr13";
+	return rules;
+};
+function PageLayout(props) {
+	const [local, rest] = splitProps(props, ["class", "withHeader"]);
+	return (() => {
+		var _el$ = getNextElement(_tmpl$);
+		spread(_el$, mergeProps({ get ["class"]() {
+			return `${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? ""}`;
+		} }, rest), false, true);
+		insert(_el$, () => props.children);
+		runHydrationEvents();
+		return _el$;
+	})();
+}
+//#endregion
+export { PageLayout };
+
+//# sourceMappingURL=PageLayout.js.map

package/dist/PageLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.js","names":[],"sources":["../src/custom/page-layout/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A full-height page shell painted in Silapse surface/text\n// colors; `withHeader` reserves top space so a fixed header doesn't overlap.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n  withHeader?: boolean;\n}\n\nconst page = style<{ isWithHeader: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  minHeight: \"screen\",\n  width: \"full\",\n  backgroundColor: \"[var(--color-background)]\",\n  color: \"[var(--color-text)]\",\n  paddingTop: { isWithHeader: 64 },\n});\n\nexport function PageLayout(props: PageLayoutProps) {\n  const [local, rest] = splitProps(props, [\"class\", \"withHeader\"]);\n\n  return (\n    <div\n      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? \"\"}`}\n      {...rest}\n    >\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;;;AAWA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;AAUN,SAAgB,WAAW,OAAsB;CAC/C,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO,CAAC,SAAS,YAAA,CAAa;CAE/D,cAAA;EAAA,IAAA,OAAA,eAAA,MAAA;EAAA,OAAA,MAAA,WAAA,EAAA,KAAA,WAAA;GAAA,OAEW,GAAG,KAAK,EAAE,cAAc,MAAM,cAAc,MAAM,CAAA,EAAA,GAAM,MAAM,SAAS;EAAI,EAAA,GAC9E,IAAI,GAAA,OAAA,IAAA;EAAA,OAAA,YAEP,MAAM,QAAQ;EAAA,mBAAA;EAAA,OAAA;CAAA,GAAA;AAGrB"}

package/dist/PageLayout.jsx

@@ -0,0 +1,23 @@
+import { splitProps } from "solid-js";
+//#region src/custom/page-layout/index.tsx
+const page = function anonymous(props) {
+	let rules = " ";
+	rules += " sd13";
+	rules += " _ta13";
+	rules += " Mc13";
+	rules += " Za13";
+	rules += " g318zje13";
+	rules += " pO550xe13";
+	if (props.isWithHeader) rules += " Tr13";
+	return rules;
+};
+function PageLayout(props) {
+	const [local, rest] = splitProps(props, ["class", "withHeader"]);
+	return <div class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? ""}`} {...rest}>
+      {props.children}
+    </div>;
+}
+//#endregion
+export { PageLayout };
+
+//# sourceMappingURL=PageLayout.jsx.map

package/dist/PageLayout.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLayout.jsx","names":[],"sources":["../src/custom/page-layout/index.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A full-height page shell painted in Silapse surface/text\n// colors; `withHeader` reserves top space so a fixed header doesn't overlap.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  children: JSX.Element;\n  withHeader?: boolean;\n}\n\nconst page = style<{ isWithHeader: boolean }>({\n  display: \"flex\",\n  flexDirection: \"column\",\n  minHeight: \"screen\",\n  width: \"full\",\n  backgroundColor: \"[var(--color-background)]\",\n  color: \"[var(--color-text)]\",\n  paddingTop: { isWithHeader: 64 },\n});\n\nexport function PageLayout(props: PageLayoutProps) {\n  const [local, rest] = splitProps(props, [\"class\", \"withHeader\"]);\n\n  return (\n    <div\n      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? \"\"}`}\n      {...rest}\n    >\n      {props.children}\n    </div>\n  );\n}\n"],"mappings":";;AAWA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;AAUN,SAAgB,WAAW,OAAsB;CAC/C,MAAM,CAAC,OAAO,QAAQ,WAAW,OAAO,CAAC,SAAS,YAAA,CAAa;CAE/D,OAAO,CACJ,IACC,OAAO,GAAG,KAAK,EAAE,cAAc,MAAM,cAAc,MAAM,CAAA,EAAG,GAAG,MAAM,SAAS,UAC1E,MACL;OACE,MAAM,SAAS;IAClB,EAAE;AAEN"}

package/dist/Picker.d.ts

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

package/dist/Picker.d.ts.map

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

package/dist/Picker.js

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

package/dist/Picker.jsx

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

package/dist/ProfileCard.d.ts

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

package/dist/ProfileCard.d.ts.map

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

package/dist/ProfileCard.js

@@ -0,0 +1,78 @@
+/* empty css                                                                       */
+/* empty css                                                                       */
+/* empty css                                                                       */
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { className, createComponent, effect, getNextElement, getNextMarker, insert, memo, template } from "solid-js/web";
+import { Show } from "solid-js";
+//#region src/custom/profile-card/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<p class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13">`), _tmpl$2 = /*#__PURE__*/ template(`<span><span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pXDQpyb13"></span> seguidores`), _tmpl$3 = /*#__PURE__*/ template(`<span><span class=" xd13 _xa13 xX0cczbc13 _xX0cczba13 pXDQpyb13"></span> siguiendo`), _tmpl$4 = /*#__PURE__*/ template(`<div class=" sd13 Ue13 qe13">`), _tmpl$5 = /*#__PURE__*/ template(`<div><div class=" sd13 ed13 Ul13 ql13"><!$><!/><div class=" sd13 _ta13 Ub13 qb13 _ub13 Na13"><h3 class=" uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-f13 vx13 xe13 _xa13 xX0cczbd13 _xX0cczba13 xfe13 _xfa13 xfX0cczbd13 _xfX0cczba13 _Fd13 _FnuYUweb13 pXDQpyb13 _Nc13 Pc13 _Yb13 _7c13"></h3><!$><!/><div class=" sd13 Ul13 ql13 uk13 ucJ9TBTb13 ud3Euai13 uea13 ugb13 uhd13 uje13 u2NhKxcl13 uic13 -_6BNtrc-b13 vx13 xb13 _xa13 _Fd13 _FnuYUweb13 pxeCuqc13"><!$><!/><!$><!/></div></div></div><!$><!/>`);
+const card = " sd13 _ta13 Ul13 ql13 Tf13 Qf13 Sf13 Rf13 oc13 nc13 kc13 jc13 gDE5VE13 _nLeasBb13";
+function ProfileCard(props) {
+	const formatNumber = (num) => {
+		if (num >= 1e6) return `${(num / 1e6).toFixed(1)}M`;
+		if (num >= 1e3) return `${(num / 1e3).toFixed(1)}K`;
+		return num.toString();
+	};
+	return (() => {
+		var _el$ = getNextElement(_tmpl$5), _el$2 = _el$.firstChild, _el$15 = _el$2.firstChild, [_el$16, _co$4] = getNextMarker(_el$15.nextSibling), _el$3 = _el$16.nextSibling, _el$4 = _el$3.firstChild, _el$13 = _el$4.nextSibling, [_el$14, _co$3] = getNextMarker(_el$13.nextSibling), _el$6 = _el$14.nextSibling, _el$1 = _el$6.firstChild, [_el$10, _co$] = getNextMarker(_el$1.nextSibling), _el$11 = _el$10.nextSibling, [_el$12, _co$2] = getNextMarker(_el$11.nextSibling), _el$18 = _el$2.nextSibling, [_el$19, _co$5] = getNextMarker(_el$18.nextSibling);
+		insert(_el$2, createComponent(Avatar, {
+			get src() {
+				return props.avatar;
+			},
+			get alt() {
+				return props.username;
+			},
+			size: "lg"
+		}), _el$16, _co$4);
+		insert(_el$4, () => props.username);
+		insert(_el$3, createComponent(Show, {
+			get when() {
+				return props.bio;
+			},
+			get children() {
+				var _el$5 = getNextElement(_tmpl$);
+				insert(_el$5, () => props.bio);
+				return _el$5;
+			}
+		}), _el$14, _co$3);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return props.followers !== void 0;
+			},
+			get children() {
+				var _el$7 = getNextElement(_tmpl$2), _el$8 = _el$7.firstChild;
+				insert(_el$8, () => formatNumber(props.followers));
+				return _el$7;
+			}
+		}), _el$10, _co$);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return props.following !== void 0;
+			},
+			get children() {
+				var _el$9 = getNextElement(_tmpl$3), _el$0 = _el$9.firstChild;
+				insert(_el$0, () => formatNumber(props.following));
+				return _el$9;
+			}
+		}), _el$12, _co$2);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return props.actions;
+			},
+			get children() {
+				var _el$17 = getNextElement(_tmpl$4);
+				insert(_el$17, (() => {
+					var _c$ = memo(() => typeof props.actions === "function");
+					return () => _c$() ? props.actions() : props.actions;
+				})());
+				return _el$17;
+			}
+		}), _el$19, _co$5);
+		effect(() => className(_el$, `${card} ${props.class ?? ""}`));
+		return _el$;
+	})();
+}
+//#endregion
+export { ProfileCard };
+
+//# sourceMappingURL=ProfileCard.js.map