alexui 1.0.0

package/components/MaskedInput.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { GlassInput } from './GlassInput';
+
+export type MaskType = 'phone' | 'cuit' | 'dni' | 'card';
+
+export interface MaskedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  mask: MaskType;
+  value: string;
+  onChange: (value: string, rawValue: string) => void;
+  error?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const applyMask = (val: string, maskType: MaskType): string => {
+  const clean = val.replace(/\D/g, '');
+  
+  switch (maskType) {
+    case 'phone':
+      // Formato: (999) 999-9999
+      if (clean.length === 0) return '';
+      if (clean.length <= 3) return `(${clean}`;
+      if (clean.length <= 6) return `(${clean.slice(0, 3)}) ${clean.slice(3)}`;
+      return `(${clean.slice(0, 3)}) ${clean.slice(3, 6)}-${clean.slice(6, 10)}`;
+
+    case 'cuit':
+      // Formato: 99-99999999-9
+      if (clean.length === 0) return '';
+      if (clean.length <= 2) return clean;
+      if (clean.length <= 10) return `${clean.slice(0, 2)}-${clean.slice(2)}`;
+      return `${clean.slice(0, 2)}-${clean.slice(2, 10)}-${clean.slice(10, 11)}`;
+
+    case 'dni':
+      // Formato: 99.999.999 o 9.999.999
+      if (clean.length === 0) return '';
+      if (clean.length <= 8) {
+        const len = clean.length;
+        if (len <= 3) return clean;
+        if (len <= 6) return `${clean.slice(0, len - 3)}.${clean.slice(len - 3)}`;
+        return `${clean.slice(0, len - 6)}.${clean.slice(len - 6, len - 3)}.${clean.slice(len - 3)}`;
+      }
+      return clean.slice(0, 8).replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
+
+    case 'card':
+      // Formato: 9999-9999-9999-9999
+      if (clean.length === 0) return '';
+      const parts = [];
+      for (let i = 0; i < clean.length && i < 16; i += 4) {
+        parts.push(clean.slice(i, i + 4));
+      }
+      return parts.join('-');
+      
+    default:
+      return val;
+  }
+};
+
+export const MaskedInput: React.FC<MaskedInputProps> = ({
+  mask,
+  value,
+  onChange,
+  disabled = false,
+  ...props
+}) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const rawVal = e.target.value.replace(/\D/g, '');
+    const maskedVal = applyMask(e.target.value, mask);
+    onChange(maskedVal, rawVal);
+  };
+
+  return (
+    <GlassInput
+      value={value}
+      onChange={handleInputChange}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};

package/components/MentionInput.tsx

@@ -0,0 +1,413 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+export interface MentionUser {
+  id: string | number;
+  username: string;
+  name: string;
+  avatarUrl?: string;
+}
+
+export interface MentionInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  suggestions: MentionUser[];
+  onSearch: (query: string) => void;
+  placeholder?: string;
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+  as?: 'input' | 'textarea';
+}
+
+// Helper to extract plain text from contentEditable div
+const getEditorText = (el: HTMLDivElement): string => {
+  let text = '';
+  const traverse = (node: Node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent || '';
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node as HTMLElement;
+      if (element.getAttribute('data-mention') === 'true') {
+        text += `@${element.getAttribute('data-username')}`;
+      } else if (element.tagName === 'BR') {
+        text += '\n';
+      } else {
+        const style = window.getComputedStyle(element);
+        const isBlock = style.display === 'block' || style.display === 'flex';
+        if (isBlock && text.length > 0 && !text.endsWith('\n')) {
+          text += '\n';
+        }
+        node.childNodes.forEach(traverse);
+      }
+    }
+  };
+  el.childNodes.forEach(traverse);
+  // Replace multiple trailing spaces or newlines if browser duplicates them
+  return text;
+};
+
+// Helper to parse plain text into HTML containing rich chips
+const parseTextToHtml = (text: string, users: MentionUser[]): string => {
+  if (!text) return '';
+  let escaped = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  escaped = escaped.replace(/\n/g, '<br>');
+
+  return escaped.replace(/@([a-zA-Z0-9_]+)/g, (match, username) => {
+    const user = users.find((u) => u.username.toLowerCase() === username.toLowerCase());
+    if (user) {
+      const avatarHtml = user.avatarUrl 
+        ? `<img src="${user.avatarUrl}" class="w-4 h-4 rounded-full object-cover flex-shrink-0 select-none" />`
+        : `<div class="w-4 h-4 rounded-full bg-accent/30 text-accent flex items-center justify-center font-bold text-[9px] flex-shrink-0 select-none">${user.username.slice(0, 2).toUpperCase()}</div>`;
+      
+      return `<span contenteditable="false" data-mention="true" data-username="${user.username}" class="inline-flex items-center gap-1.5 bg-accent/15 border border-accent/25 pl-1 pr-2 py-0.5 rounded-full text-xs font-bold text-accent mx-0.5 align-middle select-none">${avatarHtml}<span>@${user.username}</span></span>`;
+    }
+    return match;
+  });
+};
+
+export const MentionInput: React.FC<MentionInputProps> = ({
+  value,
+  onChange,
+  suggestions,
+  onSearch,
+  placeholder = 'Escribe algo, usa @ para mencionar...',
+  label,
+  disabled = false,
+  className = '',
+  as = 'input'
+}) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [activeSuggestionIdx, setActiveSuggestionIdx] = useState(0);
+  const [searchQuery, setSearchQuery] = useState('');
+  const editorRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLUListElement>(null);
+  
+  // Cache suggestions to match usernames that might be filtered out of suggestions prop later
+  const knownUsersRef = useRef<MentionUser[]>(suggestions);
+
+  useEffect(() => {
+    suggestions.forEach((user) => {
+      if (!knownUsersRef.current.some((u) => u.id === user.id)) {
+        knownUsersRef.current.push(user);
+      }
+    });
+  }, [suggestions]);
+
+  // Sync state to innerHTML only when value changes from outside (not from user input)
+  useEffect(() => {
+    if (editorRef.current) {
+      const currentText = getEditorText(editorRef.current);
+      // Normalize non-breaking spaces before comparison
+      const normalizedCurrent = currentText.replace(/\u00A0/g, ' ');
+      const normalizedValue = value.replace(/\u00A0/g, ' ');
+
+      if (normalizedCurrent !== normalizedValue) {
+        editorRef.current.innerHTML = parseTextToHtml(value, knownUsersRef.current);
+      }
+    }
+  }, [value]);
+
+  const checkTrigger = (text: string, cursorIndex: number) => {
+    const textBeforeCursor = text.slice(0, cursorIndex);
+    const lastAtIdx = textBeforeCursor.lastIndexOf('@');
+
+    if (lastAtIdx === -1) {
+      setShowDropdown(false);
+      return;
+    }
+
+    const charBeforeAt = lastAtIdx > 0 ? textBeforeCursor[lastAtIdx - 1] : ' ';
+    const hasSpaceBefore = /\s/.test(charBeforeAt) || charBeforeAt === '\u00A0';
+
+    const textAfterAt = textBeforeCursor.slice(lastAtIdx + 1);
+    const hasSpaceAfter = /\s/.test(textAfterAt) || textAfterAt.includes('\u00A0');
+
+    if (hasSpaceBefore && !hasSpaceAfter) {
+      setShowDropdown(true);
+      setSearchQuery(textAfterAt);
+      onSearch(textAfterAt);
+      setActiveSuggestionIdx(0);
+    } else {
+      setShowDropdown(false);
+    }
+  };
+
+  const handleInput = () => {
+    if (!editorRef.current) return;
+    const text = getEditorText(editorRef.current);
+    onChange(text);
+
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const anchorNode = selection.anchorNode;
+      if (anchorNode && editorRef.current.contains(anchorNode)) {
+        if (anchorNode.nodeType === Node.TEXT_NODE) {
+          checkTrigger(anchorNode.textContent || '', selection.anchorOffset);
+        } else {
+          setShowDropdown(false);
+        }
+      } else {
+        setShowDropdown(false);
+      }
+    } else {
+      setShowDropdown(false);
+    }
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') return;
+    
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const anchorNode = selection.anchorNode;
+      if (anchorNode && editorRef.current?.contains(anchorNode)) {
+        if (anchorNode.nodeType === Node.TEXT_NODE) {
+          checkTrigger(anchorNode.textContent || '', selection.anchorOffset);
+        }
+      }
+    }
+  };
+
+  const handleSelectUser = (user: MentionUser) => {
+    if (!editorRef.current) return;
+
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const anchorNode = selection.anchorNode;
+
+      // Ensure the selection is actually inside our editor container!
+      if (anchorNode && editorRef.current.contains(anchorNode)) {
+        // Use native Selection API to extend the selection backward exactly the length of the trigger
+        // This is the most robust way to traverse across complex contentEditable DOM structures
+        const charsToDelete = searchQuery.length + 1; // +1 for the '@'
+        
+        for (let i = 0; i < charsToDelete; i++) {
+          selection.modify('extend', 'backward', 'character');
+        }
+
+        // Get the newly extended range and delete its contents
+        const rangeToReplace = selection.getRangeAt(0);
+        rangeToReplace.deleteContents();
+
+        // Use the current range (which is now collapsed at the deletion point) to insert the chip
+        const range = selection.getRangeAt(0);
+        const chip = document.createElement('span');
+        chip.contentEditable = 'false';
+        chip.setAttribute('data-mention', 'true');
+        chip.setAttribute('data-username', user.username);
+        chip.className = 'inline-flex items-center gap-1.5 bg-accent/15 border border-accent/25 pl-1 pr-2 py-0.5 rounded-full text-xs font-bold text-accent mx-0.5 align-middle select-none';
+
+        if (user.avatarUrl) {
+          const img = document.createElement('img');
+          img.src = user.avatarUrl;
+          img.className = 'w-4 h-4 rounded-full object-cover flex-shrink-0 select-none';
+          chip.appendChild(img);
+        } else {
+          const fallback = document.createElement('div');
+          fallback.className = 'w-4 h-4 rounded-full bg-accent/30 text-accent flex items-center justify-center font-bold text-[9px] flex-shrink-0 select-none';
+          fallback.textContent = user.username.slice(0, 2).toUpperCase();
+          chip.appendChild(fallback);
+        }
+
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = `@${user.username}`;
+        chip.appendChild(labelSpan);
+
+        // Create non-breaking space text node
+        const space = document.createTextNode('\u00A0');
+        // Insert space first
+        range.insertNode(space);
+        // Insert chip second (places the chip before the space)
+        range.insertNode(chip);
+
+        // Move cursor after the space
+        range.setStartAfter(space);
+        range.setEndAfter(space);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      } else {
+        // Fallback: Append chip to the end of editor container
+        const chip = document.createElement('span');
+        chip.contentEditable = 'false';
+        chip.setAttribute('data-mention', 'true');
+        chip.setAttribute('data-username', user.username);
+        chip.className = 'inline-flex items-center gap-1.5 bg-accent/15 border border-accent/25 pl-1 pr-2 py-0.5 rounded-full text-xs font-bold text-accent mx-0.5 align-middle select-none';
+
+        if (user.avatarUrl) {
+          const img = document.createElement('img');
+          img.src = user.avatarUrl;
+          img.className = 'w-4 h-4 rounded-full object-cover flex-shrink-0 select-none';
+          chip.appendChild(img);
+        } else {
+          const fallback = document.createElement('div');
+          fallback.className = 'w-4 h-4 rounded-full bg-accent/30 text-accent flex items-center justify-center font-bold text-[9px] flex-shrink-0 select-none';
+          fallback.textContent = user.username.slice(0, 2).toUpperCase();
+          chip.appendChild(fallback);
+        }
+
+        const labelSpan = document.createElement('span');
+        labelSpan.textContent = `@${user.username}`;
+        chip.appendChild(labelSpan);
+
+        editorRef.current.appendChild(chip);
+
+        // Append non-breaking space
+        const space = document.createTextNode('\u00A0');
+        editorRef.current.appendChild(space);
+
+        // Move cursor after space
+        const newRange = document.createRange();
+        newRange.setStartAfter(space);
+        newRange.setEndAfter(space);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+      }
+
+      // Trigger onChange with new plain text content
+      editorRef.current.focus();
+      const updatedText = getEditorText(editorRef.current);
+      onChange(updatedText);
+    }
+
+    setShowDropdown(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (showDropdown && suggestions.length > 0) {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveSuggestionIdx((prev) => (prev + 1) % suggestions.length);
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveSuggestionIdx((prev) => (prev - 1 + suggestions.length) % suggestions.length);
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        handleSelectUser(suggestions[activeSuggestionIdx]);
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        setShowDropdown(false);
+      }
+    } else {
+      if (e.key === 'Enter' && as === 'input') {
+        e.preventDefault(); // Prevent carriage return in input mode
+      }
+    }
+  };
+
+  // Close dropdown on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setShowDropdown(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  return (
+    <div className={`relative w-full flex flex-col gap-1.5 ${className}`}>
+      {label && (
+        <span className="text-xs font-bold text-text-muted uppercase tracking-wider px-1">
+          {label}
+        </span>
+      )}
+
+      {/* Input container wrapper */}
+      <div className="relative rounded-xl overflow-visible transition-all duration-300">
+        
+        {/* Glow border ring */}
+        <div className="absolute -inset-[1px] bg-gradient-to-r from-accent/50 to-pink-500/50 rounded-xl pointer-events-none z-0 blur-[1px] opacity-20" />
+
+        <div className={`relative bg-bg-card/60 border border-border-app rounded-xl z-10 flex transition-all duration-300 ${
+          disabled ? 'opacity-40 cursor-not-allowed select-none bg-bg-app/10' : ''
+        } ${as === 'textarea' ? 'p-1' : 'p-0.5'}`}>
+          <div
+            ref={editorRef}
+            contentEditable={!disabled}
+            onInput={handleInput}
+            onKeyUp={handleKeyUp}
+            onKeyDown={handleKeyDown}
+            className={`w-full bg-transparent p-3 text-sm text-text-main focus:outline-hidden outline-hidden ${
+              disabled ? 'cursor-not-allowed' : 'cursor-text'
+            } ${
+              as === 'textarea' 
+                ? 'resize-y min-h-[100px] overflow-y-auto max-h-60' 
+                : 'whitespace-nowrap overflow-x-auto overflow-y-hidden min-h-[44px] flex items-center'
+            }`}
+            style={{
+              outline: 'none',
+              boxShadow: 'none'
+            }}
+          />
+        </div>
+
+        {/* Floating placeholder */}
+        {(!value || value.length === 0) && (
+          <div 
+            onClick={() => {
+              if (!disabled && editorRef.current) editorRef.current.focus();
+            }}
+            className={`absolute left-4 pointer-events-none text-sm text-text-muted/50 select-none z-15 ${
+              as === 'textarea' ? 'top-4' : 'top-1/2 -translate-y-1/2'
+            }`}
+          >
+            {placeholder}
+          </div>
+        )}
+
+        {/* Suggestion list popover */}
+        <AnimatePresence>
+          {showDropdown && suggestions.length > 0 && (
+            <motion.ul
+              ref={dropdownRef}
+              initial={{ opacity: 0, y: 10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 4, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.95 }}
+              className="absolute left-0 mt-1 w-64 glass rounded-xl shadow-2xl border border-border-app/50 py-1.5 z-50 max-h-48 overflow-y-auto"
+            >
+              {suggestions.map((user, idx) => {
+                const isActive = idx === activeSuggestionIdx;
+                return (
+                  <li
+                    key={user.id}
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      handleSelectUser(user);
+                    }}
+                    className={`px-3.5 py-2 text-xs flex items-center gap-3 transition-colors duration-200 cursor-pointer ${
+                      isActive 
+                        ? 'bg-accent/15 text-accent font-semibold' 
+                        : 'text-text-main hover:bg-bg-app'
+                    }`}
+                  >
+                    {user.avatarUrl ? (
+                      <img
+                        src={user.avatarUrl}
+                        alt={user.name}
+                        className="w-6 h-6 rounded-full object-cover border border-border-app/50"
+                      />
+                    ) : (
+                      <div className="w-6 h-6 rounded-full bg-accent/20 text-accent flex items-center justify-center font-bold text-[10px]">
+                        {user.username.slice(0, 2).toUpperCase()}
+                      </div>
+                    )}
+                    <div className="flex flex-col">
+                      <span className="font-bold">@{user.username}</span>
+                      <span className="text-[10px] text-text-muted">{user.name}</span>
+                    </div>
+                  </li>
+                );
+              })}
+            </motion.ul>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};

package/components/MorphingSwitch.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+
+export interface MorphingSwitchProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  className?: string;
+  disabled?: boolean;
+  isInvalid?: boolean;
+}
+
+export const MorphingSwitch: React.FC<MorphingSwitchProps> = ({
+  checked,
+  onChange,
+  className = '',
+  disabled = false,
+  isInvalid = false
+}) => {
+  const isMounted = React.useRef(false);
+  // Motion values for custom width control to simulate morphing
+  const knobWidth = useMotionValue(24);
+  const knobX = useMotionValue(checked ? 24 : 0);
+
+  // Springs for smooth, physics-based movement
+  const springKnobX = useSpring(knobX, { stiffness: 600, damping: 35 });
+  const springKnobWidth = useSpring(knobWidth, { stiffness: 400, damping: 20 });
+
+  // Update target positions on checked status changes
+  useEffect(() => {
+    knobX.set(checked ? 24 : 0);
+    
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    
+    // Stretch Knob
+    knobWidth.set(36);
+    
+    // Settle back to normal width after a tiny delay
+    const timer = setTimeout(() => {
+      knobWidth.set(24);
+    }, 150);
+
+    return () => clearTimeout(timer);
+  }, [checked, knobX, knobWidth]);
+
+  const handleToggle = () => {
+    if (disabled) return;
+    onChange(!checked);
+  };
+
+  const shadowColor = isInvalid 
+    ? '0 0 12px var(--color-error)' 
+    : (checked && !disabled ? '0 0 12px var(--color-accent)' : 'none');
+
+  const getBgClass = () => {
+    if (isInvalid) {
+      return checked ? 'bg-error border border-error/50' : 'bg-error/15 border border-error/50';
+    }
+    return checked ? 'bg-accent border-transparent' : 'bg-border-app border-transparent';
+  };
+
+  return (
+    <button
+      onClick={handleToggle}
+      disabled={disabled}
+      className={`relative h-8 w-14 rounded-full p-1 border transition-colors duration-300 focus:outline-hidden ${getBgClass()} ${
+        disabled ? 'opacity-40 cursor-not-allowed select-none' : 'cursor-pointer'
+      } ${className}`}
+      style={{ boxShadow: shadowColor }}
+      role="switch"
+      aria-checked={checked}
+    >
+      <motion.div
+        style={{
+          x: springKnobX,
+          width: springKnobWidth,
+        }}
+        className="h-5.5 rounded-full bg-white shadow-md origin-left"
+        // Also add a little press-down squeeze effect on hover active
+        whileTap={disabled ? undefined : { scaleY: 0.9, scaleX: 1.15 }}
+      />
+    </button>
+  );
+};