@innertia-solutions/innertia-nuxt 0.1.9 → 0.1.11

package/components/DataPreview.vue

@@ -0,0 +1,323 @@
+<script setup>
+/**
+ * <DataPreview> — Panel de preview overlay compartido por Table.Standard y Tree.Standard.
+ *
+ * Encapsula:
+ *   - Panel absoluto a la derecha del container padre (position:relative)
+ *   - Resize por drag del handle vertical en el borde izquierdo
+ *   - Header con título + acciones + botones (abrir, eliminar, minimizar, cerrar)
+ *   - Tabs inferior cuando se pasa `historyEndpoint` (Datos / Bitácora)
+ *   - Cache de la fila previewada en sessionStorage cuando `cached`
+ *   - Chip flotante (Teleport to body) compartido vía `useDockedPreviews` Pinia store
+ *
+ * El parent es dueño de `row` (v-model) — DataPreview lo seteoa a null al cerrar.
+ * El parent también maneja el click fuera + ESC porque conoce su containerRef.
+ *
+ * Slots:
+ *   - header   ({ row, close }) — título del panel
+ *   - actions  ({ row, close }) — botones extra al lado de los built-in
+ *   - default  ({ row, close }) — body del preview
+ */
+
+import {
+  IconExternalLink, IconTrash, IconMinus, IconX, IconMaximize,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+  /** Activa el preview (típicamente derivado de !!slots.preview en el parent). */
+  enabled:           { type: Boolean, default: false },
+  /** Nombre único para cache + dock id. */
+  name:              { type: String,  default: 'default' },
+  /** Si true, persiste la fila previewada en sessionStorage entre navegaciones. */
+  cached:            { type: Boolean, default: false },
+  /** URL fija o (row) => url para botón "abrir externa". */
+  previewHref:       { type: [String, Function], default: null },
+  /** Muestra botón eliminar (emite @delete). */
+  previewDeletable:  { type: Boolean, default: false },
+  /** Porcentaje inicial de la tabla (0-100). */
+  splitRatio:        { type: Number,  default: 55 },
+  /** Endpoint del historial. Cuando se pasa, muestra tabs Datos/Bitácora. */
+  historyEndpoint:   { type: String,  default: null },
+  /** Container ref (HTMLElement) para medir el width al hacer resize. */
+  containerRef:      { type: Object,  default: null },
+})
+
+const emit = defineEmits(['delete'])
+
+// v-model:row → parent es dueño de la fila activa.
+const row = defineModel('row', { default: null })
+
+const previewFromCache = ref(false)
+const currentRatio     = ref(props.splitRatio)
+const panelRef         = ref(null)
+const previewTab       = ref('datos')
+
+const cacheKey = computed(() => `data-preview-${props.name}`)
+
+const resolvedPreviewHref = computed(() => {
+  if (!props.previewHref || !row.value) return null
+  return typeof props.previewHref === 'function'
+    ? props.previewHref(row.value)
+    : props.previewHref
+})
+
+const hasHistory = computed(() => !!props.historyEndpoint)
+
+// Resetear tab al cambiar de fila + reinit tooltips de Preline
+watch(row, async (r) => {
+  previewTab.value = 'datos'
+  if (r) {
+    await nextTick()
+    if (typeof window !== 'undefined') window.HSStaticMethods?.autoInit?.(['Tooltip'])
+  }
+})
+
+// Persistir fila en sessionStorage
+watch(row, (r) => {
+  if (!props.cached) return
+  if (r) sessionStorage.setItem(cacheKey.value, JSON.stringify(r))
+  else sessionStorage.removeItem(cacheKey.value)
+})
+
+const close = () => { row.value = null }
+
+const startResize = (e) => {
+  e.preventDefault()
+  const onMove = (ev) => {
+    const el = props.containerRef
+    if (!el) return
+    const rect = el.getBoundingClientRect()
+    const ratio = ((ev.clientX - rect.left) / rect.width) * 100
+    currentRatio.value = Math.min(80, Math.max(25, ratio))
+  }
+  const onUp = () => {
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+}
+
+// ─── Dock (chip flotante) ─────────────────────────────────────────────────────
+const {
+  docked,
+  dock, undock: undockItem,
+  activeDockId, activeDockRect,
+  collapseDock,
+} = useDockedPreviews()
+const route = useRoute()
+
+const minimize = () => {
+  if (!row.value) return
+  const label    = row.value.name ?? row.value.title ?? row.value.email ?? String(row.value.id)
+  const subtitle = row.value.email ?? row.value.description ?? null
+  dock({
+    id:        `${props.name}-${row.value.id}`,
+    label,
+    subtitle,
+    row:       { ...row.value },
+    tableName: props.name,
+    route:     route.path,
+  })
+  close()
+}
+
+const floatingItem = computed(() =>
+  activeDockId.value
+    ? docked.value.find(d => d.id === activeDockId.value && d.tableName === props.name) ?? null
+    : null
+)
+
+const floatingPanelStyle = computed(() => {
+  const rect   = activeDockRect.value
+  const panelW = 384
+  const bottom = 52
+  if (!rect || typeof window === 'undefined') return { bottom: bottom + 'px', right: '16px' }
+  const tabCenter = rect.left + rect.width / 2
+  let right = window.innerWidth - tabCenter - panelW / 2
+  right = Math.max(8, Math.min(right, window.innerWidth - panelW - 8))
+  return { bottom: bottom + 'px', right: right + 'px' }
+})
+
+const expandToFull = (item) => {
+  row.value = item.row
+  undockItem(item.id)
+}
+
+// Restore from cache on mount
+onMounted(async () => {
+  if (props.cached && props.enabled) {
+    try {
+      const raw = sessionStorage.getItem(cacheKey.value)
+      if (raw) {
+        previewFromCache.value = true
+        row.value = JSON.parse(raw)
+        await nextTick()
+        previewFromCache.value = false
+      }
+    } catch {}
+  }
+})
+
+defineExpose({ panelRef })
+</script>
+
+<template>
+  <!-- Panel overlay (absolute right, dentro del container del parent) -->
+  <Transition
+    :enter-active-class="previewFromCache ? '' : 'transition ease-out duration-200'"
+    :enter-from-class="previewFromCache ? '' : 'opacity-0 translate-x-6'"
+    :enter-to-class="previewFromCache ? '' : 'opacity-100 translate-x-0'"
+    leave-active-class="transition ease-in duration-150"
+    leave-from-class="opacity-100 translate-x-0"
+    leave-to-class="opacity-0 translate-x-6"
+  >
+    <div
+      v-if="row && enabled"
+      ref="panelRef"
+      class="absolute top-0 right-0 bottom-0 z-30 flex flex-col bg-card border border-card-line rounded-card shadow-xl overflow-hidden"
+      :style="{ width: (100 - currentRatio) + '%' }"
+    >
+      <!-- Resize handle -->
+      <div
+        class="absolute left-1 top-1/2 -translate-y-1/2 h-12 w-1 cursor-col-resize rounded-full bg-border hover:bg-primary/50 transition-colors z-10"
+        @mousedown="startResize"
+      />
+
+      <!-- Header -->
+      <div class="shrink-0 flex items-center gap-3 px-5 py-4 border-b border-card-line">
+        <div class="flex-1 min-w-0">
+          <slot name="header" :row="row" :close="close" />
+        </div>
+
+        <div class="flex items-center gap-0.5 shrink-0">
+          <slot name="actions" :row="row" :close="close" />
+
+          <!-- Abrir externa -->
+          <div v-if="resolvedPreviewHref" class="hs-tooltip [--placement:top] inline-block">
+            <NuxtLink
+              :to="resolvedPreviewHref"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+            >
+              <IconExternalLink class="size-3.5" />
+            </NuxtLink>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Abrir</span>
+          </div>
+
+          <!-- Eliminar -->
+          <div v-if="previewDeletable" class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
+              @click.stop="emit('delete', row)"
+            >
+              <IconTrash class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Eliminar</span>
+          </div>
+
+          <!-- Minimizar -->
+          <div class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+              @click.stop="minimize"
+            >
+              <IconMinus class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Minimizar</span>
+          </div>
+
+          <!-- Cerrar -->
+          <div class="hs-tooltip [--placement:top] inline-block">
+            <button
+              type="button"
+              class="hs-tooltip-toggle inline-flex items-center justify-center size-7 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors"
+              @click.stop="close"
+            >
+              <IconX class="size-3.5" />
+            </button>
+            <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 transition-opacity inline-block absolute invisible z-10 py-1 px-2 bg-tooltip border border-tooltip-line text-xs font-medium text-tooltip-foreground rounded-popover shadow-2xs" role="tooltip">Cerrar</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div class="flex-1 overflow-y-auto min-h-0">
+        <slot v-if="previewTab === 'datos'" :row="row" :close="close" />
+        <TablePreviewTimeline
+          v-else-if="previewTab === 'bitacora' && historyEndpoint"
+          :endpoint="historyEndpoint"
+        />
+      </div>
+
+      <!-- Tabs (cuando hay historyEndpoint) -->
+      <div v-if="hasHistory" class="shrink-0 flex border-t border-card-line">
+        <button
+          type="button"
+          @click="previewTab = 'datos'"
+          :class="[
+            'flex-1 py-2.5 text-xs font-semibold transition-colors border-r border-card-line border-t-2 -mt-px',
+            previewTab === 'datos'
+              ? 'border-t-card text-foreground'
+              : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+          ]"
+        >
+          Datos
+        </button>
+        <button
+          type="button"
+          @click="previewTab = 'bitacora'"
+          :class="[
+            'flex-1 py-2.5 text-xs font-semibold transition-colors border-t-2 -mt-px',
+            previewTab === 'bitacora'
+              ? 'border-t-card text-foreground'
+              : 'border-t-transparent text-muted-foreground hover:text-foreground hover:bg-muted-hover'
+          ]"
+        >
+          Bitácora
+        </button>
+      </div>
+    </div>
+  </Transition>
+
+  <!-- Floating chip (dock minimizado) — siempre teleportado a body -->
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 translate-y-4"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-4"
+    >
+      <div
+        v-if="floatingItem"
+        class="fixed z-[60] w-96 flex flex-col bg-card border border-card-line rounded-t-card shadow-2xl overflow-hidden"
+        :style="{ ...floatingPanelStyle, maxHeight: 'min(480px, calc(100vh - 60px))' }"
+      >
+        <div class="flex items-center gap-2 px-3 py-2.5 border-b border-card-line shrink-0 bg-surface select-none">
+          <span class="size-6 rounded-avatar bg-primary flex items-center justify-center text-[10px] font-bold text-primary-foreground shrink-0">
+            {{ (floatingItem.label?.[0] ?? '?').toUpperCase() }}
+          </span>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-semibold text-foreground truncate leading-tight">{{ floatingItem.label }}</p>
+            <p v-if="floatingItem.subtitle" class="text-xs text-muted-foreground truncate">{{ floatingItem.subtitle }}</p>
+          </div>
+          <button type="button" title="Expandir" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="expandToFull(floatingItem)">
+            <IconMaximize class="size-3.5" />
+          </button>
+          <button type="button" title="Minimizar" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-foreground hover:bg-muted-hover transition-colors" @click.stop="collapseDock()">
+            <IconMinus class="size-3.5" />
+          </button>
+          <button type="button" title="Cerrar" class="inline-flex items-center justify-center size-6 rounded-control text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors" @click.stop="undockItem(floatingItem.id)">
+            <IconX class="size-3.5" />
+          </button>
+        </div>
+        <div class="flex-1 overflow-y-auto min-h-0">
+          <slot :row="floatingItem.row" :close="() => undockItem(floatingItem.id)" />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/components/DataTable.vue

@@ -436,7 +436,7 @@ const handleRowKeydown = (row, event) => {
                 type="checkbox"
                 :checked="isAllVisibleSelected"
                 @change="toggleSelectAll"
-                class="mx-2 shrink-0 border-gray-300 rounded-sm text-blue-900 focus:ring-blue-900 dark:bg-card border-card-line"
+                class="mx-2 shrink-0 border-gray-300 rounded-control text-blue-900 focus:ring-blue-900 dark:bg-card border-card-line"
               />
             </th>
             <th
@@ -538,7 +538,7 @@ const handleRowKeydown = (row, event) => {
       <!-- Empty overlays -->
       <div
         v-if="!loading && data.length === 0 && !search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-card"
       >
         <slot name="empty">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros</p>
@@ -547,7 +547,7 @@ const handleRowKeydown = (row, event) => {
 
       <div
         v-if="!loading && data.length === 0 && search"
-        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-xl"
+        class="absolute inset-0 z-10 pointer-events-none flex items-center justify-center backdrop-blur-sm bg-card/60 transition-all rounded-card"
       >
         <slot name="empty-search">
           <p class="text-muted-foreground text-lg font-medium italic">No hay registros en la búsqueda</p>
@@ -561,7 +561,7 @@ const handleRowKeydown = (row, event) => {
       <div v-if="loading" :class="gridClass">
         <div v-for="(_, index) in skeletonRows" :key="'grid-skeleton-' + index" class="animate-pulse">
           <slot name="grid-skeleton">
-            <div class="bg-card rounded-lg border border-card-line p-4">
+            <div class="bg-card rounded-card border border-card-line p-4">
               <div class="space-y-3">
                 <div class="h-4 bg-surface-1 rounded w-3/4"></div>
                 <div class="h-4 bg-surface-1 rounded w-1/2"></div>
@@ -583,7 +583,7 @@ const handleRowKeydown = (row, event) => {
           :checkable="checkable"
           :toggleRow="() => toggleRow(row)"
         >
-          <div class="bg-card rounded-lg border border-card-line p-4 hover:shadow-md transition-shadow relative">
+          <div class="bg-card rounded-card border border-card-line p-4 hover:shadow-md transition-shadow relative">
             <div v-if="checkable" class="absolute top-2 left-2 z-10">
               <input
                 type="checkbox"
@@ -636,11 +636,11 @@ const handleRowKeydown = (row, event) => {
         <p class="text-sm text-foreground font-medium">{{ meta.total }} registros</p>
 
         <div v-if="isDataFromCache && cached" class="group relative flex items-center">
-          <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-lg cursor-help transition-colors hover:bg-emerald-500/20">
+          <div class="flex items-center gap-x-1.5 py-1 px-2.5 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-badge cursor-help transition-colors hover:bg-emerald-500/20">
             <IconBolt class="size-3.5 fill-current" />
             <span class="text-[10px] font-bold uppercase tracking-wider">Instant</span>
           </div>
-          <div class="absolute bottom-full mb-2 left-0 hidden group-hover:block w-48 p-2.5 bg-slate-900 text-white text-[11px] leading-relaxed rounded-xl shadow-2xl z-50 animate-in fade-in zoom-in duration-200">
+          <div class="absolute bottom-full mb-2 left-0 hidden group-hover:block w-48 p-2.5 bg-slate-900 text-white text-[11px] leading-relaxed rounded-popover shadow-2xl z-50 animate-in fade-in zoom-in duration-200">
             <div class="font-bold mb-1 flex items-center gap-x-1.5 text-emerald-400">
               <IconBolt class="size-3" />
               Datos en Caché
@@ -659,7 +659,7 @@ const handleRowKeydown = (row, event) => {
             v-if="!isCustomPerPage"
             :value="perPage"
             @change="(e) => handlePerPageChange(e.target.value)"
-            class="bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
+            class="bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-control focus:ring-0 cursor-pointer py-1 pl-2 pr-8"
           >
             <option :value="10">10</option>
             <option :value="25">25</option>
@@ -673,7 +673,7 @@ const handleRowKeydown = (row, event) => {
               v-model.number="perPage"
               min="1"
               max="500"
-              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-lg focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
+              class="w-14 bg-surface border-none text-[11px] font-bold text-muted-foreground-1 rounded-control focus:ring-2 focus:ring-indigo-500/20 py-1 px-2"
               @blur="perPage = perPage || 10"
             />
             <button @click="resetPerPage" class="text-[10px] text-indigo-500 font-bold hover:underline">Volver</button>
@@ -683,7 +683,7 @@ const handleRowKeydown = (row, event) => {
         <nav class="flex justify-end items-center gap-x-1" aria-label="Pagination">
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-control text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page <= 1"
             @click="goToPreviousPage"
           >
@@ -692,13 +692,13 @@ const handleRowKeydown = (row, event) => {
             </svg>
           </button>
           <div class="flex items-center gap-x-1 mx-2">
-            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-lg bg-surface text-foreground">{{ meta.current_page }}</span>
+            <span class="size-8 flex items-center justify-center text-xs font-bold rounded-control bg-surface text-foreground">{{ meta.current_page }}</span>
             <span class="text-[10px] font-bold text-muted-foreground uppercase mx-1">de</span>
             <span class="text-[10px] font-bold text-muted-foreground">{{ meta.last_page }}</span>
           </div>
           <button
             type="button"
-            class="size-8 flex items-center justify-center rounded-lg text-foreground hover:bg-muted-hover disabled:opacity-30"
+            class="size-8 flex items-center justify-center rounded-control text-foreground hover:bg-muted-hover disabled:opacity-30"
             :disabled="page >= meta.last_page"
             @click="goToNextPage"
           >

package/components/Forms/DatePicker.vue

@@ -180,76 +180,101 @@ const clear = () => {
 <template>
   <div class="relative w-full">
     <div class="relative group">
-      <div class="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-3.5">
-        <IconCalendar class="size-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" />
-      </div>
-
       <input
         ref="inputEl"
         type="text"
         :value="internalValue"
         :disabled="disabled"
         :placeholder="placeholder"
-        class="w-full py-2 ps-10 pe-10 border border-gray-300 rounded-lg text-sm dark:bg-card dark:border-card-line dark:text-white disabled:opacity-50 disabled:pointer-events-none cursor-pointer focus:border-blue-500 focus:ring-blue-500/20 outline-none transition-all block"
+        class="innertia-field pe-10 cursor-pointer"
         readonly
       />
 
-      <!-- Clear button -->
+      <!-- Clear button (cuando hay valor) o ícono calendario (cuando está vacío) — ambos a la derecha -->
       <button
         v-if="clearable && internalValue && !disabled"
         @click.stop="clear"
         type="button"
-        class="absolute inset-y-0 end-0 flex items-center z-20 pe-3 text-gray-400 hover:text-red-500 transition-colors focus:outline-none"
+        class="absolute inset-y-0 end-0 flex items-center z-20 pe-3 text-muted-foreground hover:text-destructive transition-colors focus:outline-none"
       >
         <IconX class="size-4" />
       </button>
+      <div
+        v-else
+        class="absolute inset-y-0 end-0 flex items-center pointer-events-none z-20 pe-3"
+      >
+        <IconCalendar class="size-4 text-muted-foreground-2 group-focus-within:text-primary transition-colors" />
+      </div>
     </div>
   </div>
 </template>
 
 <style>
 /*
-  Vanilla Calendar v3 compiles Tailwind classes directly into its themes.
-  We override the selected date and hover backgrounds for Light and Dark modes.
-*/
-
-/* LIGHT MODE OVERRIDES */
-[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected],
-[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected],
-[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
-[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn {
-  background-color: #2563eb !important; /* blue-600 */
-  color: #ffffff !important;
+ * Vanilla Calendar v3 compila Tailwind directo en sus themes. Overridemos
+ * solo los acentos del brand color para que sigan los tokens del DS.
+ *
+ * Light y dark usan las mismas variables — `--color-primary` ya cambia
+ * automáticamente entre claro/oscuro a través de la cascada del tema.
+ *
+ * Las clases de selected / today / hover aplican tanto en
+ * `[data-vc-theme=light]` como `[data-vc-theme=dark]`.
+ */
+
+/* Día seleccionado / mes seleccionado / año seleccionado */
+.vc-months__month[data-vc-months-month-selected],
+.vc-years__year[data-vc-years-year-selected],
+.vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
+.vc-date[data-vc-date-selected] .vc-date__btn {
+  background-color: var(--color-primary) !important;
+  color: var(--color-primary-foreground) !important;
+  border-radius: var(--radius-control) !important;
 }
 
-[data-vc-theme=light] .vc-months__month[data-vc-months-month-selected]:hover,
-[data-vc-theme=light] .vc-years__year[data-vc-years-year-selected]:hover,
-[data-vc-theme=light] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
-[data-vc-theme=light] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
-  background-color: #1d4ed8 !important; /* blue-700 */
+.vc-months__month[data-vc-months-month-selected]:hover,
+.vc-years__year[data-vc-years-year-selected]:hover,
+.vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
+.vc-date[data-vc-date-selected] .vc-date__btn:hover {
+  background-color: var(--color-primary-hover) !important;
 }
 
-[data-vc-theme=light] .vc-date[data-vc-date-today] .vc-date__btn {
-  color: #2563eb !important;
+/* Hoy (sin seleccionar): color del texto en brand */
+.vc-date[data-vc-date-today] .vc-date__btn {
+  color: var(--color-primary) !important;
+  font-weight: 600;
 }
 
-/* DARK MODE OVERRIDES */
-[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected],
-[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected],
-[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn {
-  background-color: #3b82f6 !important; /* blue-500 */
-  color: #ffffff !important;
+/* Hover de cualquier día (no seleccionado) */
+.vc-date:not([data-vc-date-selected]) .vc-date__btn:hover,
+.vc-months__month:not([data-vc-months-month-selected]):hover,
+.vc-years__year:not([data-vc-years-year-selected]):hover {
+  background-color: var(--color-muted-hover) !important;
+  border-radius: var(--radius-control) !important;
+}
+
+/* Días del mes anterior / siguiente — más opacos */
+.vc-date[data-vc-date-month=prev] .vc-date__btn,
+.vc-date[data-vc-date-month=next] .vc-date__btn {
+  color: var(--color-muted-foreground-2) !important;
+}
+
+/* Botones de navegación (mes anterior / siguiente) */
+.vc-arrow {
+  color: var(--color-foreground) !important;
+}
+.vc-arrow:hover {
+  background-color: var(--color-muted-hover) !important;
+  border-radius: var(--radius-control) !important;
 }
 
-[data-vc-theme=dark] .vc-months__month[data-vc-months-month-selected]:hover,
-[data-vc-theme=dark] .vc-years__year[data-vc-years-year-selected]:hover,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected=middle][data-vc-date-selected] .vc-date__btn:hover,
-[data-vc-theme=dark] .vc-date[data-vc-date-selected] .vc-date__btn:hover {
-  background-color: #2563eb !important; /* blue-600 */
+/* Header del mes/año en el centro */
+.vc-month,
+.vc-year {
+  color: var(--color-foreground) !important;
 }
 
-[data-vc-theme=dark] .vc-date[data-vc-date-today] .vc-date__btn {
-  color: #3b82f6 !important;
+/* Nombres de los días (Lun, Mar, …) */
+.vc-week__day {
+  color: var(--color-muted-foreground) !important;
 }
 </style>

package/components/Forms/Input.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
   label?: string
   hint?: string
   iconLeft?: object | Function | null
+  iconRight?: object | Function | null
   autocomplete?: string
   size?: 'sm' | 'md'
 }>()
@@ -24,7 +25,7 @@ const inputType = computed(() => {
 })
 
 const baseClasses = computed(() =>
-  `${props.size === 'sm' ? 'py-1.5' : 'py-2'} px-3 block w-full rounded-lg text-sm text-slate-800 border border-card-line focus:ring-0 focus:border-gray-400 focus:outline-none disabled:opacity-50 dark:bg-transparent dark:text-muted-foreground-1 transition-colors placeholder:text-muted-foreground dark:placeholder:text-muted-foreground`
+  `innertia-field${props.size === 'sm' ? ' innertia-field-sm' : ''}`
 )
 </script>
 
@@ -49,11 +50,16 @@ const baseClasses = computed(() =>
         :class="[
           baseClasses,
           iconLeft ? 'ps-9' : '',
-          type === 'password' ? 'pe-10' : '',
+          (iconRight || type === 'password') ? 'pe-10' : '',
           error ? '!border-red-400 dark:!border-red-500' : '',
         ]"
       />
 
+      <!-- Ícono derecho (no se renderiza si type=password — ahí va el toggle) -->
+      <div v-if="iconRight && type !== 'password'" class="absolute inset-y-0 end-0 flex items-center pe-3 pointer-events-none text-muted-foreground">
+        <component :is="iconRight" class="size-4" />
+      </div>
+
       <!-- Toggle contraseña -->
       <button
         v-if="type === 'password'"