@proyecto-viviana/ui 0.1.0 → 0.1.2

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

@@ -0,0 +1,66 @@
+import { Show, For } from 'solid-js'
+import { Chip } from '../chip'
+
+export interface CalendarCardProps {
+  title: string
+  image?: string
+  tags?: string[]
+  followers?: { name: string }[]
+  followerCount?: number
+  class?: string
+}
+
+export function CalendarCard(props: CalendarCardProps) {
+  const displayedFollowers = () => props.followers?.slice(0, 2) ?? []
+  const remainingCount = () => {
+    const total = props.followerCount ?? props.followers?.length ?? 0
+    const displayed = displayedFollowers().length
+    return total - displayed
+  }
+
+  return (
+    <div class={`flex h-[100px] w-full max-w-[500px] items-center rounded-xl border border-primary-600 border-b-accent-500 bg-bg-300 p-2 ${props.class ?? ''}`}>
+      <Show when={props.image}>
+        <div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200">
+          <img src={props.image} alt={props.title} class="h-full w-full object-cover" />
+        </div>
+      </Show>
+      <div class="relative h-full flex-1 flex-col pl-3">
+        <Show when={props.tags && props.tags.length > 0}>
+          <div class="absolute bottom-[-20px] h-[30px] w-full">
+            <div class="flex h-full w-full flex-1 justify-end gap-1">
+              <For each={props.tags}>
+                {(tag) => <Chip text={tag} variant="primary" />}
+              </For>
+            </div>
+          </div>
+        </Show>
+        <div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2">
+          <div class="flex flex-1">
+            <span class="text-lg font-semibold text-white drop-shadow-sm">
+              {props.title}
+            </span>
+          </div>
+          <Show when={displayedFollowers().length > 0}>
+            <div class="flex flex-1">
+              <span class="text-base font-normal text-primary-500">
+                seguida por{' '}
+                <For each={displayedFollowers()}>
+                  {(follower, index) => (
+                    <>
+                      <span class="font-semibold text-accent-200">{follower.name}</span>
+                      {index() < displayedFollowers().length - 1 && ', '}
+                    </>
+                  )}
+                </For>
+                <Show when={remainingCount() > 0}>
+                  {' '}y <span class="font-semibold text-accent-200">{remainingCount()} más</span>
+                </Show>
+              </span>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/custom/chip/index.tsx

@@ -0,0 +1,32 @@
+import type { JSX } from 'solid-js'
+
+export type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline'
+
+export interface ChipProps {
+  text: string
+  variant?: ChipVariant
+  onClick?: () => void
+  icon?: JSX.Element
+  class?: string
+}
+
+const variantStyles: Record<ChipVariant, string> = {
+  primary: 'bg-primary-700 text-primary-200 shadow-primary-chip',
+  secondary: 'bg-primary-600 text-primary-100 hover:bg-primary-500',
+  accent: 'bg-accent text-white',
+  outline: 'bg-transparent border border-primary-500 text-primary-300',
+}
+
+export function Chip(props: ChipProps) {
+  const variant = () => props.variant ?? 'primary'
+
+  return (
+    <button
+      class={`flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles[variant()]} ${props.class ?? ''}`}
+      onClick={props.onClick}
+    >
+      {props.icon && <span class="mr-1.5">{props.icon}</span>}
+      <span>{props.text}</span>
+    </button>
+  )
+}

package/src/custom/conversation/index.tsx

@@ -0,0 +1,105 @@
+import { Show, For } from 'solid-js'
+import { Avatar } from '../../avatar'
+
+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
+}
+
+export function ConversationPreview(props: ConversationPreviewProps) {
+  return (
+    <button
+      class={`flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ''}`}
+      onClick={props.onClick}
+    >
+      <Avatar
+        src={props.user.avatar}
+        alt={props.user.name}
+        online={props.user.online}
+        size="md"
+      />
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center justify-between">
+          <span class="font-semibold text-primary-100 truncate">{props.user.name}</span>
+          <Show when={props.timestamp}>
+            <span class="text-xs text-primary-500">{props.timestamp}</span>
+          </Show>
+        </div>
+        <Show when={props.lastMessage}>
+          <p class="text-sm text-primary-400 truncate">{props.lastMessage}</p>
+        </Show>
+      </div>
+      <Show when={props.unreadCount && props.unreadCount > 0}>
+        <span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">
+          {props.unreadCount}
+        </span>
+      </Show>
+    </button>
+  )
+}
+
+export interface ConversationBubbleProps {
+  content: string
+  sender: 'user' | 'other'
+  timestamp?: string
+  class?: string
+}
+
+export function ConversationBubble(props: ConversationBubbleProps) {
+  const isUser = () => props.sender === 'user'
+
+  return (
+    <div class={`flex ${isUser() ? 'justify-end' : 'justify-start'} ${props.class ?? ''}`}>
+      <div
+        class={`max-w-[70%] rounded-2xl px-4 py-2 ${
+          isUser()
+            ? 'bg-accent text-white rounded-br-sm'
+            : 'bg-bg-300 text-primary-100 rounded-bl-sm'
+        }`}
+      >
+        <p>{props.content}</p>
+        <Show when={props.timestamp}>
+          <span class={`text-xs ${isUser() ? 'text-white/70' : 'text-primary-500'}`}>
+            {props.timestamp}
+          </span>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export interface ConversationProps {
+  messages: Message[]
+  class?: string
+}
+
+export function Conversation(props: ConversationProps) {
+  return (
+    <div class={`flex flex-col gap-2 p-4 ${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

@@ -0,0 +1,126 @@
+import type { JSX } from 'solid-js'
+import { Show, For } from 'solid-js'
+import { Avatar } from '../../avatar'
+
+export interface EventCardProps {
+  title: string
+  image?: string
+  date?: string
+  author?: string
+  authorAvatar?: string
+  attendees?: { avatar?: string; name: string }[]
+  attendeeCount?: number
+  decorationImage?: string
+  actions?: JSX.Element
+  class?: string
+}
+
+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={`relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ''}`}>
+      {/* Decoration image (fire gif, etc) */}
+      <Show when={props.decorationImage}>
+        <div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1">
+          <img src={props.decorationImage} alt="" class="w-8 h-8 object-contain" />
+          <img src={props.decorationImage} alt="" class="w-6 h-6 object-contain ml-2" />
+          <img src={props.decorationImage} alt="" class="w-5 h-5 object-contain" />
+        </div>
+      </Show>
+
+      <Show when={props.image}>
+        <div class="relative h-32 w-full">
+          <img
+            src={props.image}
+            alt={props.title}
+            class="w-full h-full object-cover"
+          />
+          <div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent" />
+        </div>
+      </Show>
+
+      <div class="p-4 pt-2">
+        <h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">
+          {props.title}
+        </h3>
+
+        <Show when={props.date || props.author}>
+          <div class="flex items-center gap-4 mt-3 text-sm text-primary-300">
+            <Show when={props.author}>
+              <div class="flex items-center gap-1.5">
+                <span class="text-accent">@</span>
+                <span>{props.author}</span>
+              </div>
+            </Show>
+            <Show when={props.date}>
+              <div class="flex items-center gap-1.5">
+                <span class="text-accent">⏱</span>
+                <span>{props.date}</span>
+              </div>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={displayedAttendees().length > 0}>
+          <div class="flex items-center mt-3">
+            <div class="flex -space-x-2">
+              <For each={displayedAttendees()}>
+                {(attendee) => (
+                  <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />
+                )}
+              </For>
+            </div>
+            <Show when={remainingCount() > 0}>
+              <span class="ml-2 text-sm text-primary-300">
+                +{remainingCount()} más
+              </span>
+            </Show>
+          </div>
+        </Show>
+
+        <Show when={props.actions}>
+          <div class="mt-4 flex gap-2">{props.actions}</div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export interface EventListItemProps {
+  title: string
+  image?: string
+  subtitle?: string
+  onClick?: () => void
+  class?: string
+}
+
+export function EventListItem(props: EventListItemProps) {
+  return (
+    <button
+      class={`flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ''}`}
+      onClick={props.onClick}
+    >
+      <Show when={props.image}>
+        <div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+          <img
+            src={props.image}
+            alt={props.title}
+            class="w-full h-full object-cover"
+          />
+        </div>
+      </Show>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-medium text-primary-100 truncate">{props.title}</h4>
+        <Show when={props.subtitle}>
+          <p class="text-sm text-primary-300 truncate">{props.subtitle}</p>
+        </Show>
+      </div>
+    </button>
+  )
+}

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

@@ -0,0 +1,88 @@
+import type { JSX } from 'solid-js'
+import { Show, For } from 'solid-js'
+
+export interface NavItemProps {
+  title: string
+  children?: JSX.Element
+  class?: string
+}
+
+export function NavItem(props: NavItemProps) {
+  return (
+    <li class={`flex items-center ${props.class ?? ''}`}>
+      <span class="text-lg font-bold text-primary-200">{props.title}</span>
+      {props.children}
+    </li>
+  )
+}
+
+export interface NavLinkProps {
+  href: string
+  children: JSX.Element
+  active?: boolean
+  class?: string
+}
+
+export function NavLink(props: NavLinkProps) {
+  const activeStyles = 'font-medium text-primary-300 underline underline-offset-4'
+  const inactiveStyles = 'font-normal text-gray-200 underline-offset-4 hover:text-gray-100 hover:underline'
+
+  return (
+    <a
+      href={props.href}
+      class={`${props.active ? activeStyles : inactiveStyles} ${props.class ?? ''}`}
+    >
+      {props.children}
+    </a>
+  )
+}
+
+export interface NavSectionProps {
+  title: string
+  links?: { href: string; label: string; active?: boolean }[]
+  children?: JSX.Element
+  class?: string
+}
+
+export function NavSection(props: NavSectionProps) {
+  return (
+    <div class={props.class ?? ''}>
+      <NavItem title={props.title} />
+      <div class="flex h-full">
+        <div class="h-5 w-1 bg-accent-300" />
+        <ul class="flex h-full flex-1 flex-col gap-1 pl-4">
+          <Show when={props.links}>
+            <For each={props.links}>
+              {(link) => (
+                <li>
+                  <NavLink href={link.href} active={link.active}>
+                    {link.label}
+                  </NavLink>
+                </li>
+              )}
+            </For>
+          </Show>
+          {props.children}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export interface LateralNavProps {
+  transparent?: boolean
+  children?: JSX.Element
+  class?: string
+}
+
+export function LateralNav(props: LateralNavProps) {
+  const bgColor = () => (props.transparent ? '' : 'bg-bg-200')
+
+  return (
+    <div
+      class={`hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ''}`}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/custom/logo/index.tsx

@@ -0,0 +1,54 @@
+import { JSX } from "solid-js";
+
+export type LogoSize = "sm" | "md" | "lg" | "xl";
+
+export interface LogoProps {
+  /** First word (light weight, muted color) */
+  firstWord?: string;
+  /** Second word (bold, with 3D effect) */
+  secondWord?: string;
+  /** Size variant of the logo */
+  size?: LogoSize;
+  /** Additional CSS classes */
+  class?: string;
+}
+
+/**
+ * Two-word logo with retro synthwave 3D effect.
+ * First word is light/muted, second word has bold styling with pink 3D shadow.
+ *
+ * @example
+ * // Default usage
+ * <Logo />
+ *
+ * @example
+ * // Custom text
+ * <Logo firstWord="My" secondWord="Brand" size="lg" />
+ */
+export function Logo(props: LogoProps): JSX.Element {
+  const sizeClass = () => {
+    switch (props.size) {
+      case "sm":
+        return "vui-logo--sm";
+      case "lg":
+        return "vui-logo--lg";
+      case "xl":
+        return "vui-logo--xl";
+      case "md":
+      default:
+        return "vui-logo--md";
+    }
+  };
+
+  const firstWord = () => props.firstWord ?? "Proyecto";
+  const secondWord = () => props.secondWord ?? "Viviana";
+
+  return (
+    <span class={`vui-logo ${sizeClass()} ${props.class ?? ""}`}>
+      <span class="vui-logo__first">{firstWord()}</span>
+      <span class="vui-logo__second" data-text={secondWord()}>
+        {secondWord()}
+      </span>
+    </span>
+  );
+}

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

@@ -0,0 +1,42 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+export interface NavHeaderProps {
+  logo?: string
+  logoAlt?: string
+  logoText?: string
+  children?: JSX.Element
+  menuIcon?: JSX.Element
+  onMenuClick?: () => void
+  class?: string
+}
+
+export function NavHeader(props: NavHeaderProps) {
+  return (
+    <nav class={`flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ''}`}>
+      <div class="pl-1 md:pl-8 flex items-center">
+        <Show when={props.logo} fallback={
+          <Show when={props.logoText}>
+            <span class="text-[34px] font-light text-primary-700 flex items-center">
+              {props.logoText}
+            </span>
+          </Show>
+        }>
+          <img src={props.logo} alt={props.logoAlt ?? 'Logo'} class="h-[42px] w-auto" />
+        </Show>
+      </div>
+
+      <div class="flex-1 flex justify-end items-center pr-1 md:pr-8">
+        {props.children}
+        <Show when={props.menuIcon}>
+          <button
+            class="md:hidden flex items-center justify-center"
+            onClick={props.onMenuClick}
+          >
+            {props.menuIcon}
+          </button>
+        </Show>
+      </div>
+    </nav>
+  )
+}

package/src/custom/page-layout/index.tsx

@@ -0,0 +1,20 @@
+import { JSX, splitProps } from 'solid-js'
+
+export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Content of the page */
+  children: JSX.Element
+}
+
+/**
+ * PageLayout provides consistent page structure with proper background and font styling.
+ * Use this as the root wrapper for all pages.
+ */
+export function PageLayout(props: PageLayoutProps) {
+  const [local, rest] = splitProps(props, ['children', 'class'])
+
+  return (
+    <div class={`vui-page ${local.class ?? ''}`} {...rest}>
+      {local.children}
+    </div>
+  )
+}

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

@@ -0,0 +1,58 @@
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Avatar } from '../../avatar'
+
+export interface ProfileCardProps {
+  username: string
+  avatar?: string
+  bio?: string
+  followers?: number
+  following?: number
+  actions?: JSX.Element
+  class?: string
+}
+
+export function ProfileCard(props: ProfileCardProps) {
+  const formatNumber = (num: number) => {
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
+    return num.toString()
+  }
+
+  return (
+    <div class={`bg-bg-200 rounded-xl p-4 ${props.class ?? ''}`}>
+      <div class="flex items-start gap-4">
+        <Avatar src={props.avatar} alt={props.username} size="lg" />
+        <div class="flex-1 min-w-0">
+          <h3 class="font-semibold text-primary-100 text-lg truncate">
+            {props.username}
+          </h3>
+          <Show when={props.bio}>
+            <p class="text-primary-300 text-sm mt-1 line-clamp-2">{props.bio}</p>
+          </Show>
+          <div class="flex gap-4 mt-2 text-sm">
+            <Show when={props.followers !== undefined}>
+              <span class="text-primary-300">
+                <span class="font-semibold text-primary-100">
+                  {formatNumber(props.followers!)}
+                </span>{' '}
+                seguidores
+              </span>
+            </Show>
+            <Show when={props.following !== undefined}>
+              <span class="text-primary-300">
+                <span class="font-semibold text-primary-100">
+                  {formatNumber(props.following!)}
+                </span>{' '}
+                siguiendo
+              </span>
+            </Show>
+          </div>
+        </div>
+      </div>
+      <Show when={props.actions}>
+        <div class="mt-4 flex gap-2">{props.actions}</div>
+      </Show>
+    </div>
+  )
+}

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

@@ -0,0 +1,59 @@
+import type { JSX } from 'solid-js'
+
+export type ProjectCardSize = 'sm' | 'md' | 'lg'
+
+export interface ProjectCardProps {
+  /** Project name shown in tooltip on hover */
+  name: string
+  /** Image source for the project logo */
+  imageSrc: string
+  /** Alt text for the image */
+  imageAlt?: string
+  /** Optional link to the project */
+  href?: string
+  /** Size of the card */
+  size?: ProjectCardSize
+  /** Whether the project is inactive/greyed out */
+  inactive?: boolean
+  /** Additional CSS class */
+  class?: string
+}
+
+/**
+ * Project card with logo and hover tooltip.
+ * Used for showcasing ecosystem projects.
+ */
+export function ProjectCard(props: ProjectCardProps): JSX.Element {
+  const size = () => props.size ?? 'sm'
+  const inactive = () => props.inactive ?? false
+
+  const cardContent = () => (
+    <>
+      <div class="vui-project-card__tooltip">
+        <span>{props.name}</span>
+      </div>
+      <img
+        class="vui-project-card__image"
+        src={props.imageSrc}
+        alt={props.imageAlt ?? props.name}
+      />
+    </>
+  )
+
+  const cardClasses = () =>
+    `vui-project-card vui-project-card--${size()} ${inactive() ? 'vui-project-card--inactive' : ''} ${props.class ?? ''}`
+
+  if (props.href) {
+    return (
+      <a href={props.href} target="_blank" rel="noopener noreferrer" class={cardClasses()}>
+        {cardContent()}
+      </a>
+    )
+  }
+
+  return (
+    <div class={cardClasses()}>
+      {cardContent()}
+    </div>
+  )
+}