@adamosuiteservices/ui 2.14.2 → 2.15.0

package/docs/components/ui/combobox.md

@@ -40,6 +40,8 @@ import { Combobox } from "@adamosuiteservices/ui/combobox";
 | `classNames`            | `ComboboxClassNames`                  | -            | Clases CSS por sección (ver tabla abajo)                    |
 | `renders`               | `ComboboxRenderProps`                 | -            | Funciones de renderizado personalizadas (ver tabla abajo)   |
 | `ref`                   | `React.Ref<HTMLButtonElement>`        | -            | Ref al botón trigger para posicionamiento externo           |
+| `aria-invalid`          | `"true" \| "false" \| boolean`        | -            | Indica estado inválido (borde rojo)                         |
+| `disabled`              | `boolean`                             | `false`      | Deshabilita el combobox                                     |
 
 ### ComboboxLabels
 
@@ -120,10 +122,7 @@ function MyComponent() {
 
   return (
     <>
-      <Combobox
-        ref={comboboxRef}
-        options={options}
-      />
+      <Combobox ref={comboboxRef} options={options} />
       {/* Usar comboboxRef para posicionar otros elementos */}
       <Popover>
         <PopoverAnchor virtualRef={comboboxRef} />
@@ -135,6 +134,7 @@ function MyComponent() {
 ```
 
 **Notas importantes sobre el ref:**
+
 - El ref apunta directamente al botón trigger (`<Button>`), no a un wrapper
 - Internamente, el Combobox mantiene su propio ref para medir el ancho del popover
 - Cuando pasas un ref externo, ambos refs se sincronizan automáticamente
@@ -288,6 +288,63 @@ const options = [
 />;
 ```
 
+### Estado Inválido
+
+```tsx
+const [value, setValue] = useState("");
+const isInvalid = !value; // Required validation
+
+<div className="space-y-2">
+  <Combobox
+    searchable
+    options={frameworks}
+    value={value}
+    onValueChange={(newValue) => setValue(newValue as string)}
+    aria-invalid={isInvalid}
+    labels={{ placeholder: "Select framework..." }}
+  />
+  {isInvalid && (
+    <p className="text-sm text-destructive">
+      Please select a framework to continue
+    </p>
+  )}
+</div>;
+```
+
+**Estilos**: Cuando `aria-invalid="true"`, el trigger muestra borde rojo (heredado del componente Button).
+
+### Estado Deshabilitado
+
+```tsx
+// Usando disabled
+<Combobox
+  searchable
+  options={frameworks}
+  value="next.js"
+  disabled
+  labels={{ placeholder: "Select framework..." }}
+/>
+```
+
+### En Fieldset Disabled
+
+```tsx
+<fieldset disabled>
+  <legend>Preferences (Disabled)</legend>
+  <Field>
+    <FieldLabel>Framework</FieldLabel>
+    <Combobox
+      searchable
+      options={frameworks}
+      value="next.js"
+      labels={{ placeholder: "Select framework..." }}
+    />
+  </Field>
+</fieldset>
+```
+
+Los comboboxes dentro de un `<fieldset disabled>` automáticamente heredan el estado disabled del navegador.
+
 ### Labels Personalizadas
 
 ```tsx
@@ -584,6 +641,7 @@ El prop `renders` permite personalizar completamente la UI usando el patrón ren
 ### Command Components
 
 Hereda estilos de Command component:
+
 - **Input wrapper**: `h-10`, `px-3`, `border-b`
 - **List**: `max-h-[300px]` con scroll
 - **Empty state**: Centrado con padding vertical

package/docs/components/ui/date-picker-selector.md

@@ -49,6 +49,7 @@ El componente maneja dos Popovers simultáneamente:
 ```
 
 **Ventajas de este enfoque:**
+
 - ✅ Sin elementos wrapper innecesarios en el DOM
 - ✅ Referencia directa al botón trigger del Combobox
 - ✅ Posicionamiento preciso del calendario
@@ -56,6 +57,7 @@ El componente maneja dos Popovers simultáneamente:
 - ✅ Type-safe con el tipo `Measurable` (cualquier elemento con `getBoundingClientRect()`)
 
 **Detalles técnicos:**
+
 - `comboboxRef` tiene tipo `RefObject<Measurable | null>` para compatibilidad con Radix UI
 - El callback ref captura el elemento button cuando se monta
 - Se usa type assertion `as React.RefObject<Measurable>` para satisfacer el tipo de Radix
@@ -92,13 +94,15 @@ function MyComponent() {
 
 ## Props
 
-| Prop               | Tipo                     | Default     | Descripción                                                    |
-| ------------------ | ------------------------ | ----------- | -------------------------------------------------------------- |
-| `dateRange`        | `DateRange`              | -           | **Requerido**. Rango de fechas actual                          |
-| `onDateRangeChange`| `(dateRange: DateRange) => void` | - | **Requerido**. Callback al cambiar el rango                    |
-| `labels`           | `DatePickerSelectorLabels` | -         | Labels personalizables para todos los textos de UI             |
-| `combobox`         | `ComboboxProps`          | -           | Props adicionales para el componente Combobox                  |
-| `calendar`         | `CalendarProps`          | -           | Props adicionales para el componente Calendar                  |
+| Prop                | Tipo                             | Default | Descripción                                        |
+| ------------------- | -------------------------------- | ------- | -------------------------------------------------- |
+| `dateRange`         | `DateRange`                      | -       | **Requerido**. Rango de fechas actual              |
+| `onDateRangeChange` | `(dateRange: DateRange) => void` | -       | **Requerido**. Callback al cambiar el rango        |
+| `labels`            | `DatePickerSelectorLabels`       | -       | Labels personalizables para todos los textos de UI |
+| `combobox`          | `ComboboxProps`                  | -       | Props adicionales para el componente Combobox      |
+| `calendar`          | `CalendarProps`                  | -       | Props adicionales para el componente Calendar      |
+| `aria-invalid`      | `"true" \| "false" \| boolean`   | -       | Indica estado inválido (borde rojo)                |
+| `disabled`          | `boolean`                        | `false` | Deshabilita el selector de fechas                  |
 
 ### DateRange Type
 
@@ -113,13 +117,13 @@ type DateRange = {
 
 ```typescript
 type DatePickerSelectorLabels = {
-  last30Days?: string;   // Default: "Last 30 days"
-  last7Days?: string;    // Default: "Last 7 days"
-  last90Days?: string;   // Default: "Last 90 days"
-  custom?: string;       // Default: "Custom"
-  placeholder?: string;  // Default: "Date"
-  cancel?: string;       // Default: "Cancel"
-  apply?: string;        // Default: "Apply"
+  last30Days?: string; // Default: "Last 30 days"
+  last7Days?: string; // Default: "Last 7 days"
+  last90Days?: string; // Default: "Last 90 days"
+  custom?: string; // Default: "Custom"
+  placeholder?: string; // Default: "Date"
+  cancel?: string; // Default: "Cancel"
+  apply?: string; // Default: "Apply"
 };
 ```
 
@@ -204,7 +208,10 @@ function MyComponent() {
 
   const formatDateRange = () => {
     if (!dateRange.from || !dateRange.to) return "No date selected";
-    return `${format(dateRange.from, "MMM d, yyyy")} - ${format(dateRange.to, "MMM d, yyyy")}`;
+    return `${format(dateRange.from, "MMM d, yyyy")} - ${format(
+      dateRange.to,
+      "MMM d, yyyy"
+    )}`;
   };
 
   return (
@@ -253,6 +260,61 @@ function MyComponent() {
 }
 ```
 
+### Estado Inválido
+
+```tsx
+function MyComponent() {
+  const [dateRange, setDateRange] = useState<DateRange>({
+    from: undefined,
+    to: undefined,
+  });
+
+  const isInvalid = !dateRange.from || !dateRange.to;
+
+  return (
+    <div className="space-y-2">
+      <DatePickerSelector
+        dateRange={dateRange}
+        onDateRangeChange={setDateRange}
+        aria-invalid={isInvalid}
+        labels={{
+          placeholder: "Date (Required)",
+        }}
+      />
+      {isInvalid && (
+        <p className="text-sm text-destructive">
+          Please select a date range to continue
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+**Estilos**: Cuando `aria-invalid="true"`, el combobox muestra borde rojo (heredado del componente Button).
+
+### Estado Deshabilitado
+
+```tsx
+// Usando disabled
+<DatePickerSelector
+  dateRange={dateRange}
+  onDateRangeChange={setDateRange}
+  disabled
+/>
+```
+
+### En Fieldset Disabled
+
+```tsx
+<fieldset disabled>
+  <legend>Date Range (Disabled)</legend>
+  <DatePickerSelector dateRange={dateRange} onDateRangeChange={setDateRange} />
+</fieldset>
+```
+
+El selector de fechas dentro de un `<fieldset disabled>` automáticamente hereda el estado disabled del navegador.
+
 ## Comportamiento
 
 ### Rangos Predefinidos
@@ -264,6 +326,7 @@ El componente ofrece tres rangos predefinidos:
 - **Last 90 days**: Desde hace 90 días hasta hoy
 
 Todos los rangos predefinidos:
+
 - Usan `date-fns` para cálculos precisos
 - Establecen las fechas a medianoche (00:00:00)
 - Se calculan dinámicamente basándose en la fecha actual
@@ -271,11 +334,13 @@ Todos los rangos predefinidos:
 ### Rango Personalizado
 
 Al seleccionar la opción "Custom":
+
 1. Se abre un popover con un calendario
 2. El usuario selecciona un rango de fechas (from y to)
 3. Los botones "Cancel" y "Apply" permiten confirmar o descartar la selección
 
 **Comportamiento de cancelación:**
+
 - **Botón Cancel**: Restaura la selección anterior y cierra el calendario
 - **Botón Apply sin rango completo**: Si no se seleccionó un rango completo (ambas fechas), restaura la selección anterior
 - **Botón Apply con rango completo**: Aplica el rango personalizado y mantiene "Custom" seleccionado
@@ -295,7 +360,7 @@ Esto asegura que el usuario nunca quede con "Custom" seleccionado sin haber comp
 **Dashboards**: Filtrar datos por períodos de tiempo  
 **Analytics**: Comparar métricas en diferentes rangos  
 **Búsquedas**: Filtrar resultados por rango de fechas  
-**Logs**: Visualizar registros en períodos específicos  
+**Logs**: Visualizar registros en períodos específicos
 
 ## Dependencias
 
@@ -334,10 +399,7 @@ const [dateRange, setDateRange] = useState<DateRange>({
   to: undefined,
 });
 
-<DatePickerSelector
-  dateRange={dateRange}
-  onDateRangeChange={setDateRange}
-/>
+<DatePickerSelector dateRange={dateRange} onDateRangeChange={setDateRange} />;
 
 // ❌ Incorrecto - Estado no inicializado
 const [dateRange, setDateRange] = useState();
@@ -355,9 +417,11 @@ const handleChange = (range: DateRange) => {
 };
 
 // ✅ Correcto - Mostrar feedback de validación
-{!dateRange.from || !dateRange.to ? (
-  <p className="text-destructive">Please select both dates</p>
-) : null}
+{
+  !dateRange.from || !dateRange.to ? (
+    <p className="text-destructive">Please select both dates</p>
+  ) : null;
+}
 ```
 
 ### Formateo de Fechas
@@ -366,7 +430,7 @@ const handleChange = (range: DateRange) => {
 import { format } from "date-fns";
 
 // ✅ Correcto - Formatear con date-fns
-const displayDate = dateRange.from 
+const displayDate = dateRange.from
   ? format(dateRange.from, "PP")
   : "Not selected";
 
@@ -425,5 +489,5 @@ const normalizedRange = {
 
 - **Combobox**: [Ver documentación](./combobox.md)
 - **Calendar**: [Ver documentación](./calendar.md)
-- **date-fns**: https://date-fns.org/
-- **react-day-picker**: https://react-day-picker.js.org/
+- **date-fns**: <https://date-fns.org/>
+- **react-day-picker**: <https://react-day-picker.js.org/>