@proyecto-viviana/ui 0.1.7 → 0.2.0

package/src/combobox/index.tsx

@@ -0,0 +1,383 @@
+/**
+ * ComboBox component for proyecto-viviana-ui
+ *
+ * Styled combobox component built on top of solidaria-components.
+ * Inspired by Spectrum 2's ComboBox component patterns.
+ */
+
+import { type JSX, splitProps, createContext, useContext, Show } from 'solid-js'
+import {
+  ComboBox as HeadlessComboBox,
+  ComboBoxInput as HeadlessComboBoxInput,
+  ComboBoxButton as HeadlessComboBoxButton,
+  ComboBoxListBox as HeadlessComboBoxListBox,
+  ComboBoxOption as HeadlessComboBoxOption,
+  defaultContainsFilter,
+  type ComboBoxProps as HeadlessComboBoxProps,
+  type ComboBoxInputProps as HeadlessComboBoxInputProps,
+  type ComboBoxButtonProps as HeadlessComboBoxButtonProps,
+  type ComboBoxListBoxProps as HeadlessComboBoxListBoxProps,
+  type ComboBoxOptionProps as HeadlessComboBoxOptionProps,
+  type ComboBoxRenderProps,
+  type ComboBoxInputRenderProps,
+  type ComboBoxButtonRenderProps,
+  type ComboBoxListBoxRenderProps,
+  type ComboBoxOptionRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import type { Key, FilterFn, MenuTriggerAction } from '@proyecto-viviana/solid-stately'
+
+// ============================================
+// SIZE CONTEXT
+// ============================================
+
+export type ComboBoxSize = 'sm' | 'md' | 'lg'
+
+const ComboBoxSizeContext = createContext<ComboBoxSize>('md')
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface ComboBoxProps<T> extends Omit<HeadlessComboBoxProps<T>, 'class' | 'style'> {
+  /** The size of the combobox. */
+  size?: ComboBoxSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Label for the combobox. */
+  label?: string
+  /** Description for the combobox. */
+  description?: string
+  /** Error message when invalid. */
+  errorMessage?: string
+  /** Whether the combobox is invalid. */
+  isInvalid?: boolean
+}
+
+export interface ComboBoxInputProps extends Omit<HeadlessComboBoxInputProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface ComboBoxButtonProps extends Omit<HeadlessComboBoxButtonProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface ComboBoxListBoxProps<T> extends Omit<HeadlessComboBoxListBoxProps<T>, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface ComboBoxOptionProps<T> extends Omit<HeadlessComboBoxOptionProps<T>, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    wrapper: 'h-8',
+    input: 'h-8 text-sm pl-3 pr-8',
+    button: 'h-8 w-8',
+    label: 'text-sm',
+    option: 'text-sm py-1.5 px-3',
+    icon: 'h-4 w-4',
+  },
+  md: {
+    wrapper: 'h-10',
+    input: 'h-10 text-base pl-4 pr-10',
+    button: 'h-10 w-10',
+    label: 'text-base',
+    option: 'text-base py-2 px-4',
+    icon: 'h-5 w-5',
+  },
+  lg: {
+    wrapper: 'h-12',
+    input: 'h-12 text-lg pl-5 pr-12',
+    button: 'h-12 w-12',
+    label: 'text-lg',
+    option: 'text-lg py-2.5 px-5',
+    icon: 'h-6 w-6',
+  },
+}
+
+// ============================================
+// COMBOBOX COMPONENT
+// ============================================
+
+/**
+ * A combobox combines a text input with a listbox, allowing users to filter a list of options.
+ *
+ * Built on solidaria-components ComboBox for full accessibility support.
+ */
+export function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'size',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+    'isInvalid',
+  ])
+
+  const size = local.size ?? 'md'
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: ComboBoxRenderProps): string => {
+    const base = 'relative inline-flex flex-col gap-1.5'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    return [base, disabledClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <ComboBoxSizeContext.Provider value={size}>
+      <HeadlessComboBox
+        {...headlessProps}
+        class={getClassName}
+      >
+        <Show when={local.label}>
+          <label class={`text-primary-200 font-medium ${sizeStyles[size].label}`}>
+            {local.label}
+          </label>
+        </Show>
+        {props.children}
+        <Show when={local.description && !local.isInvalid}>
+          <span class="text-primary-400 text-sm">{local.description}</span>
+        </Show>
+        <Show when={local.errorMessage && local.isInvalid}>
+          <span class="text-danger-400 text-sm">{local.errorMessage}</span>
+        </Show>
+      </HeadlessComboBox>
+    </ComboBoxSizeContext.Provider>
+  )
+}
+
+// ============================================
+// COMBOBOX INPUT GROUP COMPONENT
+// ============================================
+
+/**
+ * A wrapper for the input and button that provides proper styling.
+ */
+export function ComboBoxInputGroup(props: { children: JSX.Element; class?: string }): JSX.Element {
+  const size = useContext(ComboBoxSizeContext)
+  const styles = () => sizeStyles[size]
+
+  return (
+    <div class={`relative flex items-center ${styles().wrapper} ${props.class ?? ''}`}>
+      {props.children}
+    </div>
+  )
+}
+
+// ============================================
+// COMBOBOX INPUT COMPONENT
+// ============================================
+
+/**
+ * The text input for a combobox.
+ */
+export function ComboBoxInput(props: ComboBoxInputProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const size = useContext(ComboBoxSizeContext)
+  const styles = () => sizeStyles[size]
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: ComboBoxInputRenderProps): string => {
+    const base = 'w-full rounded-lg border-2 transition-all duration-200 outline-none'
+    const sizeClass = styles().input
+
+    let colorClass: string
+    if (renderProps.isDisabled) {
+      colorClass = 'border-bg-300 bg-bg-200 text-primary-500 cursor-not-allowed'
+    } else if (renderProps.isOpen) {
+      colorClass = 'border-accent bg-bg-300 text-primary-100'
+    } else if (renderProps.isHovered) {
+      colorClass = 'border-accent-300 bg-bg-300 text-primary-100'
+    } else {
+      colorClass = 'border-primary-600 bg-bg-400 text-primary-200'
+    }
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+      : ''
+
+    return [base, sizeClass, colorClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessComboBoxInput
+      {...headlessProps}
+      class={getClassName}
+    />
+  )
+}
+
+// ============================================
+// COMBOBOX BUTTON COMPONENT
+// ============================================
+
+/**
+ * The trigger button for a combobox.
+ * SSR-compatible - renders children or chevron icon directly without render props.
+ */
+export function ComboBoxButton(props: ComboBoxButtonProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const size = useContext(ComboBoxSizeContext)
+  const sizeStyle = sizeStyles[size]
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: ComboBoxButtonRenderProps): string => {
+    const base = 'absolute right-0 top-0 flex items-center justify-center transition-all duration-200 rounded-r-lg'
+    const sizeClass = sizeStyle.button
+
+    let colorClass: string
+    if (renderProps.isDisabled) {
+      colorClass = 'text-primary-500 cursor-not-allowed'
+    } else if (renderProps.isOpen) {
+      colorClass = 'text-accent'
+    } else if (renderProps.isHovered) {
+      colorClass = 'text-accent-300 cursor-pointer'
+    } else {
+      colorClass = 'text-primary-400 cursor-pointer hover:text-primary-200'
+    }
+
+    return [base, sizeClass, colorClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessComboBoxButton
+      {...headlessProps}
+      class={getClassName}
+    >
+      {props.children || <ChevronIcon class={`${sizeStyle.icon} transition-transform duration-200 data-open:rotate-180`} />}
+    </HeadlessComboBoxButton>
+  )
+}
+
+// ============================================
+// COMBOBOX LISTBOX COMPONENT
+// ============================================
+
+/**
+ * The listbox popup for a combobox.
+ */
+export function ComboBoxListBox<T>(props: ComboBoxListBoxProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const customClass = local.class ?? ''
+
+  const getClassName = (_renderProps: ComboBoxListBoxRenderProps): string => {
+    const base = 'absolute z-50 mt-1 w-full rounded-lg border-2 border-primary-600 bg-bg-400 py-1 shadow-lg max-h-60 overflow-auto'
+    return [base, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessComboBoxListBox
+      {...headlessProps}
+      class={getClassName}
+      children={props.children}
+    />
+  )
+}
+
+// ============================================
+// COMBOBOX OPTION COMPONENT
+// ============================================
+
+/**
+ * An option in a combobox listbox.
+ * SSR-compatible - renders check icon and content directly without render props.
+ */
+export function ComboBoxOption<T>(props: ComboBoxOptionProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const size = useContext(ComboBoxSizeContext)
+  const sizeStyle = sizeStyles[size]
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: ComboBoxOptionRenderProps): string => {
+    const base = 'flex items-center gap-2 cursor-pointer transition-colors duration-150'
+    const sizeClass = sizeStyle.option
+
+    let colorClass: string
+    if (renderProps.isDisabled) {
+      colorClass = 'text-primary-500 cursor-not-allowed'
+    } else if (renderProps.isSelected) {
+      colorClass = 'bg-accent/20 text-accent'
+    } else if (renderProps.isFocused || renderProps.isHovered) {
+      colorClass = 'bg-bg-300 text-primary-100'
+    } else {
+      colorClass = 'text-primary-200'
+    }
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-inset ring-accent-300'
+      : ''
+
+    return [base, sizeClass, colorClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  // Compute padding for non-selected items to align with check icon
+  const iconPadding: Record<ComboBoxSize, string> = {
+    sm: 'pl-6',  // h-4 icon + gap
+    md: 'pl-7',  // h-5 icon + gap
+    lg: 'pl-8',  // h-6 icon + gap
+  }
+
+  return (
+    <HeadlessComboBoxOption
+      {...headlessProps}
+      class={getClassName}
+    >
+      <CheckIcon class={`${sizeStyle.icon} text-accent shrink-0 hidden data-selected:block`} />
+      <span class={`flex-1 data-selected:pl-0 ${iconPadding[size]}`}>
+        {props.children as JSX.Element}
+      </span>
+    </HeadlessComboBoxOption>
+  )
+}
+
+// ============================================
+// ICONS
+// ============================================
+
+function ChevronIcon(props: { class?: string }): JSX.Element {
+  return (
+    <svg
+      class={props.class}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+    </svg>
+  )
+}
+
+function CheckIcon(props: { class?: string }): JSX.Element {
+  return (
+    <svg
+      class={props.class}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+    </svg>
+  )
+}
+
+// Attach sub-components for convenience
+ComboBox.InputGroup = ComboBoxInputGroup
+ComboBox.Input = ComboBoxInput
+ComboBox.Button = ComboBoxButton
+ComboBox.ListBox = ComboBoxListBox
+ComboBox.Option = ComboBoxOption
+
+// Re-export types and utilities for convenience
+export type { Key, FilterFn, MenuTriggerAction }
+export { defaultContainsFilter }

package/src/components.css

@@ -39,6 +39,7 @@
 
 /* ===== BUTTON COMPONENT ===== */
 .vui-button {
+  position: relative;
   font-family: 'Jost', sans-serif;
   display: inline-flex;
   align-items: center;
@@ -48,15 +49,37 @@
   font-weight: 500;
   text-transform: uppercase;
   border-radius: 0.5rem;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   cursor: pointer;
   border: none;
   outline: none;
+  overflow: hidden;
+}
+
+/* Shimmer overlay for hover effect */
+.vui-button::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  transition: transform 0.5s ease;
+}
+
+.vui-button:hover::before {
+  transform: translateX(100%);
 }
 
 .vui-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--color-bg-400), 0 0 0 4px var(--color-accent-300);
+  box-shadow: 0 0 0 2px var(--color-bg-400),
+              0 0 0 4px var(--color-accent-300),
+              0 0 20px rgba(223, 92, 154, 0.3);
 }
 
 .vui-button:disabled {
@@ -64,8 +87,12 @@
   cursor: not-allowed;
 }
 
+.vui-button:disabled::before {
+  display: none;
+}
+
 .vui-button.is-pressed {
-  transform: scale(0.98);
+  transform: scale(0.97);
 }
 
 /* Size variants */
@@ -110,6 +137,11 @@
   color: white;
 }
 
+.vui-button--fill.vui-button--accent:hover:not(:disabled) {
+  box-shadow: 0 0 20px rgba(223, 92, 154, 0.4),
+              0 4px 12px rgba(223, 92, 154, 0.3);
+}
+
 /* Positive = bg-success-600, text-success-100, border-success-400 */
 .vui-button--fill.vui-button--positive {
   background: var(--color-success-600);
@@ -441,22 +473,48 @@
 
 /* ===== SIDEBAR ===== */
 .sidebar-link {
+  position: relative;
   display: block;
   padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  color: var(--color-primary-300);
-  transition: all 0.15s;
+  border-radius: 0.5rem;
+  color: var(--color-primary-400);
+  font-size: 0.875rem;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.sidebar-link::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 0;
+  background: var(--color-accent);
+  border-radius: 0 2px 2px 0;
+  transition: height 0.2s ease;
 }
 
 .sidebar-link:hover {
-  background: var(--color-bg-300);
-  color: var(--color-primary-100);
+  background: rgba(117, 171, 199, 0.08);
+  color: var(--color-primary-200);
+  padding-left: 1.25rem;
+}
+
+.sidebar-link:hover::before {
+  height: 60%;
 }
 
 .sidebar-link.active {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
+  background: rgba(223, 92, 154, 0.1);
+  color: var(--color-accent-200);
   font-weight: 500;
+  padding-left: 1.25rem;
+}
+
+.sidebar-link.active::before {
+  height: 70%;
+  box-shadow: 0 0 8px rgba(223, 92, 154, 0.5);
 }
 
 /* ===== LOGO COMPONENT ===== */
@@ -517,6 +575,46 @@
   text-shadow: 6px 5px 0 var(--color-accent);
 }
 
+/* Inverted variant - first word gets the 3D effect, second word is muted */
+.vui-logo.vui-logo--inverted .vui-logo__first {
+  position: relative;
+  color: var(--color-primary-500);
+  font-weight: 900;
+  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
+  paint-order: stroke fill;
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__first::before {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: -1;
+  color: transparent;
+  -webkit-text-stroke: 0;
+  text-shadow: 4px 3px 0 var(--color-accent);
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__second {
+  position: static;
+  color: var(--color-primary-800);
+  font-weight: 300;
+  -webkit-text-stroke: 0;
+  paint-order: normal;
+}
+
+.vui-logo.vui-logo--inverted .vui-logo__second::before {
+  content: none;
+}
+
+.vui-logo.vui-logo--inverted.vui-logo--lg .vui-logo__first::before {
+  text-shadow: 5px 4px 0 var(--color-accent);
+}
+
+.vui-logo.vui-logo--inverted.vui-logo--xl .vui-logo__first::before {
+  text-shadow: 6px 5px 0 var(--color-accent);
+}
+
 /* ===== HEADER COMPONENT ===== */
 .vui-header {
   position: fixed;
@@ -524,17 +622,16 @@
   left: 0;
   right: 0;
   z-index: 50;
-  border-bottom: 3px solid var(--color-accent);
+  border-bottom: 4px solid var(--color-accent);
   background: color-mix(in srgb, var(--color-bg-400) 80%, transparent);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
 
 .vui-header__container {
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 72rem;
   height: 70px;
+  padding-left: 32px;
+  padding-right: 32px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -575,6 +672,11 @@
   font-family: 'Sen', sans-serif;
 }
 
+/* Use this modifier for pages with fixed header where content shouldn't go behind it */
+.vui-page--with-header {
+  padding-top: 4rem; /* 64px - matches h-16 header */
+}
+
 .vui-page h1,
 .vui-page h2,
 .vui-page h3,

package/src/custom/chip/index.tsx

@@ -1,4 +1,4 @@
-import type { JSX } from 'solid-js'
+import { type JSX, Show } from 'solid-js'
 
 export type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline'
 
@@ -6,7 +6,12 @@ export interface ChipProps {
   text: string
   variant?: ChipVariant
   onClick?: () => void
-  icon?: JSX.Element
+  /**
+   * 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
 }
 
@@ -20,12 +25,21 @@ const variantStyles: Record<ChipVariant, string> = {
 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}
     >
-      {props.icon && <span class="mr-1.5">{props.icon}</span>}
+      <Show when={props.icon}>
+        <span class="mr-1.5">{renderIcon()}</span>
+      </Show>
       <span>{props.text}</span>
     </button>
   )

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

@@ -11,7 +11,11 @@ export interface EventCardProps {
   attendees?: { avatar?: string; name: string }[]
   attendeeCount?: number
   decorationImage?: string
-  actions?: JSX.Element
+  /**
+   * Actions to display below the event.
+   * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
+   */
+  actions?: JSX.Element | (() => JSX.Element)
   class?: string
 }
 
@@ -85,7 +89,9 @@ export function EventCard(props: EventCardProps) {
         </Show>
 
         <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>
     </div>

package/src/custom/header/index.tsx

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