@proyecto-viviana/ui 0.3.5 → 0.4.0

package/src/autocomplete/index.tsx

@@ -1,313 +0,0 @@
-/**
- * SearchAutocomplete component for proyecto-viviana-ui
- *
- * A styled autocomplete component combining a search input with a
- * filterable dropdown list of options.
- */
-
-import { type JSX, splitProps, createMemo, Show, For, createSignal } from 'solid-js'
-import {
-  Autocomplete,
-  useAutocompleteInput,
-  useAutocompleteCollection,
-  useAutocompleteState,
-} from '@proyecto-viviana/solidaria-components'
-
-// ============================================
-// TYPES
-// ============================================
-
-export type SearchAutocompleteSize = 'sm' | 'md' | 'lg'
-
-export interface SearchAutocompleteItem {
-  id: string
-  name: string
-  [key: string]: unknown
-}
-
-export interface SearchAutocompleteProps<T extends SearchAutocompleteItem = SearchAutocompleteItem> {
-  /** The items to display in the dropdown. */
-  items: T[]
-  /** The size of the autocomplete. @default 'md' */
-  size?: SearchAutocompleteSize
-  /** Placeholder text for the input. */
-  placeholder?: string
-  /** Accessible label for the input. */
-  'aria-label'?: string
-  /** Label text shown above the input. */
-  label?: string
-  /** Description text shown below the input. */
-  description?: string
-  /** The current input value (controlled). */
-  inputValue?: string
-  /** The default input value (uncontrolled). */
-  defaultInputValue?: string
-  /** Handler called when the input value changes. */
-  onInputChange?: (value: string) => void
-  /** Handler called when an item is selected. */
-  onSelect?: (item: T) => void
-  /** Additional CSS class name. */
-  class?: string
-  /** Whether the input is disabled. */
-  isDisabled?: boolean
-  /**
-   * Custom filter function. By default, filters by case-insensitive name match.
-   */
-  filter?: (textValue: string, inputValue: string) => boolean
-  /**
-   * Custom render function for items.
-   */
-  renderItem?: (item: T) => JSX.Element
-  /**
-   * Key to use for the display text. @default 'name'
-   */
-  textKey?: keyof T
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'text-sm',
-    input: 'h-8 px-3 text-sm',
-    label: 'text-xs mb-1',
-    list: 'max-h-48',
-    item: 'px-3 py-1.5 text-sm',
-  },
-  md: {
-    container: 'text-base',
-    input: 'h-10 px-4 text-base',
-    label: 'text-sm mb-1.5',
-    list: 'max-h-64',
-    item: 'px-4 py-2 text-base',
-  },
-  lg: {
-    container: 'text-lg',
-    input: 'h-12 px-5 text-lg',
-    label: 'text-base mb-2',
-    list: 'max-h-80',
-    item: 'px-5 py-2.5 text-lg',
-  },
-}
-
-// ============================================
-// INNER COMPONENTS
-// ============================================
-
-function AutocompleteInput(props: {
-  placeholder?: string
-  'aria-label'?: string
-  isDisabled?: boolean
-  size: SearchAutocompleteSize
-}) {
-  const ctx = useAutocompleteInput()
-  if (!ctx) return null
-
-  const styles = () => sizeStyles[props.size]
-
-  return (
-    <input
-      ref={ctx.inputRef}
-      type="text"
-      placeholder={props.placeholder}
-      aria-label={props['aria-label']}
-      disabled={props.isDisabled}
-      value={ctx.inputProps.value()}
-      onInput={(e) => ctx.inputProps.onChange(e.currentTarget.value)}
-      onKeyDown={ctx.inputProps.onKeyDown}
-      onFocus={ctx.inputProps.onFocus}
-      onBlur={ctx.inputProps.onBlur}
-      aria-activedescendant={ctx.inputProps['aria-activedescendant']()}
-      aria-controls={ctx.inputProps['aria-controls']}
-      aria-autocomplete={ctx.inputProps['aria-autocomplete']}
-      autocomplete={ctx.inputProps.autoComplete}
-      autocorrect={ctx.inputProps.autoCorrect}
-      spellcheck={ctx.inputProps.spellCheck !== 'false'}
-      class={[
-        'w-full rounded-md border border-bg-200 bg-bg-50',
-        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
-        'placeholder:text-text-400',
-        'disabled:opacity-50 disabled:cursor-not-allowed',
-        styles().input,
-      ].join(' ')}
-    />
-  )
-}
-
-function AutocompleteList<T extends SearchAutocompleteItem>(props: {
-  items: T[]
-  size: SearchAutocompleteSize
-  onSelect?: (item: T) => void
-  renderItem?: (item: T) => JSX.Element
-  textKey: keyof T
-}) {
-  const ctx = useAutocompleteCollection()
-  const state = useAutocompleteState()
-  if (!ctx) return null
-
-  const styles = () => sizeStyles[props.size]
-
-  // Filter items based on input
-  const filteredItems = createMemo(() => {
-    if (!ctx.filter) return props.items
-    return props.items.filter((item) => {
-      const textValue = String(item[props.textKey] ?? item.name ?? '')
-      return ctx.filter!(textValue)
-    })
-  })
-
-  const handleSelect = (item: T) => {
-    props.onSelect?.(item)
-    state?.setInputValue(String(item[props.textKey] ?? item.name ?? ''))
-  }
-
-  return (
-    <Show when={filteredItems().length > 0}>
-      <ul
-        ref={ctx.collectionRef}
-        id={ctx.collectionProps.id}
-        role="listbox"
-        aria-label={ctx.collectionProps['aria-label']}
-        class={[
-          'mt-1 w-full rounded-md border border-bg-200 bg-bg-50 shadow-lg',
-          'overflow-auto',
-          styles().list,
-        ].join(' ')}
-      >
-        <For each={filteredItems()}>
-          {(item) => {
-            const itemId = `autocomplete-item-${item.id}`
-            const isFocused = () => state?.focusedNodeId() === itemId
-
-            return (
-              <li
-                id={itemId}
-                role="option"
-                aria-selected={isFocused()}
-                onClick={() => handleSelect(item)}
-                onMouseEnter={() => state?.setFocusedNodeId(itemId)}
-                onMouseLeave={() => {
-                  if (state?.focusedNodeId() === itemId) {
-                    state?.setFocusedNodeId(null)
-                  }
-                }}
-                class={[
-                  'cursor-pointer transition-colors',
-                  isFocused()
-                    ? 'bg-primary-100 text-primary-900'
-                    : 'hover:bg-bg-100',
-                  styles().item,
-                ].join(' ')}
-              >
-                {props.renderItem ? props.renderItem(item) : String(item[props.textKey] ?? item.name)}
-              </li>
-            )
-          }}
-        </For>
-      </ul>
-    </Show>
-  )
-}
-
-// ============================================
-// SEARCH AUTOCOMPLETE COMPONENT
-// ============================================
-
-/**
- * A styled autocomplete component for searching and selecting from a list.
- *
- * @example
- * ```tsx
- * const items = [
- *   { id: '1', name: 'Apple' },
- *   { id: '2', name: 'Banana' },
- *   { id: '3', name: 'Cherry' },
- * ];
- *
- * <SearchAutocomplete
- *   items={items}
- *   placeholder="Search fruits..."
- *   aria-label="Fruit search"
- *   onSelect={(item) => console.log('Selected:', item)}
- * />
- *
- * // With custom filter
- * <SearchAutocomplete
- *   items={items}
- *   filter={(textValue, inputValue) =>
- *     textValue.toLowerCase().startsWith(inputValue.toLowerCase())
- *   }
- *   onSelect={(item) => console.log('Selected:', item)}
- * />
- *
- * // With label and description
- * <SearchAutocomplete
- *   items={items}
- *   label="Search"
- *   description="Type to filter the list"
- *   placeholder="Start typing..."
- * />
- * ```
- */
-export function SearchAutocomplete<T extends SearchAutocompleteItem = SearchAutocompleteItem>(
-  props: SearchAutocompleteProps<T>
-): JSX.Element {
-  const [local, autocompleteProps] = splitProps(props, [
-    'items',
-    'size',
-    'placeholder',
-    'aria-label',
-    'label',
-    'description',
-    'onSelect',
-    'class',
-    'isDisabled',
-    'renderItem',
-    'textKey',
-  ])
-
-  const size = () => local.size ?? 'md'
-  const textKey = () => local.textKey ?? 'name'
-  const styles = () => sizeStyles[size()]
-
-  // Default filter: case-insensitive contains
-  const defaultFilter = (textValue: string, inputValue: string) => {
-    if (!inputValue) return true
-    return textValue.toLowerCase().includes(inputValue.toLowerCase())
-  }
-
-  return (
-    <div class={['vui-search-autocomplete relative', styles().container, local.class].filter(Boolean).join(' ')}>
-      <Show when={local.label}>
-        <label class={['block font-medium text-text-700', styles().label].join(' ')}>
-          {local.label}
-        </label>
-      </Show>
-
-      <Autocomplete
-        {...autocompleteProps}
-        filter={autocompleteProps.filter ?? defaultFilter}
-      >
-        <AutocompleteInput
-          placeholder={local.placeholder}
-          aria-label={local['aria-label']}
-          isDisabled={local.isDisabled}
-          size={size()}
-        />
-        <AutocompleteList
-          items={local.items}
-          size={size()}
-          onSelect={local.onSelect}
-          renderItem={local.renderItem}
-          textKey={textKey() as keyof T}
-        />
-      </Autocomplete>
-
-      <Show when={local.description}>
-        <p class="mt-1 text-sm text-text-500">{local.description}</p>
-      </Show>
-    </div>
-  )
-}

package/src/avatar/index.tsx

@@ -1,75 +0,0 @@
-import { Show } from 'solid-js'
-
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export interface AvatarProps {
-  src?: string
-  alt?: string
-  size?: AvatarSize
-  fallback?: string
-  online?: boolean
-  class?: string
-}
-
-const sizeStyles: Record<AvatarSize, { container: string; text: string; indicator: string }> = {
-  xs: { container: 'w-6 h-6', text: 'text-xs', indicator: 'w-1.5 h-1.5' },
-  sm: { container: 'w-8 h-8', text: 'text-sm', indicator: 'w-2 h-2' },
-  md: { container: 'w-10 h-10', text: 'text-base', indicator: 'w-2.5 h-2.5' },
-  lg: { container: 'w-14 h-14', text: 'text-lg', indicator: 'w-3 h-3' },
-  xl: { container: 'w-20 h-20', text: 'text-xl', indicator: 'w-4 h-4' },
-}
-
-export function Avatar(props: AvatarProps) {
-  const size = () => props.size ?? 'md'
-  const styles = () => sizeStyles[size()]
-
-  const initials = () => {
-    if (props.fallback) return props.fallback.slice(0, 2).toUpperCase()
-    if (props.alt) return props.alt.slice(0, 2).toUpperCase()
-    return '?'
-  }
-
-  return (
-    <div class={`relative inline-block ${props.class ?? ''}`}>
-      <div
-        class={`${styles().container} rounded-full overflow-hidden bg-bg-200 flex items-center justify-center ring-2 ring-accent/50`}
-      >
-        <Show
-          when={props.src}
-          fallback={
-            <span class={`${styles().text} font-medium text-primary-300`}>
-              {initials()}
-            </span>
-          }
-        >
-          <img
-            src={props.src}
-            alt={props.alt ?? 'Avatar'}
-            class="w-full h-full object-cover"
-          />
-        </Show>
-      </div>
-      <Show when={props.online !== undefined}>
-        <span
-          class={`absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${
-            props.online ? 'bg-success-400' : 'bg-bg-light'
-          }`}
-        />
-      </Show>
-    </div>
-  )
-}
-
-export interface AvatarGroupProps {
-  children: any
-  max?: number
-  size?: AvatarSize
-}
-
-export function AvatarGroup(props: AvatarGroupProps) {
-  return (
-    <div class="flex -space-x-2">
-      {props.children}
-    </div>
-  )
-}

package/src/badge/index.tsx

@@ -1,43 +0,0 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-
-export type BadgeVariant = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger'
-export type BadgeSize = 'sm' | 'md' | 'lg'
-
-export interface BadgeProps {
-  children?: JSX.Element
-  count?: number
-  variant?: BadgeVariant
-  size?: BadgeSize
-  class?: string
-}
-
-const variantStyles: Record<BadgeVariant, string> = {
-  primary: 'bg-primary-500 text-white',
-  secondary: 'bg-bg-300 text-primary-300',
-  accent: 'bg-accent-300 text-black',
-  success: 'bg-success-400 text-white',
-  warning: 'bg-warning-400 text-black',
-  danger: 'bg-danger-400 text-white',
-}
-
-const sizeStyles: Record<BadgeSize, string> = {
-  sm: 'w-5 h-5 text-xs',
-  md: 'w-7 h-7 text-xs',
-  lg: 'w-9 h-9 text-sm',
-}
-
-export function Badge(props: BadgeProps) {
-  const variant = () => props.variant ?? 'accent'
-  const size = () => props.size ?? 'md'
-
-  return (
-    <div
-      class={`flex items-center justify-center rounded-full border-b border-white font-semibold ${variantStyles[variant()]} ${sizeStyles[size()]} ${props.class ?? ''}`}
-    >
-      <Show when={props.count !== undefined} fallback={props.children}>
-        <span>{props.count}</span>
-      </Show>
-    </div>
-  )
-}

package/src/breadcrumbs/index.tsx

@@ -1,207 +0,0 @@
-/**
- * Breadcrumbs component for proyecto-viviana-ui
- *
- * Styled breadcrumbs component built on top of solidaria-components.
- * Inspired by Spectrum 2's Breadcrumbs component patterns.
- */
-
-import { type JSX, splitProps, createContext, useContext } from 'solid-js'
-import {
-  Breadcrumbs as HeadlessBreadcrumbs,
-  BreadcrumbItem as HeadlessBreadcrumbItem,
-  type BreadcrumbsProps as HeadlessBreadcrumbsProps,
-  type BreadcrumbItemProps as HeadlessBreadcrumbItemProps,
-  type BreadcrumbsRenderProps,
-  type BreadcrumbItemRenderProps,
-} from '@proyecto-viviana/solidaria-components'
-
-// ============================================
-// SIZE CONTEXT
-// ============================================
-
-export type BreadcrumbsSize = 'sm' | 'md' | 'lg'
-export type BreadcrumbsVariant = 'default' | 'subtle'
-
-interface BreadcrumbsContextValue {
-  size: BreadcrumbsSize
-  variant: BreadcrumbsVariant
-  showSeparator: boolean
-}
-
-const BreadcrumbsSizeContext = createContext<BreadcrumbsContextValue>({
-  size: 'md',
-  variant: 'default',
-  showSeparator: true,
-})
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface BreadcrumbsProps<T> extends Omit<HeadlessBreadcrumbsProps<T>, 'class' | 'style'> {
-  /** The size of the breadcrumbs. */
-  size?: BreadcrumbsSize
-  /** The visual variant. */
-  variant?: BreadcrumbsVariant
-  /** Whether to show separators between items. */
-  showSeparator?: boolean
-  /** Additional CSS class name. */
-  class?: string
-}
-
-export interface BreadcrumbItemProps extends Omit<HeadlessBreadcrumbItemProps, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    text: 'text-sm',
-    icon: 'h-3 w-3',
-    gap: 'gap-1',
-  },
-  md: {
-    text: 'text-base',
-    icon: 'h-4 w-4',
-    gap: 'gap-1.5',
-  },
-  lg: {
-    text: 'text-lg',
-    icon: 'h-5 w-5',
-    gap: 'gap-2',
-  },
-}
-
-const variantStyles = {
-  default: {
-    item: 'text-primary-400 hover:text-primary-200',
-    current: 'text-primary-100 font-medium',
-    separator: 'text-primary-500',
-  },
-  subtle: {
-    item: 'text-primary-500 hover:text-primary-300',
-    current: 'text-primary-200',
-    separator: 'text-primary-600',
-  },
-}
-
-// ============================================
-// BREADCRUMBS COMPONENT
-// ============================================
-
-/**
- * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
- *
- * Built on solidaria-components Breadcrumbs for full accessibility support.
- */
-export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, [
-    'size',
-    'variant',
-    'showSeparator',
-    'class',
-  ])
-
-  const size = local.size ?? 'md'
-  const variant = local.variant ?? 'default'
-  const showSeparator = local.showSeparator ?? true
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: BreadcrumbsRenderProps): string => {
-    const base = 'flex items-center'
-    const sizeClass = sizeStyles[size].gap
-    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
-    return [base, sizeClass, disabledClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <BreadcrumbsSizeContext.Provider value={{ size, variant, showSeparator }}>
-      <HeadlessBreadcrumbs
-        {...headlessProps}
-        class={getClassName}
-        children={props.children}
-      />
-    </BreadcrumbsSizeContext.Provider>
-  )
-}
-
-// ============================================
-// BREADCRUMB ITEM COMPONENT
-// ============================================
-
-/**
- * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
- */
-export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const ctx = useContext(BreadcrumbsSizeContext)
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: BreadcrumbItemRenderProps): string => {
-    const sizeClass = sizeStyles[ctx.size].text
-    const vStyles = variantStyles[ctx.variant]
-
-    let stateClass: string
-    if (renderProps.isCurrent) {
-      stateClass = vStyles.current
-    } else if (renderProps.isDisabled) {
-      stateClass = 'text-primary-600 cursor-not-allowed'
-    } else {
-      stateClass = vStyles.item
-    }
-
-    const cursorClass = renderProps.isCurrent || renderProps.isDisabled ? '' : 'cursor-pointer'
-    const transitionClass = 'transition-colors duration-150'
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-accent-300 ring-offset-1 ring-offset-bg-400 outline-none rounded'
-      : ''
-
-    return [sizeClass, stateClass, cursorClass, transitionClass, focusClass, customClass].filter(Boolean).join(' ')
-  }
-
-  const vStyles = variantStyles[ctx.variant]
-  // Hide separator on first item, and on current (last) item
-  const separatorClass = `${sizeStyles[ctx.size].icon} ${vStyles.separator} mx-1 shrink-0 hidden data-current:hidden [&:not([data-current])]:block [li:first-child_&]:!hidden`
-
-  // Wrap children with separator icon
-  const renderChildren = () => (
-    <>
-      {/* Separator shows before items except first and current */}
-      {ctx.showSeparator && <ChevronIcon class={separatorClass} />}
-      {props.children as JSX.Element}
-    </>
-  )
-
-  return (
-    <HeadlessBreadcrumbItem
-      {...headlessProps}
-      class={getClassName}
-      children={renderChildren()}
-    />
-  )
-}
-
-// ============================================
-// 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="M9 5l7 7-7 7" />
-    </svg>
-  )
-}
-
-// Attach sub-components for convenience
-Breadcrumbs.Item = BreadcrumbItem