neogestify-ui-components 1.0.1 → 1.1.1

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

@@ -1,5 +1,6 @@
 export { Button } from './Button';
 export { Input } from './Input';
+export { TextArea } from './TextArea';
 export { Form } from './Form';
 export { Select } from './Select';
 export { Table } from './Table';

package/src/components/icons/icons.tsx

@@ -544,4 +544,12 @@ export function LifeGuardIcon({ className }: Props) {
             <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
         </svg>
     )
+}
+
+export function MonitorIcon({ className }: Props) {
+    return (
+        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M4 18q-.825 0-1.412-.587T2 16V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v11q0 .825-.587 1.413T20 18h-3l.7.7q.15.15.225.338t.075.387V20q0 .425-.288.712T17 21H7q-.425 0-.712-.288T6 20v-.575q0-.2.075-.387T6.3 18.7L7 18zm0-2h16V5H4zm0 0V5z" />
+        </svg>
+    )
 }