neogestify-ui-components 1.2.18 → 1.2.20

package/src/components/html/Select.tsx

@@ -1,82 +1,82 @@
-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 = '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';
-
-    if (variant === 'small') {
-      return `${baseClasses.replace('px-3 py-2', 'px-2.5 py-1.5 text-sm')} border-gray-300 dark:border-gray-600`;
-    }
-
-    return `${baseClasses} border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : ''}`;
-  };
-
-  const getOptionClasses = (option: Option) => {
-    return `bg-white dark:bg-gray-800 text-gray-900 dark:text-white py-2 ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}`;
-  };
-
-  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
-
-  return (
-    <div className="space-y-1 w-full">
-      {label && typeof label === 'string' ? (
-        <label htmlFor={selectId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-          {label}
-        </label>
-      ) : (
-        label
-      )}
-      <select id={selectId} className={combinedClassName} {...props}>
-        {placeholder && placeholder.trim() && (
-          <option value="" disabled className="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2">
-            {placeholder}
-          </option>
-        )}
-        {options.map((option) => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-            selected={option.selected}
-            className={getOptionClasses(option)}
-          >
-            {option.label}
-          </option>
-        ))}
-      </select>
-      {helperText && (
-        <p className={`text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
-          {helperText}
-        </p>
-      )}
-    </div>
-  );
+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 = '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';
+
+    if (variant === 'small') {
+      return `${baseClasses.replace('px-3 py-2', 'px-2.5 py-1.5 text-sm')} border-gray-300 dark:border-gray-600`;
+    }
+
+    return `${baseClasses} border-gray-300 dark:border-gray-600 ${error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : ''}`;
+  };
+
+  const getOptionClasses = (option: Option) => {
+    return `bg-white dark:bg-gray-800 text-gray-900 dark:text-white py-2 ${option.disabled ? 'opacity-50 cursor-not-allowed' : ''}`;
+  };
+
+  const combinedClassName = `${getVariantClasses()} ${className}`.trim();
+
+  return (
+    <div className="space-y-1 w-full">
+      {label && typeof label === 'string' ? (
+        <label htmlFor={selectId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+          {label}
+        </label>
+      ) : (
+        label
+      )}
+      <select id={selectId} className={combinedClassName} {...props}>
+        {placeholder && placeholder.trim() && (
+          <option value="" disabled selected className="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 py-2">
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+            selected={option.selected}
+            className={getOptionClasses(option)}
+          >
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {helperText && (
+        <p className={`text-sm ${error ? 'text-red-600 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
+          {helperText}
+        </p>
+      )}
+    </div>
+  );
 };

package/src/components/html/Table.tsx

@@ -1,62 +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>
-    );
+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

@@ -1,71 +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 border 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-y';
-
-  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>
-  );
+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 border 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-y';
+
+  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,8 +1,8 @@
-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';
+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';
 export { Loading } from './Loading';