@imj_media/ui 1.11.1 → 1.11.3

package/CHANGELOG.md

@@ -7,6 +7,34 @@ y este proyecto adhiere a [Semantic Versioning](https://semver.org/lang/es/).
 
 ## [Unreleased]
 
+## [1.11.3] - 2026-07-01
+
+### Added
+
+- **`DatePicker`:** soporte de rango con fecha y hora (`mode="range"` + configuración de tiempo).
+- **`DatePicker`:** prop agrupada `time` con `showTime`, `enabled`, `currentTime` y `showSeconds` (valores por defecto documentados en JSDoc y Storybook).
+
+### Changed
+
+- **`Toolbar`:** `datePickerProps.time` alineado con la API agrupada de `DatePicker`.
+
+### Deprecated
+
+- **`DatePicker`:** props raíz `showTime` y `showSeconds` siguen funcionando por compatibilidad; usar `time.showTime` y `time.showSeconds`.
+
+## [1.11.2] - 2026-06-29
+
+### Added
+
+- **`DatePicker`:** prop `showTime` para selección de fecha y hora en el popup (`TimePickerPanel`; hora por defecto 12:00).
+- **`DatePicker`:** prop `showSeconds` opcional cuando `showTime` está activo.
+- **`DatePicker`:** entrada de solo lectura y campos segmentados de fecha/hora (`DateTimeReadOnlyInput`, `DateTimeSegmentInput`, `DateTimeSegmentFields`) con utilidades de formato (`datetimeFormat`).
+- **`DatePicker`:** pie del calendario (acciones) visible solo cuando `showTime` está habilitado.
+
+### Documentation
+
+- **Storybook:** stories ampliadas para variantes datetime, `showTime` y `showSeconds`.
+
 ## [1.11.1] - 2026-06-04
 
 ### Fixed

package/README.md

@@ -4,7 +4,7 @@
 
 Biblioteca de componentes UI moderna y accesible para React, construida con TypeScript y Tailwind CSS.
 
-> **Versión publicada:** `1.11.1` — actualizar este número y `CHANGELOG.md` antes de cada release (orden y scripts: regla **`imj-ui-obligations-release`**; atajo `npm run publish:patch|minor|major` o pasos `bump:*` → `release:git` → `release:publish`).
+> **Versión publicada:** `1.11.3` — actualizar este número y `CHANGELOG.md` antes de cada release (orden y scripts: regla **`imj-ui-obligations-release`**; atajo `npm run publish:patch|minor|major` o pasos `bump:*` → `release:git` → `release:publish`).
 
 ## 📦 Instalación
 

package/catalog/design-index.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@imj_media/ui",
-  "version": "1.11.1",
-  "indexedAt": "2026-06-04T22:33:42.184Z",
+  "version": "1.11.3",
+  "indexedAt": "2026-07-01T16:37:07.949Z",
   "orbitTokensVersion": "1.3.1",
   "modules": [
     {
@@ -1763,6 +1763,7 @@
           "description": {
             "primary": "storybook",
             "storybook": "## DatePicker - Selector de Fechas\n\nUn componente completo y flexible para seleccionar fechas individuales o rangos de fechas.\n\n### Características principales:\n- **Modo único**: Selección de una fecha específica\n- **Modo rango**: Selección de un rango de fechas (inicio y fin)\n- **Vistas múltiples**: Días, meses y años\n- **Internacionalización**: Soporte para diferentes idiomas\n- **Personalización**: Estilos y comportamientos configurables\n- **Validación**: Fechas mínimas y máximas\n- **Modos de control**: Controlado y no controlado\n\n### Casos de uso comunes:\n- Formularios de reservas\n- Filtros de fechas\n- Calendarios de eventos\n- Selectores de período",
+            "jsdoc": "Selector de fecha única o rango con popup de calendario y soporte opcional de hora.",
             "readme": "# DatePicker - Estructura Modular\n\nEste módulo contiene una implementación modular del DatePicker con componentes atómicos, moleculares y orgánicos, junto con hooks personalizados y tipos TypeScript.\n\n## Estructura de Carpetas\n\n```\nDatePicker/\n├── atoms/           # Componentes atómicos (más básicos)\n├── molecules/       # Componentes moleculares (combinan átomos)\n├── organisms/       # Componentes orgánicos (combinan moléculas)\n├── types/           # Definiciones de tipos TypeScript\n├── hooks/           # Hooks personalizados\n├── stories/         # Storybook stories\n└── index.tsx        # Componente principal (legacy)\n```\n\n## Componentes Atómicos (`atoms/`)\n\nComponentes más básicos y reutilizables:\n\n- **Day**: Representa un día individual en el calendario\n- **Month**: Representa un mes en la vista de meses\n- **Year**: Representa un año en la vista de años\n- **WeekDay**: Representa los días de la semana\n- **NavigationButton**: Botón de navegación (anterior/siguiente)\n\n## Componentes Moleculares (`molecules/`)\n\nCombinan componentes atómicos para crear funcionalidades más complejas:\n\n- **CalendarHeader**: Header del calendario con navegación\n- **CalendarGrid**: Cuadrícula de días del calendario\n- **MonthGrid**: Cuadrícula de meses\n- **YearGrid**: Cuadrícula de años\n- **DateInput**: Input para la fecha\n\n## Componentes Orgánicos (`organisms/`)\n\nCombinan componentes moleculares para crear funcionalidades completas:\n\n- **Calendar**: Calendario completo con todas las vistas\n- **DatePickerPortal**: Portal del DatePicker con manejo de posicionamiento\n\n## Hooks (`hooks/`)\n\nHooks personalizados para la lógica del DatePicker:\n\n- **useDatePicker**: Hook principal que maneja el estado del DatePicker\n- **useDateRange**: Hook para manejar rangos de fechas\n- **useCalendar**: Hook para la lógica del calendario\n- **useDateInput**: Hook para el manejo del input\n- **usePortal**: Hook para el manejo del portal\n\n## Tipos (`types/`)\n\nDefiniciones de tipos TypeScript organizadas por funcion",
             "confidence": "high"
           },
@@ -1774,8 +1775,50 @@
             "import { DatePicker } from '@imj_media/ui';\n\nexport default function Example() {\n  return (\n    <DatePicker \n      minDate={minDate ?? undefined}\n      maxDate={maxDate ?? undefined}\n      selectedRange={range}\n      onRangeChange={setRange}\n    />\n  )\n}"
           ],
           "props": {
-            "groups": {},
-            "deprecatedRoot": [],
+            "groups": {
+              "time": {
+                "props": {
+                  "showTime": {
+                    "name": "showTime",
+                    "type": "boolean",
+                    "required": false,
+                    "description": "Interruptor maestro de visibilidad de hora: panel TimePickerPanel, input datetime read-only\n    y fusión de hora al elegir día. Por defecto `false` (solo fecha)."
+                  },
+                  "enabled": {
+                    "name": "enabled",
+                    "type": "boolean",
+                    "required": false,
+                    "description": "Cuando `showTime` es true: panel de hora editable (`true`, por defecto) o solo lectura (`false`)."
+                  },
+                  "currentTime": {
+                    "name": "currentTime",
+                    "type": "boolean",
+                    "required": false,
+                    "description": "Al fijar extremo sin hora previa, usa hora actual del cliente. Por defecto `true`; con `false` → 12:00 AM."
+                  },
+                  "showSeconds": {
+                    "name": "showSeconds",
+                    "type": "boolean",
+                    "required": false,
+                    "description": "Incluye segundos en el selector y en el formato del input. Por defecto `true`."
+                  }
+                }
+              }
+            },
+            "deprecatedRoot": [
+              {
+                "name": "showTime",
+                "migrateTo": "`time",
+                "jsdoc": "Interruptor maestro de visibilidad de hora.",
+                "type": "boolean"
+              },
+              {
+                "name": "showSeconds",
+                "migrateTo": "`time",
+                "jsdoc": "Incluye segundos cuando la hora está activa.",
+                "type": "boolean"
+              }
+            ],
             "flat": {
               "size": {
                 "name": "size",
@@ -1967,6 +2010,12 @@
                 "type": "string",
                 "required": false
               },
+              "time": {
+                "name": "time",
+                "type": "DatePickerTimeProps",
+                "required": false,
+                "description": "Configuración agrupada de fecha y hora en el popup. Prevalece sobre props planas legacy si hay conflicto."
+              },
               "calendarsCount": {
                 "name": "calendarsCount",
                 "type": "number",
@@ -13930,7 +13979,12 @@
       }
     ]
   },
-  "changelogRetirements": [],
+  "changelogRetirements": [
+    {
+      "version": "1.11.3",
+      "note": "### Deprecated"
+    }
+  ],
   "consumerChecklist": [
     {
       "id": "tailwind-prefix",

package/catalog/install-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
   "consumerRoot": "../../ds-mcp/src/indexer/consumer",
-  "generatedAt": "2026-06-04T22:33:42.238Z",
-  "uiVersion": "1.11.1",
+  "generatedAt": "2026-07-01T16:37:07.995Z",
+  "uiVersion": "1.11.3",
   "entries": {
     "accordion": {
       "name": "Accordion",
@@ -954,6 +954,7 @@
         "@fortawesome/free-brands-svg-icons"
       ],
       "registryDependencies": [
+        "icon",
         "innerButton",
         "input"
       ],
@@ -1018,6 +1019,11 @@
           "source": "DatePicker/hooks/useDateRange.ts",
           "sourceKind": "module"
         },
+        {
+          "target": "modules/DatePicker/hooks/useDateTimeInput.ts",
+          "source": "DatePicker/hooks/useDateTimeInput.ts",
+          "sourceKind": "module"
+        },
         {
           "target": "modules/DatePicker/hooks/usePortal.ts",
           "source": "DatePicker/hooks/usePortal.ts",
@@ -1048,6 +1054,21 @@
           "source": "DatePicker/molecules/DateInput.tsx",
           "sourceKind": "module"
         },
+        {
+          "target": "modules/DatePicker/molecules/DateTimeReadOnlyInput.tsx",
+          "source": "DatePicker/molecules/DateTimeReadOnlyInput.tsx",
+          "sourceKind": "module"
+        },
+        {
+          "target": "modules/DatePicker/molecules/DateTimeSegmentFields.tsx",
+          "source": "DatePicker/molecules/DateTimeSegmentFields.tsx",
+          "sourceKind": "module"
+        },
+        {
+          "target": "modules/DatePicker/molecules/DateTimeSegmentInput.tsx",
+          "source": "DatePicker/molecules/DateTimeSegmentInput.tsx",
+          "sourceKind": "module"
+        },
         {
           "target": "modules/DatePicker/molecules/MonthGrid.tsx",
           "source": "DatePicker/molecules/MonthGrid.tsx",
@@ -1058,6 +1079,11 @@
           "source": "DatePicker/molecules/MultipleCalendarsHeader.tsx",
           "sourceKind": "module"
         },
+        {
+          "target": "modules/DatePicker/molecules/TimePickerPanel.tsx",
+          "source": "DatePicker/molecules/TimePickerPanel.tsx",
+          "sourceKind": "module"
+        },
         {
           "target": "modules/DatePicker/molecules/YearGrid.tsx",
           "source": "DatePicker/molecules/YearGrid.tsx",
@@ -1103,6 +1129,16 @@
           "source": "DatePicker/types/index.ts",
           "sourceKind": "module"
         },
+        {
+          "target": "modules/DatePicker/utils/datetimeFormat.ts",
+          "source": "DatePicker/utils/datetimeFormat.ts",
+          "sourceKind": "module"
+        },
+        {
+          "target": "modules/DatePicker/utils/resolveTimeConfig.ts",
+          "source": "DatePicker/utils/resolveTimeConfig.ts",
+          "sourceKind": "module"
+        },
         {
           "target": "shared/utils/index.ts",
           "source": "utils/index.ts",