@proyecto-viviana/ui 0.4.1 → 0.5.0
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/styles.css +0 -3
- package/dist/viviana-tokens.css +240 -171
- package/package.json +3 -57
- package/src/viviana-tokens.css +240 -171
- package/dist/CalendarCard.d.ts +0 -2
- package/dist/CalendarCard.d.ts.map +0 -1
- package/dist/CalendarCard.js +0 -96
- package/dist/CalendarCard.js.map +0 -1
- package/dist/CalendarCard.jsx +0 -50
- package/dist/CalendarCard.jsx.map +0 -1
- package/dist/Chip.d.ts +0 -2
- package/dist/Chip.d.ts.map +0 -1
- package/dist/Chip.js +0 -2
- package/dist/Chip.jsx +0 -2
- package/dist/Conversation.d.ts +0 -2
- package/dist/Conversation.d.ts.map +0 -1
- package/dist/Conversation.js +0 -176
- package/dist/Conversation.js.map +0 -1
- package/dist/Conversation.jsx +0 -106
- package/dist/Conversation.jsx.map +0 -1
- package/dist/EventCard.d.ts +0 -2
- package/dist/EventCard.d.ts.map +0 -1
- package/dist/EventCard.js +0 -171
- package/dist/EventCard.js.map +0 -1
- package/dist/EventCard.jsx +0 -94
- package/dist/EventCard.jsx.map +0 -1
- package/dist/Logo.d.ts +0 -2
- package/dist/Logo.d.ts.map +0 -1
- package/dist/Logo.js +0 -116
- package/dist/Logo.js.map +0 -1
- package/dist/Logo.jsx +0 -101
- package/dist/Logo.jsx.map +0 -1
- package/dist/PageLayout.d.ts +0 -2
- package/dist/PageLayout.d.ts.map +0 -1
- package/dist/PageLayout.js +0 -31
- package/dist/PageLayout.js.map +0 -1
- package/dist/PageLayout.jsx +0 -23
- package/dist/PageLayout.jsx.map +0 -1
- package/dist/ProfileCard.d.ts +0 -2
- package/dist/ProfileCard.d.ts.map +0 -1
- package/dist/ProfileCard.js +0 -77
- package/dist/ProfileCard.js.map +0 -1
- package/dist/ProfileCard.jsx +0 -52
- package/dist/ProfileCard.jsx.map +0 -1
- package/dist/ProjectCard.d.ts +0 -2
- package/dist/ProjectCard.d.ts.map +0 -1
- package/dist/ProjectCard.js +0 -162
- package/dist/ProjectCard.js.map +0 -1
- package/dist/ProjectCard.jsx +0 -131
- package/dist/ProjectCard.jsx.map +0 -1
- package/dist/TimelineItem.d.ts +0 -2
- package/dist/TimelineItem.d.ts.map +0 -1
- package/dist/TimelineItem.js +0 -137
- package/dist/TimelineItem.js.map +0 -1
- package/dist/TimelineItem.jsx +0 -70
- package/dist/TimelineItem.jsx.map +0 -1
- package/dist/chip2.js +0 -82
- package/dist/chip2.js.map +0 -1
- package/dist/chip2.jsx +0 -68
- package/dist/chip2.jsx.map +0 -1
- package/dist/custom/calendar-card/index.d.ts +0 -12
- package/dist/custom/calendar-card/index.d.ts.map +0 -1
- package/dist/custom/chip/index.d.ts +0 -16
- package/dist/custom/chip/index.d.ts.map +0 -1
- package/dist/custom/conversation/index.d.ts +0 -32
- package/dist/custom/conversation/index.d.ts.map +0 -1
- package/dist/custom/event-card/index.d.ts +0 -30
- package/dist/custom/event-card/index.d.ts.map +0 -1
- package/dist/custom/header/index.d.ts +0 -12
- package/dist/custom/header/index.d.ts.map +0 -1
- package/dist/custom/lateral-nav/index.d.ts +0 -32
- package/dist/custom/lateral-nav/index.d.ts.map +0 -1
- package/dist/custom/logo/index.d.ts +0 -11
- package/dist/custom/logo/index.d.ts.map +0 -1
- package/dist/custom/nav-header/index.d.ts +0 -13
- package/dist/custom/nav-header/index.d.ts.map +0 -1
- package/dist/custom/page-layout/index.d.ts +0 -7
- package/dist/custom/page-layout/index.d.ts.map +0 -1
- package/dist/custom/profile-card/index.d.ts +0 -16
- package/dist/custom/profile-card/index.d.ts.map +0 -1
- package/dist/custom/project-card/index.d.ts +0 -13
- package/dist/custom/project-card/index.d.ts.map +0 -1
- package/dist/custom/timeline-item/index.d.ts +0 -28
- package/dist/custom/timeline-item/index.d.ts.map +0 -1
- package/src/CalendarCard.ts +0 -1
- package/src/Chip.ts +0 -1
- package/src/Conversation.ts +0 -1
- package/src/EventCard.ts +0 -1
- package/src/Logo.ts +0 -1
- package/src/PageLayout.ts +0 -1
- package/src/ProfileCard.ts +0 -1
- package/src/ProjectCard.ts +0 -1
- package/src/TimelineItem.ts +0 -1
- package/src/custom/calendar-card/index.tsx +0 -124
- package/src/custom/chip/index.tsx +0 -82
- package/src/custom/conversation/index.tsx +0 -216
- package/src/custom/event-card/index.tsx +0 -253
- package/src/custom/header/index.tsx +0 -64
- package/src/custom/lateral-nav/index.tsx +0 -143
- package/src/custom/logo/index.tsx +0 -60
- package/src/custom/nav-header/index.tsx +0 -106
- package/src/custom/page-layout/index.tsx +0 -33
- package/src/custom/profile-card/index.tsx +0 -123
- package/src/custom/project-card/index.tsx +0 -76
- package/src/custom/timeline-item/index.tsx +0 -148
package/dist/chip2.jsx
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { Show } from "solid-js";
|
|
2
|
-
import { Button } from "@proyecto-viviana/solidaria-components";
|
|
3
|
-
//#region src/custom/chip/index.tsx
|
|
4
|
-
const chip = function anonymous(props) {
|
|
5
|
-
let rules = " ";
|
|
6
|
-
rules += " sh151";
|
|
7
|
-
rules += " eb151";
|
|
8
|
-
rules += " _Ca151";
|
|
9
|
-
rules += " qc151";
|
|
10
|
-
rules += " qsd151";
|
|
11
|
-
rules += " Mg151";
|
|
12
|
-
rules += " ZJ151";
|
|
13
|
-
rules += " Se151";
|
|
14
|
-
rules += " Re151";
|
|
15
|
-
rules += " og151";
|
|
16
|
-
rules += " ng151";
|
|
17
|
-
rules += " kg151";
|
|
18
|
-
rules += " jg151";
|
|
19
|
-
rules += " _jf151";
|
|
20
|
-
rules += " _kc151";
|
|
21
|
-
rules += " hc151";
|
|
22
|
-
rules += " mc151";
|
|
23
|
-
rules += " lc151";
|
|
24
|
-
rules += " uk151";
|
|
25
|
-
rules += " ucJ9TBTb151";
|
|
26
|
-
rules += " ud3Euai151";
|
|
27
|
-
rules += " uea151";
|
|
28
|
-
rules += " ugb151";
|
|
29
|
-
rules += " uhd151";
|
|
30
|
-
rules += " uje151";
|
|
31
|
-
rules += " u2NhKxcl151";
|
|
32
|
-
rules += " uic151";
|
|
33
|
-
rules += " -_6BNtrc-b151";
|
|
34
|
-
rules += " vx151";
|
|
35
|
-
rules += " xb151";
|
|
36
|
-
rules += " _xa151";
|
|
37
|
-
rules += " _Fd151";
|
|
38
|
-
rules += " _FnuYUweb151";
|
|
39
|
-
if (props.variant === "outline") rules += " pAZZpyb151";
|
|
40
|
-
else if (props.variant === "accent") rules += " padAQ7151";
|
|
41
|
-
else if (props.variant === "secondary") rules += " pAZZpyb151";
|
|
42
|
-
else if (props.variant === "primary") rules += " pXDQpyb151";
|
|
43
|
-
if (props.variant === "outline") rules += " i6nBqyb151";
|
|
44
|
-
else rules += " iA151";
|
|
45
|
-
if (props.variant === "outline") rules += " g9151";
|
|
46
|
-
else if (props.variant === "accent") rules += " gj1j4Pd151";
|
|
47
|
-
else if (props.variant === "secondary") rules += " g0iWVE151";
|
|
48
|
-
else if (props.variant === "primary") rules += " gJJKqyb151";
|
|
49
|
-
return rules;
|
|
50
|
-
};
|
|
51
|
-
function Chip(props) {
|
|
52
|
-
const renderIcon = () => {
|
|
53
|
-
const icon = props.icon;
|
|
54
|
-
if (!icon) return null;
|
|
55
|
-
if (typeof icon === "string") return icon;
|
|
56
|
-
return icon();
|
|
57
|
-
};
|
|
58
|
-
return <Button class={`${chip({ variant: props.variant ?? "primary" })} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
|
|
59
|
-
<Show when={props.icon}>
|
|
60
|
-
<span>{renderIcon()}</span>
|
|
61
|
-
</Show>
|
|
62
|
-
{props.text}
|
|
63
|
-
</Button>;
|
|
64
|
-
}
|
|
65
|
-
//#endregion
|
|
66
|
-
export { Chip as t };
|
|
67
|
-
|
|
68
|
-
//# sourceMappingURL=chip2.jsx.map
|
package/dist/chip2.jsx.map
DELETED
|
@@ -1 +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"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export interface CalendarCardProps {
|
|
2
|
-
title: string;
|
|
3
|
-
image?: string;
|
|
4
|
-
tags?: string[];
|
|
5
|
-
followers?: {
|
|
6
|
-
name: string;
|
|
7
|
-
}[];
|
|
8
|
-
followerCount?: number;
|
|
9
|
-
class?: string;
|
|
10
|
-
}
|
|
11
|
-
export declare function CalendarCard(props: CalendarCardProps): import("solid-js").JSX.Element;
|
|
12
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/calendar-card/index.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAwCpD"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export type ChipVariant = "primary" | "secondary" | "accent" | "outline";
|
|
3
|
-
export interface ChipProps {
|
|
4
|
-
text: string;
|
|
5
|
-
variant?: ChipVariant;
|
|
6
|
-
onClick?: () => void;
|
|
7
|
-
/**
|
|
8
|
-
* Icon to display before the text.
|
|
9
|
-
* Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
|
|
10
|
-
* Or pass a simple string for text-based icons: `icon="★"`
|
|
11
|
-
*/
|
|
12
|
-
icon?: string | (() => JSX.Element);
|
|
13
|
-
class?: string;
|
|
14
|
-
}
|
|
15
|
-
export declare function Chip(props: ChipProps): JSX.Element;
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AASpC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwCD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,eAmBpC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
export interface Message {
|
|
2
|
-
id: string;
|
|
3
|
-
content: string;
|
|
4
|
-
sender: "user" | "other";
|
|
5
|
-
timestamp?: string;
|
|
6
|
-
}
|
|
7
|
-
export interface ConversationPreviewProps {
|
|
8
|
-
user: {
|
|
9
|
-
name: string;
|
|
10
|
-
avatar?: string;
|
|
11
|
-
online?: boolean;
|
|
12
|
-
};
|
|
13
|
-
lastMessage?: string;
|
|
14
|
-
unreadCount?: number;
|
|
15
|
-
timestamp?: string;
|
|
16
|
-
onClick?: () => void;
|
|
17
|
-
class?: string;
|
|
18
|
-
}
|
|
19
|
-
export declare function ConversationPreview(props: ConversationPreviewProps): import("solid-js").JSX.Element;
|
|
20
|
-
export interface ConversationBubbleProps {
|
|
21
|
-
content: string;
|
|
22
|
-
sender: "user" | "other";
|
|
23
|
-
timestamp?: string;
|
|
24
|
-
class?: string;
|
|
25
|
-
}
|
|
26
|
-
export declare function ConversationBubble(props: ConversationBubbleProps): import("solid-js").JSX.Element;
|
|
27
|
-
export interface ConversationProps {
|
|
28
|
-
messages: Message[];
|
|
29
|
-
class?: string;
|
|
30
|
-
}
|
|
31
|
-
export declare function Conversation(props: ConversationProps): import("solid-js").JSX.Element;
|
|
32
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/conversation/index.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4ED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAwBlE;AAED,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyCD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,kCAahE;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AASD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,kCAcpD"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export interface EventCardProps {
|
|
3
|
-
title: string;
|
|
4
|
-
image?: string;
|
|
5
|
-
date?: string;
|
|
6
|
-
author?: string;
|
|
7
|
-
authorAvatar?: string;
|
|
8
|
-
attendees?: {
|
|
9
|
-
avatar?: string;
|
|
10
|
-
name: string;
|
|
11
|
-
}[];
|
|
12
|
-
attendeeCount?: number;
|
|
13
|
-
decorationImage?: string;
|
|
14
|
-
/**
|
|
15
|
-
* Actions to display below the event.
|
|
16
|
-
* Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
|
|
17
|
-
*/
|
|
18
|
-
actions?: JSX.Element | (() => JSX.Element);
|
|
19
|
-
class?: string;
|
|
20
|
-
}
|
|
21
|
-
export declare function EventCard(props: EventCardProps): JSX.Element;
|
|
22
|
-
export interface EventListItemProps {
|
|
23
|
-
title: string;
|
|
24
|
-
image?: string;
|
|
25
|
-
subtitle?: string;
|
|
26
|
-
onClick?: () => void;
|
|
27
|
-
class?: string;
|
|
28
|
-
}
|
|
29
|
-
export declare function EventListItem(props: EventListItemProps): JSX.Element;
|
|
30
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/event-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AASpC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoGD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA2D9C;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+CD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eActD"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
import { type LogoProps } from "../logo";
|
|
3
|
-
export interface HeaderProps {
|
|
4
|
-
logoImage?: JSX.Element;
|
|
5
|
-
/** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
|
|
6
|
-
logoProps?: LogoProps | null;
|
|
7
|
-
logo?: JSX.Element;
|
|
8
|
-
children?: JSX.Element;
|
|
9
|
-
class?: string;
|
|
10
|
-
}
|
|
11
|
-
export declare function Header(props: HeaderProps): JSX.Element;
|
|
12
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAM/C,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACxB,oHAAoH;IACpH,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,eAcxC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export interface NavItemProps {
|
|
3
|
-
title: string;
|
|
4
|
-
children?: JSX.Element;
|
|
5
|
-
class?: string;
|
|
6
|
-
}
|
|
7
|
-
export declare function NavItem(props: NavItemProps): JSX.Element;
|
|
8
|
-
export interface NavLinkProps {
|
|
9
|
-
href: string;
|
|
10
|
-
children: JSX.Element;
|
|
11
|
-
active?: boolean;
|
|
12
|
-
class?: string;
|
|
13
|
-
}
|
|
14
|
-
export declare function NavLink(props: NavLinkProps): JSX.Element;
|
|
15
|
-
export interface NavSectionProps {
|
|
16
|
-
title: string;
|
|
17
|
-
links?: {
|
|
18
|
-
href: string;
|
|
19
|
-
label: string;
|
|
20
|
-
active?: boolean;
|
|
21
|
-
}[];
|
|
22
|
-
children?: JSX.Element;
|
|
23
|
-
class?: string;
|
|
24
|
-
}
|
|
25
|
-
export declare function NavSection(props: NavSectionProps): JSX.Element;
|
|
26
|
-
export interface LateralNavProps {
|
|
27
|
-
transparent?: boolean;
|
|
28
|
-
children?: JSX.Element;
|
|
29
|
-
class?: string;
|
|
30
|
-
}
|
|
31
|
-
export declare function LateralNav(props: LateralNavProps): JSX.Element;
|
|
32
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/lateral-nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAOpC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AASD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAO1C;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,eAS1C;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IAC5D,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqBD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuBhD;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAeD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAMhD"}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export type LogoSize = "sm" | "md" | "lg" | "xl";
|
|
3
|
-
export interface LogoProps {
|
|
4
|
-
firstWord?: string;
|
|
5
|
-
secondWord?: string;
|
|
6
|
-
size?: LogoSize;
|
|
7
|
-
inverted?: boolean;
|
|
8
|
-
class?: string;
|
|
9
|
-
}
|
|
10
|
-
export declare function Logo(props: LogoProps): JSX.Element;
|
|
11
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/logo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAMpC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAkCD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAWlD"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export interface NavHeaderProps {
|
|
3
|
-
logo?: string;
|
|
4
|
-
logoAlt?: string;
|
|
5
|
-
logoText?: string;
|
|
6
|
-
children?: JSX.Element;
|
|
7
|
-
menuIcon?: JSX.Element;
|
|
8
|
-
onMenuClick?: () => void;
|
|
9
|
-
menuAriaLabel?: string;
|
|
10
|
-
class?: string;
|
|
11
|
-
}
|
|
12
|
-
export declare function NavHeader(props: NavHeaderProps): JSX.Element;
|
|
13
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/nav-header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAQpC,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0DD,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA8B9C"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type JSX } from "solid-js";
|
|
2
|
-
export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
3
|
-
children: JSX.Element;
|
|
4
|
-
withHeader?: boolean;
|
|
5
|
-
}
|
|
6
|
-
export declare function PageLayout(props: PageLayoutProps): JSX.Element;
|
|
7
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/page-layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAc,MAAM,UAAU,CAAC;AAMhD,MAAM,WAAW,eAAgB,SAAQ,GAAG,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAYD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAWhD"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export interface ProfileCardProps {
|
|
3
|
-
username: string;
|
|
4
|
-
avatar?: string;
|
|
5
|
-
bio?: string;
|
|
6
|
-
followers?: number;
|
|
7
|
-
following?: number;
|
|
8
|
-
/**
|
|
9
|
-
* Actions to display below the profile.
|
|
10
|
-
* Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
|
|
11
|
-
*/
|
|
12
|
-
actions?: JSX.Element | (() => JSX.Element);
|
|
13
|
-
class?: string;
|
|
14
|
-
}
|
|
15
|
-
export declare function ProfileCard(props: ProfileCardProps): JSX.Element;
|
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/profile-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAQpC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,eAqClD"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export type ProjectCardSize = "sm" | "md" | "lg";
|
|
3
|
-
export interface ProjectCardProps {
|
|
4
|
-
name: string;
|
|
5
|
-
imageSrc: string;
|
|
6
|
-
imageAlt?: string;
|
|
7
|
-
href?: string;
|
|
8
|
-
size?: ProjectCardSize;
|
|
9
|
-
inactive?: boolean;
|
|
10
|
-
class?: string;
|
|
11
|
-
}
|
|
12
|
-
export declare function ProjectCard(props: ProjectCardProps): JSX.Element;
|
|
13
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/project-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAOpC,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAsBhE"}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
export type TimelineEventType = "follow" | "like" | "comment" | "event" | "custom";
|
|
3
|
-
export interface TimelineItemProps {
|
|
4
|
-
type?: TimelineEventType;
|
|
5
|
-
/**
|
|
6
|
-
* Icon to display between the two avatars.
|
|
7
|
-
* Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
|
|
8
|
-
* Or pass a simple string for text-based icons: `icon="👋"`
|
|
9
|
-
*/
|
|
10
|
-
icon?: string | (() => JSX.Element);
|
|
11
|
-
leftUser?: {
|
|
12
|
-
name: string;
|
|
13
|
-
avatar?: string;
|
|
14
|
-
};
|
|
15
|
-
rightUser?: {
|
|
16
|
-
name: string;
|
|
17
|
-
avatar?: string;
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* Custom message content.
|
|
21
|
-
* Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
|
|
22
|
-
* Or pass a simple string.
|
|
23
|
-
*/
|
|
24
|
-
message?: string | (() => JSX.Element);
|
|
25
|
-
class?: string;
|
|
26
|
-
}
|
|
27
|
-
export declare function TimelineItem(props: TimelineItemProps): JSX.Element;
|
|
28
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/custom/timeline-item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAQpC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnF,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE;QACT,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2ED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAuCpD"}
|
package/src/CalendarCard.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/calendar-card";
|
package/src/Chip.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/chip";
|
package/src/Conversation.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/conversation";
|
package/src/EventCard.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/event-card";
|
package/src/Logo.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/logo";
|
package/src/PageLayout.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/page-layout";
|
package/src/ProfileCard.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/profile-card";
|
package/src/ProjectCard.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/project-card";
|
package/src/TimelineItem.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from "./custom/timeline-item";
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { Show, For } from "solid-js";
|
|
2
|
-
import { Chip } from "../chip";
|
|
3
|
-
// Styled via the S2 style() macro through viviana's own seam (../../style →
|
|
4
|
-
// src/style.ts). A horizontal "followed calendar" card: square thumbnail +
|
|
5
|
-
// title + followers line + tag chips, on the S2 ramps in Silapse colors.
|
|
6
|
-
import { style } from "../../style" with { type: "macro" };
|
|
7
|
-
|
|
8
|
-
export interface CalendarCardProps {
|
|
9
|
-
title: string;
|
|
10
|
-
image?: string;
|
|
11
|
-
tags?: string[];
|
|
12
|
-
followers?: { name: string }[];
|
|
13
|
-
followerCount?: number;
|
|
14
|
-
class?: string;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
const card = style({
|
|
18
|
-
display: "flex",
|
|
19
|
-
alignItems: "center",
|
|
20
|
-
gap: 12,
|
|
21
|
-
width: "full",
|
|
22
|
-
maxWidth: 500,
|
|
23
|
-
padding: 12,
|
|
24
|
-
borderRadius: "xl",
|
|
25
|
-
borderWidth: 2,
|
|
26
|
-
borderStyle: "solid",
|
|
27
|
-
borderColor: "[var(--color-primary-600)]",
|
|
28
|
-
backgroundColor: "[var(--color-bg-300)]",
|
|
29
|
-
boxShadow: "elevated",
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
const thumb = style({
|
|
33
|
-
width: 80,
|
|
34
|
-
height: 80,
|
|
35
|
-
flexShrink: 0,
|
|
36
|
-
objectFit: "cover",
|
|
37
|
-
borderRadius: "lg",
|
|
38
|
-
borderWidth: 2,
|
|
39
|
-
borderStyle: "solid",
|
|
40
|
-
borderColor: "[var(--color-accent)]",
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
const body = style({
|
|
44
|
-
display: "flex",
|
|
45
|
-
flexDirection: "column",
|
|
46
|
-
gap: 8,
|
|
47
|
-
flexGrow: 1,
|
|
48
|
-
minWidth: 0,
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
const title = style({
|
|
52
|
-
font: "heading-sm",
|
|
53
|
-
color: "[var(--color-primary-100)]",
|
|
54
|
-
overflow: "hidden",
|
|
55
|
-
textOverflow: "ellipsis",
|
|
56
|
-
whiteSpace: "nowrap",
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
const followers = style({
|
|
60
|
-
font: "ui-sm",
|
|
61
|
-
color: "[var(--color-text-secondary)]",
|
|
62
|
-
});
|
|
63
|
-
|
|
64
|
-
const followerName = style({
|
|
65
|
-
fontWeight: "bold",
|
|
66
|
-
// WCAG AA fix: the follower names sit on the `--color-bg-300` card. They are
|
|
67
|
-
// small text (`ui-sm`, inherited), so the 4.5:1 normal-text floor applies.
|
|
68
|
-
// `--color-accent` (#df5c9a) is a fixed pink in both themes and read only
|
|
69
|
-
// 2.42:1 on the light-blue card (5.08:1 dark); no pink ramp step clears 4.5:1
|
|
70
|
-
// on both the dark-grey and light-blue card (`--color-accent-500` is 4.39:1
|
|
71
|
-
// dark — a hair under). The names keep their emphasis via `fontWeight: bold`
|
|
72
|
-
// against the secondary-grey connectors and take the flipping `--color-text`,
|
|
73
|
-
// which clears 4.5:1 both ways (17.40:1 dark / 9.63:1 light). The card's pink
|
|
74
|
-
// accent moment stays on the thumbnail border (bears no text).
|
|
75
|
-
color: "[var(--color-text)]",
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
const tags = style({
|
|
79
|
-
display: "flex",
|
|
80
|
-
flexWrap: "wrap",
|
|
81
|
-
gap: 4,
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
export function CalendarCard(props: CalendarCardProps) {
|
|
85
|
-
const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
|
|
86
|
-
const remainingCount = () => {
|
|
87
|
-
const total = props.followerCount ?? props.followers?.length ?? 0;
|
|
88
|
-
const displayed = displayedFollowers().length;
|
|
89
|
-
return total - displayed;
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
return (
|
|
93
|
-
<div class={`${card} ${props.class ?? ""}`}>
|
|
94
|
-
<Show when={props.image}>
|
|
95
|
-
<img class={thumb} src={props.image} alt={props.title} />
|
|
96
|
-
</Show>
|
|
97
|
-
<div class={body}>
|
|
98
|
-
<span class={title}>{props.title}</span>
|
|
99
|
-
<Show when={displayedFollowers().length > 0}>
|
|
100
|
-
<span class={followers}>
|
|
101
|
-
seguida por{" "}
|
|
102
|
-
<For each={displayedFollowers()}>
|
|
103
|
-
{(follower, index) => (
|
|
104
|
-
<>
|
|
105
|
-
<span class={followerName}>{follower.name}</span>
|
|
106
|
-
{index() < displayedFollowers().length - 1 && ", "}
|
|
107
|
-
</>
|
|
108
|
-
)}
|
|
109
|
-
</For>
|
|
110
|
-
<Show when={remainingCount() > 0}>
|
|
111
|
-
{" "}
|
|
112
|
-
y <span class={followerName}>{remainingCount()} más</span>
|
|
113
|
-
</Show>
|
|
114
|
-
</span>
|
|
115
|
-
</Show>
|
|
116
|
-
<Show when={props.tags && props.tags.length > 0}>
|
|
117
|
-
<div class={tags}>
|
|
118
|
-
<For each={props.tags}>{(tag) => <Chip text={tag} variant="primary" />}</For>
|
|
119
|
-
</div>
|
|
120
|
-
</Show>
|
|
121
|
-
</div>
|
|
122
|
-
</div>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import type { JSX } from "solid-js";
|
|
2
|
-
import { Show } from "solid-js";
|
|
3
|
-
import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
|
|
4
|
-
// Styled via the S2 style() macro through viviana's own seam (../../style →
|
|
5
|
-
// src/style.ts). S2 named tokens carry the shape (mirrors Badge's size-S
|
|
6
|
-
// control: minHeight 24, 2px border, ui-sm font, pill radius); Silapse colors
|
|
7
|
-
// ride in as arbitrary `[var(--color-*)]` values.
|
|
8
|
-
import { style } from "../../style" with { type: "macro" };
|
|
9
|
-
|
|
10
|
-
export type ChipVariant = "primary" | "secondary" | "accent" | "outline";
|
|
11
|
-
|
|
12
|
-
export interface ChipProps {
|
|
13
|
-
text: string;
|
|
14
|
-
variant?: ChipVariant;
|
|
15
|
-
onClick?: () => void;
|
|
16
|
-
/**
|
|
17
|
-
* Icon to display before the text.
|
|
18
|
-
* Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
|
|
19
|
-
* Or pass a simple string for text-based icons: `icon="★"`
|
|
20
|
-
*/
|
|
21
|
-
icon?: string | (() => JSX.Element);
|
|
22
|
-
class?: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
const chip = style<{ variant: ChipVariant }>({
|
|
26
|
-
display: "inline-flex",
|
|
27
|
-
alignItems: "center",
|
|
28
|
-
justifyContent: "center",
|
|
29
|
-
columnGap: "text-to-visual",
|
|
30
|
-
minHeight: 24,
|
|
31
|
-
width: "fit",
|
|
32
|
-
paddingX: 12,
|
|
33
|
-
borderRadius: "full",
|
|
34
|
-
borderStyle: "solid",
|
|
35
|
-
borderWidth: 2,
|
|
36
|
-
font: "ui-sm",
|
|
37
|
-
borderColor: {
|
|
38
|
-
default: "transparent",
|
|
39
|
-
variant: { outline: "[var(--color-primary-600)]" },
|
|
40
|
-
},
|
|
41
|
-
backgroundColor: {
|
|
42
|
-
variant: {
|
|
43
|
-
primary: "[var(--color-primary-700)]",
|
|
44
|
-
secondary: "[var(--color-bg-100)]",
|
|
45
|
-
accent: "[var(--color-accent)]",
|
|
46
|
-
outline: "transparent",
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
color: {
|
|
50
|
-
variant: {
|
|
51
|
-
primary: "[var(--color-primary-100)]",
|
|
52
|
-
secondary: "[var(--color-primary-200)]",
|
|
53
|
-
// WCAG AA fix: accent text on the pink accent fill. The near-white
|
|
54
|
-
// `--color-bg-400` gave only 2.74:1 in light mode (fail); the darkest
|
|
55
|
-
// grey token reaches 5.24:1 light / 6.14:1 dark — the smallest existing-
|
|
56
|
-
// token change that clears the 4.5:1 floor for this ui-sm label.
|
|
57
|
-
accent: "[var(--color-grey-900)]",
|
|
58
|
-
outline: "[var(--color-primary-200)]",
|
|
59
|
-
},
|
|
60
|
-
},
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
export function Chip(props: ChipProps) {
|
|
64
|
-
const renderIcon = () => {
|
|
65
|
-
const icon = props.icon;
|
|
66
|
-
if (!icon) return null;
|
|
67
|
-
if (typeof icon === "string") return icon;
|
|
68
|
-
return icon();
|
|
69
|
-
};
|
|
70
|
-
|
|
71
|
-
return (
|
|
72
|
-
<HeadlessButton
|
|
73
|
-
class={`${chip({ variant: props.variant ?? "primary" })} ${props.class ?? ""}`}
|
|
74
|
-
onPress={() => props.onClick?.()}
|
|
75
|
-
>
|
|
76
|
-
<Show when={props.icon}>
|
|
77
|
-
<span>{renderIcon()}</span>
|
|
78
|
-
</Show>
|
|
79
|
-
{props.text}
|
|
80
|
-
</HeadlessButton>
|
|
81
|
-
);
|
|
82
|
-
}
|