neogestify-ui-components 2.2.2 → 2.3.0

package/src/components/html/Table.tsx

@@ -1,8 +1,24 @@
 import { type ReactNode, type CSSProperties } from 'react';
+import { SortAscIcon, SortDescIcon, SortBothIcon } from '../icons/icons';
+
+type TableVariant =
+    | 'default'
+    | 'striped'
+    | 'bordered'
+    | 'minimal'
+    | 'ghost'
+    | 'card'
+    | 'accent'
+    | 'dark'
+    | 'custom';
 
-type TableVariant = 'default' | 'striped' | 'bordered' | 'minimal' | 'custom';
 type TableSize = 'sm' | 'md' | 'lg';
 
+interface SortState {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+
 interface ColumnDef {
     /** Contenido del encabezado */
     header: ReactNode;
@@ -10,67 +26,105 @@ interface ColumnDef {
     className?: string;
     /** Alinear el contenido de esta columna */
     align?: 'left' | 'center' | 'right';
+    /** Ancho fijo (px, %, rem…) */
+    width?: string | number;
+    /** Ancho mínimo */
+    minWidth?: string | number;
+    /** Fija esta columna a la izquierda durante scroll horizontal */
+    sticky?: boolean;
+    /** Estilos inline exclusivos para <th> */
+    thStyle?: CSSProperties;
+    /** Estilos inline exclusivos para <td> */
+    tdStyle?: CSSProperties;
+    /** Muestra indicador de ordenación. Requiere `key` */
+    sortable?: boolean;
+    /** Clave usada en sortState y onSort */
+    key?: string;
 }
 
 interface TableProps {
     /**
-     * Definición de columnas con encabezado y opciones por columna.
-     * Si pasas strings simples, los usa como encabezados sin configuración extra.
+     * Definición de columnas. Acepta strings simples o ColumnDef para
+     * configuración avanzada (ancho, sticky, sort, etc.).
      */
     columns: (ColumnDef | ReactNode)[];
 
-    /** Filas de la tabla. Cada fila es un arreglo de celdas. */
+    /** Filas del cuerpo. Cada fila es un arreglo de celdas. */
     rows: ReactNode[][];
 
-    /** Estilo visual de la tabla. Default: 'default' */
+    /** Estilo visual. Default: 'default' */
     variant?: TableVariant;
 
-    /** Tamaño de padding de celdas. Default: 'md' */
+    /** Tamaño de padding. Default: 'md' */
     size?: TableSize;
 
-    /** Clase CSS adicional para el wrapper `<div>` externo */
+    /** Clase CSS adicional para el wrapper <div> */
     className?: string;
 
-    /** Clase CSS adicional para el `<table>` */
+    /** Clase CSS adicional para el <table> */
     tableClassName?: string;
 
-    /** Clase CSS adicional para cada `<th>` */
+    /** Clase CSS adicional para cada <th> */
     thClassName?: string;
 
-    /** Clase CSS adicional para cada `<td>` */
+    /** Clase CSS adicional para cada <td> */
     tdClassName?: string;
 
-    /** Clase CSS adicional para cada `<tr>` del body */
+    /** Clase CSS adicional por fila del body */
     trClassName?: string | ((rowIndex: number) => string);
 
-    /** Texto o nodo a mostrar cuando `rows` está vacío */
+    /** Nodo a mostrar cuando rows está vacío */
     emptyState?: ReactNode;
 
     /** Callback al hacer click en una fila */
     onRowClick?: (rowIndex: number) => void;
 
-    /** Si true, no muestra thead */
+    /** Oculta el thead */
     hideHeader?: boolean;
 
-    /** Estilos inline para el `<table>` */
+    /** Estilos inline para el <table> */
     style?: CSSProperties;
-}
 
-// ─── Helpers ─────────────────────────────────────────────────────────────────
+    /** Fija el thead al hacer scroll vertical */
+    stickyHeader?: boolean;
 
-function isColumnDef(col: ColumnDef | ReactNode): col is ColumnDef {
-    return typeof col === 'object' && col !== null && 'header' in (col as object);
-}
+    /** Caption accesible de la tabla */
+    caption?: ReactNode;
 
-function resolveColumn(col: ColumnDef | ReactNode): ColumnDef {
-    if (isColumnDef(col)) return col;
-    return { header: col };
+    /** Filas del <tfoot> */
+    footerRows?: ReactNode[][];
+
+    /** Muestra esqueleto animado en lugar de rows */
+    loading?: boolean;
+
+    /** Número de filas esqueleto cuando loading=true. Default: 4 */
+    loadingRows?: number;
+
+    /** Estilo inline por fila del body */
+    getRowStyle?: (rowIndex: number) => CSSProperties;
+
+    /** Agrega rounded-lg al wrapper */
+    rounded?: boolean;
+
+    /** Agrega sombra al wrapper */
+    shadow?: boolean;
+
+    /** Desactiva el efecto hover en filas. Default: true */
+    hoverable?: boolean;
+
+    /** Estado actual de ordenación */
+    sortState?: SortState | null;
+
+    /** Callback al hacer click en un th sortable */
+    onSort?: (key: string) => void;
 }
 
+// ─── Lookup tables ────────────────────────────────────────────────────────────
+
 const ALIGN_CLASS: Record<string, string> = {
-    left: 'text-left',
+    left:   'text-left',
     center: 'text-center',
-    right: 'text-right',
+    right:  'text-right',
 };
 
 const SIZE_TH: Record<TableSize, string> = {
@@ -90,6 +144,10 @@ const VARIANT_TABLE: Record<TableVariant, string> = {
     striped:  'w-full min-w-full table-auto',
     bordered: 'w-full min-w-full table-auto border border-gray-300 dark:border-gray-600',
     minimal:  'w-full min-w-full table-auto',
+    ghost:    'w-full min-w-full table-auto',
+    card:     'w-full min-w-full table-auto',
+    accent:   'w-full min-w-full table-auto',
+    dark:     'w-full min-w-full table-auto',
     custom:   'w-full min-w-full table-auto',
 };
 
@@ -98,6 +156,10 @@ const VARIANT_THEAD: Record<TableVariant, string> = {
     striped:  'bg-gray-100 dark:bg-gray-700',
     bordered: 'bg-gray-100 dark:bg-gray-700',
     minimal:  '',
+    ghost:    '',
+    card:     'bg-gray-50 dark:bg-gray-800/80',
+    accent:   'bg-blue-600 dark:bg-blue-700',
+    dark:     'bg-gray-800 dark:bg-gray-900',
     custom:   '',
 };
 
@@ -106,14 +168,49 @@ const VARIANT_TH: Record<TableVariant, string> = {
     striped:  'font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300',
     bordered: 'font-semibold uppercase tracking-wider text-gray-600 dark:text-gray-300 border border-gray-300 dark:border-gray-600',
     minimal:  'font-semibold text-gray-500 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700',
+    ghost:    'font-semibold text-gray-600 dark:text-gray-400 border-b-2 border-gray-300 dark:border-gray-600',
+    card:     'font-semibold text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700',
+    accent:   'font-semibold uppercase tracking-wider text-white',
+    dark:     'font-semibold uppercase tracking-wider text-gray-100',
     custom:   '',
 };
 
-const VARIANT_TR: Record<TableVariant, (i: number) => string> = {
-    default:  () => 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors',
-    striped:  (i) => `${i % 2 === 0 ? 'bg-white dark:bg-gray-800' : 'bg-gray-50 dark:bg-gray-700/40'} hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors`,
-    bordered: () => 'bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors',
-    minimal:  () => 'hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors',
+// Base row bg per variant (overridden by stripe for 'striped')
+const VARIANT_TR_BASE: Record<TableVariant, string> = {
+    default:  'bg-white dark:bg-gray-800',
+    striped:  '',
+    bordered: 'bg-white dark:bg-gray-800',
+    minimal:  '',
+    ghost:    '',
+    card:     'bg-white dark:bg-gray-900',
+    accent:   'bg-white dark:bg-gray-800',
+    dark:     'bg-white dark:bg-gray-800',
+    custom:   '',
+};
+
+const VARIANT_TR_HOVER: Record<TableVariant, string> = {
+    default:  'hover:bg-gray-50 dark:hover:bg-gray-700/60',
+    striped:  'hover:bg-blue-50 dark:hover:bg-blue-900/20',
+    bordered: 'hover:bg-gray-50 dark:hover:bg-gray-700/60',
+    minimal:  'hover:bg-gray-50 dark:hover:bg-gray-800/60',
+    ghost:    'hover:bg-gray-50/70 dark:hover:bg-white/5',
+    card:     'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+    accent:   'hover:bg-blue-50 dark:hover:bg-blue-900/20',
+    dark:     'hover:bg-gray-50 dark:hover:bg-gray-700/60',
+    custom:   '',
+};
+
+const VARIANT_TR_STRIPE: Record<TableVariant, (i: number) => string> = {
+    default:  () => '',
+    striped:  (i) => i % 2 === 0
+        ? 'bg-white dark:bg-gray-800'
+        : 'bg-gray-50 dark:bg-gray-700/40',
+    bordered: () => '',
+    minimal:  () => '',
+    ghost:    () => '',
+    card:     () => '',
+    accent:   () => '',
+    dark:     () => '',
     custom:   () => '',
 };
 
@@ -122,6 +219,10 @@ const VARIANT_TD: Record<TableVariant, string> = {
     striped:  'text-gray-700 dark:text-gray-300',
     bordered: 'text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700',
     minimal:  'text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-800',
+    ghost:    'text-gray-700 dark:text-gray-300',
+    card:     'text-gray-700 dark:text-gray-300',
+    accent:   'text-gray-700 dark:text-gray-300',
+    dark:     'text-gray-700 dark:text-gray-300',
     custom:   '',
 };
 
@@ -130,9 +231,51 @@ const VARIANT_TBODY_DIVIDER: Record<TableVariant, string> = {
     striped:  '',
     bordered: '',
     minimal:  '',
+    ghost:    'divide-y divide-gray-200 dark:divide-gray-700',
+    card:     'divide-y divide-gray-100 dark:divide-gray-800',
+    accent:   'divide-y divide-gray-200 dark:divide-gray-700',
+    dark:     'divide-y divide-gray-200 dark:divide-gray-700',
     custom:   '',
 };
 
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function SortIcon({ direction }: { direction?: 'asc' | 'desc' | null }) {
+    if (direction === 'asc') return <SortAscIcon className="inline-block ml-1 w-3 h-3 shrink-0" />;
+    if (direction === 'desc') return <SortDescIcon className="inline-block ml-1 w-3 h-3 shrink-0" />;
+    return <SortBothIcon className="inline-block ml-1 w-3 h-3 shrink-0 opacity-40" />;
+}
+
+function SkeletonRow({ colCount, size }: { colCount: number; size: TableSize }) {
+    return (
+        <tr>
+            {Array.from({ length: colCount }).map((_, i) => (
+                <td key={i} className={SIZE_TD[size]}>
+                    <div className="h-4 rounded bg-gray-200 dark:bg-gray-700 animate-pulse" />
+                </td>
+            ))}
+        </tr>
+    );
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function isColumnDef(col: ColumnDef | ReactNode): col is ColumnDef {
+    return typeof col === 'object' && col !== null && 'header' in (col as object);
+}
+
+function resolveColumn(col: ColumnDef | ReactNode): ColumnDef {
+    if (isColumnDef(col)) return col;
+    return { header: col };
+}
+
+function colSizeStyle(col: ColumnDef): CSSProperties {
+    const s: CSSProperties = {};
+    if (col.width !== undefined) s.width = col.width;
+    if (col.minWidth !== undefined) s.minWidth = col.minWidth;
+    return s;
+}
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 export function Table({
@@ -149,48 +292,96 @@ export function Table({
     onRowClick,
     hideHeader = false,
     style,
+    stickyHeader = false,
+    caption,
+    footerRows,
+    loading = false,
+    loadingRows = 4,
+    getRowStyle,
+    rounded = false,
+    shadow = false,
+    hoverable = true,
+    sortState,
+    onSort,
 }: TableProps) {
     const cols = columns.map(resolveColumn);
 
     const resolvedTrClass = (i: number): string => {
-        const variantCls = VARIANT_TR[variant](i);
+        const stripeCls = VARIANT_TR_STRIPE[variant](i);
+        const baseCls = stripeCls || VARIANT_TR_BASE[variant];
+        const hoverCls = hoverable ? `${VARIANT_TR_HOVER[variant]} transition-colors` : '';
         const clickCls = onRowClick ? 'cursor-pointer' : '';
         const customCls = typeof trClassName === 'function' ? trClassName(i) : (trClassName ?? '');
-        return `${variantCls} ${clickCls} ${customCls}`.trim();
+        return [baseCls, hoverCls, clickCls, customCls].filter(Boolean).join(' ');
     };
 
+    const wrapperCls = [
+        'overflow-x-auto w-full',
+        rounded ? 'rounded-lg overflow-hidden' : '',
+        shadow ? 'shadow-md' : '',
+        className,
+    ].filter(Boolean).join(' ');
+
+    const theadCls = [
+        VARIANT_THEAD[variant],
+        stickyHeader ? 'sticky top-0 z-20' : '',
+    ].filter(Boolean).join(' ');
+
+    const stickyColCls = 'sticky left-0 z-10 bg-inherit';
+
     return (
-        <div className={`overflow-x-auto w-full ${className}`.trim()}>
+        <div className={wrapperCls}>
             <table
                 className={`${VARIANT_TABLE[variant]} ${tableClassName}`.trim()}
                 style={style}
             >
+                {caption && (
+                    <caption className="mb-2 text-left text-sm text-gray-500 dark:text-gray-400">
+                        {caption}
+                    </caption>
+                )}
+
                 {!hideHeader && (
-                    <thead className={VARIANT_THEAD[variant]}>
+                    <thead className={theadCls}>
                         <tr>
-                            {cols.map((col, i) => (
-                                <th
-                                    key={i}
-                                    className={[
-                                        SIZE_TH[size],
-                                        VARIANT_TH[variant],
-                                        ALIGN_CLASS[col.align ?? 'left'],
-                                        col.className ?? '',
-                                        thClassName,
-                                    ].filter(Boolean).join(' ')}
-                                >
-                                    {col.header}
-                                </th>
-                            ))}
+                            {cols.map((col, i) => {
+                                const isSortable = col.sortable && col.key;
+                                const activeSort = sortState?.key === col.key ? sortState!.direction : null;
+                                return (
+                                    <th
+                                        key={i}
+                                        scope="col"
+                                        className={[
+                                            SIZE_TH[size],
+                                            VARIANT_TH[variant],
+                                            ALIGN_CLASS[col.align ?? 'left'],
+                                            col.className ?? '',
+                                            thClassName,
+                                            col.sticky ? stickyColCls : '',
+                                            isSortable ? 'cursor-pointer select-none' : '',
+                                        ].filter(Boolean).join(' ')}
+                                        style={{ ...colSizeStyle(col), ...(col.thStyle ?? {}) }}
+                                        onClick={isSortable ? () => onSort?.(col.key!) : undefined}
+                                    >
+                                        {col.header}
+                                        {isSortable && <SortIcon direction={activeSort} />}
+                                    </th>
+                                );
+                            })}
                         </tr>
                     </thead>
                 )}
+
                 <tbody className={VARIANT_TBODY_DIVIDER[variant]}>
-                    {rows.length === 0 ? (
+                    {loading ? (
+                        Array.from({ length: loadingRows }).map((_, i) => (
+                            <SkeletonRow key={i} colCount={cols.length} size={size} />
+                        ))
+                    ) : rows.length === 0 ? (
                         <tr>
                             <td
                                 colSpan={cols.length}
-                                className={`${SIZE_TD[size]} text-center text-gray-400 dark:text-gray-500 py-8`}
+                                className={`${SIZE_TD[size]} py-8 text-center text-gray-400 dark:text-gray-500`}
                             >
                                 {emptyState ?? 'Sin datos'}
                             </td>
@@ -200,6 +391,7 @@ export function Table({
                             <tr
                                 key={rowIndex}
                                 className={resolvedTrClass(rowIndex)}
+                                style={getRowStyle?.(rowIndex)}
                                 onClick={onRowClick ? () => onRowClick(rowIndex) : undefined}
                             >
                                 {row.map((cell, cellIndex) => {
@@ -213,7 +405,12 @@ export function Table({
                                                 ALIGN_CLASS[col?.align ?? 'left'],
                                                 col?.className ?? '',
                                                 tdClassName,
+                                                col?.sticky ? stickyColCls : '',
                                             ].filter(Boolean).join(' ')}
+                                            style={{
+                                                ...(col ? colSizeStyle(col) : {}),
+                                                ...(col?.tdStyle ?? {}),
+                                            }}
                                         >
                                             {cell}
                                         </td>
@@ -223,7 +420,34 @@ export function Table({
                         ))
                     )}
                 </tbody>
+
+                {footerRows && footerRows.length > 0 && (
+                    <tfoot className="border-t border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/50">
+                        {footerRows.map((row, rowIndex) => (
+                            <tr key={rowIndex}>
+                                {row.map((cell, cellIndex) => {
+                                    const col = cols[cellIndex];
+                                    return (
+                                        <td
+                                            key={cellIndex}
+                                            className={[
+                                                SIZE_TD[size],
+                                                'font-medium text-gray-700 dark:text-gray-300',
+                                                ALIGN_CLASS[col?.align ?? 'left'],
+                                                col?.className ?? '',
+                                                tdClassName,
+                                            ].filter(Boolean).join(' ')}
+                                            style={col?.tdStyle}
+                                        >
+                                            {cell}
+                                        </td>
+                                    );
+                                })}
+                            </tr>
+                        ))}
+                    </tfoot>
+                )}
             </table>
         </div>
     );
-}
+}

package/src/components/html/TextArea.tsx

@@ -1,71 +1,121 @@
-import { type TextareaHTMLAttributes, type FC, type ReactNode } from 'react';
+import { type TextareaHTMLAttributes, type FC, type ReactNode, useRef, useEffect } from 'react';
+
+type TextAreaVariant = 'default' | 'outline' | 'filled' | 'minimal';
+type TextAreaSize = 'small' | 'medium' | 'large';
+type ResizeOption = 'vertical' | 'horizontal' | 'both' | 'none';
 
 interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: string | ReactNode;
   error?: string;
   helperText?: string;
-  variant?: 'default' | 'outline' | 'filled' | 'minimal';
-  size?: 'small' | 'medium' | 'large';
+  variant?: TextAreaVariant;
+  size?: TextAreaSize;
+  autoResize?: boolean;
+  showCount?: boolean;
+  resize?: ResizeOption;
 }
 
+const SIZE_CLASSES: Record<TextAreaSize, string> = {
+  small:  'px-2 py-1 text-xs',
+  medium: 'px-3 py-2 text-sm',
+  large:  'px-4 py-3 text-base',
+};
+
+const VARIANT_CLASSES: Record<TextAreaVariant, string> = {
+  default: 'border 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 border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700',
+  minimal: 'border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent rounded-none focus:ring-0',
+};
+
+const RESIZE_CLASSES: Record<ResizeOption, string> = {
+  vertical:   'resize-y',
+  horizontal: 'resize-x',
+  both:       'resize',
+  none:       'resize-none',
+};
+
 export const TextArea: FC<TextAreaProps> = ({
   label,
   error,
   helperText,
   variant = 'default',
   size = 'medium',
+  autoResize = false,
+  showCount = false,
+  resize = 'vertical',
   className = '',
   id,
+  onInput: propsOnInput,
   ...props
 }) => {
   const textAreaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const sizeClasses = {
-    small: 'px-2 py-1 text-xs',
-    medium: 'px-3 py-2 text-sm',
-    large: 'px-4 py-3 text-base'
+  const adjustHeight = () => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
   };
 
-  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'
+  useEffect(() => {
+    if (autoResize) adjustHeight();
+  }, [autoResize, props.value]);
+
+  const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
+    if (autoResize) adjustHeight();
+    propsOnInput?.(e);
   };
 
-  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 baseCls = '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';
+  const errorCls = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : '';
+  const resizeCls = autoResize ? 'resize-none overflow-hidden' : RESIZE_CLASSES[resize];
+
+  const classes = [baseCls, SIZE_CLASSES[size], VARIANT_CLASSES[variant], errorCls, resizeCls, className]
+    .filter(Boolean).join(' ');
 
-  const errorClasses = error ? 'border-red-300 dark:border-red-600 focus:ring-red-500 dark:focus:ring-red-400 focus:border-red-500' : '';
+  const maxLength = typeof props.maxLength === 'number' ? props.maxLength : undefined;
+  const currentLength =
+    typeof props.value === 'string' ? props.value.length :
+    typeof props.value === 'number' ? String(props.value).length : 0;
 
-  const classes = `${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${errorClasses} ${className}`;
+  const overLimit = maxLength !== undefined && currentLength > maxLength;
 
   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
+      {(label || showCount) && (
+        <div className="flex items-baseline gap-2">
+          <div className="flex-1">
+            {label && (
+              typeof label === 'string' ? (
+                <label htmlFor={textAreaId} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {label}
+                  {props.required && <span className="ml-1 text-red-500" aria-hidden="true">*</span>}
+                </label>
+              ) : label
+            )}
+          </div>
+          {showCount && (
+            <span className={`text-xs shrink-0 tabular-nums ${overLimit ? 'text-red-500' : 'text-gray-400 dark:text-gray-500'}`}>
+              {maxLength ? `${currentLength} / ${maxLength}` : currentLength}
+            </span>
+          )}
+        </div>
       )}
       <textarea
+        ref={textareaRef}
         id={textAreaId}
         className={classes}
+        onInput={handleInput}
         {...props}
       />
       {error && (
-        <p className="text-sm text-red-600 dark:text-red-400" role="alert">
-          {error}
-        </p>
+        <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>
+        <p className="text-sm text-gray-500 dark:text-gray-400">{helperText}</p>
       )}
     </div>
   );
-};
+};

package/src/components/icons/icons.tsx

@@ -687,4 +687,36 @@ export function IconLayers({ className }: Props) {
       <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .265 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
     </svg>
   );
+}
+
+export function ChevronDownIcon({ className }: Props) {
+  return (
+    <svg viewBox="0 0 16 16" className={className} fill="currentColor" aria-hidden>
+      <path d="M4.516 7.548c.436-.446 1.043-.481 1.576 0L8 9.747l1.908-2.199c.533-.481 1.14-.446 1.576 0 .436.445.408 1.197 0 1.615-.408.418-2.695 2.977-2.695 2.977-.27.282-.64.423-1.01.423s-.74-.14-1.01-.423c0 0-2.287-2.559-2.695-2.977-.408-.418-.436-1.17 0-1.615z" />
+    </svg>
+  );
+}
+
+export function SortAscIcon({ className }: Props) {
+  return (
+    <svg viewBox="0 0 12 12" className={className} fill="currentColor" aria-hidden>
+      <path d="M6 2.5l4 5H2l4-5z" />
+    </svg>
+  );
+}
+
+export function SortDescIcon({ className }: Props) {
+  return (
+    <svg viewBox="0 0 12 12" className={className} fill="currentColor" aria-hidden>
+      <path d="M6 9.5L2 4.5h8L6 9.5z" />
+    </svg>
+  );
+}
+
+export function SortBothIcon({ className }: Props) {
+  return (
+    <svg viewBox="0 0 12 12" className={className} fill="currentColor" aria-hidden>
+      <path d="M6 1.5l3 3.5H3L6 1.5zm0 9l-3-3.5h6L6 10.5z" />
+    </svg>
+  );
 }