@r2digisolutions/ui 0.26.10 → 0.26.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/container/TabsStepper/TabsStepper.svelte +28 -23
  2. package/dist/components/ui/Dialog/DialogFooter.svelte +1 -1
  3. package/package.json +7 -7
package/dist/components/container/TabsStepper/TabsStepper.svelte CHANGED
@@ -23,7 +23,7 @@
23
23
  canGoPrev?: (idx: number) => Promise<boolean> | boolean;
24
24
 
25
25
  mode?: Mode;
26
- forwardTabBehavior?: ForwardTabBehavior; // NUEVO
26
+ forwardTabBehavior?: ForwardTabBehavior;
27
27
  stickyFooter?: boolean;
28
28
  showHeader?: boolean;
29
29
  showProgressBar?: boolean;
@@ -51,12 +51,10 @@
51
51
 
52
52
  let maxReached = $state(current);
53
53
 
54
- // Si avanzamos, actualizamos maxReached
55
54
  $effect(() => {
56
55
  if (current > maxReached) maxReached = current;
57
56
  });
58
57
 
59
- // Ajustar si la cantidad de pasos cambia
60
58
  $effect(() => {
61
59
  if (maxReached > steps.length) maxReached = steps.length;
62
60
  if (current > steps.length) current = steps.length;
@@ -146,12 +144,12 @@
146
144
  <button
147
145
  type="button"
148
146
  class={[
149
- 'group relative inline-flex items-center gap-3 rounded-xl border px-3 py-2 transition',
147
+ 'group relative inline-flex items-center gap-3 rounded-xl border px-3 py-2 text-sm transition-all duration-150',
150
148
  state === 'active'
151
- ? 'border-purple-600 bg-purple-50 text-purple-700 shadow-sm'
149
+ ? 'border-indigo-500/80 bg-white/95 text-neutral-900 shadow-sm shadow-indigo-500/20 dark:border-indigo-400/80 dark:bg-neutral-900/95 dark:text-neutral-50'
152
150
  : state === 'done'
153
- ? 'border-emerald-500/50 bg-emerald-50 text-emerald-700'
154
- : 'border-gray-300 bg-white text-gray-600 hover:bg-gray-50',
151
+ ? 'border-neutral-300 bg-neutral-50 text-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100'
152
+ : 'border-transparent bg-transparent text-neutral-500 hover:border-neutral-300 hover:bg-neutral-50 dark:text-neutral-400 dark:hover:border-neutral-700 dark:hover:bg-neutral-900/80',
155
153
  allowed ? 'cursor-pointer' : 'pointer-events-none cursor-not-allowed opacity-60'
156
154
  ].join(' ')}
157
155
  aria-current={state === 'active' ? 'step' : undefined}
@@ -162,46 +160,51 @@
162
160
  >
163
161
  <div
164
162
  class={[
165
- 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-sm font-semibold',
163
+ 'flex h-8 w-8 shrink-0 items-center justify-center rounded-full border text-xs font-semibold',
166
164
  state === 'active'
167
- ? 'border-purple-600 bg-white text-purple-700'
165
+ ? 'border-indigo-500 bg-indigo-500/10 text-indigo-600 dark:border-indigo-400 dark:bg-indigo-500/15 dark:text-indigo-300'
168
166
  : state === 'done'
169
- ? 'border-emerald-500 bg-white text-emerald-700'
170
- : 'border-gray-300 bg-white text-gray-600'
167
+ ? 'border-emerald-500 bg-emerald-500/5 text-emerald-600 dark:border-emerald-400 dark:bg-emerald-500/10 dark:text-emerald-300'
168
+ : 'border-neutral-300 bg-white text-neutral-500 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-400'
171
169
  ].join(' ')}
172
170
  >
173
171
  {#if state === 'done'}
174
172
  <svg viewBox="0 0 20 20" class="h-4 w-4" aria-hidden="true">
175
- <path d="M7.5 11.5l-2-2 -1 1 3 3 7-7 -1-1 -6 6z" />
173
+ <path d="M7.5 11.5l-2-2 -1 1 3 3 7-7 -1-1 -6 6z" class="fill-current" />
176
174
  </svg>
177
175
  {:else}
178
176
  {idx}
179
177
  {/if}
180
178
  </div>
181
179
 
182
- <!-- Texto -->
183
180
  <div class="min-w-0 text-left">
184
- <div class="truncate text-sm font-medium">{s.label}</div>
181
+ <div class="truncate text-sm font-medium text-neutral-900 dark:text-neutral-50">
182
+ {s.label}
183
+ </div>
185
184
  {#if state === 'active'}
186
- <div class="truncate text-xs text-purple-700/70">En curso</div>
185
+ <div class="truncate text-xs text-indigo-500 dark:text-indigo-300">En curso</div>
187
186
  {:else if state === 'done'}
188
- <div class="truncate text-xs text-emerald-700/70">Completado</div>
187
+ <div class="truncate text-xs text-emerald-600 dark:text-emerald-300">
188
+ Completado
189
+ </div>
189
190
  {:else}
190
- <div class="truncate text-xs text-gray-500">Pendiente</div>
191
+ <div class="truncate text-xs text-neutral-500 dark:text-neutral-500">Pendiente</div>
191
192
  {/if}
192
193
  </div>
193
194
  </button>
194
195
 
195
196
  {#if showConnectors && i < steps.length - 1}
196
- <div class="h-px w-6 bg-gradient-to-r from-gray-300 to-gray-200 sm:w-8"></div>
197
+ <div
198
+ class="hidden h-px w-6 rounded-full bg-neutral-200/80 sm:block sm:w-8 dark:bg-neutral-800/80"
199
+ ></div>
197
200
  {/if}
198
201
  {/each}
199
202
  </div>
200
203
 
201
204
  {#if showProgressBar}
202
- <div class="mt-3 h-1.5 w-full rounded-full bg-gray-200">
205
+ <div class="mt-3 h-1.5 w-full rounded-full bg-neutral-200/80 dark:bg-neutral-800/80">
203
206
  <div
204
- class="h-1.5 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 transition-all duration-300"
207
+ class="h-1.5 rounded-full bg-linear-to-r from-indigo-500 via-violet-500 to-blue-500 transition-all duration-300"
205
208
  style:width={`${pct}%`}
206
209
  ></div>
207
210
  </div>
@@ -224,14 +227,16 @@
224
227
 
225
228
  <div
226
229
  class={stickyFooter
227
- ? 'sticky right-0 bottom-0 left-0 bg-gradient-to-t from-white via-white to-transparent pt-4'
230
+ ? 'sticky right-0 bottom-0 left-0 bg-linear-to-t from-neutral-50 via-neutral-50/95 to-transparent pt-4 dark:from-neutral-950 dark:via-neutral-950/95 dark:to-transparent'
228
231
  : 'mt-6'}
229
232
  >
230
- <div class="flex w-full gap-3 border-t border-gray-200 pt-4">
233
+ <div class="flex w-full gap-3 border-t border-neutral-200 pt-4 dark:border-neutral-800">
231
234
  {#if footer}
232
235
  {@render footer({ current, total, next, prev, goTo })}
233
236
  {:else}
234
- <Button type="button" onclick={prev} disabled={current === 1}>Anterior</Button>
237
+ <Button type="button" variant="outline" onclick={prev} disabled={current === 1}>
238
+ Anterior
239
+ </Button>
235
240
  <Button type="button" onclick={next} disabled={current === total}>Siguiente</Button>
236
241
  {/if}
237
242
  </div>
package/dist/components/ui/Dialog/DialogFooter.svelte CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  <footer
8
8
  class={[
9
- 'flex gap-2 px-6 pb-6',
9
+ 'flex gap-2 px-6 py-3',
10
10
  props.class,
11
11
  position === 'start' && 'justify-start',
12
12
  position === 'center' && 'justify-center',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@r2digisolutions/ui",
3
- "version": "0.26.10",
3
+ "version": "0.26.12",
4
4
  "private": false,
5
5
  "packageManager": "bun@1.3.2",
6
6
  "publishConfig": {
@@ -55,8 +55,8 @@
55
55
  "@storybook/addon-interactions": "8.6.14",
56
56
  "@storybook/addon-svelte-csf": "5.0.10",
57
57
  "@storybook/blocks": "8.6.14",
58
- "@storybook/svelte": "10.0.6",
59
- "@storybook/sveltekit": "10.0.6",
58
+ "@storybook/svelte": "10.0.7",
59
+ "@storybook/sveltekit": "10.0.7",
60
60
  "@storybook/test": "8.6.14",
61
61
  "@sveltejs/adapter-static": "3.0.10",
62
62
  "@sveltejs/kit": "2.48.4",
@@ -76,12 +76,12 @@
76
76
  "prettier-plugin-svelte": "3.4.0",
77
77
  "prettier-plugin-tailwindcss": "0.7.1",
78
78
  "publint": "0.3.15",
79
- "storybook": "10.0.6",
80
- "svelte": "5.43.5",
81
- "svelte-check": "4.3.3",
79
+ "storybook": "10.0.7",
80
+ "svelte": "5.43.6",
81
+ "svelte-check": "4.3.4",
82
82
  "tailwindcss": "4.1.17",
83
83
  "typescript": "5.9.3",
84
- "typescript-eslint": "8.46.3",
84
+ "typescript-eslint": "8.46.4",
85
85
  "vite": "7.2.2",
86
86
  "vitest": "4.0.8"
87
87
  },