@proyecto-viviana/ui 0.4.0 → 0.5.0

package/src/custom/conversation/index.tsx

@@ -1,199 +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: "[var(--color-text-muted)]",
-  flexShrink: 0,
-});
-
-const previewMessage = style({
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-  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)]",
-  color: "[var(--color-bg-400)]",
-});
-
-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: {
-    default: "[var(--color-primary-100)]",
-    isUser: "[var(--color-bg-400)]",
-  },
-});
-
-const bubbleTime = style<{ isUser: boolean }>({
-  font: "detail-sm",
-  color: {
-    default: "[var(--color-text-muted)]",
-    isUser: "[var(--color-bg-300)]",
-  },
-});
-
-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,232 +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",
-  color: "[var(--color-accent)]",
-});
-
-const meta = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 16,
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-});
-
-const metaItem = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-});
-
-const metaIcon = style({
-  color: "[var(--color-accent)]",
-});
-
-const attendeesRow = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 8,
-});
-
-const avatars = style({
-  display: "flex",
-  alignItems: "center",
-  gap: 4,
-});
-
-const more = style({
-  font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
-});
-
-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,134 +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 }>({
-  font: "ui",
-  textDecoration: { default: "none", isActive: "underline" },
-  fontWeight: { default: "normal", isActive: "medium" },
-  color: {
-    default: "[var(--color-text-secondary)]",
-    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>
-  );
-}

package/src/custom/logo/index.tsx

@@ -1,53 +0,0 @@
-import type { JSX } from "solid-js";
-// Styled via the S2 style() macro through viviana's own seam (../../style →
-// src/style.ts). A clean two-word wordmark: the S2 title ramp sizes it; Silapse
-// colors paint it (primary + accent). `inverted` swaps which word takes accent.
-import { style } from "../../style" with { type: "macro" };
-
-export type LogoSize = "sm" | "md" | "lg" | "xl";
-
-export interface LogoProps {
-  firstWord?: string;
-  secondWord?: string;
-  size?: LogoSize;
-  inverted?: boolean;
-  class?: string;
-}
-
-const wordmark = style<{ size: LogoSize }>({
-  display: "inline-flex",
-  alignItems: "baseline",
-  columnGap: 8,
-  whiteSpace: "nowrap",
-  font: {
-    size: {
-      sm: "title-sm",
-      md: "title",
-      lg: "title-xl",
-      xl: "title-3xl",
-    },
-  },
-  fontWeight: "black",
-});
-
-const word = style<{ tone: "primary" | "accent" }>({
-  color: {
-    tone: {
-      primary: "[var(--color-primary-100)]",
-      accent: "[var(--color-accent)]",
-    },
-  },
-});
-
-export function Logo(props: LogoProps): JSX.Element {
-  const firstWord = () => props.firstWord ?? "Proyecto";
-  const secondWord = () => props.secondWord ?? "Viviana";
-  const inverted = () => props.inverted ?? false;
-
-  return (
-    <span class={`${wordmark({ size: props.size ?? "md" })} ${props.class ?? ""}`}>
-      <span class={word({ tone: inverted() ? "accent" : "primary" })}>{firstWord()}</span>
-      <span class={word({ tone: inverted() ? "primary" : "accent" })}>{secondWord()}</span>
-    </span>
-  );
-}