@proyecto-viviana/ui 0.2.5 → 0.3.1

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

@@ -1,66 +0,0 @@
-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

@@ -1,46 +0,0 @@
-import { type JSX, Show } from 'solid-js'
-
-export type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline'
-
-export interface ChipProps {
-  text: string
-  variant?: ChipVariant
-  onClick?: () => void
-  /**
-   * Icon to display before the text.
-   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
-   * Or pass a simple string for text-based icons: `icon="★"`
-   */
-  icon?: string | (() => 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'
-
-  const renderIcon = () => {
-    const icon = props.icon
-    if (!icon) return null
-    if (typeof icon === 'string') return icon
-    return icon()
-  }
-
-  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}
-    >
-      <Show when={props.icon}>
-        <span class="mr-1.5">{renderIcon()}</span>
-      </Show>
-      <span>{props.text}</span>
-    </button>
-  )
-}

package/src/custom/conversation/index.tsx

@@ -1,105 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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 to display below the event.
-   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
-   */
-  actions?: JSX.Element | (() => 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">
-            {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
-}
-
-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/header/index.tsx

@@ -1,33 +0,0 @@
-import type { JSX } from 'solid-js'
-import { Logo, type LogoProps } from '../logo'
-
-export interface HeaderProps {
-  /** Image element to show to the left of the text logo */
-  logoImage?: JSX.Element
-  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
-  logoProps?: LogoProps | null
-  /** Custom logo element - replaces the default Logo component entirely */
-  logo?: JSX.Element
-  /** Navigation items to display on the right side */
-  children?: JSX.Element
-  /** Additional CSS classes */
-  class?: string
-}
-
-export function Header(props: HeaderProps) {
-  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null
-
-  return (
-    <header class={`vui-header ${props.class ?? ''}`}>
-      <div class="vui-header__container">
-        <div class="flex items-center gap-3">
-          {props.logoImage}
-          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
-        </div>
-        <nav class="vui-header__nav">
-          {props.children}
-        </nav>
-      </div>
-    </header>
-  )
-}

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

@@ -1,88 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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;
-  /** Invert the styles (first word gets 3D effect, second word is muted) */
-  inverted?: boolean;
-  /** 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.inverted ? "vui-logo--inverted" : ""} ${props.class ?? ""}`}>
-      <span class="vui-logo__first" data-text={props.inverted ? firstWord() : undefined}>
-        {firstWord()}
-      </span>
-      <span class="vui-logo__second" data-text={props.inverted ? undefined : secondWord()}>
-        {secondWord()}
-      </span>
-    </span>
-  );
-}

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

@@ -1,42 +0,0 @@
-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

@@ -1,29 +0,0 @@
-import { JSX, splitProps } from 'solid-js'
-
-export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** Content of the page */
-  children: JSX.Element
-  /** Add padding-top to account for fixed header (use for non-landing pages) */
-  withHeader?: boolean
-}
-
-/**
- * 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, ['class', 'withHeader'])
-
-  const classes = () => {
-    const base = 'vui-page'
-    const header = local.withHeader ? 'vui-page--with-header' : ''
-    const custom = local.class ?? ''
-    return [base, header, custom].filter(Boolean).join(' ')
-  }
-
-  return (
-    <div class={classes()} {...rest}>
-      {props.children}
-    </div>
-  )
-}

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

@@ -1,64 +0,0 @@
-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 to display below the profile.
-   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
-   */
-  actions?: JSX.Element | (() => 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">
-          {typeof props.actions === 'function' ? props.actions() : props.actions}
-        </div>
-      </Show>
-    </div>
-  )
-}