@proyecto-viviana/ui 0.2.5 → 0.3.1

package/src/textfield/index.tsx

@@ -1,211 +0,0 @@
-/**
- * TextField component for proyecto-viviana-ui
- *
- * A styled text field component built on solidaria hooks directly.
- * This bypasses solidaria-components for now due to context timing issues.
- */
-
-import { type JSX, splitProps, mergeProps as solidMergeProps, Show } from 'solid-js'
-import {
-  createTextField,
-  createFocusRing,
-  type AriaTextFieldProps,
-} from '@proyecto-viviana/solidaria'
-import {
-  createTextFieldState,
-} from '@proyecto-viviana/solid-stately'
-
-// ============================================
-// TYPES
-// ============================================
-
-export type TextFieldSize = 'sm' | 'md' | 'lg'
-export type TextFieldVariant = 'outline' | 'filled'
-
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children'> {
-  /** The size of the text field. */
-  size?: TextFieldSize
-  /** The visual variant of the text field. */
-  variant?: TextFieldVariant
-  /** Additional CSS class name. */
-  class?: string
-  /** Label text for the input. */
-  label?: string
-  /** Description text shown below the input. */
-  description?: string
-  /** Error message shown when invalid. */
-  errorMessage?: string
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    input: 'h-8 px-2 text-sm',
-    label: 'text-sm',
-    description: 'text-xs',
-  },
-  md: {
-    input: 'h-10 px-3 text-base',
-    label: 'text-sm',
-    description: 'text-sm',
-  },
-  lg: {
-    input: 'h-12 px-4 text-lg',
-    label: 'text-base',
-    description: 'text-sm',
-  },
-}
-
-// ============================================
-// COMPONENT
-// ============================================
-
-/**
- * A text field allows users to enter a plain text value with a keyboard.
- *
- * Built directly on solidaria hooks for full accessibility support.
- */
-export function TextField(props: TextFieldProps): JSX.Element {
-  const defaultProps: Partial<TextFieldProps> = {
-    size: 'md',
-    variant: 'outline',
-  }
-
-  const merged = solidMergeProps(defaultProps, props)
-
-  const [local, ariaProps] = splitProps(merged, [
-    'size',
-    'variant',
-    'class',
-    'label',
-    'description',
-    'errorMessage',
-  ])
-
-  const size = () => sizeStyles[local.size!]
-
-  // Create text field state
-  const state = createTextFieldState(() => ({
-    value: ariaProps.value,
-    defaultValue: ariaProps.defaultValue,
-    onChange: ariaProps.onChange,
-  }))
-
-  // Create text field aria props
-  const textFieldAria = createTextField(() => ({
-    ...ariaProps,
-    value: state.value(),
-    onChange: state.setValue,
-  }))
-
-  // Create focus ring
-  const { isFocused, isFocusVisible, focusProps } = createFocusRing()
-
-  // Compute classes
-  const containerClasses = () => {
-    const base = 'flex flex-col'
-    const disabledClass = ariaProps.isDisabled ? 'opacity-60' : ''
-    const custom = local.class || ''
-    return [base, disabledClass, custom].filter(Boolean).join(' ')
-  }
-
-  const inputClasses = () => {
-    const base = 'w-full rounded-md transition-all duration-200 outline-none'
-    const sizeClass = size().input
-
-    let variantClass: string
-    if (local.variant === 'filled') {
-      variantClass = 'bg-bg-200 border border-transparent'
-    } else {
-      variantClass = 'bg-transparent border border-bg-400'
-    }
-
-    let stateClass: string
-    if (ariaProps.isDisabled) {
-      stateClass = 'bg-bg-200 text-primary-500 cursor-not-allowed'
-    } else if (textFieldAria.isInvalid) {
-      stateClass = 'border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20'
-    } else {
-      stateClass = 'text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20'
-    }
-
-    const hoverClass = ariaProps.isDisabled ? '' : 'hover:border-accent-300'
-
-    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(' ')
-  }
-
-  const labelClasses = () => {
-    const base = 'block font-medium text-primary-200 mb-1'
-    const sizeClass = size().label
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  const descriptionClasses = () => {
-    const base = 'mt-1 text-primary-400'
-    const sizeClass = size().description
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  const errorClasses = () => {
-    const base = 'mt-1 text-danger-400'
-    const sizeClass = size().description
-    return [base, sizeClass].filter(Boolean).join(' ')
-  }
-
-  // Clean props - remove ref to avoid type conflicts
-  const cleanLabelProps = () => {
-    const { ref: _ref, ...rest } = textFieldAria.labelProps as Record<string, unknown>
-    return rest
-  }
-  const cleanInputProps = () => {
-    const { ref: _ref1, ...rest } = textFieldAria.inputProps as Record<string, unknown>
-    const { ref: _ref2, ...focusRest } = focusProps as Record<string, unknown>
-    return { ...rest, ...focusRest }
-  }
-  const cleanDescriptionProps = () => {
-    const { ref: _ref, ...rest } = textFieldAria.descriptionProps as Record<string, unknown>
-    return rest
-  }
-  const cleanErrorMessageProps = () => {
-    const { ref: _ref, ...rest } = textFieldAria.errorMessageProps as Record<string, unknown>
-    return rest
-  }
-
-  return (
-    <div
-      class={containerClasses()}
-      data-disabled={ariaProps.isDisabled || undefined}
-      data-invalid={textFieldAria.isInvalid || undefined}
-      data-readonly={ariaProps.isReadOnly || undefined}
-      data-required={ariaProps.isRequired || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-    >
-      <Show when={local.label}>
-        <label {...cleanLabelProps()} class={labelClasses()}>
-          {local.label}
-          <Show when={ariaProps.isRequired}>
-            <span class="text-danger-400 ml-0.5">*</span>
-          </Show>
-        </label>
-      </Show>
-
-      <input {...cleanInputProps()} class={inputClasses()} />
-
-      <Show when={local.description && !textFieldAria.isInvalid}>
-        <p {...cleanDescriptionProps()} class={descriptionClasses()}>
-          {local.description}
-        </p>
-      </Show>
-
-      <Show when={local.errorMessage && textFieldAria.isInvalid}>
-        <p {...cleanErrorMessageProps()} class={errorClasses()}>
-          {local.errorMessage}
-        </p>
-      </Show>
-    </div>
-  )
-}

package/src/theme.css

@@ -1,101 +0,0 @@
-/*
- * Viviana UI Theme - Tailwind v4
- *
- * IMPORTANT: Due to Tailwind v4's @theme processing, the @theme block
- * should be COPIED into your app's CSS, not imported via @import.
- *
- * Usage:
- *
- * 1. Add fonts in HTML <head>:
- *    <link rel="preconnect" href="https://fonts.googleapis.com">
- *    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- *    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Sen:wght@400..800&display=swap" rel="stylesheet">
- *
- * 2. In your app's CSS:
- *    @import "tailwindcss";
- *
- *    @theme {
- *      // Copy the @theme block below into your CSS
- *    }
- *
- *    @import "proyecto-viviana-ui/components.css";
- */
-
-@theme {
-  /* Breakpoints */
-  --breakpoint-xxs: 320px;
-  --breakpoint-xs: 475px;
-
-  /* Background - Dark blue-gray */
-  --color-bg-100: #3B5260;
-  --color-bg-200: #293E4B;
-  --color-bg-300: #24313a;
-  --color-bg-400: #1D272E;
-  --color-bg-light: #515151;
-
-  /* Accent - Pink */
-  --color-accent: #DF5C9A;
-  --color-accent-200: #FFB2D7;
-  --color-accent-300: #FF88C0;
-  --color-accent-500: #DF5C9A;
-  --color-accent-highlight: #e2a2be;
-
-  /* Primary - Cyan/Blue */
-  --color-primary-100: #D9F2FF;
-  --color-primary-200: #D0E9F5;
-  --color-primary-300: #ADCCDC;
-  --color-primary-400: #B8DFFF;
-  --color-primary-500: #75ABC7;
-  --color-primary-600: #58748B;
-  --color-primary-700: #4F6D85;
-  --color-primary-800: #4C6477;
-
-  /* Success - Green */
-  --color-success-100: #E5FFF3;
-  --color-success-400: #C2FFC8;
-  --color-success-600: #559D87;
-
-  /* Warning - Yellow */
-  --color-warning-100: #FFFBE5;
-  --color-warning-400: #FFDD87;
-  --color-warning-600: #9D8D55;
-
-  /* Danger - Red */
-  --color-danger-100: #FFE5E5;
-  --color-danger-400: #FF8787;
-  --color-danger-600: #9D5555;
-
-  /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
-  --color-correct: #83f1a7;
-  --color-incorrect: #e74c3c;
-
-  /* Typography */
-  --font-sen: 'Sen', sans-serif;
-  --font-jost: 'Jost', sans-serif;
-  --font-sans: 'Sen', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-}
-
-/* Font utility classes */
-.font-sen {
-  font-family: 'Sen', sans-serif;
-}
-
-.font-jost {
-  font-family: 'Jost', sans-serif;
-}
-
-/* Custom drop shadows */
-.drop-shadow-title-card {
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.drop-shadow-logo {
-  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
-}
-
-.shadow-primary-chip {
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}

package/src/toast/index.tsx

@@ -1,324 +0,0 @@
-/**
- * Toast components for proyecto-viviana-ui
- *
- * Toast notifications with auto-dismiss, animations, and variants.
- * Built on top of solidaria-components for accessibility.
- */
-
-import { type JSX, splitProps, For, Show } from 'solid-js';
-import {
-  Toast as HeadlessToast,
-  ToastRegion as HeadlessToastRegion,
-  ToastProvider as HeadlessToastProvider,
-  ToastContext,
-  ToastCloseButton as HeadlessToastCloseButton,
-  globalToastQueue,
-  addToast as headlessAddToast,
-  useToastContext,
-  type ToastContent,
-  type ToastProps as HeadlessToastProps,
-  type ToastRegionProps as HeadlessToastRegionProps,
-  type ToastProviderProps as HeadlessToastProviderProps,
-  type ToastRenderProps,
-  type ToastRegionRenderProps,
-} from '@proyecto-viviana/solidaria-components';
-import { type QueuedToast, type ToastOptions } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type ToastPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-export type ToastVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
-
-export interface ToastProviderProps extends HeadlessToastProviderProps {}
-
-export interface ToastRegionProps extends Omit<HeadlessToastRegionProps, 'class' | 'style' | 'children'> {
-  /** The placement of the toast region. */
-  placement?: ToastPlacement;
-  /** Additional CSS class name. */
-  class?: string;
-}
-
-export interface ToastProps extends Omit<HeadlessToastProps, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const regionStyles = [
-  'flex flex-col gap-3',
-  'p-4',
-].join(' ');
-
-const toastBaseStyles = [
-  'flex items-start gap-3',
-  'px-4 py-3',
-  'rounded-lg shadow-lg',
-  'min-w-[300px] max-w-[400px]',
-  'border',
-  // Animations
-  'data-[animation=entering]:animate-in data-[animation=entering]:fade-in-0 data-[animation=entering]:slide-in-from-right-5',
-  'data-[animation=exiting]:animate-out data-[animation=exiting]:fade-out-0 data-[animation=exiting]:slide-out-to-right-5',
-].join(' ');
-
-const variantStyles: Record<ToastVariant, string> = {
-  info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200',
-  success: 'bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-200',
-  warning: 'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-200',
-  error: 'bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-200',
-  neutral: 'bg-neutral-50 border-neutral-200 text-neutral-800 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200',
-};
-
-const iconStyles: Record<ToastVariant, string> = {
-  info: 'text-blue-500 dark:text-blue-400',
-  success: 'text-green-500 dark:text-green-400',
-  warning: 'text-yellow-500 dark:text-yellow-400',
-  error: 'text-red-500 dark:text-red-400',
-  neutral: 'text-neutral-500 dark:text-neutral-400',
-};
-
-const closeButtonStyles = [
-  'ml-auto -mr-1 -mt-1',
-  'p-1 rounded-md',
-  'text-current opacity-60 hover:opacity-100',
-  'transition-opacity',
-  'focus:outline-none focus:ring-2 focus:ring-offset-2',
-].join(' ');
-
-// ============================================
-// ICONS
-// ============================================
-
-const InfoIcon = () => (
-  <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-);
-
-const SuccessIcon = () => (
-  <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-);
-
-const WarningIcon = () => (
-  <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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-  </svg>
-);
-
-const ErrorIcon = () => (
-  <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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-);
-
-const CloseIcon = () => (
-  <svg class="w-4 h-4" 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>
-);
-
-const getVariantIcon = (variant: ToastVariant) => {
-  switch (variant) {
-    case 'success': return <SuccessIcon />;
-    case 'warning': return <WarningIcon />;
-    case 'error': return <ErrorIcon />;
-    case 'info':
-    case 'neutral':
-    default: return <InfoIcon />;
-  }
-};
-
-// ============================================
-// COMPONENTS
-// ============================================
-
-/**
- * ToastProvider creates a toast queue context for descendant components.
- * Wrap your app or a section that needs toast notifications.
- *
- * @example
- * ```tsx
- * <ToastProvider>
- *   <App />
- *   <ToastRegion placement="bottom-end" />
- * </ToastProvider>
- * ```
- */
-export function ToastProvider(props: ToastProviderProps): JSX.Element {
-  return <HeadlessToastProvider {...props} />;
-}
-
-/**
- * ToastRegion displays all visible toasts in a fixed position.
- *
- * @example
- * ```tsx
- * <ToastRegion placement="bottom-end" />
- * ```
- */
-export function ToastRegion(props: ToastRegionProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['placement', 'class']);
-
-  return (
-    <HeadlessToastRegion
-      {...rest}
-      placement={local.placement ?? 'bottom-end'}
-      class={(_renderProps: ToastRegionRenderProps) => {
-        return [regionStyles, local.class ?? ''].filter(Boolean).join(' ');
-      }}
-    >
-      {(regionProps: ToastRegionRenderProps) => (
-        <For each={regionProps.visibleToasts}>
-          {(toast) => <Toast toast={toast} />}
-        </For>
-      )}
-    </HeadlessToastRegion>
-  );
-}
-
-/**
- * Toast displays an individual notification with icon, content, and close button.
- *
- * Usually you don't need to use this directly - ToastRegion renders toasts automatically.
- */
-export function Toast(props: ToastProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['toast', 'class']);
-
-  const content = () => local.toast.content;
-  const variant = (): ToastVariant => content().type ?? 'neutral';
-
-  return (
-    <HeadlessToast
-      {...rest}
-      toast={local.toast}
-      class={(_renderProps: ToastRenderProps) => {
-        return [
-          toastBaseStyles,
-          variantStyles[variant()],
-          local.class ?? '',
-        ].filter(Boolean).join(' ');
-      }}
-    >
-      {/* Icon */}
-      <div class={`flex-shrink-0 ${iconStyles[variant()]}`}>
-        {getVariantIcon(variant())}
-      </div>
-
-      {/* Content */}
-      <div class="flex-1 min-w-0">
-        <Show when={content().title}>
-          <p class="font-semibold text-sm">{content().title}</p>
-        </Show>
-        <Show when={content().description}>
-          <p class="text-sm opacity-90 mt-1">{content().description}</p>
-        </Show>
-        <Show when={content().action}>
-          <button
-            type="button"
-            class="mt-2 text-sm font-medium underline hover:no-underline"
-            onClick={content().action?.onAction}
-          >
-            {content().action?.label}
-          </button>
-        </Show>
-      </div>
-
-      {/* Close Button */}
-      <HeadlessToastCloseButton
-        toast={local.toast}
-        class={closeButtonStyles}
-        aria-label="Dismiss"
-      >
-        <CloseIcon />
-      </HeadlessToastCloseButton>
-    </HeadlessToast>
-  );
-}
-
-// ============================================
-// GLOBAL TOAST API
-// ============================================
-
-/**
- * Add a toast to the global queue.
- * Use this to show toasts from anywhere in your app.
- *
- * @example
- * ```tsx
- * // Show a success toast
- * addToast({
- *   title: 'Success!',
- *   description: 'Your changes have been saved.',
- *   type: 'success',
- * });
- *
- * // Show an error toast with auto-dismiss
- * addToast({
- *   title: 'Error',
- *   description: 'Something went wrong.',
- *   type: 'error',
- * }, { timeout: 5000 });
- *
- * // Show a toast with action
- * addToast({
- *   title: 'File deleted',
- *   type: 'info',
- *   action: {
- *     label: 'Undo',
- *     onAction: () => restoreFile(),
- *   },
- * }, { timeout: 10000 });
- * ```
- */
-export function addToast(
-  content: ToastContent,
-  options?: ToastOptions
-): string {
-  return headlessAddToast(content, options);
-}
-
-/**
- * Convenience function to show a success toast.
- */
-export function toastSuccess(message: string, options?: Omit<ToastOptions, 'priority'>): string {
-  return addToast({ title: message, type: 'success' }, { timeout: 5000, ...options });
-}
-
-/**
- * Convenience function to show an error toast.
- */
-export function toastError(message: string, options?: Omit<ToastOptions, 'priority'>): string {
-  return addToast({ title: message, type: 'error' }, { timeout: 8000, ...options });
-}
-
-/**
- * Convenience function to show a warning toast.
- */
-export function toastWarning(message: string, options?: Omit<ToastOptions, 'priority'>): string {
-  return addToast({ title: message, type: 'warning' }, { timeout: 6000, ...options });
-}
-
-/**
- * Convenience function to show an info toast.
- */
-export function toastInfo(message: string, options?: Omit<ToastOptions, 'priority'>): string {
-  return addToast({ title: message, type: 'info' }, { timeout: 5000, ...options });
-}
-
-// Re-exports
-export {
-  ToastContext,
-  globalToastQueue,
-  useToastContext,
-  type ToastContent,
-  type ToastRenderProps,
-  type ToastRegionRenderProps,
-  type QueuedToast,
-  type ToastOptions,
-};