First commit

2026-08-10 04:29:24 -06:00
commit 26851fa750
71 changed files with 8333 additions and 0 deletions
@@ -0,0 +1,83 @@
+# Catálogo de componentes
+
+Todos los nombres comienzan con `Ds`. A menos que se indique lo contrario, los atributos HTML adicionales llegan al control raíz correspondiente.
+
+## Layout
+
+| Componente        | Props principales                               | Slots                                  |
+| ----------------- | ----------------------------------------------- | -------------------------------------- |
+| `DsAppShell`      | `maxWidth`                                      | default                                |
+| `DsPageHeader`    | `title`, `description`, `eyebrow`, `standalone` | default implícito en textos, `actions` |
+| `DsPanel`         | `as`, `padding: sm\|md\|lg`, `tone`, `flat`     | default                                |
+| `DsSectionHeader` | `title`, `description`, `eyebrow`               | `actions`                              |
+| `DsStack`         | `as`, `gap`, `align`                            | default                                |
+| `DsInline`        | `as`, `gap`, `align`, `justify`, `wrap`         | default                                |
+| `DsDivider`       | —                                               | —                                      |
+
+## Acciones
+
+| Componente      | Props y eventos                                                                  | Slots         |
+| --------------- | -------------------------------------------------------------------------------- | ------------- |
+| `DsButton`      | `variant`, `size`, `type`, `disabled`, `loading`, `block`, evento nativo `click` | default       |
+| `DsIconButton`  | `label` obligatorio, más variantes y estados de `DsButton`                       | icono default |
+| `DsButtonGroup` | `label`                                                                          | default       |
+| `DsFormActions` | —                                                                                | default       |
+
+`loading` conserva el texto como nombre accesible, añade `aria-busy` y deshabilita el botón.
+
+## Formularios
+
+| Componente          | Modelo    | Props principales                                                                                                          |
+| ------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `DsFormField`       | —         | `id`, `label`, `description`, `error`, `required`; slot scoped con `controlId`, `describedBy`, `invalid`                   |
+| `DsTextInput`       | `string`  | `id`, `name`, `label`, `description`, `error`, `type`, `autocomplete`, `disabled`, `required`; slots `leading`, `trailing` |
+| `DsTextarea`        | `string`  | contrato común más `rows`                                                                                                  |
+| `DsPasswordInput`   | `string`  | contrato común y botón mostrar/ocultar                                                                                     |
+| `DsSearchInput`     | `string`  | contrato de texto con icono decorativo de búsqueda                                                                         |
+| `DsSelect`          | `string`  | contrato común y `options: DsSelectOption[]`                                                                               |
+| `DsCheckbox`        | `boolean` | `label`, `description`, `error`, estados HTML                                                                              |
+| `DsRadioGroup`      | `string`  | `legend`, `name`, `options: DsRadioOption[]`, descripción y error                                                          |
+| `DsSwitch`          | `boolean` | `label`, `description`, `disabled`, `name`                                                                                 |
+| `DsSettingsSection` | —         | `title`, `description`; slots default y `actions`                                                                          |
+
+Ejemplo:
+
+```vue
+<DsTextInput
+  v-model="email"
+  name="email"
+  type="email"
+  label="Correo electrónico"
+  description="Usaremos tu correo de trabajo."
+  :error="emailError"
+  required
+/>
+```
+
+## Retroalimentación
+
+| Componente        | Props principales                    | Comportamiento                   |
+| ----------------- | ------------------------------------ | -------------------------------- |
+| `DsSpinner`       | `size`, `label`                      | `role=status`, nombre oculto     |
+| `DsSkeleton`      | `width`, `height`, `rounded`         | decorativo y sin gradiente       |
+| `DsProgressBar`   | `value`, `max`, `label`, `showValue` | semántica `progressbar`          |
+| `DsAlert`         | `variant`, `title`, `live`           | `live` activa `status` o `alert` |
+| `DsInlineMessage` | `variant`, `live`                    | ayuda o error breve              |
+| `DsEmptyState`    | `title`, `description`               | slots `icon`, `actions`          |
+| `DsLoadingState`  | `title`, `description`               | región de estado anunciable      |
+| `DsErrorState`    | `title`, `description`               | alerta y slot `actions`          |
+
+## Navegación y overlays
+
+`DsTabs` recibe `items: DsTabItem[]`, `label` y `v-model<string>`. Cada `id` define un slot del mismo nombre. Admite flechas, Home y End.
+
+```vue
+<DsTabs v-model="tab" :items="tabs" label="Preferencias">
+  <template #profile>…</template>
+  <template #security>…</template>
+</DsTabs>
+```
+
+`DsDialog` recibe `v-model<boolean>`, `title`, `description`, `closeLabel` y `closeOnBackdrop`. Emite `close` y `cancel`; ofrece slots default y `footer`.
+
+`DsConfirmDialog` añade `confirmLabel`, `cancelLabel`, `danger` y `loading`; emite `confirm` y `cancel`.