@proyecto-viviana/ui 0.4.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CalendarCard.js +2 -3
- package/dist/CalendarCard.js.map +1 -1
- package/dist/CalendarCard.jsx +7 -8
- package/dist/CalendarCard.jsx.map +1 -1
- package/dist/Conversation.js +44 -45
- package/dist/Conversation.js.map +1 -1
- package/dist/Conversation.jsx +49 -50
- package/dist/Conversation.jsx.map +1 -1
- package/dist/EventCard.js +3 -5
- package/dist/EventCard.js.map +1 -1
- package/dist/EventCard.jsx +17 -19
- package/dist/EventCard.jsx.map +1 -1
- package/dist/Logo.js +64 -64
- package/dist/Logo.js.map +1 -1
- package/dist/Logo.jsx +64 -64
- package/dist/Logo.jsx.map +1 -1
- package/dist/PageLayout.js +7 -7
- package/dist/PageLayout.jsx +7 -7
- package/dist/PageLayout.jsx.map +1 -1
- package/dist/ProfileCard.js +2 -3
- package/dist/ProfileCard.js.map +1 -1
- package/dist/ProfileCard.jsx +8 -9
- package/dist/ProfileCard.jsx.map +1 -1
- package/dist/ProjectCard.js +86 -88
- package/dist/ProjectCard.js.map +1 -1
- package/dist/ProjectCard.jsx +86 -88
- package/dist/ProjectCard.jsx.map +1 -1
- package/dist/TimelineItem.js +2 -2
- package/dist/TimelineItem.js.map +1 -1
- package/dist/TimelineItem.jsx +4 -4
- package/dist/TimelineItem.jsx.map +1 -1
- package/dist/chip2.js +43 -43
- package/dist/chip2.js.map +1 -1
- package/dist/chip2.jsx +43 -43
- package/dist/chip2.jsx.map +1 -1
- package/dist/custom/calendar-card/index.d.ts.map +1 -1
- package/dist/custom/chip/index.d.ts.map +1 -1
- package/dist/custom/conversation/index.d.ts.map +1 -1
- package/dist/custom/event-card/index.d.ts.map +1 -1
- package/dist/custom/lateral-nav/index.d.ts.map +1 -1
- package/dist/custom/logo/index.d.ts.map +1 -1
- package/dist/custom/nav-header/index.d.ts.map +1 -1
- package/dist/custom/profile-card/index.d.ts.map +1 -1
- package/dist/custom/timeline-item/index.d.ts.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/vite.d.ts +1 -0
- package/dist/vite.d.ts.map +1 -1
- package/dist/vite.js +9 -1
- package/dist/vite.js.map +1 -1
- package/dist/vite.jsx +9 -1
- package/dist/vite.jsx.map +1 -1
- package/package.json +3 -3
- package/src/custom/calendar-card/index.tsx +10 -1
- package/src/custom/chip/index.tsx +5 -1
- package/src/custom/conversation/index.tsx +23 -6
- package/src/custom/event-card/index.tsx +25 -4
- package/src/custom/lateral-nav/index.tsx +10 -1
- package/src/custom/logo/index.tsx +8 -1
- package/src/custom/nav-header/index.tsx +9 -1
- package/src/custom/profile-card/index.tsx +11 -2
- package/src/custom/project-card/index.tsx +1 -1
- package/src/custom/timeline-item/index.tsx +10 -2
- package/src/vite.ts +13 -1
package/dist/ProfileCard.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProfileCard.jsx","names":[],"sources":["../src/custom/profile-card/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). Mirrors S2's UserCard shape (avatar + title/description +\n// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface ProfileCardProps {\n username: string;\n avatar?: string;\n bio?: string;\n followers?: number;\n following?: number;\n /**\n * Actions to display below the profile.\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 display: \"flex\",\n flexDirection: \"column\",\n gap: 16,\n padding: 16,\n borderRadius: \"lg\",\n backgroundColor: \"[var(--color-bg-200)]\",\n boxShadow: \"elevated\",\n});\n\nconst head = style({\n display: \"flex\",\n alignItems: \"start\",\n gap: 16,\n});\n\nconst info = style({\n display: \"flex\",\n flexDirection: \"column\",\n gap: 4,\n flexGrow: 1,\n minWidth: 0,\n});\n\nconst name = style({\n font: \"heading-sm\",\n color: \"[var(--color-primary-100)]\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n});\n\nconst bio = style({\n font: \"ui-sm\",\n color: \"[var(--color-text
|
|
1
|
+
{"version":3,"file":"ProfileCard.jsx","names":[],"sources":["../src/custom/profile-card/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). Mirrors S2's UserCard shape (avatar + title/description +\n// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport interface ProfileCardProps {\n username: string;\n avatar?: string;\n bio?: string;\n followers?: number;\n following?: number;\n /**\n * Actions to display below the profile.\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 display: \"flex\",\n flexDirection: \"column\",\n gap: 16,\n padding: 16,\n borderRadius: \"lg\",\n backgroundColor: \"[var(--color-bg-200)]\",\n boxShadow: \"elevated\",\n});\n\nconst head = style({\n display: \"flex\",\n alignItems: \"start\",\n gap: 16,\n});\n\nconst info = style({\n display: \"flex\",\n flexDirection: \"column\",\n gap: 4,\n flexGrow: 1,\n minWidth: 0,\n});\n\nconst name = style({\n font: \"heading-sm\",\n color: \"[var(--color-primary-100)]\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n});\n\nconst bio = style({\n font: \"ui-sm\",\n // WCAG AA fix: the bio is small text (`ui-sm`) on the `--color-bg-200` card, so\n // the 4.5:1 floor applies. `--color-text-secondary` read only 3.84:1 on the\n // light-blue card (5.86:1 dark); `--color-text` flips and clears 4.5:1 both\n // ways (15.33:1 dark / 7.53:1 light). The bio stays visually secondary to the\n // `heading-sm` name through its smaller size, not a sub-AA color.\n color: \"[var(--color-text)]\",\n});\n\nconst stats = style({\n display: \"flex\",\n gap: 16,\n font: \"ui-sm\",\n // WCAG AA fix: the stat connector words (\"seguidores\" / \"siguiendo\") share the\n // bio's 3.84:1-light failure on the `--color-bg-200` card and take the same\n // flipping `--color-text`. (The stat VALUES are `--color-primary-100`, which\n // already clears AA — 13.47:1 dark / 10.37:1 light.)\n color: \"[var(--color-text)]\",\n});\n\nconst statValue = style({\n fontWeight: \"bold\",\n color: \"[var(--color-primary-100)]\",\n});\n\nconst actionRow = style({\n display: \"flex\",\n gap: 8,\n});\n\nexport function ProfileCard(props: ProfileCardProps) {\n const formatNumber = (num: number) => {\n if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;\n if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;\n return num.toString();\n };\n\n return (\n <div class={`${card} ${props.class ?? \"\"}`}>\n <div class={head}>\n <Avatar src={props.avatar} alt={props.username} size=\"lg\" />\n <div class={info}>\n <h3 class={name}>{props.username}</h3>\n <Show when={props.bio}>\n <p class={bio}>{props.bio}</p>\n </Show>\n <div class={stats}>\n <Show when={props.followers !== undefined}>\n <span>\n <span class={statValue}>{formatNumber(props.followers!)}</span> seguidores\n </span>\n </Show>\n <Show when={props.following !== undefined}>\n <span>\n <span class={statValue}>{formatNumber(props.following!)}</span> siguiendo\n </span>\n </Show>\n </div>\n </div>\n </div>\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 );\n}\n"],"mappings":";;;;;;;;AAsBA,MAAM,OAAA;AAUN,MAAM,MAAA;AAMN,MAAM,QAAA;AAQN,MAAM,YAAA;AAQN,MAAM,YAAA;AAUN,SAAM,YAAA,OAAA;CAWN,MAAM,gBAAA,QAAA;EAKN,IAAM,OAAA,KAAA,OAAA,IAAA,MAAA,KAAA,QAAA,CAAA,EAAA;EAKN,IAAA,OAAgB,KAAA,OAAY,IAAuB,MAAA,KAAA,QAAA,CAAA,EAAA;EACjD,OAAM,IAAA,SAAA;;QAEA,CAAA,IAAO,OAAM,GAAA,KAAO,GAAI,MAAM,SAAM,MAAW;MACnD,CAAA,IAAO,OAAI,MAAQ;QACrB,CAAA,OAAA,KAAA,MAAA,QAAA,KAAA,MAAA,UAAA,YAAA;QAEO,CACJ,IAAI,OAAO,MAAG;UACZ,CAAI,GAAA,OAAO,OAAM,MAAA,SAAA,EAAA,GAAA;UACf,CAAA,KAAO,MAAK,MAAM,KAAA;YAClB,CAAI,EAAA,OAAO,MAAM,MAAA,IAAA,EAAA,EAAA;UAChB,EAAC,KAAG;UACJ,CAAC,IAAA,OAAW,OAAM;YAChB,CAAC,KAAE,MAAO,MAAM,cAAc,KAAA,GAAA;cAC9B,CAAA,KAAK;gBACF,CAAA,KAAO,OAAO,YAAA,aAAA,MAAA,SAAA,EAAA,EAAA,KAAA;cAChB,EAAA,KAAK;cACJ,KAAC;kBACE,MAAK,MAAO,cAAY,KAAA,GAAA;cAC3B,CAAA,KAAE;gBACF,CAAA,KAAK,OAAA,YAAA,aAAA,MAAA,SAAA,EAAA,EAAA,KAAA;cACN,EAAA,KAAK;cACJ,KAAC;gBACC;cACF;YACF;YACA,MAAI,MAAA,SAAA;QACR,CAAA,IAAE,OAAI,WAAA;WACN,OAAI,MAAA,YAAA,aAAA,MAAA,QAAA,IAAA,MAAA,QAAA;QACL,EAAA,IAAK;QACJ,KAAK;;;;AAMb,SAAA"}
|
package/dist/ProjectCard.js
CHANGED
|
@@ -1,115 +1,113 @@
|
|
|
1
1
|
import { className, effect, getNextElement, insert, setAttribute, template } from "solid-js/web";
|
|
2
2
|
//#region src/custom/project-card/index.tsx
|
|
3
|
-
var _tmpl$ = /*#__PURE__*/ template(`<img class="
|
|
3
|
+
var _tmpl$ = /*#__PURE__*/ template(`<img class=" Za151 fa151 _Ha151 oa151 na151 ka151 ja151">`), _tmpl$2 = /*#__PURE__*/ template(`<span>`), _tmpl$3 = /*#__PURE__*/ template(`<a target=_blank rel="noopener noreferrer">`), _tmpl$4 = /*#__PURE__*/ template(`<div>`);
|
|
4
4
|
const card = function anonymous(props) {
|
|
5
5
|
let rules = " ";
|
|
6
|
-
rules += "
|
|
7
|
-
rules += "
|
|
8
|
-
rules += "
|
|
9
|
-
rules += "
|
|
10
|
-
rules += "
|
|
11
|
-
rules += "
|
|
12
|
-
rules += "
|
|
13
|
-
rules += "
|
|
14
|
-
rules += "
|
|
15
|
-
rules += "
|
|
16
|
-
rules += "
|
|
17
|
-
rules += "
|
|
18
|
-
rules += "
|
|
19
|
-
rules += "
|
|
20
|
-
rules += "
|
|
21
|
-
rules += "
|
|
22
|
-
rules += "
|
|
23
|
-
rules += "
|
|
24
|
-
rules += "
|
|
25
|
-
if (props.size === "lg") rules += "
|
|
26
|
-
else if (props.size === "md") rules += "
|
|
27
|
-
else if (props.size === "sm") rules += "
|
|
28
|
-
if (props.size === "lg") rules += "
|
|
29
|
-
else if (props.size === "md") rules += "
|
|
30
|
-
else if (props.size === "sm") rules += "
|
|
31
|
-
if (props.size === "lg") rules += "
|
|
32
|
-
else if (props.size === "md") rules += "
|
|
33
|
-
else if (props.size === "sm") rules += "
|
|
34
|
-
if (props.size === "lg") rules += "
|
|
35
|
-
else if (props.size === "md") rules += "
|
|
36
|
-
else if (props.size === "sm") rules += "
|
|
37
|
-
if (props.isInactive) rules += "
|
|
38
|
-
else rules += "
|
|
6
|
+
rules += " sd151";
|
|
7
|
+
rules += " _ta151";
|
|
8
|
+
rules += " eb151";
|
|
9
|
+
rules += " Ue151";
|
|
10
|
+
rules += " qe151";
|
|
11
|
+
rules += " Za151";
|
|
12
|
+
rules += " oc151";
|
|
13
|
+
rules += " nc151";
|
|
14
|
+
rules += " kc151";
|
|
15
|
+
rules += " jc151";
|
|
16
|
+
rules += " _kb151";
|
|
17
|
+
rules += " hb151";
|
|
18
|
+
rules += " mb151";
|
|
19
|
+
rules += " lb151";
|
|
20
|
+
rules += " _jf151";
|
|
21
|
+
rules += " izfTM5151";
|
|
22
|
+
rules += " gDE5VE151";
|
|
23
|
+
rules += " pXDQpyb151";
|
|
24
|
+
rules += " _Xa151";
|
|
25
|
+
if (props.size === "lg") rules += " Tg151";
|
|
26
|
+
else if (props.size === "md") rules += " Tf151";
|
|
27
|
+
else if (props.size === "sm") rules += " Te151";
|
|
28
|
+
if (props.size === "lg") rules += " Qg151";
|
|
29
|
+
else if (props.size === "md") rules += " Qf151";
|
|
30
|
+
else if (props.size === "sm") rules += " Qe151";
|
|
31
|
+
if (props.size === "lg") rules += " Sg151";
|
|
32
|
+
else if (props.size === "md") rules += " Sf151";
|
|
33
|
+
else if (props.size === "sm") rules += " Se151";
|
|
34
|
+
if (props.size === "lg") rules += " Rg151";
|
|
35
|
+
else if (props.size === "md") rules += " Rf151";
|
|
36
|
+
else if (props.size === "sm") rules += " Re151";
|
|
37
|
+
if (props.isInactive) rules += " _IqmMfn151";
|
|
38
|
+
else rules += " _Ib151";
|
|
39
39
|
return rules;
|
|
40
40
|
};
|
|
41
41
|
const caption = function anonymous(props) {
|
|
42
42
|
let rules = " ";
|
|
43
|
-
rules += "
|
|
44
|
-
rules += "
|
|
45
|
-
rules += "
|
|
46
|
-
rules += "
|
|
47
|
-
rules += "
|
|
48
|
-
rules += "
|
|
49
|
-
if (props.size === "lg") rules += " pt13";
|
|
50
|
-
else if (props.size === "md") rules += " pt13";
|
|
51
|
-
else if (props.size === "sm") rules += " pt13";
|
|
43
|
+
rules += " Za151";
|
|
44
|
+
rules += " _Wa151";
|
|
45
|
+
rules += " _Nc151";
|
|
46
|
+
rules += " Pc151";
|
|
47
|
+
rules += " _Yb151";
|
|
48
|
+
rules += " _7c151";
|
|
52
49
|
if (props.size === "lg") {
|
|
53
|
-
rules += "
|
|
54
|
-
rules += "
|
|
55
|
-
rules += "
|
|
56
|
-
rules += "
|
|
57
|
-
rules += "
|
|
58
|
-
rules += "
|
|
59
|
-
rules += "
|
|
60
|
-
rules += "
|
|
61
|
-
rules += "
|
|
50
|
+
rules += " uk151";
|
|
51
|
+
rules += " ucJ9TBTb151";
|
|
52
|
+
rules += " ud3Euai151";
|
|
53
|
+
rules += " uea151";
|
|
54
|
+
rules += " ugb151";
|
|
55
|
+
rules += " uhd151";
|
|
56
|
+
rules += " uje151";
|
|
57
|
+
rules += " u2NhKxcl151";
|
|
58
|
+
rules += " uic151";
|
|
62
59
|
} else if (props.size === "md") {
|
|
63
|
-
rules += "
|
|
64
|
-
rules += "
|
|
65
|
-
rules += "
|
|
66
|
-
rules += "
|
|
67
|
-
rules += "
|
|
68
|
-
rules += "
|
|
69
|
-
rules += "
|
|
70
|
-
rules += "
|
|
71
|
-
rules += "
|
|
60
|
+
rules += " uk151";
|
|
61
|
+
rules += " ucJ9TBTb151";
|
|
62
|
+
rules += " ud3Euai151";
|
|
63
|
+
rules += " uea151";
|
|
64
|
+
rules += " ugb151";
|
|
65
|
+
rules += " uhd151";
|
|
66
|
+
rules += " uje151";
|
|
67
|
+
rules += " u2NhKxcl151";
|
|
68
|
+
rules += " uic151";
|
|
72
69
|
} else if (props.size === "sm") {
|
|
73
|
-
rules += "
|
|
74
|
-
rules += "
|
|
75
|
-
rules += "
|
|
76
|
-
rules += "
|
|
77
|
-
rules += "
|
|
78
|
-
rules += "
|
|
79
|
-
rules += "
|
|
80
|
-
rules += "
|
|
81
|
-
rules += "
|
|
70
|
+
rules += " uk151";
|
|
71
|
+
rules += " ucJ9TBTb151";
|
|
72
|
+
rules += " ud3Euai151";
|
|
73
|
+
rules += " uea151";
|
|
74
|
+
rules += " ugb151";
|
|
75
|
+
rules += " uhd151";
|
|
76
|
+
rules += " uje151";
|
|
77
|
+
rules += " u2NhKxcl151";
|
|
78
|
+
rules += " uic151";
|
|
82
79
|
}
|
|
83
80
|
if (props.size === "lg") {
|
|
84
|
-
rules += " -_6BNtrc-
|
|
85
|
-
rules += "
|
|
81
|
+
rules += " -_6BNtrc-d151";
|
|
82
|
+
rules += " vx151";
|
|
86
83
|
} else if (props.size === "md") {
|
|
87
|
-
rules += " -_6BNtrc-
|
|
88
|
-
rules += "
|
|
84
|
+
rules += " -_6BNtrc-c151";
|
|
85
|
+
rules += " vx151";
|
|
89
86
|
} else if (props.size === "sm") {
|
|
90
|
-
rules += " -_6BNtrc-
|
|
91
|
-
rules += "
|
|
87
|
+
rules += " -_6BNtrc-b151";
|
|
88
|
+
rules += " vx151";
|
|
92
89
|
}
|
|
93
90
|
if (props.size === "lg") {
|
|
94
|
-
rules += "
|
|
95
|
-
rules += "
|
|
91
|
+
rules += " xb151";
|
|
92
|
+
rules += " _xa151";
|
|
96
93
|
} else if (props.size === "md") {
|
|
97
|
-
rules += "
|
|
98
|
-
rules += "
|
|
94
|
+
rules += " xb151";
|
|
95
|
+
rules += " _xa151";
|
|
99
96
|
} else if (props.size === "sm") {
|
|
100
|
-
rules += "
|
|
101
|
-
rules += "
|
|
97
|
+
rules += " xb151";
|
|
98
|
+
rules += " _xa151";
|
|
102
99
|
}
|
|
103
100
|
if (props.size === "lg") {
|
|
104
|
-
rules += "
|
|
105
|
-
rules += "
|
|
101
|
+
rules += " _Fd151";
|
|
102
|
+
rules += " _FnuYUweb151";
|
|
106
103
|
} else if (props.size === "md") {
|
|
107
|
-
rules += "
|
|
108
|
-
rules += "
|
|
104
|
+
rules += " _Fd151";
|
|
105
|
+
rules += " _FnuYUweb151";
|
|
109
106
|
} else if (props.size === "sm") {
|
|
110
|
-
rules += "
|
|
111
|
-
rules += "
|
|
107
|
+
rules += " _Fd151";
|
|
108
|
+
rules += " _FnuYUweb151";
|
|
112
109
|
}
|
|
110
|
+
rules += " pAZZpyb151";
|
|
113
111
|
return rules;
|
|
114
112
|
};
|
|
115
113
|
function ProjectCard(props) {
|
package/dist/ProjectCard.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectCard.js","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n name: string;\n imageSrc: string;\n imageAlt?: string;\n href?: string;\n size?: ProjectCardSize;\n inactive?: boolean;\n class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 8,\n width: \"full\",\n borderRadius: \"lg\",\n borderWidth: 1,\n borderStyle: \"solid\",\n borderColor: \"[var(--color-border)]\",\n backgroundColor: \"[var(--color-bg-200)]\",\n color: \"[var(--color-primary-100)]\",\n textDecoration: \"none\",\n padding: { size: { sm: 12, md: 16, lg: 20 } },\n opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n width: \"full\",\n aspectRatio: \"square\",\n objectFit: \"contain\",\n borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n width: \"full\",\n textAlign: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n
|
|
1
|
+
{"version":3,"file":"ProjectCard.js","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n name: string;\n imageSrc: string;\n imageAlt?: string;\n href?: string;\n size?: ProjectCardSize;\n inactive?: boolean;\n class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 8,\n width: \"full\",\n borderRadius: \"lg\",\n borderWidth: 1,\n borderStyle: \"solid\",\n borderColor: \"[var(--color-border)]\",\n backgroundColor: \"[var(--color-bg-200)]\",\n color: \"[var(--color-primary-100)]\",\n textDecoration: \"none\",\n padding: { size: { sm: 12, md: 16, lg: 20 } },\n opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n width: \"full\",\n aspectRatio: \"square\",\n objectFit: \"contain\",\n borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n width: \"full\",\n textAlign: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n color: \"[var(--color-primary-200)]\",\n});\n\nexport function ProjectCard(props: ProjectCardProps): JSX.Element {\n const size = () => props.size ?? \"sm\";\n const inactive = () => props.inactive ?? false;\n\n const cardContent = () => (\n <>\n <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />\n <span class={caption({ size: size() })}>{props.name}</span>\n </>\n );\n\n const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? \"\"}`;\n\n if (props.href) {\n return (\n <a href={props.href} target=\"_blank\" rel=\"noopener noreferrer\" class={classes()}>\n {cardContent()}\n </a>\n );\n }\n\n return <div class={classes()}>{cardContent()}</div>;\n}\n"],"mappings":";;;AAmBA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM,UAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUN,SAAgB,YAAY,OAA8B;CACxD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,iBAAiB,MAAM,YAAY;CAEzC,MAAM,oBAAc,QAAA;EAAA,IAAA,OAAA,eAAA,MAAA;EAAA,QAAA,QAAA;GAAA,IAAA,MAEQ,MAAM,UAAQ,OAAO,MAAM,YAAY,MAAM;GAAI,QAAA,IAAA,KAAA,aAAA,MAAA,OAAA,IAAA,IAAA,GAAA;GAAA,SAAA,IAAA,KAAA,aAAA,MAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA,UAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,aAChC,MAAM,IAAI;EAAA,aAAA,UAAA,OAAtC,QAAQ,EAAE,MAAM,KAAA,EAAO,CAAA,CAAA,CAAA;EAAA,OAAA;CAAA,GAAA,CAAA;CAIxC,MAAM,gBAAgB,GAAG,KAAK;EAAE,MAAM,KAAA;EAAQ,YAAY,SAAA;CAAW,CAAA,EAAA,GAAM,MAAM,SAAS;CAE1F,IAAI,MAAM,MACR,cAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,OAEK,WAAA;EAAA,QAAA,QAAA;GAAA,IAAA,OADM,MAAM,MAAI,OAAmD,QAAA;GAAA,SAAA,IAAA,KAAA,aAAA,OAAA,QAAA,IAAA,IAAA,IAAA;GAAA,SAAA,IAAA,KAAA,UAAA,OAAA,IAAA,IAAA,IAAA;GAAA,OAAA;EAAA,GAAA;GAAA,GAAA,KAAA;GAAA,GAAA,KAAA;EAAA,CAAA;EAAA,OAAA;CAAA,GAAA;CAM1E,cAAA;EAAA,IAAA,QAAA,eAAA,OAAA;EAAA,OAAA,OAA+B,WAAA;EAAA,aAAA,UAAA,OAAZ,QAAA,CAAA,CAAA;EAAA,OAAA;CAAA,GAAA;AACrB"}
|
package/dist/ProjectCard.jsx
CHANGED
|
@@ -1,114 +1,112 @@
|
|
|
1
1
|
//#region src/custom/project-card/index.tsx
|
|
2
2
|
const card = function anonymous(props) {
|
|
3
3
|
let rules = " ";
|
|
4
|
-
rules += "
|
|
5
|
-
rules += "
|
|
6
|
-
rules += "
|
|
7
|
-
rules += "
|
|
8
|
-
rules += "
|
|
9
|
-
rules += "
|
|
10
|
-
rules += "
|
|
11
|
-
rules += "
|
|
12
|
-
rules += "
|
|
13
|
-
rules += "
|
|
14
|
-
rules += "
|
|
15
|
-
rules += "
|
|
16
|
-
rules += "
|
|
17
|
-
rules += "
|
|
18
|
-
rules += "
|
|
19
|
-
rules += "
|
|
20
|
-
rules += "
|
|
21
|
-
rules += "
|
|
22
|
-
rules += "
|
|
23
|
-
if (props.size === "lg") rules += "
|
|
24
|
-
else if (props.size === "md") rules += "
|
|
25
|
-
else if (props.size === "sm") rules += "
|
|
26
|
-
if (props.size === "lg") rules += "
|
|
27
|
-
else if (props.size === "md") rules += "
|
|
28
|
-
else if (props.size === "sm") rules += "
|
|
29
|
-
if (props.size === "lg") rules += "
|
|
30
|
-
else if (props.size === "md") rules += "
|
|
31
|
-
else if (props.size === "sm") rules += "
|
|
32
|
-
if (props.size === "lg") rules += "
|
|
33
|
-
else if (props.size === "md") rules += "
|
|
34
|
-
else if (props.size === "sm") rules += "
|
|
35
|
-
if (props.isInactive) rules += "
|
|
36
|
-
else rules += "
|
|
4
|
+
rules += " sd151";
|
|
5
|
+
rules += " _ta151";
|
|
6
|
+
rules += " eb151";
|
|
7
|
+
rules += " Ue151";
|
|
8
|
+
rules += " qe151";
|
|
9
|
+
rules += " Za151";
|
|
10
|
+
rules += " oc151";
|
|
11
|
+
rules += " nc151";
|
|
12
|
+
rules += " kc151";
|
|
13
|
+
rules += " jc151";
|
|
14
|
+
rules += " _kb151";
|
|
15
|
+
rules += " hb151";
|
|
16
|
+
rules += " mb151";
|
|
17
|
+
rules += " lb151";
|
|
18
|
+
rules += " _jf151";
|
|
19
|
+
rules += " izfTM5151";
|
|
20
|
+
rules += " gDE5VE151";
|
|
21
|
+
rules += " pXDQpyb151";
|
|
22
|
+
rules += " _Xa151";
|
|
23
|
+
if (props.size === "lg") rules += " Tg151";
|
|
24
|
+
else if (props.size === "md") rules += " Tf151";
|
|
25
|
+
else if (props.size === "sm") rules += " Te151";
|
|
26
|
+
if (props.size === "lg") rules += " Qg151";
|
|
27
|
+
else if (props.size === "md") rules += " Qf151";
|
|
28
|
+
else if (props.size === "sm") rules += " Qe151";
|
|
29
|
+
if (props.size === "lg") rules += " Sg151";
|
|
30
|
+
else if (props.size === "md") rules += " Sf151";
|
|
31
|
+
else if (props.size === "sm") rules += " Se151";
|
|
32
|
+
if (props.size === "lg") rules += " Rg151";
|
|
33
|
+
else if (props.size === "md") rules += " Rf151";
|
|
34
|
+
else if (props.size === "sm") rules += " Re151";
|
|
35
|
+
if (props.isInactive) rules += " _IqmMfn151";
|
|
36
|
+
else rules += " _Ib151";
|
|
37
37
|
return rules;
|
|
38
38
|
};
|
|
39
|
-
const image = "
|
|
39
|
+
const image = " Za151 fa151 _Ha151 oa151 na151 ka151 ja151";
|
|
40
40
|
const caption = function anonymous(props) {
|
|
41
41
|
let rules = " ";
|
|
42
|
-
rules += "
|
|
43
|
-
rules += "
|
|
44
|
-
rules += "
|
|
45
|
-
rules += "
|
|
46
|
-
rules += "
|
|
47
|
-
rules += "
|
|
48
|
-
if (props.size === "lg") rules += " pt13";
|
|
49
|
-
else if (props.size === "md") rules += " pt13";
|
|
50
|
-
else if (props.size === "sm") rules += " pt13";
|
|
42
|
+
rules += " Za151";
|
|
43
|
+
rules += " _Wa151";
|
|
44
|
+
rules += " _Nc151";
|
|
45
|
+
rules += " Pc151";
|
|
46
|
+
rules += " _Yb151";
|
|
47
|
+
rules += " _7c151";
|
|
51
48
|
if (props.size === "lg") {
|
|
52
|
-
rules += "
|
|
53
|
-
rules += "
|
|
54
|
-
rules += "
|
|
55
|
-
rules += "
|
|
56
|
-
rules += "
|
|
57
|
-
rules += "
|
|
58
|
-
rules += "
|
|
59
|
-
rules += "
|
|
60
|
-
rules += "
|
|
49
|
+
rules += " uk151";
|
|
50
|
+
rules += " ucJ9TBTb151";
|
|
51
|
+
rules += " ud3Euai151";
|
|
52
|
+
rules += " uea151";
|
|
53
|
+
rules += " ugb151";
|
|
54
|
+
rules += " uhd151";
|
|
55
|
+
rules += " uje151";
|
|
56
|
+
rules += " u2NhKxcl151";
|
|
57
|
+
rules += " uic151";
|
|
61
58
|
} else if (props.size === "md") {
|
|
62
|
-
rules += "
|
|
63
|
-
rules += "
|
|
64
|
-
rules += "
|
|
65
|
-
rules += "
|
|
66
|
-
rules += "
|
|
67
|
-
rules += "
|
|
68
|
-
rules += "
|
|
69
|
-
rules += "
|
|
70
|
-
rules += "
|
|
59
|
+
rules += " uk151";
|
|
60
|
+
rules += " ucJ9TBTb151";
|
|
61
|
+
rules += " ud3Euai151";
|
|
62
|
+
rules += " uea151";
|
|
63
|
+
rules += " ugb151";
|
|
64
|
+
rules += " uhd151";
|
|
65
|
+
rules += " uje151";
|
|
66
|
+
rules += " u2NhKxcl151";
|
|
67
|
+
rules += " uic151";
|
|
71
68
|
} else if (props.size === "sm") {
|
|
72
|
-
rules += "
|
|
73
|
-
rules += "
|
|
74
|
-
rules += "
|
|
75
|
-
rules += "
|
|
76
|
-
rules += "
|
|
77
|
-
rules += "
|
|
78
|
-
rules += "
|
|
79
|
-
rules += "
|
|
80
|
-
rules += "
|
|
69
|
+
rules += " uk151";
|
|
70
|
+
rules += " ucJ9TBTb151";
|
|
71
|
+
rules += " ud3Euai151";
|
|
72
|
+
rules += " uea151";
|
|
73
|
+
rules += " ugb151";
|
|
74
|
+
rules += " uhd151";
|
|
75
|
+
rules += " uje151";
|
|
76
|
+
rules += " u2NhKxcl151";
|
|
77
|
+
rules += " uic151";
|
|
81
78
|
}
|
|
82
79
|
if (props.size === "lg") {
|
|
83
|
-
rules += " -_6BNtrc-
|
|
84
|
-
rules += "
|
|
80
|
+
rules += " -_6BNtrc-d151";
|
|
81
|
+
rules += " vx151";
|
|
85
82
|
} else if (props.size === "md") {
|
|
86
|
-
rules += " -_6BNtrc-
|
|
87
|
-
rules += "
|
|
83
|
+
rules += " -_6BNtrc-c151";
|
|
84
|
+
rules += " vx151";
|
|
88
85
|
} else if (props.size === "sm") {
|
|
89
|
-
rules += " -_6BNtrc-
|
|
90
|
-
rules += "
|
|
86
|
+
rules += " -_6BNtrc-b151";
|
|
87
|
+
rules += " vx151";
|
|
91
88
|
}
|
|
92
89
|
if (props.size === "lg") {
|
|
93
|
-
rules += "
|
|
94
|
-
rules += "
|
|
90
|
+
rules += " xb151";
|
|
91
|
+
rules += " _xa151";
|
|
95
92
|
} else if (props.size === "md") {
|
|
96
|
-
rules += "
|
|
97
|
-
rules += "
|
|
93
|
+
rules += " xb151";
|
|
94
|
+
rules += " _xa151";
|
|
98
95
|
} else if (props.size === "sm") {
|
|
99
|
-
rules += "
|
|
100
|
-
rules += "
|
|
96
|
+
rules += " xb151";
|
|
97
|
+
rules += " _xa151";
|
|
101
98
|
}
|
|
102
99
|
if (props.size === "lg") {
|
|
103
|
-
rules += "
|
|
104
|
-
rules += "
|
|
100
|
+
rules += " _Fd151";
|
|
101
|
+
rules += " _FnuYUweb151";
|
|
105
102
|
} else if (props.size === "md") {
|
|
106
|
-
rules += "
|
|
107
|
-
rules += "
|
|
103
|
+
rules += " _Fd151";
|
|
104
|
+
rules += " _FnuYUweb151";
|
|
108
105
|
} else if (props.size === "sm") {
|
|
109
|
-
rules += "
|
|
110
|
-
rules += "
|
|
106
|
+
rules += " _Fd151";
|
|
107
|
+
rules += " _FnuYUweb151";
|
|
111
108
|
}
|
|
109
|
+
rules += " pAZZpyb151";
|
|
112
110
|
return rules;
|
|
113
111
|
};
|
|
114
112
|
function ProjectCard(props) {
|
package/dist/ProjectCard.jsx.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProjectCard.jsx","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n name: string;\n imageSrc: string;\n imageAlt?: string;\n href?: string;\n size?: ProjectCardSize;\n inactive?: boolean;\n class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 8,\n width: \"full\",\n borderRadius: \"lg\",\n borderWidth: 1,\n borderStyle: \"solid\",\n borderColor: \"[var(--color-border)]\",\n backgroundColor: \"[var(--color-bg-200)]\",\n color: \"[var(--color-primary-100)]\",\n textDecoration: \"none\",\n padding: { size: { sm: 12, md: 16, lg: 20 } },\n opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n width: \"full\",\n aspectRatio: \"square\",\n objectFit: \"contain\",\n borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n width: \"full\",\n textAlign: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n
|
|
1
|
+
{"version":3,"file":"ProjectCard.jsx","names":[],"sources":["../src/custom/project-card/index.tsx"],"sourcesContent":["import type { JSX } from \"solid-js\";\n// Styled via the S2 style() macro through viviana's own seam (../../style →\n// src/style.ts). A square logo/preview tile with a caption, sized by the S2\n// spacing + type ramps and painted in Silapse colors. `inactive` dims it;\n// `href` turns the whole card into a link.\nimport { style } from \"../../style\" with { type: \"macro\" };\n\nexport type ProjectCardSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProjectCardProps {\n name: string;\n imageSrc: string;\n imageAlt?: string;\n href?: string;\n size?: ProjectCardSize;\n inactive?: boolean;\n class?: string;\n}\n\nconst card = style<{ size: ProjectCardSize; isInactive: boolean }>({\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: 8,\n width: \"full\",\n borderRadius: \"lg\",\n borderWidth: 1,\n borderStyle: \"solid\",\n borderColor: \"[var(--color-border)]\",\n backgroundColor: \"[var(--color-bg-200)]\",\n color: \"[var(--color-primary-100)]\",\n textDecoration: \"none\",\n padding: { size: { sm: 12, md: 16, lg: 20 } },\n opacity: { default: 1, isInactive: 0.5 },\n});\n\nconst image = style({\n width: \"full\",\n aspectRatio: \"square\",\n objectFit: \"contain\",\n borderRadius: \"sm\",\n});\n\nconst caption = style<{ size: ProjectCardSize }>({\n width: \"full\",\n textAlign: \"center\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n font: { size: { sm: \"ui-sm\", md: \"ui\", lg: \"ui-lg\" } },\n color: \"[var(--color-primary-200)]\",\n});\n\nexport function ProjectCard(props: ProjectCardProps): JSX.Element {\n const size = () => props.size ?? \"sm\";\n const inactive = () => props.inactive ?? false;\n\n const cardContent = () => (\n <>\n <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />\n <span class={caption({ size: size() })}>{props.name}</span>\n </>\n );\n\n const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? \"\"}`;\n\n if (props.href) {\n return (\n <a href={props.href} target=\"_blank\" rel=\"noopener noreferrer\" class={classes()}>\n {cardContent()}\n </a>\n );\n }\n\n return <div class={classes()}>{cardContent()}</div>;\n}\n"],"mappings":";AAmBA,MAAM,OAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBN,MAAM,QAAA;AAON,MAAM,UAAA,SAAA,UAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUN,SAAgB,YAAY,OAA8B;CACxD,MAAM,aAAa,MAAM,QAAQ;CACjC,MAAM,iBAAiB,MAAM,YAAY;CAEzC,MAAM,oBAAoB,EACtB;MACA,CAAC,IAAI,OAAO,OAAO,KAAK,MAAM,UAAU,KAAK,MAAM,YAAY,MAAM,QAAQ;MAC7E,CAAC,KAAK,OAAO,QAAQ,EAAE,MAAM,KAAA,EAAO,CAAA,IAAK,MAAM,KAAI,EAAG,KAAK;IAC7D;CAGF,MAAM,gBAAgB,GAAG,KAAK;EAAE,MAAM,KAAA;EAAQ,YAAY,SAAA;CAAW,CAAA,EAAG,GAAG,MAAM,SAAS;CAE1F,IAAI,MAAM,MACR,OAAO,CACJ,EAAE,MAAM,MAAM,MAAM,gBAAgB,0BAA0B,OAAO,QAAA,GAAW;SAC9E,YAAA,EAAc;MACjB,EAAE;CAIN,OAAA,CAAQ,IAAI,OAAO,QAAA,IAAY,YAAA,EAAA,EAAgB;AACjD"}
|
package/dist/TimelineItem.js
CHANGED
|
@@ -3,7 +3,7 @@ import { Avatar } from "@proyecto-viviana/solid-spectrum";
|
|
|
3
3
|
import { className, createComponent, effect, getNextElement, getNextMarker, insert, template } from "solid-js/web";
|
|
4
4
|
import { Show } from "solid-js";
|
|
5
5
|
//#region src/custom/timeline-item/index.tsx
|
|
6
|
-
var _tmpl$ = /*#__PURE__*/ template(`<span class="
|
|
6
|
+
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>`);
|
|
7
7
|
const eventMessages = {
|
|
8
8
|
follow: (left, right) => [
|
|
9
9
|
(() => {
|
|
@@ -59,7 +59,7 @@ const eventMessages = {
|
|
|
59
59
|
],
|
|
60
60
|
custom: () => null
|
|
61
61
|
};
|
|
62
|
-
const card = "
|
|
62
|
+
const card = " sh151 _ta151 Ui151 qi151 Tg151 Qg151 Sg151 Rg151 oe151 ne151 ke151 je151 _kb151 hb151 mb151 lb151 _jf151 iJJKqyb151 gDE5VE151";
|
|
63
63
|
function TimelineItem(props) {
|
|
64
64
|
const type = () => props.type ?? "follow";
|
|
65
65
|
const leftName = () => props.leftUser?.name ?? "";
|
package/dist/TimelineItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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-
|
|
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
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { Avatar } from "@proyecto-viviana/solid-spectrum";
|
|
3
3
|
import { Show } from "solid-js";
|
|
4
4
|
//#region src/custom/timeline-item/index.tsx
|
|
5
|
-
const nameEmph = "
|
|
5
|
+
const nameEmph = " xd151 _xa151 xX0cczbc151 _xX0cczba151 pO550xe151";
|
|
6
6
|
const eventMessages = {
|
|
7
7
|
follow: (left, right) => <>
|
|
8
8
|
<span class={nameEmph}>{left}</span>
|
|
@@ -26,9 +26,9 @@ const eventMessages = {
|
|
|
26
26
|
</>,
|
|
27
27
|
custom: () => null
|
|
28
28
|
};
|
|
29
|
-
const card = "
|
|
30
|
-
const avatarsRow = "
|
|
31
|
-
const messageRow = "
|
|
29
|
+
const card = " sh151 _ta151 Ui151 qi151 Tg151 Qg151 Sg151 Rg151 oe151 ne151 ke151 je151 _kb151 hb151 mb151 lb151 _jf151 iJJKqyb151 gDE5VE151";
|
|
30
|
+
const avatarsRow = " sd151 eb151 _Ca151 Ug151 qg151";
|
|
31
|
+
const messageRow = " sd151 eb151 _Ca151 _Wa151 uk151 ucJ9TBTb151 ud3Euai151 uea151 ugb151 uhd151 uje151 u2NhKxcl151 uic151 -_6BNtrc-c151 vx151 xb151 _xa151 _Fd151 _FnuYUweb151 pO550xe151";
|
|
32
32
|
function TimelineItem(props) {
|
|
33
33
|
const type = () => props.type ?? "follow";
|
|
34
34
|
const leftName = () => props.leftUser?.name ?? "";
|
|
@@ -1 +1 @@
|
|
|
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-
|
|
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"}
|