@proyecto-viviana/ui 0.3.2 → 0.3.4

package/src/textfield/index.tsx

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

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

@@ -0,0 +1,324 @@
+/**
+ * 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,
+};