neogestify-ui-components 1.0.0 → 1.1.0

package/src/components/html/Button.tsx

@@ -0,0 +1,72 @@
+import { AnimateSpin } from '../icons/icons';
+import { type ButtonHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'icon' | 'danger' | 'success' | 'outline' | 'nav' | 'custom' | 'link' | 'warning' | 'toggle';
+  children: ReactNode;
+  isLoading?: boolean;
+  loadingText?: string;
+  isActive?: boolean;
+}
+
+export const Button: FC<ButtonProps> = ({
+  variant = 'primary',
+  children,
+  isLoading = false,
+  loadingText,
+  isActive = false,
+  className = '',
+  disabled,
+  ...props
+}) => {
+  const baseClasses = 'transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed hover:cursor-pointer';
+
+  const variantClasses = {
+    primary: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    secondary: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm hover:shadow-md focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    icon: 'p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    danger: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    success: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    outline: 'py-2 px-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-indigo-500 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    nav: 'w-full flex items-center px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 hover:scale-105 text-gray-700 dark:text-gray-300 dark:hover:text-white hover:shadow-lg',
+    custom: "",
+    link: 'text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 transition-colors duration-200',
+    warning: 'py-2 px-2 border border-transparent text-sm font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 dark:bg-yellow-500 dark:hover:bg-yellow-600 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-900',
+    toggle: 'px-2 py-2 rounded-lg font-medium transition-all duration-200 disabled:cursor-not-allowed border-2 focus:outline-none focus:ring-2 focus:ring-indigo-500'
+  };
+
+  let classes = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+  if (variant === 'nav' && isActive) {
+    classes += ' bg-indigo-600 dark:bg-indigo-500 hover:bg-indigo-700 dark:hover:bg-indigo-600 text-white shadow-lg scale-105';
+  }
+
+  if (variant === 'nav' && !isActive) {
+    classes += ' hover:bg-white dark:hover:bg-gray-700 hover:shadow-lg';
+  }
+
+  if (variant === 'toggle') {
+    if (isActive) {
+      classes += ' bg-indigo-600 text-white border-indigo-500 hover:bg-indigo-700';
+    } else {
+      classes += ' bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-300 dark:border-gray-600 hover:bg-gray-300 dark:hover:bg-gray-600 hover:border-gray-400 dark:hover:border-gray-500';
+    }
+  }
+
+  return (
+    <button
+      className={classes}
+      disabled={disabled || isLoading}
+      {...props}
+    >
+      {isLoading ? (
+        <>
+          <AnimateSpin className="h-5 w-5 mr-2 inline-block text-current" />
+          {loadingText || 'Cargando...'}
+        </>
+      ) : (
+        children
+      )}
+    </button>
+  );
+};

package/src/components/html/Form.tsx

@@ -0,0 +1,40 @@
+import { type FormHTMLAttributes, type FC, type FormEvent, type ReactNode } from 'react';
+
+interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    children: ReactNode;
+    onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
+    variant?: 'default' | 'modal' | 'card' | 'inline' | 'compact';
+}
+
+export const Form: FC<FormProps> = ({ onSubmit, children, variant = 'default', className = '', ...props }) => {
+    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        if (onSubmit) {
+            onSubmit(e);
+        }
+    };
+
+    const getVariantClasses = () => {
+        switch (variant) {
+            case 'modal':
+                return 'flex-1 px-6 py-4 overflow-y-auto';
+            case 'card':
+                return 'p-6 space-y-6';
+            case 'inline':
+                return 'flex flex-wrap gap-4 items-end';
+            case 'compact':
+                return 'space-y-3';
+            case 'default':
+            default:
+                return 'space-y-4';
+        }
+    };
+
+    const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+    return (
+        <form onSubmit={handleSubmit} className={combinedClassName} {...props}>
+            {children}
+        </form>
+    );
+};

package/src/components/html/Input.tsx

@@ -0,0 +1,91 @@
+import { type InputHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string | ReactNode;
+  error?: string;
+  helperText?: string;
+}
+
+export const Input: FC<InputProps> = ({
+  label,
+  error,
+  helperText,
+  className = '',
+  id,
+  type,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
+  const baseClasses = 'appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white bg-white dark:bg-gray-800 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200';
+
+  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : 'border-gray-300 dark:border-gray-600';
+
+  const classes = `${baseClasses} ${errorClasses} ${className}`;
+
+  if (type === 'checkbox') {
+    return (
+      <div className="space-y-1 w-full">
+        <div className="flex items-center space-x-2">
+          <input
+            id={inputId}
+            type="checkbox"
+            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
+            {...props}
+          />
+          {label && typeof label === 'string' ? (
+            <label
+              htmlFor={inputId}
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+            >
+              {label}
+            </label>
+          ) : (
+            label
+          )}
+        </div>
+        {error && (
+          <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label
+          htmlFor={inputId}
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <input
+        id={inputId}
+        className={classes}
+        type={type}
+        {...props}
+      />
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/html/Modal.tsx

@@ -0,0 +1,80 @@
+import { Button } from './Button';
+import { CloseIcon } from '../icons/icons';
+import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+
+interface ModalProps {
+    onClose: () => void;
+    title: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    maxWidth?: string;
+    showCloseButton?: boolean;
+    zIndex?: number;
+}
+
+export interface ModalRef {
+    handleClose: () => void;
+}
+
+export const Modal = forwardRef<ModalRef, ModalProps>(({
+    onClose,
+    title,
+    children,
+    footer,
+    maxWidth = 'max-w-2xl',
+    showCloseButton = true,
+    zIndex = 50
+}, ref) => {
+    const [show, setShow] = useState(false);
+
+    useEffect(() => {
+        setShow(true);
+    }, []);
+
+    const handleClose = () => {
+        setShow(false);
+        setTimeout(() => {
+            onClose();
+        }, 300);
+    };
+
+    useImperativeHandle(ref, () => ({
+        handleClose
+    }));
+
+    return (
+        <dialog
+            open={show}
+            className={`fixed inset-0 w-full h-full flex items-center justify-center p-4 ${show && 'opacity-100'} transition-opacity opacity-0 duration-300 bg-gray-900/60 backdrop-blur-sm`}
+            style={{ zIndex: zIndex - 10 }}
+        >
+            <article
+                className={`relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-2xl w-full ${maxWidth} max-h-[90vh] flex flex-col overflow-hidden`}
+                style={{ zIndex }}
+            >
+                <header className="shrink-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-6 py-4 flex items-center justify-between">
+                    <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{title}</h2>
+                    {showCloseButton && (
+                        <Button
+                            variant='icon'
+                            onClick={handleClose}
+                            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                        >
+                            <CloseIcon className="w-5 h-5" />
+                        </Button>
+                    )}
+                </header>
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+                {footer && (
+                    <footer className="shrink-0 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-6 py-4 flex justify-end gap-3">
+                        {footer}
+                    </footer>
+                )}
+            </article>
+        </dialog>
+    );
+});
+
+Modal.displayName = 'Modal';

package/src/components/html/Select.tsx

@@ -0,0 +1,77 @@
+import { type SelectHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface Option {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  selected?: boolean;
+}
+
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  options: Option[];
+  placeholder?: string;
+  variant?: 'default' | 'small';
+  error?: boolean;
+  helperText?: string;
+  label?: string | ReactNode;
+}
+
+export const Select: FC<SelectProps> = ({
+  options,
+  placeholder,
+  variant = 'default',
+  error = false,
+  helperText,
+  label,
+  className = '',
+  id,
+  ...props
+}) => {
+  const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
+
+  const getVariantClasses = () => {
+    const baseClasses = 'w-full bg-white dark:bg-gray-700 border rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-colors';
+
+    if (variant === 'small') {
+      return `${baseClasses} px-2.5 py-1.5 text-sm border-gray-300 dark:border-gray-600`;
+    }
+
+    return `${baseClasses} px-3 py-2 border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500' : ''}`;
+  };
+
+  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label htmlFor={selectId} className="block text-xs font-normal text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <select id={selectId} className={combinedClassName} {...props}>
+        {placeholder && placeholder.trim() && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            selected={option.selected}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {helperText && (
+        <p className={`mt-1 text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-600 dark:text-gray-400'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/html/Table.tsx

@@ -0,0 +1,62 @@
+import { type ReactNode } from 'react';
+
+interface TableProps {
+    headers: ReactNode[];
+    rows: ReactNode[][];
+    variant?: 'default' | 'custom';
+    className?: string;
+    thClassName?: string;
+    tdClassName?: string;
+}
+
+export function Table({
+    headers,
+    rows,
+    variant = 'default',
+    className = '',
+    thClassName = '',
+    tdClassName = ''
+}: TableProps) {
+    const baseTableClass = variant === 'default'
+        ? 'w-full table-auto border-collapse border border-gray-300 dark:border-gray-600 min-w-full'
+        : '';
+
+    const baseThClass = variant === 'default'
+        ? 'border border-gray-300 dark:border-gray-600 px-4 py-2 text-left text-gray-900 dark:text-white'
+        : '';
+
+    const baseTdClass = variant === 'default'
+        ? 'border border-gray-300 dark:border-gray-600 px-4 py-2 text-gray-900 dark:text-white'
+        : '';
+
+    const tableClass = `${baseTableClass} ${className}`.trim();
+    const thClass = `${baseThClass} ${thClassName}`.trim();
+    const tdClass = `${baseTdClass} ${tdClassName}`.trim();
+
+    return (
+        <div className="overflow-x-auto w-full">
+            <table className={tableClass}>
+                <thead>
+                    <tr className={variant === 'default' ? 'bg-gray-100 dark:bg-gray-700' : ''}>
+                        {headers.map((header, index) => (
+                            <th key={index} className={thClass}>
+                                {header}
+                            </th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows.map((row, rowIndex) => (
+                        <tr key={rowIndex} className={variant === 'default' ? 'hover:bg-gray-50 dark:hover:bg-gray-600' : ''}>
+                            {row.map((cell, cellIndex) => (
+                                <td key={cellIndex} className={tdClass}>
+                                    {cell}
+                                </td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}

package/src/components/html/TextArea.tsx

@@ -0,0 +1,71 @@
+import { type TextareaHTMLAttributes, type FC, type ReactNode } from 'react';
+
+interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string | ReactNode;
+  error?: string;
+  helperText?: string;
+  variant?: 'default' | 'outline' | 'filled' | 'minimal';
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const TextArea: FC<TextAreaProps> = ({
+  label,
+  error,
+  helperText,
+  variant = 'default',
+  size = 'medium',
+  className = '',
+  id,
+  ...props
+}) => {
+  const textAreaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
+
+  const sizeClasses = {
+    small: 'px-2 py-1 text-xs',
+    medium: 'px-3 py-2 text-sm',
+    large: 'px-4 py-3 text-base'
+  };
+
+  const variantClasses = {
+    default: 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800',
+    outline: 'border-2 border-indigo-300 dark:border-indigo-600 bg-transparent',
+    filled: 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700',
+    minimal: 'border-0 bg-transparent focus:ring-0 focus:border-0'
+  };
+
+  const baseClasses = 'appearance-none relative block w-full placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400 focus:border-indigo-500 focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200 resize-vertical';
+
+  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : '';
+
+  const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${errorClasses} ${className}`;
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label
+          htmlFor={textAreaId}
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <textarea
+        id={textAreaId}
+        className={classes}
+        {...props}
+      />
+      {error && (
+        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
+          {error}
+        </p>
+      )}
+      {helperText && !error && (
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/components/html/index.ts

@@ -0,0 +1,7 @@
+export { Button } from './Button';
+export { Input } from './Input';
+export { TextArea } from './TextArea';
+export { Form } from './Form';
+export { Select } from './Select';
+export { Table } from './Table';
+export { Modal, type ModalRef } from './Modal';