create-lexy 0.6.1 → 0.6.3

package/assets/r/registry.json

@@ -7,7 +7,7 @@
       "name": "accordion",
       "type": "registry:ui",
       "title": "Accordion",
-      "description": "Secciones colapsables para mostrar detalle bajo demanda (Radix). Progressive disclosure: muestra primero los títulos y despliega el contenido al pedirlo. El componente vive en tu proyecto: instálalo con `create-lexy add accordion` y edítalo con libertad.",
+      "description": "Secciones colapsables para mostrar detalle bajo demanda (Radix). Progressive disclosure: muestra primero los títulos y despliega el contenido al pedirlo.",
       "dependencies": [
         "@radix-ui/react-accordion"
       ],
@@ -29,7 +29,7 @@
       "name": "alert-dialog",
       "type": "registry:ui",
       "title": "AlertDialog",
-      "description": "Confirmación modal que **interrumpe** (rol `alertdialog`): la persona debe elegir entre cancelar o confirmar — no hay X, ni cierre con click afuera. Para destruir, descartar cambios o salir de un flujo con costo. El componente vive en tu proyecto: instálalo con `create-lexy add alert-dialog` y edítalo con libertad.",
+      "description": "Confirmación modal que **interrumpe** (rol `alertdialog`): la persona debe elegir entre cancelar o confirmar — no hay X, ni cierre con click afuera. Para destruir, descartar cambios o salir de un flujo con costo.",
       "dependencies": [
         "@radix-ui/react-alert-dialog",
         "class-variance-authority"
@@ -76,7 +76,7 @@
       "name": "app-dialog",
       "type": "registry:ui",
       "title": "AppDialog",
-      "description": "Diálogo de aplicación al estilo **Material 3**. Estructura canónica sin dividers: El componente vive en tu proyecto: instálalo con `create-lexy add app-dialog` y edítalo con libertad.",
+      "description": "Diálogo de aplicación al estilo **Material 3**. Estructura canónica sin dividers:",
       "dependencies": [],
       "registryDependencies": [
         "@lexy/button",
@@ -150,7 +150,7 @@
       "name": "avatar",
       "type": "registry:ui",
       "title": "Avatar",
-      "description": "Imagen de perfil con fallback. Para identificación visual. El componente vive en tu proyecto: instálalo con `create-lexy add avatar` y edítalo con libertad.",
+      "description": "Imagen de perfil con fallback. Para identificación visual.",
       "dependencies": [
         "@radix-ui/react-avatar"
       ],
@@ -172,7 +172,7 @@
       "name": "badge",
       "type": "registry:ui",
       "title": "Badge",
-      "description": "Etiqueta de estado o categoría, **no interactiva** (`<span>`). Para marcar estados (\"Activo\", \"Pendiente\") o clasificar. El componente vive en tu proyecto: instálalo con `create-lexy add badge` y edítalo con libertad.",
+      "description": "Etiqueta de estado o categoría, **no interactiva** (`<span>`). Para marcar estados (\"Activo\", \"Pendiente\") o clasificar.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -310,7 +310,7 @@
       "name": "breadcrumb",
       "type": "registry:ui",
       "title": "Breadcrumb",
-      "description": "Componente Breadcrumb. El componente vive en tu proyecto: instálalo con `create-lexy add breadcrumb` y edítalo con libertad.",
+      "description": "Componente Breadcrumb.",
       "dependencies": [
         "@radix-ui/react-slot"
       ],
@@ -332,7 +332,7 @@
       "name": "button",
       "type": "registry:ui",
       "title": "Button",
-      "description": "Botón de acción. Renderiza un `<button>` nativo; acepta todos sus atributos (`onClick`, `type`, `disabled`, `aria-*`). El componente vive en tu proyecto: instálalo con `create-lexy add button` y edítalo con libertad.",
+      "description": "Botón de acción. Renderiza un `<button>` nativo; acepta todos sus atributos (`onClick`, `type`, `disabled`, `aria-*`).",
       "dependencies": [
         "@radix-ui/react-slot",
         "class-variance-authority"
@@ -355,7 +355,7 @@
       "name": "button-group",
       "type": "registry:ui",
       "title": "ButtonGroup",
-      "description": "Agrupa botones relacionados en una sola unidad visual. Sirve para acciones hermanas, comandos de toolbar o split actions. No mantiene estado de selección por sí mismo. El componente vive en tu proyecto: instálalo con `create-lexy add button-group` y edítalo con libertad.",
+      "description": "Agrupa botones relacionados en una sola unidad visual. Sirve para acciones hermanas, comandos de toolbar o split actions. No mantiene estado de selección por sí mismo.",
       "dependencies": [
         "@radix-ui/react-slot",
         "class-variance-authority"
@@ -405,7 +405,7 @@
       "name": "card",
       "type": "registry:ui",
       "title": "Card",
-      "description": "Contenedor de contenido. Para agrupar información relacionada. El componente vive en tu proyecto: instálalo con `create-lexy add card` y edítalo con libertad.",
+      "description": "Contenedor de contenido. Para agrupar información relacionada.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -449,7 +449,7 @@
       "name": "checkbox",
       "type": "registry:ui",
       "title": "Checkbox",
-      "description": "Casilla de verificación (Radix). Para un sí/no independiente o para elegir **varias** opciones de una lista. No trae label: emparéjalo con `Label`. El componente vive en tu proyecto: instálalo con `create-lexy add checkbox` y edítalo con libertad.",
+      "description": "Casilla de verificación (Radix). Para un sí/no independiente o para elegir **varias** opciones de una lista. No trae label: emparéjalo con `Label`.",
       "dependencies": [
         "@radix-ui/react-checkbox"
       ],
@@ -471,7 +471,7 @@
       "name": "combobox",
       "type": "registry:ui",
       "title": "Combobox",
-      "description": "Campo de entrada con lista desplegable filtrable. Para búsqueda + selección. El componente vive en tu proyecto: instálalo con `create-lexy add combobox` y edítalo con libertad.",
+      "description": "Campo de entrada con lista desplegable filtrable. Para búsqueda + selección.",
       "dependencies": [],
       "registryDependencies": [
         "@lexy/button",
@@ -495,7 +495,7 @@
       "name": "command",
       "type": "registry:ui",
       "title": "Command",
-      "description": "Paleta de comandos. Para búsqueda y acciones rápidas. El componente vive en tu proyecto: instálalo con `create-lexy add command` y edítalo con libertad.",
+      "description": "Paleta de comandos. Para búsqueda y acciones rápidas.",
       "dependencies": [
         "cmdk"
       ],
@@ -517,7 +517,7 @@
       "name": "counter-badge",
       "type": "registry:ui",
       "title": "CounterBadge",
-      "description": "Badge con contador numérico. Para notificaciones. El componente vive en tu proyecto: instálalo con `create-lexy add counter-badge` y edítalo con libertad.",
+      "description": "Badge con contador numérico. Para notificaciones.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -566,7 +566,7 @@
       "name": "dialog",
       "type": "registry:ui",
       "title": "Dialog",
-      "description": "Diálogo modal primitivo (Radix). **Para la mayoría de los casos usa `AppDialog`**, que ya arma la composición Material 3 (icono, título, descripción, acciones). Usa `Dialog` directo solo para layouts modales a medida sin esa estructura. El componente vive en tu proyecto: instálalo con `create-lexy add dialog` y edítalo con libertad.",
+      "description": "Diálogo modal primitivo (Radix). **Para la mayoría de los casos usa `AppDialog`**, que ya arma la composición Material 3 (icono, título, descripción, acciones). Usa `Dialog` directo solo para layouts modales a medida sin esa estructura.",
       "dependencies": [
         "@radix-ui/react-dialog"
       ],
@@ -588,7 +588,7 @@
       "name": "dropdown-menu",
       "type": "registry:ui",
       "title": "DropdownMenu",
-      "description": "Menú de **acciones** contextuales que se abre desde un disparador (Radix). Para agrupar acciones secundarias (\"⋯\", \"Opciones\") sin llenar la pantalla de botones. El componente vive en tu proyecto: instálalo con `create-lexy add dropdown-menu` y edítalo con libertad.",
+      "description": "Menú de **acciones** contextuales que se abre desde un disparador (Radix). Para agrupar acciones secundarias (\"⋯\", \"Opciones\") sin llenar la pantalla de botones.",
       "dependencies": [
         "@radix-ui/react-dropdown-menu"
       ],
@@ -632,7 +632,7 @@
       "name": "feature-card",
       "type": "registry:ui",
       "title": "FeatureCard",
-      "description": "Tarjeta con icono y descripción. Para destacar características. El componente vive en tu proyecto: instálalo con `create-lexy add feature-card` y edítalo con libertad.",
+      "description": "Tarjeta con icono y descripción. Para destacar características.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -652,7 +652,7 @@
       "name": "form",
       "type": "registry:ui",
       "title": "Form",
-      "description": "Formularios con validación (patrón shadcn sobre `react-hook-form` + `zod`). `Form` provee el contexto, `FormField` registra cada campo y `FormItem`/`FormLabel`/`FormControl` cablean ids y `aria-*` automáticamente; `FormMessage` muestra el error del campo. `create-lexy add form` instala también `zod` y `@hookform/resolvers`. El componente vive en tu proyecto: instálalo con `create-lexy add form` y edítalo con libertad.",
+      "description": "Formularios con validación (patrón shadcn sobre `react-hook-form` + `zod`). `Form` provee el contexto, `FormField` registra cada campo y `FormItem`/`FormLabel`/`FormControl` cablean ids y `aria-*` automáticamente; `FormMessage` muestra el error del campo. `create-lexy add form` instala también `zod` y `@hookform/resolvers`.",
       "dependencies": [
         "@radix-ui/react-slot",
         "react-hook-form@^7.62.0",
@@ -679,7 +679,7 @@
       "name": "header-bar",
       "type": "registry:ui",
       "title": "HeaderBar",
-      "description": "Barra superior de aplicación o sitio: marca a la izquierda y acciones a la derecha. Renderiza un `<header>` semántico. El componente vive en tu proyecto: instálalo con `create-lexy add header-bar` y edítalo con libertad.",
+      "description": "Barra superior de aplicación o sitio: marca a la izquierda y acciones a la derecha. Renderiza un `<header>` semántico.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -703,7 +703,7 @@
       "name": "input",
       "type": "registry:ui",
       "title": "Input",
-      "description": "Campo de texto de una línea. Renderiza un `<input>` nativo; acepta todos sus atributos (`type`, `value`, `onChange`, `placeholder`, `aria-*`). El componente vive en tu proyecto: instálalo con `create-lexy add input` y edítalo con libertad.",
+      "description": "Campo de texto de una línea. Renderiza un `<input>` nativo; acepta todos sus atributos (`type`, `value`, `onChange`, `placeholder`, `aria-*`).",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -723,7 +723,7 @@
       "name": "label",
       "type": "registry:ui",
       "title": "Label",
-      "description": "Etiqueta para campos de formulario. Incluye indicador de requerido. El componente vive en tu proyecto: instálalo con `create-lexy add label` y edítalo con libertad.",
+      "description": "Etiqueta para campos de formulario. Incluye indicador de requerido.",
       "dependencies": [
         "@radix-ui/react-label",
         "class-variance-authority"
@@ -746,7 +746,7 @@
       "name": "logo",
       "type": "registry:ui",
       "title": "Logo",
-      "description": "Logo de Lexy. Para marca del producto. El componente vive en tu proyecto: instálalo con `create-lexy add logo` y edítalo con libertad.",
+      "description": "Logo de Lexy. Para marca del producto.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -856,7 +856,7 @@
       "name": "menubar",
       "type": "registry:ui",
       "title": "Menubar",
-      "description": "Barra de menús horizontal. Para navegación de aplicación. El componente vive en tu proyecto: instálalo con `create-lexy add menubar` y edítalo con libertad.",
+      "description": "Barra de menús horizontal. Para navegación de aplicación.",
       "dependencies": [
         "@radix-ui/react-menubar"
       ],
@@ -878,7 +878,7 @@
       "name": "navigation-menu",
       "type": "registry:ui",
       "title": "NavigationMenu",
-      "description": "Menú de navegación con dropdowns. Para sitios web. El componente vive en tu proyecto: instálalo con `create-lexy add navigation-menu` y edítalo con libertad.",
+      "description": "Menú de navegación con dropdowns. Para sitios web.",
       "dependencies": [
         "@radix-ui/react-navigation-menu",
         "class-variance-authority"
@@ -926,7 +926,7 @@
       "name": "popover",
       "type": "registry:ui",
       "title": "Popover",
-      "description": "Panel flotante que se ancla a un elemento. Para contenido interactivo. El componente vive en tu proyecto: instálalo con `create-lexy add popover` y edítalo con libertad.",
+      "description": "Panel flotante que se ancla a un elemento. Para contenido interactivo.",
       "dependencies": [
         "@radix-ui/react-popover"
       ],
@@ -948,7 +948,7 @@
       "name": "profile-card",
       "type": "registry:ui",
       "title": "ProfileCard",
-      "description": "Tarjeta de perfil. Para mostrar información de usuario. El componente vive en tu proyecto: instálalo con `create-lexy add profile-card` y edítalo con libertad.",
+      "description": "Tarjeta de perfil. Para mostrar información de usuario.",
       "dependencies": [],
       "registryDependencies": [
         "@lexy/avatar",
@@ -971,7 +971,7 @@
       "name": "progress",
       "type": "registry:ui",
       "title": "Progress",
-      "description": "Barra de progreso. Para mostrar avance. El componente vive en tu proyecto: instálalo con `create-lexy add progress` y edítalo con libertad.",
+      "description": "Barra de progreso. Para mostrar avance.",
       "dependencies": [
         "@radix-ui/react-progress"
       ],
@@ -993,7 +993,7 @@
       "name": "radio-group",
       "type": "registry:ui",
       "title": "RadioGroup",
-      "description": "Selección **única** entre opciones visibles (Radix). Usa `RadioGroup` como contenedor y `RadioGroupItem` por opción. El componente vive en tu proyecto: instálalo con `create-lexy add radio-group` y edítalo con libertad.",
+      "description": "Selección **única** entre opciones visibles (Radix). Usa `RadioGroup` como contenedor y `RadioGroupItem` por opción.",
       "dependencies": [
         "@radix-ui/react-radio-group"
       ],
@@ -1037,7 +1037,7 @@
       "name": "searchbox",
       "type": "registry:ui",
       "title": "Searchbox",
-      "description": "Campo de búsqueda con icono. Para búsquedas. El componente vive en tu proyecto: instálalo con `create-lexy add searchbox` y edítalo con libertad.",
+      "description": "Campo de búsqueda con icono. Para búsquedas.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -1057,7 +1057,7 @@
       "name": "select",
       "type": "registry:ui",
       "title": "Select",
-      "description": "Lista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add select` y edítalo con libertad.",
+      "description": "Lista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez.",
       "dependencies": [
         "@radix-ui/react-select"
       ],
@@ -1079,7 +1079,7 @@
       "name": "separator",
       "type": "registry:ui",
       "title": "Separator",
-      "description": "Separador visual. Para dividir secciones. El componente vive en tu proyecto: instálalo con `create-lexy add separator` y edítalo con libertad.",
+      "description": "Separador visual. Para dividir secciones.",
       "dependencies": [
         "@radix-ui/react-separator"
       ],
@@ -1124,7 +1124,7 @@
       "name": "sidebar",
       "type": "registry:ui",
       "title": "Sidebar",
-      "description": "Primitivas internas (estilo shadcn) que usa `AppSidebar` por debajo. **No las compongas a mano para una barra de navegación: usa `AppSidebar`** (data-driven). Recurre a estas primitivas solo para layouts a medida. El componente vive en tu proyecto: instálalo con `create-lexy add sidebar` y edítalo con libertad.",
+      "description": "Primitivas internas (estilo shadcn) que usa `AppSidebar` por debajo. **No las compongas a mano para una barra de navegación: usa `AppSidebar`** (data-driven). Recurre a estas primitivas solo para layouts a medida.",
       "dependencies": [
         "@radix-ui/react-slot",
         "class-variance-authority",
@@ -1155,7 +1155,7 @@
       "name": "skeleton",
       "type": "registry:ui",
       "title": "Skeleton",
-      "description": "Esqueleto de carga. Para estados de espera. El componente vive en tu proyecto: instálalo con `create-lexy add skeleton` y edítalo con libertad.",
+      "description": "Esqueleto de carga. Para estados de espera.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -1177,7 +1177,7 @@
       "name": "slider",
       "type": "registry:ui",
       "title": "Slider",
-      "description": "Control deslizante. Para selección de rango numérico. El componente vive en tu proyecto: instálalo con `create-lexy add slider` y edítalo con libertad.",
+      "description": "Control deslizante. Para selección de rango numérico.",
       "dependencies": [
         "@radix-ui/react-slider"
       ],
@@ -1199,7 +1199,7 @@
       "name": "snippet",
       "type": "registry:ui",
       "title": "Snippet",
-      "description": "Fragmento de código. Para mostrar código con copia. El componente vive en tu proyecto: instálalo con `create-lexy add snippet` y edítalo con libertad.",
+      "description": "Fragmento de código. Para mostrar código con copia.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -1221,7 +1221,7 @@
       "name": "spinner",
       "type": "registry:ui",
       "title": "Spinner",
-      "description": "Indicador de carga visual. Usa el icono `Loader2` de Lucide con animación de rotación. El componente vive en tu proyecto: instálalo con `create-lexy add spinner` y edítalo con libertad.",
+      "description": "Indicador de carga visual. Usa el icono `Loader2` de Lucide con animación de rotación.",
       "dependencies": [
         "class-variance-authority",
         "lucide-react"
@@ -1244,7 +1244,7 @@
       "name": "status-dot",
       "type": "registry:ui",
       "title": "StatusDot",
-      "description": "Punto de estado con color, pensado para acompañar texto (estado de una fila, disponibilidad, conexión). El color **nunca** es la única señal: va con texto o `aria-label`. El componente vive en tu proyecto: instálalo con `create-lexy add status-dot` y edítalo con libertad.",
+      "description": "Punto de estado con color, pensado para acompañar texto (estado de una fila, disponibilidad, conexión). El color **nunca** es la única señal: va con texto o `aria-label`.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -1266,7 +1266,7 @@
       "name": "switch",
       "type": "registry:ui",
       "title": "Switch",
-      "description": "Interruptor de palanca. Para activar/desactivar estados. El componente vive en tu proyecto: instálalo con `create-lexy add switch` y edítalo con libertad.",
+      "description": "Interruptor de palanca. Para activar/desactivar estados.",
       "dependencies": [
         "@radix-ui/react-switch"
       ],
@@ -1288,7 +1288,7 @@
       "name": "table",
       "type": "registry:ui",
       "title": "Table",
-      "description": "Tabla de datos para comparar/escanear filas y columnas. Componente compuesto (`TableHeader`, `TableContent`, `TableRow`, `TableCell` — también disponibles como alias `Table.Header`, `Table.Content`, `Table.Row`, `Table.Cell`) basado en CSS grid. El componente vive en tu proyecto: instálalo con `create-lexy add table` y edítalo con libertad.",
+      "description": "Tabla de datos para comparar/escanear filas y columnas. Componente compuesto (`TableHeader`, `TableContent`, `TableRow`, `TableCell` — también disponibles como alias `Table.Header`, `Table.Content`, `Table.Row`, `Table.Cell`) basado en CSS grid.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -1310,7 +1310,7 @@
       "name": "tabs",
       "type": "registry:ui",
       "title": "Tabs",
-      "description": "Pestañas para alternar entre vistas **del mismo nivel** sin salir de la página (Radix). Progressive disclosure: muestra una categoría a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add tabs` y edítalo con libertad.",
+      "description": "Pestañas para alternar entre vistas **del mismo nivel** sin salir de la página (Radix). Progressive disclosure: muestra una categoría a la vez.",
       "dependencies": [
         "@radix-ui/react-tabs"
       ],
@@ -1332,7 +1332,7 @@
       "name": "tag",
       "type": "registry:ui",
       "title": "Tag",
-      "description": "Etiqueta de categoría. Para clasificación. El componente vive en tu proyecto: instálalo con `create-lexy add tag` y edítalo con libertad.",
+      "description": "Etiqueta de categoría. Para clasificación.",
       "dependencies": [
         "class-variance-authority"
       ],
@@ -1354,7 +1354,7 @@
       "name": "textarea",
       "type": "registry:ui",
       "title": "Textarea",
-      "description": "Campo de texto multilínea, redimensionable verticalmente (alto mínimo predefinido). Renderiza un `<textarea>` nativo. El componente vive en tu proyecto: instálalo con `create-lexy add textarea` y edítalo con libertad.",
+      "description": "Campo de texto multilínea, redimensionable verticalmente (alto mínimo predefinido). Renderiza un `<textarea>` nativo.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -1374,7 +1374,7 @@
       "name": "toaster",
       "type": "registry:ui",
       "title": "Toaster",
-      "description": "Notificaciones efímeras de la app (sobre **Sonner**, tematizado con tokens Lexy). Se monta **una vez** en el layout raíz y se dispara imperativo con `toast.*` desde cualquier parte. Reemplaza al `Toast` presentacional del sistema antiguo (deprecado). El componente vive en tu proyecto: instálalo con `create-lexy add toaster` y edítalo con libertad.",
+      "description": "Notificaciones efímeras de la app (sobre **Sonner**, tematizado con tokens Lexy). Se monta **una vez** en el layout raíz y se dispara imperativo con `toast.*` desde cualquier parte. Reemplaza al `Toast` presentacional del sistema antiguo (deprecado).",
       "dependencies": [
         "sonner@^2.0.0"
       ],
@@ -1396,7 +1396,7 @@
       "name": "tooltip",
       "type": "registry:ui",
       "title": "Tooltip",
-      "description": "Etiqueta breve que aparece al pasar el cursor o enfocar (Radix). Para **ayuda complementaria**, nunca para información esencial. El componente vive en tu proyecto: instálalo con `create-lexy add tooltip` y edítalo con libertad.",
+      "description": "Etiqueta breve que aparece al pasar el cursor o enfocar (Radix). Para **ayuda complementaria**, nunca para información esencial.",
       "dependencies": [
         "@radix-ui/react-tooltip"
       ],
@@ -1418,7 +1418,7 @@
       "name": "tree",
       "type": "registry:ui",
       "title": "Tree",
-      "description": "Árbol jerárquico. Para navegación en profundidad. El componente vive en tu proyecto: instálalo con `create-lexy add tree` y edítalo con libertad.",
+      "description": "Árbol jerárquico. Para navegación en profundidad.",
       "dependencies": [],
       "registryDependencies": [],
       "files": [
@@ -1516,13 +1516,13 @@
       "name": "crm-detalle-caso",
       "type": "registry:block",
       "title": "crm-detalle-caso",
-      "description": "Detalle master-detail para **CRM**: contexto del caso a la izquierda (panel fijo de 288px), trabajo al centro en tabs, acción primaria a la mano. La información que se consulta junta vive junta. Instálalo con `create-lexy add crm-detalle-caso` — trae `Tabs`, `Tag`, `Separator` y `Button`. La vista queda en tu proyecto (`views/CasoDetalle.tsx`): edítala con libertad.",
+      "description": "Detalle master-detail para **CRM**: contexto del caso a la izquierda (panel fijo de 288px), trabajo al centro en tabs, acción primaria a la mano. La información que se consulta junta vive junta. Instálalo con `create-lexy add crm-detalle-caso` — trae `Tabs`, `Badge`, `Separator` y `Button`. La vista queda en tu proyecto (`views/CasoDetalle.tsx`): edítala con libertad.",
       "dependencies": [],
       "registryDependencies": [
+        "@lexy/badge",
         "@lexy/button",
         "@lexy/separator",
-        "@lexy/tabs",
-        "@lexy/tag"
+        "@lexy/tabs"
       ],
       "files": [
         {

package/assets/r/scroll-area.json

@@ -13,13 +13,13 @@
       "path": "components/base/ScrollArea.tsx",
       "type": "registry:ui",
       "target": "components/base/ScrollArea.tsx",
-      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none transition-colors\",\n        \"data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-muted-foreground/20 hover:bg-muted-foreground/30 transition-colors\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar };\n"
+      "content": "import * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\ntype ScrollAreaProps = React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n  /**\n   * Barras que puede mostrar el área cuando el contenido desborda.\n   * @default \"vertical\"\n   */\n  orientation?: \"vertical\" | \"horizontal\" | \"both\";\n};\n\nfunction ScrollArea({\n  className,\n  children,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {orientation !== \"horizontal\" && <ScrollBar orientation=\"vertical\" />}\n      {orientation !== \"vertical\" && <ScrollBar orientation=\"horizontal\" />}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none select-none transition-colors\",\n        \"data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-muted-foreground/20 hover:bg-muted-foreground/30 transition-colors\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\n\nexport { ScrollArea, ScrollBar, type ScrollAreaProps };\n"
     },
     {
       "path": "components/base/ScrollArea.md",
       "type": "registry:file",
       "target": "components/base/ScrollArea.md",
-      "content": "# ScrollArea — guía de uso\n\nÁrea de scroll estilizada con barras de scroll personalizadas.\nBasado en `@radix-ui/react-scroll-area`. El componente vive en tu proyecto: instálalo con `create-lexy add scroll-area` y edítalo con libertad.\n\n## Cuándo usarlo\n\nPara paneles con alto fijo cuyo contenido crece: listas laterales, paneles de detalle, menús largos. Estiliza la barra y evita saltos de layout. Para el scroll de la página entera no hace falta — el navegador ya sabe.\n\n## Composición\n\n`ScrollArea` envuelve el contenido y `ScrollBar` (vertical u horizontal) dibuja la barra estilizada.\n\n## Uso básico\n\n```tsx\n<ScrollArea className=\"h-72 w-72 rounded-md border border-border p-4\">\n  <div className=\"space-y-4\">\n    {items.map((item) => (\n      <div key={item.id}>\n        <div className=\"font-medium\">{item.title}</div>\n        <div className=\"text-muted-foreground\">{item.description}</div>\n      </div>\n    ))}\n  </div>\n</ScrollArea>\n```\n\n## Scroll horizontal\n\n```tsx\n<ScrollArea className=\"w-96 rounded-md border border-border p-4\">\n  <div className=\"flex w-max gap-4\">\n    {items.map((item) => (\n      <div key={item.id} className=\"w-32 shrink-0\">\n        {item.title}\n      </div>\n    ))}\n  </div>\n</ScrollArea>\n```\n\n## Reglas\n\n- Define una altura o ancho fijo para que el scroll funcione.\n- El contenido debe ser más grande que el contenedor para que aparezca scroll.\n- No envuelvas toda la página en `ScrollArea` → usa scroll nativo del body.\n- No anides múltiples `ScrollArea`.\n\n## Import\n\n```tsx\nimport { ScrollArea } from \"@/shared/components/base/ScrollArea\"; // o @/components/base/ScrollArea\n```\n\n## Props\n\n| Componente | Props | Descripción |\n|---|---|---|\n| `ScrollArea` | `className?`, `children`, `...` | Contenedor con scroll. |\n| `ScrollBar` | `className?`, `orientation?` | Barra de scroll. Renderiza automáticamente. |\n\n## Para IA\n\n1. Identifica si el contenido excede el espacio disponible.\n2. Si necesitas scroll estilizado → usa `ScrollArea`.\n3. Define `height` y/o `width` en el contenedor.\n4. No uses `ScrollArea` para scroll de página completa.\n"
+      "content": "# ScrollArea\nÁrea de scroll estilizada con barras de scroll personalizadas.\nBasado en `@radix-ui/react-scroll-area`.\n\n## Cuándo usarlo\n\nPara paneles con alto fijo cuyo contenido crece: listas laterales, paneles de detalle, menús largos. Estiliza la barra y evita saltos de layout. Para el scroll de la página entera no hace falta — el navegador ya sabe.\n\n## Composición\n\n`ScrollArea` envuelve el contenido y monta las barras necesarias según\n`orientation`: vertical, horizontal o ambas.\n\n## Uso básico\n\n```tsx\n<ScrollArea className=\"h-72 w-72 rounded-md border border-border p-4\">\n  <div className=\"space-y-4\">\n    {items.map((item) => (\n      <div key={item.id}>\n        <div className=\"font-medium\">{item.title}</div>\n        <div className=\"text-muted-foreground\">{item.description}</div>\n      </div>\n    ))}\n  </div>\n</ScrollArea>\n```\n\n## Scroll horizontal\n\n```tsx\n<ScrollArea\n  orientation=\"horizontal\"\n  className=\"w-96 rounded-md border border-border p-4\"\n>\n  <div className=\"flex w-max gap-4\">\n    {items.map((item) => (\n      <div key={item.id} className=\"w-32 shrink-0\">\n        {item.title}\n      </div>\n    ))}\n  </div>\n</ScrollArea>\n```\n\n## Scroll en ambos ejes\n\n```tsx\n<ScrollArea\n  orientation=\"both\"\n  className=\"h-72 w-72 rounded-md border border-border p-4\"\n>\n  <div className=\"h-[500px] w-[500px]\">\n    {content}\n  </div>\n</ScrollArea>\n```\n\n## Reglas\n\n- Define una altura o ancho fijo para que el scroll funcione.\n- El contenido debe ser más grande que el contenedor para que aparezca scroll.\n- No envuelvas toda la página en `ScrollArea` → usa scroll nativo del body.\n- No anides múltiples `ScrollArea`.\n\n## Import\n\n```tsx\nimport { ScrollArea } from \"@/shared/components/base/ScrollArea\"; // o @/components/base/ScrollArea\n```\n\n## Props\n\n| Componente | Props | Descripción |\n|---|---|---|\n| `ScrollArea` | `className?`, `children`, `orientation?`, `...` | Contenedor con scroll. `orientation`: `\"vertical\"` (default), `\"horizontal\"` o `\"both\"`. |\n| `ScrollBar` | `className?`, `orientation?` | Primitiva de barra para composiciones avanzadas. |\n\n## Para IA\n\n1. Identifica si el contenido excede el espacio disponible.\n2. Si necesitas scroll estilizado → usa `ScrollArea`.\n3. Define `height` y/o `width` en el contenedor y elige `orientation`.\n4. No uses `ScrollArea` para scroll de página completa.\n"
     }
   ]
 }

package/assets/r/searchbox.json

@@ -3,7 +3,7 @@
   "name": "searchbox",
   "type": "registry:ui",
   "title": "Searchbox",
-  "description": "Campo de búsqueda con icono. Para búsquedas. El componente vive en tu proyecto: instálalo con `create-lexy add searchbox` y edítalo con libertad.",
+  "description": "Campo de búsqueda con icono. Para búsquedas.",
   "dependencies": [],
   "registryDependencies": [],
   "files": [
@@ -11,13 +11,13 @@
       "path": "components/base/Searchbox.tsx",
       "type": "registry:ui",
       "target": "components/base/Searchbox.tsx",
-      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nexport interface SearchboxProps extends Omit<React.ComponentProps<\"input\">, \"type\"> {\n  /** Cuando se define, muestra un botón (×) para limpiar el campo. */\n  onClear?: () => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, onClear, value, disabled, ...props }, ref) => {\n    const hasValue = value !== undefined && String(value) !== \"\";\n    const showClear = !!onClear && hasValue && !disabled;\n\n    return (\n      <div className={cn(\"relative flex w-full items-center\", className)}>\n        <svg\n          className=\"pointer-events-none absolute left-3 h-4 w-4 text-muted-foreground\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n          ref={ref}\n          type=\"search\"\n          role=\"searchbox\"\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-10 w-full rounded border border-input bg-background pl-9 pr-9 text-sm text-foreground outline-none transition-colors duration-150\",\n            \"placeholder:text-muted-foreground\",\n            \"hover:border-muted-foreground/40 focus-visible:border-primary\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n          )}\n          {...props}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            onClick={onClear}\n            aria-label=\"Limpiar\"\n            className=\"absolute right-3 flex h-4 w-4 cursor-pointer items-center justify-center text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <svg\n              className=\"h-4 w-4\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  },\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n"
+      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nexport interface SearchboxProps extends Omit<React.ComponentProps<\"input\">, \"type\"> {\n  /** Cuando se define, muestra un botón (×) para limpiar el campo. */\n  onClear?: () => void;\n}\n\nconst Searchbox = React.forwardRef<HTMLInputElement, SearchboxProps>(\n  ({ className, onClear, value, disabled, ...props }, ref) => {\n    const hasValue = value !== undefined && String(value) !== \"\";\n    const showClear = !!onClear && hasValue && !disabled;\n\n    return (\n      <div className={cn(\"relative flex w-full items-center\", className)}>\n        <svg\n          className=\"pointer-events-none absolute left-3 size-(--icon-size-inline) text-muted-foreground\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <path d=\"m21 21-4.3-4.3\" />\n        </svg>\n        <input\n          ref={ref}\n          type=\"search\"\n          role=\"searchbox\"\n          value={value}\n          disabled={disabled}\n          className={cn(\n            \"flex h-10 w-full rounded-control border border-input bg-background pl-9 pr-9 type-supporting text-foreground outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none\",\n            \"placeholder:text-muted-foreground\",\n            \"hover:border-muted-foreground/40 focus-visible:border-primary\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n          )}\n          {...props}\n        />\n        {showClear && (\n          <button\n            type=\"button\"\n            onClick={onClear}\n            aria-label=\"Limpiar\"\n            className=\"absolute right-3 flex size-(--icon-size-control) cursor-pointer items-center justify-center rounded-button text-muted-foreground transition-colors hover:text-foreground\"\n          >\n            <svg\n              className=\"size-(--icon-size-control)\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M18 6 6 18M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n      </div>\n    );\n  },\n);\nSearchbox.displayName = \"Searchbox\";\n\nexport { Searchbox };\n"
     },
     {
       "path": "components/base/Searchbox.md",
       "type": "registry:file",
       "target": "components/base/Searchbox.md",
-      "content": "# Searchbox — guía de uso\n\nCampo de búsqueda con icono. Para búsquedas. El componente vive en tu proyecto: instálalo con `create-lexy add searchbox` y edítalo con libertad.\n\n## Cuándo usarlo\n\nPara filtrar o buscar dentro de un conjunto: la tabla del desk, un listado. El icono de lupa fija la expectativa. Si en realidad se elige entre opciones (no se filtra contenido), eso es un `Combobox`.\n\n## Composición\n\nUna sola pieza (`Searchbox`): un `Input` con el icono de búsqueda integrado. En toolbars convive con las acciones a la derecha.\n\n## Uso básico\n\n```tsx\n<Searchbox />\n```\n\n## Reglas\n\n- Usa Searchbox según el propósito descrito.\n- No abuses de este componente en contexts donde no aplica.\n\n## Import\n\n```tsx\nimport { Searchbox } from \"@/components/base/Searchbox\";\n```\n\n## Props\n\nConsulta la story en Storybook para ver las props disponibles.\n\n## Para IA\n\n1. Identifica el contexto de uso del componente.\n2. Importa Searchbox desde el path correcto.\n3. Configura las props según la necesidad.\n4. Verifica que el componente se integre correctamente en el layout.\n5. Solo usa variantes documentadas.\n"
+      "content": "# Searchbox\nCampo de búsqueda con icono. Para búsquedas.\n\n## Cuándo usarlo\n\nPara filtrar o buscar dentro de un conjunto: la tabla del desk, un listado. El icono de lupa fija la expectativa. Si en realidad se elige entre opciones (no se filtra contenido), eso es un `Combobox`.\n\n## Composición\n\nUna sola pieza (`Searchbox`): un `Input` con el icono de búsqueda integrado. En toolbars convive con las acciones a la derecha.\n\n## Uso básico\n\n```tsx\n<Searchbox />\n```\n\n## Reglas\n\n- Usa Searchbox según el propósito descrito.\n- No abuses de este componente en contexts donde no aplica.\n\n## Import\n\n```tsx\nimport { Searchbox } from \"@/components/base/Searchbox\";\n```\n\n## Props\n\nConsulta la story en Storybook para ver las props disponibles.\n\n## Para IA\n\n1. Identifica el contexto de uso del componente.\n2. Importa Searchbox desde el path correcto.\n3. Configura las props según la necesidad.\n4. Verifica que el componente se integre correctamente en el layout.\n5. Solo usa variantes documentadas.\n"
     }
   ]
 }

package/assets/r/select.json

@@ -3,7 +3,7 @@
   "name": "select",
   "type": "registry:ui",
   "title": "Select",
-  "description": "Lista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add select` y edítalo con libertad.",
+  "description": "Lista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez.",
   "dependencies": [
     "@radix-ui/react-select"
   ],
@@ -13,13 +13,13 @@
       "path": "components/base/Select.tsx",
       "type": "registry:ui",
       "target": "components/base/Select.tsx",
-      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors duration-150 hover:border-muted-foreground/40 focus:border-primary disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <svg\n        className=\"h-4 w-4 opacity-50 transition-transform duration-200 data-[state=open]:rotate-180\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"h-4 w-4\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 overflow-hidden rounded border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-8 pr-2 text-sm text-foreground outline-none focus:bg-primary/15 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <svg\n          className=\"h-4 w-4\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"
+      "content": "import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils/cn\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"flex h-10 w-full items-center justify-between rounded-control border border-input bg-background px-3 py-2 type-supporting text-foreground outline-none transition-colors duration-[var(--duration-fast)] ease-[var(--ease-standard)] hover:border-muted-foreground/40 focus:border-primary disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <SelectPrimitive.Icon asChild>\n      <svg\n        className=\"size-(--icon-size-inline) opacity-50 transition-transform duration-[var(--duration-normal)] ease-[var(--ease-standard)] motion-reduce:transition-none data-[state=open]:rotate-180\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </SelectPrimitive.Icon>\n  </SelectPrimitive.Trigger>\n));\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollUpButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"size-(--icon-size-inline)\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m18 15-6-6-6 6\" />\n    </svg>\n  </SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.ScrollDownButton\n    ref={ref}\n    className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n    {...props}\n  >\n    <svg\n      className=\"size-(--icon-size-inline)\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  </SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;\n\nconst SelectContent = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"relative z-50 max-h-96 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        position === \"popper\" &&\n          \"w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1\",\n        className,\n      )}\n      position={position}\n      {...props}\n    >\n      <SelectScrollUpButton />\n      <SelectPrimitive.Viewport\n        className={cn(\n          \"p-1\",\n          position === \"popper\" &&\n            \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]\",\n        )}\n      >\n        {children}\n      </SelectPrimitive.Viewport>\n      <SelectScrollDownButton />\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\nSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectLabel = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"px-2 py-1.5 type-meta font-medium text-muted-foreground\", className)}\n    {...props}\n  />\n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"relative flex w-full cursor-pointer select-none items-center rounded-menu-item py-1.5 pl-8 pr-2 type-supporting text-foreground outline-none focus:bg-primary/15 focus:text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectPrimitive.ItemIndicator>\n        <svg\n          className=\"size-(--icon-size-inline)\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M20 6 9 17l-5-5\" />\n        </svg>\n      </SelectPrimitive.ItemIndicator>\n    </span>\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n  </SelectPrimitive.Item>\n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n  React.ElementRef<typeof SelectPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n    {...props}\n  />\n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n};\n"
     },
     {
       "path": "components/base/Select.md",
       "type": "registry:file",
       "target": "components/base/Select.md",
-      "content": "# Select — guía de uso\n\nLista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add select` y edítalo con libertad.\n\n## Cuándo usarlo\n\nPara selección única en listas medianas donde no necesitas ver todas las opciones a la vez: región, estado civil. Ahorra pantalla a cambio de un click. Con pocas opciones muestra `RadioGroup`; con muchas o con búsqueda, `Combobox`.\n\n## Composición\n\n`Select` con `SelectTrigger` (el campo, con `SelectValue`) y `SelectContent` con un `SelectItem` por opción; `SelectGroup` y `SelectLabel` organizan listas largas.\n\n## Uso básico\n\n```tsx\n<div className=\"grid gap-1.5\">\n  <Label htmlFor=\"region\">Región</Label>\n  <Select onValueChange={setRegion}>\n    <SelectTrigger id=\"region\">\n      <SelectValue placeholder=\"Selecciona una región\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem value=\"rm\">Metropolitana</SelectItem>\n      <SelectItem value=\"v\">Valparaíso</SelectItem>\n      <SelectItem value=\"viii\">Biobío</SelectItem>\n    </SelectContent>\n  </Select>\n</div>\n```\n\n## Con grupos\n\n```tsx\n<SelectContent>\n  <SelectGroup>\n    <SelectLabel>Zona norte</SelectLabel>\n    <SelectItem value=\"i\">Tarapacá</SelectItem>\n  </SelectGroup>\n  <SelectSeparator />\n  <SelectGroup>\n    <SelectLabel>Zona centro</SelectLabel>\n    <SelectItem value=\"rm\">Metropolitana</SelectItem>\n  </SelectGroup>\n</SelectContent>\n```\n\n## Reglas\n\n- Asocia el `SelectTrigger` con un `Label` (`id`/`htmlFor`).\n- Usa `SelectValue` con `placeholder` claro; no dejes el trigger vacío.\n- Agrupa con `SelectGroup`/`SelectLabel` si hay categorías.\n- Cada `SelectItem` necesita `value` único.\n\n## Cuándo NO usar\n\n- **Pocas opciones (2–4) que conviene ver siempre** → `RadioGroup`.\n- **Necesitas escribir para filtrar** → `Combobox`.\n- **Selección múltiple** → `Checkbox` o `Combobox` con multiselección (no este Select).\n- **Acciones (no selección de valor)** → `DropdownMenu`.\n\n## Import\n\n```tsx\nimport {\n  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,\n} from \"@/components/base/Select\";\n```\n\n## Exports\n\n`Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton`.\n\n## Props (esenciales)\n\n| Parte | Prop | Descripción |\n|---|---|---|\n| `Select` | `value` / `defaultValue` | Selección controlada / inicial. |\n| `Select` | `onValueChange` | Cambio de selección. |\n| `SelectTrigger` | `id` | Para asociar el `Label`. |\n| `SelectValue` | `placeholder` | Texto cuando no hay selección. |\n| `SelectItem` | `value` | **Requerido.** Valor de la opción. |\n\n## Para IA\n\n1. Confirma que es selección única de un valor de formulario (no acciones, no multiselección).\n2. Si son ≤4 opciones siempre visibles, considera `RadioGroup`; si requieren búsqueda, `Combobox`.\n3. Arma `Select > SelectTrigger (con SelectValue) > SelectContent > SelectItem`.\n4. Asocia el trigger con un `Label`.\n5. Controla con `value`/`onValueChange` cuando alimente un formulario.\n"
+      "content": "# Select\nLista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez.\n\n## Cuándo usarlo\n\nPara selección única en listas medianas donde no necesitas ver todas las opciones a la vez: región, estado civil. Ahorra pantalla a cambio de un click. Con pocas opciones muestra `RadioGroup`; con muchas o con búsqueda, `Combobox`.\n\n## Composición\n\n`Select` con `SelectTrigger` (el campo, con `SelectValue`) y `SelectContent` con un `SelectItem` por opción; `SelectGroup` y `SelectLabel` organizan listas largas.\n\n## Uso básico\n\n```tsx\n<div className=\"grid gap-1.5\">\n  <Label htmlFor=\"region\">Región</Label>\n  <Select onValueChange={setRegion}>\n    <SelectTrigger id=\"region\">\n      <SelectValue placeholder=\"Selecciona una región\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectItem value=\"rm\">Metropolitana</SelectItem>\n      <SelectItem value=\"v\">Valparaíso</SelectItem>\n      <SelectItem value=\"viii\">Biobío</SelectItem>\n    </SelectContent>\n  </Select>\n</div>\n```\n\n## Con grupos\n\n```tsx\n<SelectContent>\n  <SelectGroup>\n    <SelectLabel>Zona norte</SelectLabel>\n    <SelectItem value=\"i\">Tarapacá</SelectItem>\n  </SelectGroup>\n  <SelectSeparator />\n  <SelectGroup>\n    <SelectLabel>Zona centro</SelectLabel>\n    <SelectItem value=\"rm\">Metropolitana</SelectItem>\n  </SelectGroup>\n</SelectContent>\n```\n\n## Reglas\n\n- Asocia el `SelectTrigger` con un `Label` (`id`/`htmlFor`).\n- Usa `SelectValue` con `placeholder` claro; no dejes el trigger vacío.\n- Agrupa con `SelectGroup`/`SelectLabel` si hay categorías.\n- Cada `SelectItem` necesita `value` único.\n\n## Cuándo NO usar\n\n- **Pocas opciones (2–4) que conviene ver siempre** → `RadioGroup`.\n- **Necesitas escribir para filtrar** → `Combobox`.\n- **Selección múltiple** → `Checkbox` o `Combobox` con multiselección (no este Select).\n- **Acciones (no selección de valor)** → `DropdownMenu`.\n\n## Import\n\n```tsx\nimport {\n  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,\n} from \"@/components/base/Select\";\n```\n\n## Exports\n\n`Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton`.\n\n## Props (esenciales)\n\n| Parte | Prop | Descripción |\n|---|---|---|\n| `Select` | `value` / `defaultValue` | Selección controlada / inicial. |\n| `Select` | `onValueChange` | Cambio de selección. |\n| `SelectTrigger` | `id` | Para asociar el `Label`. |\n| `SelectValue` | `placeholder` | Texto cuando no hay selección. |\n| `SelectItem` | `value` | **Requerido.** Valor de la opción. |\n\n## Para IA\n\n1. Confirma que es selección única de un valor de formulario (no acciones, no multiselección).\n2. Si son ≤4 opciones siempre visibles, considera `RadioGroup`; si requieren búsqueda, `Combobox`.\n3. Arma `Select > SelectTrigger (con SelectValue) > SelectContent > SelectItem`.\n4. Asocia el trigger con un `Label`.\n5. Controla con `value`/`onValueChange` cuando alimente un formulario.\n"
     }
   ]
 }

package/assets/r/separator.json

@@ -3,7 +3,7 @@
   "name": "separator",
   "type": "registry:ui",
   "title": "Separator",
-  "description": "Separador visual. Para dividir secciones. El componente vive en tu proyecto: instálalo con `create-lexy add separator` y edítalo con libertad.",
+  "description": "Separador visual. Para dividir secciones.",
   "dependencies": [
     "@radix-ui/react-separator"
   ],
@@ -19,7 +19,7 @@
       "path": "components/base/Separator.md",
       "type": "registry:file",
       "target": "components/base/Separator.md",
-      "content": "# Separator — guía de uso\n\nSeparador visual. Para dividir secciones. El componente vive en tu proyecto: instálalo con `create-lexy add separator` y edítalo con libertad.\n\n## Cuándo usarlo\n\nPara marcar un límite entre zonas cuando el aire no basta: menús, toolbars, metadatos en línea. Primero prueba con espacio — la línea es el recurso de segunda instancia.\n\n## Composición\n\nUna sola pieza (`Separator`) con orientación horizontal o vertical. Decorativa por defecto: los lectores de pantalla la ignoran.\n\n## Uso básico\n\n```tsx\n<Separator />\n```\n\n## Reglas\n\n- Usa Separator según el propósito descrito.\n- No abuses de este componente en contexts donde no aplica.\n\n## Import\n\n```tsx\nimport { Separator } from \"@/components/base/Separator\";\n```\n\n## Props\n\nConsulta la story en Storybook para ver las props disponibles.\n\n## Para IA\n\n1. Identifica el contexto de uso del componente.\n2. Importa Separator desde el path correcto.\n3. Configura las props según la necesidad.\n4. Verifica que el componente se integre correctamente en el layout.\n5. Solo usa variantes documentadas.\n"
+      "content": "# Separator\nSeparador visual. Para dividir secciones.\n\n## Cuándo usarlo\n\nPara marcar un límite entre zonas cuando el aire no basta: menús, toolbars, metadatos en línea. Primero prueba con espacio — la línea es el recurso de segunda instancia.\n\n## Composición\n\nUna sola pieza (`Separator`) con orientación horizontal o vertical. Decorativa por defecto: los lectores de pantalla la ignoran.\n\n## Uso básico\n\n```tsx\n<Separator />\n```\n\n## Reglas\n\n- Usa Separator según el propósito descrito.\n- No abuses de este componente en contexts donde no aplica.\n\n## Import\n\n```tsx\nimport { Separator } from \"@/components/base/Separator\";\n```\n\n## Props\n\nConsulta la story en Storybook para ver las props disponibles.\n\n## Para IA\n\n1. Identifica el contexto de uso del componente.\n2. Importa Separator desde el path correcto.\n3. Configura las props según la necesidad.\n4. Verifica que el componente se integre correctamente en el layout.\n5. Solo usa variantes documentadas.\n"
     }
   ]
 }