@proyecto-viviana/ui 0.2.5 → 0.3.1

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

@@ -1,59 +0,0 @@
-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>
-  )
-}

package/src/custom/timeline-item/index.tsx

@@ -1,105 +0,0 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-import { Avatar } from '../../avatar'
-
-export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom'
-
-export interface TimelineItemProps {
-  type?: TimelineEventType
-  /**
-   * Icon to display between the two avatars.
-   * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
-   * Or pass a simple string for text-based icons: `icon="👋"`
-   */
-  icon?: string | (() => JSX.Element)
-  leftUser?: {
-    name: string
-    avatar?: string
-  }
-  rightUser?: {
-    name: string
-    avatar?: string
-  }
-  /**
-   * Custom message content.
-   * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
-   * Or pass a simple string.
-   */
-  message?: string | (() => JSX.Element)
-  class?: string
-}
-
-const eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {
-  follow: (left, right) => (
-    <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' ha empezado a seguir a '}
-      <span class="font-semibold text-accent-200">{right}</span>
-    </>
-  ),
-  like: (left, right) => (
-    <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' le ha dado like a '}
-      <span class="font-semibold text-accent-200">{right}</span>
-    </>
-  ),
-  comment: (left, right) => (
-    <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' ha comentado en '}
-      <span class="font-semibold text-accent-200">{right}</span>
-    </>
-  ),
-  event: (left, right) => (
-    <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' asistirá al evento de '}
-      <span class="font-semibold text-accent-200">{right}</span>
-    </>
-  ),
-  custom: () => null,
-}
-
-export function TimelineItem(props: TimelineItemProps) {
-  const type = () => props.type ?? 'follow'
-  const leftName = () => props.leftUser?.name ?? ''
-  const rightName = () => props.rightUser?.name ?? ''
-
-  const renderIcon = () => {
-    const icon = props.icon
-    if (!icon) return null
-    if (typeof icon === 'string') return icon
-    return icon()
-  }
-
-  const renderMessage = () => {
-    const message = props.message
-    if (!message) return null
-    if (typeof message === 'string') return message
-    return message()
-  }
-
-  return (
-    <div class={`inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ''}`}>
-      <div class="flex items-center justify-around gap-3">
-        <Show when={props.leftUser}>
-          <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
-        </Show>
-        <Show when={props.icon}>
-          {renderIcon()}
-        </Show>
-        <Show when={props.rightUser}>
-          <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
-        </Show>
-      </div>
-      <div class="flex items-center justify-center gap-3 text-center">
-        <span class="font-light text-primary-300">
-          <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
-            {renderMessage()}
-          </Show>
-        </span>
-      </div>
-    </div>
-  )
-}

package/src/dialog/Dialog.tsx

@@ -1,260 +0,0 @@
-/**
- * Dialog component for proyecto-viviana-ui
- *
- * Styled dialog component with overlay and backdrop.
- * Follows Spectrum 2 design patterns.
- */
-
-import { type JSX, splitProps, Show, createSignal, createContext, useContext, createUniqueId, onMount, onCleanup, createEffect } from 'solid-js'
-import { Portal } from 'solid-js/web'
-import { createInteractOutside } from '@proyecto-viviana/solidaria'
-
-// ============================================
-// TYPES
-// ============================================
-
-export type DialogSize = 'sm' | 'md' | 'lg' | 'fullscreen'
-
-export interface DialogProps {
-  /** The size of the dialog. */
-  size?: DialogSize
-  /** Whether the dialog can be dismissed by clicking the X button. */
-  isDismissable?: boolean
-  /** Additional CSS class name. */
-  class?: string
-  /** The title of the dialog. */
-  title?: string
-  /** The children content. */
-  children: JSX.Element
-  /** Callback when dialog should close */
-  onClose?: () => void
-  /** ARIA role - defaults to 'dialog' */
-  role?: 'dialog' | 'alertdialog'
-  /** ARIA label */
-  'aria-label'?: string
-  /** ARIA labelledby */
-  'aria-labelledby'?: string
-}
-
-export interface DialogTriggerProps {
-  /** Button to trigger the dialog. */
-  trigger: JSX.Element
-  /** The dialog content - receives close function. */
-  content: (close: () => void) => JSX.Element
-  /** Whether the dialog is controlled. */
-  isOpen?: boolean
-  /** Callback when open state changes. */
-  onOpenChange?: (isOpen: boolean) => void
-  /** Whether clicking outside the dialog closes it. Defaults to true. */
-  isDismissable?: boolean
-  /** Whether pressing Escape closes the dialog. Defaults to true. */
-  isKeyboardDismissDisabled?: boolean
-}
-
-// ============================================
-// CONTEXT
-// ============================================
-
-interface DialogContextValue {
-  close: () => void
-}
-
-const DialogContext = createContext<DialogContextValue | null>(null)
-
-export function useDialogContext(): DialogContextValue | null {
-  return useContext(DialogContext)
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles: Record<DialogSize, string> = {
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-2xl',
-  fullscreen: 'max-w-full w-full h-full',
-}
-
-// ============================================
-// DIALOG COMPONENT
-// ============================================
-
-/**
- * A dialog is an overlay shown above other content in an application.
- */
-export function Dialog(props: DialogProps): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'size',
-    'isDismissable',
-    'class',
-    'title',
-    'onClose',
-    'role',
-    'aria-label',
-    'aria-labelledby',
-  ])
-
-  const size = local.size ?? 'md'
-  const customClass = local.class ?? ''
-  const role = local.role ?? 'dialog'
-
-  // Generate a unique ID for the title if one is present
-  const titleId = createUniqueId()
-  const ariaLabelledBy = local['aria-labelledby'] ?? (local.title ? titleId : undefined)
-
-  const close = () => local.onClose?.()
-
-  const baseClass = 'bg-bg-300 rounded-lg shadow-xl border border-primary-700'
-  const sizeClass = sizeStyles[size]
-  const padding = 'p-6'
-  const className = [baseClass, sizeClass, padding, customClass].filter(Boolean).join(' ')
-
-  return (
-    <DialogContext.Provider value={{ close }}>
-      <div
-        role={role}
-        tabIndex={-1}
-        aria-label={local['aria-label']}
-        aria-labelledby={ariaLabelledBy}
-        class={className}
-        {...rest}
-      >
-        <Show when={local.title}>
-          <div class="flex items-center justify-between mb-4">
-            <h2 id={titleId} class="text-xl font-semibold text-primary-100">
-              {local.title}
-            </h2>
-            <Show when={local.isDismissable}>
-              <button
-                onClick={close}
-                class="text-primary-400 hover:text-primary-200 transition-colors"
-                aria-label="Close dialog"
-              >
-                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </Show>
-          </div>
-        </Show>
-        <div class="text-primary-200">
-          {props.children}
-        </div>
-      </div>
-    </DialogContext.Provider>
-  )
-}
-
-// ============================================
-// DIALOG TRIGGER COMPONENT
-// ============================================
-
-/**
- * DialogTrigger wraps a trigger button and dialog content.
- * Handles opening/closing the dialog with overlay and backdrop.
- */
-export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
-  const [isOpen, setIsOpen] = createSignal(props.isOpen ?? false)
-  let dialogRef: HTMLDivElement | undefined
-
-  const open = () => {
-    setIsOpen(true)
-    props.onOpenChange?.(true)
-  }
-
-  const close = () => {
-    setIsOpen(false)
-    props.onOpenChange?.(false)
-  }
-
-  // Handle controlled state
-  const isOpenControlled = () => props.isOpen !== undefined ? props.isOpen : isOpen()
-
-  // Whether dismissable (defaults to true)
-  const isDismissable = () => props.isDismissable !== false
-
-  // Click outside to close
-  createInteractOutside({
-    ref: () => dialogRef ?? null,
-    onInteractOutside: () => {
-      if (isOpenControlled() && isDismissable()) {
-        close()
-      }
-    },
-    isDisabled: !isOpenControlled() || !isDismissable(),
-  })
-
-  // Escape key to close
-  onMount(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && isOpenControlled() && !props.isKeyboardDismissDisabled) {
-        e.preventDefault()
-        e.stopPropagation()
-        close()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    onCleanup(() => document.removeEventListener('keydown', handleKeyDown))
-  })
-
-  // Prevent background scroll when dialog is open
-  createEffect(() => {
-    if (!isOpenControlled()) return
-
-    const prevOverflow = document.documentElement.style.overflow
-    document.documentElement.style.overflow = 'hidden'
-
-    onCleanup(() => {
-      document.documentElement.style.overflow = prevOverflow
-    })
-  })
-
-  return (
-    <>
-      <div onClick={open}>
-        {props.trigger}
-      </div>
-
-      <Show when={isOpenControlled()}>
-        <Portal>
-          {/* Backdrop */}
-          <div
-            class="fixed inset-0 bg-black/50 backdrop-blur-sm z-40"
-            aria-hidden="true"
-          />
-
-          {/* Dialog container - pointer-events-none so clicks pass through to backdrop detection */}
-          <div class="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
-            {/* Dialog wrapper - pointer-events-auto to capture clicks on the dialog itself */}
-            <div ref={dialogRef} class="pointer-events-auto">
-              {props.content(close)}
-            </div>
-          </div>
-        </Portal>
-      </Show>
-    </>
-  )
-}
-
-// ============================================
-// DIALOG FOOTER COMPONENT
-// ============================================
-
-export interface DialogFooterProps {
-  /** Footer content, typically buttons. */
-  children: JSX.Element
-  /** Additional CSS class. */
-  class?: string
-}
-
-/**
- * Footer section for dialog actions.
- */
-export function DialogFooter(props: DialogFooterProps): JSX.Element {
-  return (
-    <div class={`flex gap-3 justify-end mt-6 pt-4 border-t border-primary-700 ${props.class ?? ''}`}>
-      {props.children}
-    </div>
-  )
-}

package/src/dialog/index.tsx

@@ -1,3 +0,0 @@
-// Export the new standard Dialog component
-export { Dialog, DialogTrigger, DialogFooter } from './Dialog'
-export type { DialogProps, DialogTriggerProps, DialogFooterProps, DialogSize } from './Dialog'