@proyecto-viviana/ui 0.4.1 → 0.5.0

package/src/custom/conversation/index.tsx

@@ -1,216 +0,0 @@
-import { Show, For } from "solid-js";
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A conversation preview row, message bubbles, and a thread
-// list, on the S2 spacing/radius ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface Message {
-  id: string;
-  content: string;
-  sender: "user" | "other";
-  timestamp?: string;
-}
-
-export interface ConversationPreviewProps {
-  user: {
-    name: string;
-    avatar?: string;
-    online?: boolean;
-  };
-  lastMessage?: string;
-  unreadCount?: number;
-  timestamp?: string;
-  onClick?: () => void;
-  class?: string;
-}
-
-const preview = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 12,
-  width: "full",
-  padding: 12,
-  borderRadius: "lg",
-  textAlign: "start",
-  cursor: "pointer",
-  backgroundColor: "transparent",
-  borderStyle: "none",
-});
-
-const previewBody = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 2,
-  flexGrow: 1,
-  minWidth: 0,
-});
-
-const previewTop = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  gap: 8,
-});
-
-const previewName = style({
-  font: "ui",
-  fontWeight: "bold",
-  color: "[var(--color-primary-100)]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-const previewTime = style({
-  font: "detail-sm",
-  // `--color-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`
-  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting
-  // is carried by the smaller `detail-sm` size, not a sub-AA color.
-  color: "[var(--color-text)]",
-  flexShrink: 0,
-});
-
-const previewMessage = style({
-  font: "ui-sm",
-  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails
-  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.
-  color: "[var(--color-text)]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-const unread = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexShrink: 0,
-  width: 20,
-  height: 20,
-  borderRadius: "full",
-  font: "detail-sm",
-  fontWeight: "bold",
-  backgroundColor: "[var(--color-accent)]",
-  // Text on the non-flipping pink `--color-accent` fill: the near-white
-  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`
-  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill
-  // resolution.
-  color: "[var(--color-grey-900)]",
-});
-
-export function ConversationPreview(props: ConversationPreviewProps) {
-  return (
-    <HeadlessButton
-      type="button"
-      class={`${preview} ${props.class ?? ""}`}
-      onPress={() => props.onClick?.()}
-    >
-      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size="md" />
-      <div class={previewBody}>
-        <div class={previewTop}>
-          <span class={previewName}>{props.user.name}</span>
-          <Show when={props.timestamp}>
-            <span class={previewTime}>{props.timestamp}</span>
-          </Show>
-        </div>
-        <Show when={props.lastMessage}>
-          <p class={previewMessage}>{props.lastMessage}</p>
-        </Show>
-      </div>
-      <Show when={props.unreadCount && props.unreadCount > 0}>
-        <span class={unread}>{props.unreadCount}</span>
-      </Show>
-    </HeadlessButton>
-  );
-}
-
-export interface ConversationBubbleProps {
-  content: string;
-  sender: "user" | "other";
-  timestamp?: string;
-  class?: string;
-}
-
-const bubbleRow = style<{ isUser: boolean }>({
-  display: "flex",
-  justifyContent: { default: "start", isUser: "end" },
-});
-
-const bubble = style<{ isUser: boolean }>({
-  display: "flex",
-  flexDirection: "column",
-  gap: 2,
-  maxWidth: "[70%]",
-  paddingX: 16,
-  paddingY: 8,
-  borderRadius: "lg",
-  backgroundColor: {
-    default: "[var(--color-bg-300)]",
-    isUser: "[var(--color-accent)]",
-  },
-  color: {
-    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both
-    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white
-    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1
-    // light / ~6.1:1 dark), the Chip accent-fill resolution.
-    default: "[var(--color-primary-100)]",
-    isUser: "[var(--color-grey-900)]",
-  },
-});
-
-const bubbleTime = style<{ isUser: boolean }>({
-  font: "detail-sm",
-  color: {
-    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes
-    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp
-    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →
-    // `--color-grey-900` (matching the bubble body).
-    default: "[var(--color-text)]",
-    isUser: "[var(--color-grey-900)]",
-  },
-});
-
-export function ConversationBubble(props: ConversationBubbleProps) {
-  const isUser = () => props.sender === "user";
-
-  return (
-    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? ""}`}>
-      <div class={bubble({ isUser: isUser() })}>
-        <p>{props.content}</p>
-        <Show when={props.timestamp}>
-          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>
-        </Show>
-      </div>
-    </div>
-  );
-}
-
-export interface ConversationProps {
-  messages: Message[];
-  class?: string;
-}
-
-const thread = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 8,
-  padding: 16,
-});
-
-export function Conversation(props: ConversationProps) {
-  return (
-    <div class={`${thread} ${props.class ?? ""}`}>
-      <For each={props.messages}>
-        {(message) => (
-          <ConversationBubble
-            content={message.content}
-            sender={message.sender}
-            timestamp={message.timestamp}
-          />
-        )}
-      </For>
-    </div>
-  );
-}

package/src/custom/event-card/index.tsx

@@ -1,253 +0,0 @@
-import type { JSX } from "solid-js";
-import { Show, For } from "solid-js";
-import { Avatar } from "@proyecto-viviana/solid-spectrum";
-import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). An event summary card (S2 Card shape: preview + content +
-// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface EventCardProps {
-  title: string;
-  image?: string;
-  date?: string;
-  author?: string;
-  authorAvatar?: string;
-  attendees?: { avatar?: string; name: string }[];
-  attendeeCount?: number;
-  decorationImage?: string;
-  /**
-   * Actions to display below the event.
-   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
-   */
-  actions?: JSX.Element | (() => JSX.Element);
-  class?: string;
-}
-
-const card = style({
-  position: "relative",
-  display: "flex",
-  flexDirection: "column",
-  overflow: "hidden",
-  borderRadius: "xl",
-  backgroundColor: "[var(--color-bg-200)]",
-  boxShadow: "elevated",
-});
-
-const decoration = style({
-  position: "absolute",
-  top: 8,
-  insetEnd: 8,
-  width: 32,
-  height: 32,
-  objectFit: "contain",
-});
-
-const preview = style({
-  width: "full",
-  aspectRatio: "16/9",
-  objectFit: "cover",
-});
-
-const body = style({
-  display: "flex",
-  flexDirection: "column",
-  gap: 12,
-  padding: 16,
-});
-
-const title = style({
-  font: "heading",
-  // WCAG AA fix: the title sits on the `--color-bg-200` card. `--color-accent`
-  // (#df5c9a) is a fixed pink in BOTH themes, so it does not flip against a card
-  // that is dark-grey in dark mode and light-blue in light mode — it read 4.48:1
-  // dark / 1.89:1 light. `font: heading` renders 22px / weight 800, which is WCAG
-  // large text via the BOLD path (≥18.66px && ≥700), NOT because it is ≥24px — so
-  // the 3:1 large-text floor applies. `--color-accent-500` is the smallest ramp
-  // step that flips with the theme (bright pink dark / deep magenta light) AND
-  // clears 3:1 both ways (3.87:1 dark / 4.91:1 light), keeping the brand accent.
-  color: "[var(--color-accent-500)]",
-});
-
-const meta = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 16,
-  font: "ui-sm",
-  // WCAG AA fix: the meta text is small (`ui-sm`), so the 4.5:1 normal-text
-  // floor applies. `--color-text-secondary` read only 3.84:1 on the light
-  // `--color-bg-200` card; `--color-text` flips and clears 4.5:1 both ways
-  // (15.33:1 dark / 7.53:1 light). Secondary de-emphasis rides on the smaller
-  // `ui-sm` size rather than a sub-AA color.
-  color: "[var(--color-text)]",
-});
-
-const metaItem = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-});
-
-const metaIcon = style({
-  // WCAG AA fix: the meta glyphs (@ / ⏱) are small (inherit `ui-sm`), so the
-  // 4.5:1 floor applies. `--color-accent` fails on the card (4.48:1 dark /
-  // 1.89:1 light) and no pink ramp step clears 4.5:1 on both the dark-grey and
-  // light-blue card, so the glyphs take the flipping `--color-text` like the
-  // meta text they prefix.
-  color: "[var(--color-text)]",
-});
-
-const attendeesRow = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-});
-
-const avatars = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-});
-
-const more = style({
-  font: "ui-sm",
-  // WCAG AA fix: the "+N más" overflow count is small text on the same
-  // `--color-bg-200` card as the meta, so it shares the same 3.84:1-light
-  // failure and the same `--color-text` fix.
-  color: "[var(--color-text)]",
-});
-
-const actionRow = style({
-  display: "flex",
-  gap: 8,
-});
-
-export function EventCard(props: EventCardProps) {
-  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
-  const remainingCount = () => {
-    const total = props.attendeeCount ?? props.attendees?.length ?? 0;
-    const displayed = displayedAttendees().length;
-    return total - displayed;
-  };
-
-  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>
-  );
-}
-
-export interface EventListItemProps {
-  title: string;
-  image?: string;
-  subtitle?: string;
-  onClick?: () => void;
-  class?: string;
-}
-
-const listItem = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 12,
-  width: "full",
-  padding: 8,
-  borderRadius: "lg",
-  textAlign: "start",
-  cursor: "pointer",
-  backgroundColor: "transparent",
-  borderStyle: "none",
-});
-
-const thumb = style({
-  width: 48,
-  height: 48,
-  flexShrink: 0,
-  borderRadius: "default",
-  objectFit: "cover",
-});
-
-const listBody = style({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1,
-  minWidth: 0,
-});
-
-const listTitle = style({
-  font: "ui",
-  fontWeight: "medium",
-  color: "[var(--color-primary-100)]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-const listSubtitle = style({
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-export function EventListItem(props: EventListItemProps) {
-  return (
-    <HeadlessButton 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>
-    </HeadlessButton>
-  );
-}

package/src/custom/header/index.tsx

@@ -1,64 +0,0 @@
-import type { JSX } from "solid-js";
-import { Logo, type LogoProps } from "../logo";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A top app-bar: centered max-width row with a logo group and
-// a nav slot, on the S2 ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface HeaderProps {
-  logoImage?: JSX.Element;
-  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
-  logoProps?: LogoProps | null;
-  logo?: JSX.Element;
-  children?: JSX.Element;
-  class?: string;
-}
-
-const bar = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: "full",
-  backgroundColor: "[var(--color-header-bg)]",
-  borderBottomWidth: 1,
-  borderStyle: "solid",
-  borderColor: "[var(--color-border)]",
-});
-
-const inner = style({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  width: "full",
-  maxWidth: 1152,
-  paddingX: 24,
-  paddingY: 12,
-});
-
-const logoGroup = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 12,
-});
-
-const nav = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 16,
-});
-
-export function Header(props: HeaderProps) {
-  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null;
-
-  return (
-    <header class={`${bar} ${props.class ?? ""}`}>
-      <div class={inner}>
-        <div class={logoGroup}>
-          {props.logoImage}
-          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
-        </div>
-        <nav class={nav}>{props.children}</nav>
-      </div>
-    </header>
-  );
-}

package/src/custom/lateral-nav/index.tsx

@@ -1,143 +0,0 @@
-import type { JSX } from "solid-js";
-import { Show, For } from "solid-js";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A sidebar nav (sections with an accent rail + links) on the
-// S2 spacing/type ramps in Silapse colors.
-import { style } from "../../style" with { type: "macro" };
-
-export interface NavItemProps {
-  title: string;
-  children?: JSX.Element;
-  class?: string;
-}
-
-const item = style({
-  display: "flex",
-  alignItems: "center",
-  font: "heading-sm",
-  color: "[var(--color-primary-200)]",
-});
-
-export function NavItem(props: NavItemProps) {
-  return (
-    <li class={`${item} ${props.class ?? ""}`}>
-      <span>{props.title}</span>
-      {props.children}
-    </li>
-  );
-}
-
-export interface NavLinkProps {
-  href: string;
-  children: JSX.Element;
-  active?: boolean;
-  class?: string;
-}
-
-const link = style<{ isActive: boolean }>({
-  // A ≥24px hit target (WCAG 2.5.8): the link is a full-width flex row, not a
-  // bare inline anchor (which rendered ~15px tall on the `ui` ramp).
-  display: "flex",
-  alignItems: "center",
-  minHeight: 32,
-  font: "ui",
-  textDecoration: { default: "none", isActive: "underline" },
-  fontWeight: { default: "normal", isActive: "medium" },
-  // `color` MUST stay after `font`: the S2 style() `font` shorthand emits a
-  // default text color that wins on source order otherwise. The resting link
-  // uses the flipping `--color-text` (AA on the light `bg-200` panel); the active
-  // link is set apart by its underline + medium weight + `--color-primary-300`.
-  color: {
-    default: "[var(--color-text)]",
-    isActive: "[var(--color-primary-300)]",
-  },
-});
-
-export function NavLink(props: NavLinkProps) {
-  return (
-    <a
-      href={props.href}
-      class={`${link({ isActive: props.active ?? false })} ${props.class ?? ""}`}
-    >
-      {props.children}
-    </a>
-  );
-}
-
-export interface NavSectionProps {
-  title: string;
-  links?: { href: string; label: string; active?: boolean }[];
-  children?: JSX.Element;
-  class?: string;
-}
-
-const sectionRow = style({
-  display: "flex",
-});
-
-const accentRail = style({
-  flexShrink: 0,
-  width: 4,
-  height: 20,
-  backgroundColor: "[var(--color-accent-300)]",
-});
-
-const list = style({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: 1,
-  gap: 4,
-  paddingStart: 16,
-});
-
-export function NavSection(props: NavSectionProps) {
-  return (
-    <div class={props.class ?? ""}>
-      <NavItem title={props.title} />
-      <div class={sectionRow}>
-        <div class={accentRail} />
-        <ul class={list}>
-          <Show when={props.links}>
-            <For each={props.links}>
-              {(navLink) => (
-                <li>
-                  <NavLink href={navLink.href} active={navLink.active}>
-                    {navLink.label}
-                  </NavLink>
-                </li>
-              )}
-            </For>
-          </Show>
-          {props.children}
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-export interface LateralNavProps {
-  transparent?: boolean;
-  children?: JSX.Element;
-  class?: string;
-}
-
-const nav = style<{ isTransparent: boolean }>({
-  width: 300,
-  margin: 0,
-  padding: 12,
-  borderEndWidth: 1,
-  borderStyle: "solid",
-  borderColor: "[var(--color-primary-600)]",
-  backgroundColor: {
-    default: "[var(--color-bg-200)]",
-    isTransparent: "transparent",
-  },
-});
-
-export function LateralNav(props: LateralNavProps) {
-  return (
-    <div class={`${nav({ isTransparent: props.transparent ?? false })} ${props.class ?? ""}`}>
-      {props.children}
-    </div>
-  );
-}