@proyecto-viviana/ui 0.3.5 → 0.4.0

package/src/combobox/index.tsx

@@ -1,383 +0,0 @@
-/**
- * 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/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'