@proyecto-viviana/ui 0.1.0 → 0.1.2

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/tooltip/index.tsx

@@ -0,0 +1,31 @@
+import type { JSX } from 'solid-js'
+
+export interface TooltipProps {
+  /** The content to show in the tooltip */
+  label: string
+  /** The trigger element */
+  children: JSX.Element
+  /** Position of the tooltip */
+  position?: 'top' | 'bottom'
+  /** Additional CSS class */
+  class?: string
+}
+
+/**
+ * Tooltip component that shows a label on hover.
+ * Uses CSS-only hover effect for performance.
+ */
+export function Tooltip(props: TooltipProps): JSX.Element {
+  const position = () => props.position ?? 'bottom'
+
+  return (
+    <div class={`vui-tooltip ${props.class ?? ''}`}>
+      <div class="vui-tooltip__trigger">
+        {props.children}
+      </div>
+      <div class={`vui-tooltip__content vui-tooltip__content--${position()}`}>
+        <span>{props.label}</span>
+      </div>
+    </div>
+  )
+}