@proyecto-viviana/ui 0.1.5 → 0.2.0

package/src/custom/logo/index.tsx

@@ -9,6 +9,8 @@ export interface LogoProps {
   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;
 }
@@ -44,9 +46,11 @@ export function Logo(props: LogoProps): JSX.Element {
   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()}>
+    <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/page-layout/index.tsx

@@ -3,6 +3,8 @@ 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
 }
 
 /**
@@ -10,11 +12,18 @@ export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * Use this as the root wrapper for all pages.
  */
 export function PageLayout(props: PageLayoutProps) {
-  const [local, rest] = splitProps(props, ['children', 'class'])
+  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={`vui-page ${local.class ?? ''}`} {...rest}>
-      {local.children}
+    <div class={classes()} {...rest}>
+      {props.children}
     </div>
   )
 }

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

@@ -8,7 +8,11 @@ export interface ProfileCardProps {
   bio?: string
   followers?: number
   following?: number
-  actions?: JSX.Element
+  /**
+   * Actions to display below the profile.
+   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
+   */
+  actions?: JSX.Element | (() => JSX.Element)
   class?: string
 }
 
@@ -51,7 +55,9 @@ export function ProfileCard(props: ProfileCardProps) {
         </div>
       </div>
       <Show when={props.actions}>
-        <div class="mt-4 flex gap-2">{props.actions}</div>
+        <div class="mt-4 flex gap-2">
+          {typeof props.actions === 'function' ? props.actions() : props.actions}
+        </div>
       </Show>
     </div>
   )

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

@@ -6,7 +6,12 @@ export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custo
 
 export interface TimelineItemProps {
   type?: TimelineEventType
-  icon?: JSX.Element
+  /**
+   * 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
@@ -15,7 +20,12 @@ export interface TimelineItemProps {
     name: string
     avatar?: string
   }
-  message?: JSX.Element
+  /**
+   * 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
 }
 
@@ -56,6 +66,20 @@ export function TimelineItem(props: TimelineItemProps) {
   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">
@@ -63,7 +87,7 @@ export function TimelineItem(props: TimelineItemProps) {
           <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
         </Show>
         <Show when={props.icon}>
-          {props.icon}
+          {renderIcon()}
         </Show>
         <Show when={props.rightUser}>
           <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
@@ -72,7 +96,7 @@ export function TimelineItem(props: TimelineItemProps) {
       <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())}>
-            {props.message}
+            {renderMessage()}
           </Show>
         </span>
       </div>

package/src/dialog/Dialog.tsx

@@ -0,0 +1,260 @@
+/**
+ * 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,69 +1,3 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-import { Button } from '../button'
-import { Chip } from '../custom/chip'
-
-export interface DialogProps {
-  title: string
-  subtitle?: string
-  children: JSX.Element
-  tags?: string[]
-  primaryAction?: {
-    label: string
-    onClick: () => void
-  }
-  secondaryAction?: {
-    label: string
-    onClick: () => void
-  }
-  class?: string
-}
-
-export function Dialog(props: DialogProps) {
-  return (
-    <div class={`flex flex-col w-full max-w-[540px] ${props.class ?? ''}`}>
-      <span class="relative left-8 top-4 bg-gradient-to-b from-primary-100 to-primary-500 bg-clip-text text-4xl font-extrabold text-transparent">
-        {props.title}
-      </span>
-      <div class="flex h-[50px] flex-col justify-end rounded-t-[26px] bg-primary-800">
-        <div class="flex h-[40px] flex-col justify-end rounded-t-[30px] bg-primary-600">
-          <div class="flex h-[20px] items-center justify-end rounded-t-[100px] bg-primary-700 pr-4">
-            <Show when={props.subtitle}>
-              <span class="text-base font-normal text-primary-300">
-                {props.subtitle}
-              </span>
-            </Show>
-          </div>
-        </div>
-      </div>
-      <div class="mt-1 flex min-h-[200px] flex-col rounded-b-[26px] rounded-t-lg border-b border-accent-500 bg-bg-300">
-        <div class="flex flex-1 flex-col p-4">
-          <div class="text-lg text-gray-100">{props.children}</div>
-          <Show when={props.primaryAction || props.secondaryAction}>
-            <div class="flex flex-1 flex-row items-end justify-center gap-5 py-5">
-              <Show when={props.secondaryAction}>
-                <Button variant="primary" buttonStyle="outline" onPress={props.secondaryAction!.onClick}>
-                  {props.secondaryAction!.label}
-                </Button>
-              </Show>
-              <Show when={props.primaryAction}>
-                <Button variant="primary" onPress={props.primaryAction!.onClick}>
-                  {props.primaryAction!.label}
-                </Button>
-              </Show>
-            </div>
-          </Show>
-        </div>
-      </div>
-      <Show when={props.tags && props.tags.length > 0}>
-        <div class="relative bottom-4 right-4 w-full">
-          <div class="flex flex-row justify-end gap-2 pr-4">
-            {props.tags!.map((tag) => (
-              <Chip variant="primary" text={tag} />
-            ))}
-          </div>
-        </div>
-      </Show>
-    </div>
-  )
-}
+// Export the new standard Dialog component
+export { Dialog, DialogTrigger, DialogFooter } from './Dialog'
+export type { DialogProps, DialogTriggerProps, DialogFooterProps, DialogSize } from './Dialog'