@softdin/shared 0.1.3

package/src/components/forms/FormCloseButton.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    disabled?: boolean
+    label?: string
+  }>(),
+  {
+    disabled: false,
+    label: 'Cerrar',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-close"
+    :aria-label="label"
+    :title="label"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <svg class="softdin-form-close__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="10" cy="10" r="8" />
+      <path d="M6.5 6.5l7 7M13.5 6.5l-7 7" />
+    </svg>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid #fecaca;
+  border-radius: 9999px;
+  background: #fef2f2;
+  padding: 0;
+  color: #b91c1c;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.softdin-form-close:hover:not(:disabled),
+.softdin-form-close:focus-visible {
+  background: #fee2e2;
+  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.2);
+  transform: translateY(-2px) rotate(4deg);
+}
+
+.softdin-form-close:focus-visible {
+  outline: 2px solid #dc2626;
+  outline-offset: 2px;
+}
+
+.softdin-form-close:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.softdin-form-close span {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.5rem);
+  z-index: 2;
+  transform: translateY(-50%) translateX(0.25rem);
+  border-radius: 0.375rem;
+  background: #0f172a;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.softdin-form-close:hover:not(:disabled) span,
+.softdin-form-close:focus-visible span {
+  transform: translateY(-50%) translateX(0) rotate(-4deg);
+  opacity: 1;
+}
+
+.softdin-form-close__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-close,
+  .softdin-form-close span {
+    transition: none;
+  }
+
+  .softdin-form-close:hover:not(:disabled),
+  .softdin-form-close:focus-visible {
+    transform: none;
+  }
+}
+</style>

package/src/components/forms/FormHelpButton.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label?: string
+    title?: string
+  }>(),
+  {
+    label: 'Ayuda',
+    title: 'Ayuda del formulario',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-help"
+    :aria-label="title"
+    :title="title"
+    @click="$emit('click', $event)"
+  >
+    <svg class="softdin-form-help__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <circle cx="10" cy="10" r="8" />
+      <path d="M7.8 7.5a2.35 2.35 0 0 1 4.55.8c0 1.65-1.72 2.05-2.1 3.2" />
+      <path d="M10 14.15h.01" />
+    </svg>
+    <span>{{ label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid var(--color-brand-100, #bbf7d0);
+  border-radius: 9999px;
+  background: var(--color-brand-50, #f0fdf4);
+  padding: 0;
+  color: var(--color-brand-700);
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.softdin-form-help:hover,
+.softdin-form-help:focus-visible {
+  background: var(--color-brand-100, #dcfce7);
+  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand-700) 20%, transparent);
+  transform: translateY(-2px) rotate(4deg);
+}
+
+.softdin-form-help:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: 2px;
+}
+
+.softdin-form-help span {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.5rem);
+  z-index: 2;
+  transform: translateY(-50%) translateX(0.25rem);
+  border-radius: 0.375rem;
+  background: #0f172a;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.softdin-form-help:hover span,
+.softdin-form-help:focus-visible span {
+  transform: translateY(-50%) translateX(0) rotate(-4deg);
+  opacity: 1;
+}
+
+.softdin-form-help__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-help,
+  .softdin-form-help span {
+    transition: none;
+  }
+
+  .softdin-form-help:hover,
+  .softdin-form-help:focus-visible {
+    transform: none;
+  }
+}
+</style>

package/src/components/forms/FormHelpModal.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import FormCloseButton from './FormCloseButton.vue'
+
+export type FormHelpStep = string | { title: string; body: string }
+
+const open = defineModel<boolean>('open', { default: false })
+
+withDefaults(
+  defineProps<{
+    title: string
+    kicker?: string
+    intro?: string
+    steps?: FormHelpStep[]
+    note?: string
+    fieldNote?: string
+    confirmLabel?: string
+  }>(),
+  {
+    kicker: 'Guía funcional',
+    confirmLabel: 'Entendido',
+  },
+)
+
+function close(): void {
+  open.value = false
+}
+
+function stepTitle(step: FormHelpStep): string | null {
+  return typeof step === 'string' ? null : step.title
+}
+
+function stepBody(step: FormHelpStep): string {
+  return typeof step === 'string' ? step : step.body
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="open" class="softdin-help-backdrop" @click.self="close">
+      <section
+        class="softdin-help-panel"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="`softdin-help-title-${title}`"
+      >
+        <header class="softdin-help-header">
+          <div>
+            <p class="softdin-help-kicker">{{ kicker }}</p>
+            <h2 :id="`softdin-help-title-${title}`" class="softdin-help-title">{{ title }}</h2>
+          </div>
+          <FormCloseButton label="Cerrar" @click="close" />
+        </header>
+
+        <div class="softdin-help-body">
+          <slot>
+            <p v-if="intro">{{ intro }}</p>
+
+            <ol v-if="steps?.length" class="softdin-help-steps">
+              <li v-for="(step, index) in steps" :key="index">
+                <template v-if="stepTitle(step)">
+                  <strong>{{ stepTitle(step) }}</strong>
+                  {{ stepBody(step) }}
+                </template>
+                <template v-else>
+                  {{ stepBody(step) }}
+                </template>
+              </li>
+            </ol>
+
+            <aside v-if="note" class="softdin-help-note">
+              <strong>Importante:</strong> {{ note }}
+            </aside>
+
+            <p v-if="fieldNote" class="softdin-help-field-note">{{ fieldNote }}</p>
+          </slot>
+        </div>
+
+        <footer class="softdin-help-footer">
+          <button type="button" class="softdin-help-confirm" @click="close">
+            {{ confirmLabel }}
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.softdin-help-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 130;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(15, 23, 42, 0.55);
+}
+
+.softdin-help-panel {
+  width: 100%;
+  max-width: 42rem;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 1rem;
+  background: var(--color-panel, #fff);
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
+}
+
+.softdin-help-header,
+.softdin-help-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+}
+
+.softdin-help-header {
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+}
+
+.softdin-help-footer {
+  border-top: 1px solid var(--color-border, #e2e8f0);
+  justify-content: flex-end;
+}
+
+.softdin-help-kicker {
+  margin: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--color-brand-700);
+}
+
+.softdin-help-title {
+  margin: 0.25rem 0 0;
+  font-size: 1.125rem;
+  color: var(--color-text, #0f172a);
+}
+
+.softdin-help-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+  font-size: 0.9rem;
+  line-height: 1.55;
+  color: var(--color-text-muted, #334155);
+}
+
+.softdin-help-body p {
+  margin: 0;
+}
+
+.softdin-help-steps {
+  display: grid;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding-left: 1.25rem;
+}
+
+.softdin-help-note {
+  border-radius: 0.625rem;
+  background: #fff7ed;
+  padding: 0.75rem;
+  color: #9a3412;
+}
+
+.softdin-help-field-note {
+  margin-top: 1rem !important;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted, #64748b);
+}
+
+.softdin-help-confirm {
+  border: 0;
+  border-radius: 0.5rem;
+  background: var(--color-brand-600);
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #fff;
+  cursor: pointer;
+}
+
+.softdin-help-confirm:hover {
+  background: var(--color-brand-700);
+}
+</style>

package/src/components/forms/FormMaximizeButton.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    maximized?: boolean
+    disabled?: boolean
+    maximizeLabel?: string
+    restoreLabel?: string
+  }>(),
+  {
+    maximized: false,
+    disabled: false,
+    maximizeLabel: 'Maximizar',
+    restoreLabel: 'Restaurar',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-maximize"
+    :aria-label="maximized ? restoreLabel : maximizeLabel"
+    :title="maximized ? restoreLabel : maximizeLabel"
+    :aria-pressed="maximized"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <!-- Restaurar: flechas hacia adentro (como en Perfil de Cargo) -->
+    <svg
+      v-if="maximized"
+      class="softdin-form-maximize__icon"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path d="M7.5 3.5v4h-4" />
+      <path d="M12.5 3.5v4h4" />
+      <path d="M7.5 16.5v-4h-4" />
+      <path d="M12.5 16.5v-4h4" />
+      <path d="M7.5 7.5 3.5 3.5" />
+      <path d="M12.5 7.5l4-4" />
+      <path d="M7.5 12.5l-4 4" />
+      <path d="M12.5 12.5l4 4" />
+    </svg>
+    <!-- Maximizar: flechas hacia las esquinas -->
+    <svg v-else class="softdin-form-maximize__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M3.5 7.5v-4h4" />
+      <path d="M16.5 7.5v-4h-4" />
+      <path d="M3.5 12.5v4h4" />
+      <path d="M16.5 12.5v4h-4" />
+      <path d="M3.5 3.5 7.5 7.5" />
+      <path d="M16.5 3.5 12.5 7.5" />
+      <path d="M3.5 16.5 7.5 12.5" />
+      <path d="M16.5 16.5 12.5 12.5" />
+    </svg>
+    <span>{{ maximized ? restoreLabel : maximizeLabel }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-maximize {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 9999px;
+  background: #f8fafc;
+  padding: 0;
+  color: #475569;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
+}
+
+.softdin-form-maximize:hover:not(:disabled),
+.softdin-form-maximize:focus-visible {
+  background: #f1f5f9;
+  color: #0f172a;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
+  transform: translateY(-2px) rotate(4deg);
+}
+
+.softdin-form-maximize:focus-visible {
+  outline: 2px solid #64748b;
+  outline-offset: 2px;
+}
+
+.softdin-form-maximize:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.softdin-form-maximize span {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.5rem);
+  z-index: 2;
+  transform: translateY(-50%) translateX(0.25rem);
+  border-radius: 0.375rem;
+  background: #0f172a;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.softdin-form-maximize:hover:not(:disabled) span,
+.softdin-form-maximize:focus-visible span {
+  transform: translateY(-50%) translateX(0) rotate(-4deg);
+  opacity: 1;
+}
+
+.softdin-form-maximize__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-maximize,
+  .softdin-form-maximize span {
+    transition: none;
+  }
+
+  .softdin-form-maximize:hover:not(:disabled),
+  .softdin-form-maximize:focus-visible {
+    transform: none;
+  }
+}
+</style>

package/src/components/forms/FormRefreshButton.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean
+    disabled?: boolean
+    label?: string
+    loadingLabel?: string
+    /** Botón circular solo-ícono (sin texto visible), con tooltip al pasar el mouse. */
+    iconOnly?: boolean
+  }>(),
+  {
+    loading: false,
+    disabled: false,
+    label: 'Actualizar',
+    loadingLabel: 'Actualizando…',
+    iconOnly: false,
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-refresh"
+    :class="{ 'softdin-form-refresh--icon-only': iconOnly }"
+    :aria-label="loading ? loadingLabel : label"
+    :title="loading ? loadingLabel : label"
+    :data-tooltip="iconOnly ? (loading ? loadingLabel : label) : null"
+    :disabled="disabled || loading"
+    @click="$emit('click', $event)"
+  >
+    <svg
+      class="softdin-form-refresh__icon"
+      :class="{ 'softdin-form-refresh__icon--loading': loading }"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path d="M16.5 10a6.5 6.5 0 1 1-1.9-4.6" />
+      <path d="M16.5 3.5v4h-4" />
+    </svg>
+    <span v-if="!iconOnly">{{ loading ? loadingLabel : label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-refresh {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.25rem;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--color-brand-600);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.softdin-form-refresh:hover:not(:disabled),
+.softdin-form-refresh:focus-visible {
+  background: var(--color-brand-700);
+  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand-700) 28%, transparent);
+  transform: translateY(-2px);
+}
+
+.softdin-form-refresh:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: 2px;
+}
+
+.softdin-form-refresh:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.softdin-form-refresh--icon-only {
+  position: relative;
+  gap: 0;
+  height: 2.25rem;
+  width: 2.25rem;
+  min-height: 0;
+  padding: 0;
+}
+
+.softdin-form-refresh--icon-only[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 0.375rem);
+  left: 50%;
+  z-index: 10;
+  transform: translateX(-50%);
+  border-radius: 0.375rem;
+  background: #0f172a;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.softdin-form-refresh--icon-only[data-tooltip]:hover::after,
+.softdin-form-refresh--icon-only[data-tooltip]:focus-visible::after {
+  opacity: 1;
+}
+
+.softdin-form-refresh__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.softdin-form-refresh__icon--loading {
+  animation: softdin-form-refresh-spin 1s linear infinite;
+}
+
+@keyframes softdin-form-refresh-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-refresh {
+    transition: none;
+  }
+
+  .softdin-form-refresh:hover:not(:disabled),
+  .softdin-form-refresh:focus-visible {
+    transform: none;
+  }
+
+  .softdin-form-refresh__icon--loading {
+    animation: none;
+  }
+}
+</style>