K
KoreUI

Configuración

Getting Started

Referencia completa del archivo config/kore-ui.php con todas las opciones configurables por módulo.

Publicar configuración

Publica el archivo de configuración para personalizar los valores por defecto de todos los componentes.

Terminal
php artisan vendor:publish --tag=kore-ui-config
php artisan vendor:publish --tag=kore-ui-config

Esto creará el archivo config/kore-ui.php en tu proyecto. Cada valor tiene un default sensato, así que solo necesitas modificar lo que quieras personalizar.

Estructura general

El archivo está organizado en secciones por módulo. Cada sección controla los defaults de un grupo de componentes.

config/kore-ui.php — Secciones principales
return [
    'overlay'     => [ ... ],  // Modals, drawers, bottom-sheets, fullscreen
    'feedback'    => [ ... ],  // Toast notifications y confirm dialogs
    'form'        => [ ... ],  // Input, select, datepicker, upload, etc.
    'ui'          => [ ... ],  // Button, alert, badge, card, tooltip, etc.
    'breadcrumbs' => [ ... ],  // Navegación breadcrumbs
    'datatable'   => [ ... ],  // Tabla de datos con sorting, filtros, paginación
    'spotlight'   => [ ... ],  // Command palette (Cmd+K)
    'theme'       => [ ... ],  // Theme switcher y anti-FOUC
];
return [
    'overlay'     => [ ... ],  // Modals, drawers, bottom-sheets, fullscreen
    'feedback'    => [ ... ],  // Toast notifications y confirm dialogs
    'form'        => [ ... ],  // Input, select, datepicker, upload, etc.
    'ui'          => [ ... ],  // Button, alert, badge, card, tooltip, etc.
    'breadcrumbs' => [ ... ],  // Navegación breadcrumbs
    'datatable'   => [ ... ],  // Tabla de datos con sorting, filtros, paginación
    'spotlight'   => [ ... ],  // Command palette (Cmd+K)
    'theme'       => [ ... ],  // Theme switcher y anti-FOUC
];

Nota: Todos los componentes pueden sobrescribir estos valores vía props. La configuración solo define los defaults cuando no se pasa un prop explícito.

Overlay

Configuración por defecto para el sistema de overlays: modals, drawers, bottom sheets y fullscreen.

config/kore-ui.php — overlay
'overlay' => [
    'defaults' => [
        'type'               => 'modal',     // modal|drawer|bottom-sheet|fullscreen
        'size'               => '2xl',       // sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full
        'position'           => 'center',    // center|left|right (drawer)
        'close_on_click_away' => true,       // Cerrar al hacer clic fuera
        'close_on_escape'    => true,        // Cerrar con tecla Escape
        'escape_closes_all'  => true,        // Escape cierra todos los overlays apilados
        'dispatch_close_event' => false,     // Disparar evento al cerrar
        'destroy_on_close'   => false,       // Destruir componente al cerrar
        'backdrop_blur'      => false,       // Aplicar blur al fondo
    ],
],
'overlay' => [
    'defaults' => [
        'type'               => 'modal',     // modal|drawer|bottom-sheet|fullscreen
        'size'               => '2xl',       // sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|full
        'position'           => 'center',    // center|left|right (drawer)
        'close_on_click_away' => true,       // Cerrar al hacer clic fuera
        'close_on_escape'    => true,        // Cerrar con tecla Escape
        'escape_closes_all'  => true,        // Escape cierra todos los overlays apilados
        'dispatch_close_event' => false,     // Disparar evento al cerrar
        'destroy_on_close'   => false,       // Destruir componente al cerrar
        'backdrop_blur'      => false,       // Aplicar blur al fondo
    ],
],

Cada componente overlay puede sobrescribir estos valores definiendo métodos estáticos en su clase PHP (ej: static::overlaySize()).

Feedback

Configuración del sistema de toast notifications y confirm dialogs.

config/kore-ui.php — feedback
'feedback' => [
    'toast' => [
        'position'         => 'top-right',  // top-left|top-center|top-right|bottom-left|bottom-center|bottom-right
        'timeout'          => 5,            // Segundos (0 = persistente)
        'dismissible'      => true,         // Mostrar botón de cerrar
        'max_visible'      => 5,            // Máximo de toasts visibles simultáneamente
        'spacing'          => 'gap-3',      // Espaciado entre toasts
        'z_index'          => 'z-[60]',     // z-index del contenedor
        'expand_delay'     => 150,          // Delay al expandir (ms)
        'collapse_delay'   => 300,          // Delay al colapsar (ms)
        'swipe_to_dismiss' => true,         // Deslizar para cerrar
    ],
    'confirm' => [
        'size'                 => 'md',         // Tamaño del dialog
        'confirm_text'         => 'Confirmar',  // Texto del botón confirmar
        'cancel_text'          => 'Cancelar',   // Texto del botón cancelar
        'closes_on_escape'     => true,         // Cerrar con Escape
        'closes_on_click_away' => false,        // Cerrar al clic fuera
    ],
],
'feedback' => [
    'toast' => [
        'position'         => 'top-right',  // top-left|top-center|top-right|bottom-left|bottom-center|bottom-right
        'timeout'          => 5,            // Segundos (0 = persistente)
        'dismissible'      => true,         // Mostrar botón de cerrar
        'max_visible'      => 5,            // Máximo de toasts visibles simultáneamente
        'spacing'          => 'gap-3',      // Espaciado entre toasts
        'z_index'          => 'z-[60]',     // z-index del contenedor
        'expand_delay'     => 150,          // Delay al expandir (ms)
        'collapse_delay'   => 300,          // Delay al colapsar (ms)
        'swipe_to_dismiss' => true,         // Deslizar para cerrar
    ],
    'confirm' => [
        'size'                 => 'md',         // Tamaño del dialog
        'confirm_text'         => 'Confirmar',  // Texto del botón confirmar
        'cancel_text'          => 'Cancelar',   // Texto del botón cancelar
        'closes_on_escape'     => true,         // Cerrar con Escape
        'closes_on_click_away' => false,        // Cerrar al clic fuera
    ],
],

Formularios

Defaults para todos los componentes de formulario. Cada sub-componente tiene su propia sección.

config/kore-ui.php — form
'form' => [
    'size'        => 'md',    // Tamaño global: sm|md|lg
    'show_errors' => true,    // Auto-detectar errores del $errors bag

    'select' => [
        'debounce'         => 300,   // Debounce para búsqueda async (ms)
        'min_search'       => 2,     // Caracteres mínimos para búsqueda async
        'search_threshold' => 10,    // Mostrar buscador si hay más de N opciones
    ],

    'password' => [
        'toggleable' => true,   // Mostrar botón ver/ocultar
        'strength'   => false,  // Indicador de fortaleza
        'min_length' => 8,      // Longitud mínima para fortaleza
    ],

    'number' => [
        'currency'  => 'USD',   // Moneda para formato
        'locale'    => null,    // Locale (null = app locale)
        'precision' => 2,       // Decimales
    ],

    'textarea' => [
        'rows' => 4,            // Filas por defecto
    ],

    'datepicker' => [
        'locale'        => null,  // Locale (null = app locale)
        'start_of_week' => 1,    // 0 = Domingo, 1 = Lunes
        'format'        => null,  // Formato de fecha (null = auto)
    ],

    'upload' => [
        'max_size'      => null,          // Tamaño máximo en KB (null = sin límite)
        'delete_method'  => 'deleteUpload', // Método Livewire para eliminar
        'auto_upload'   => true,          // Subir automáticamente al seleccionar
        'retryable'     => false,         // Permitir reintentos
        'max_retries'   => 3,             // Máximo de reintentos
        'retry_delay'   => 2000,          // Delay entre reintentos (ms)
    ],

    'rating' => [
        'stars'     => 5,     // Número de estrellas
        'clearable' => true,  // Permitir limpiar selección
    ],

    'color_picker' => [
        'columns'      => 8,     // Columnas en la grilla de colores
        'allow_custom' => true,  // Permitir color personalizado
    ],

    'maskable' => [
        'slot_char'      => '_',    // Carácter de placeholder
        'auto_clear'     => false,  // Limpiar si máscara incompleta
        'emit_formatted' => false,  // Emitir valor con formato
    ],
],
'form' => [
    'size'        => 'md',    // Tamaño global: sm|md|lg
    'show_errors' => true,    // Auto-detectar errores del $errors bag

    'select' => [
        'debounce'         => 300,   // Debounce para búsqueda async (ms)
        'min_search'       => 2,     // Caracteres mínimos para búsqueda async
        'search_threshold' => 10,    // Mostrar buscador si hay más de N opciones
    ],

    'password' => [
        'toggleable' => true,   // Mostrar botón ver/ocultar
        'strength'   => false,  // Indicador de fortaleza
        'min_length' => 8,      // Longitud mínima para fortaleza
    ],

    'number' => [
        'currency'  => 'USD',   // Moneda para formato
        'locale'    => null,    // Locale (null = app locale)
        'precision' => 2,       // Decimales
    ],

    'textarea' => [
        'rows' => 4,            // Filas por defecto
    ],

    'datepicker' => [
        'locale'        => null,  // Locale (null = app locale)
        'start_of_week' => 1,    // 0 = Domingo, 1 = Lunes
        'format'        => null,  // Formato de fecha (null = auto)
    ],

    'upload' => [
        'max_size'      => null,          // Tamaño máximo en KB (null = sin límite)
        'delete_method'  => 'deleteUpload', // Método Livewire para eliminar
        'auto_upload'   => true,          // Subir automáticamente al seleccionar
        'retryable'     => false,         // Permitir reintentos
        'max_retries'   => 3,             // Máximo de reintentos
        'retry_delay'   => 2000,          // Delay entre reintentos (ms)
    ],

    'rating' => [
        'stars'     => 5,     // Número de estrellas
        'clearable' => true,  // Permitir limpiar selección
    ],

    'color_picker' => [
        'columns'      => 8,     // Columnas en la grilla de colores
        'allow_custom' => true,  // Permitir color personalizado
    ],

    'maskable' => [
        'slot_char'      => '_',    // Carácter de placeholder
        'auto_clear'     => false,  // Limpiar si máscara incompleta
        'emit_formatted' => false,  // Emitir valor con formato
    ],
],

UI Components

Defaults para componentes de interfaz general: botones, alertas, badges, cards, tooltips y más.

config/kore-ui.php — ui
'ui' => [
    'size' => 'md',    // Tamaño global para componentes UI

    'button' => [
        'variant' => 'solid',     // solid|outline|ghost|soft|link
        'color'   => 'primary',   // primary|secondary|destructive|success|warning|info
    ],
    'alert'    => ['variant' => 'soft'],
    'badge'    => ['variant' => 'soft'],
    'card'     => ['bordered' => true, 'shadow' => true],
    'dropdown' => ['position' => 'bottom-start', 'width' => 'auto'],
    'tooltip'  => ['position' => 'top', 'delay' => 200],
    'avatar'   => ['shape' => 'circle'],
    'loading'  => ['type' => 'spinner'],
    'divider'  => ['type' => 'solid'],
    'progress' => ['size' => 'md', 'color' => 'primary'],
    'toolbar'  => ['variant' => 'default'],
    'accordion' => ['variant' => 'bordered'],
    'tab'      => ['variant' => 'line'],
    'stepper'  => ['variant' => 'horizontal', 'linear' => false],
    'skeleton' => ['animation' => 'shimmer'],   // shimmer|pulse|none
    'chip'     => ['variant' => 'soft'],
    'timeline' => ['variant' => 'left'],
    'stats'    => ['variant' => 'default', 'animated' => true],
    'clipboard' => ['variant' => 'input'],
    'kbd'      => ['size' => 'md'],
    'boolean'  => [
        'true_icon'   => 'check',
        'false_icon'  => 'x',
        'true_color'  => 'success',
        'false_color' => 'destructive',
    ],
    'speed-dial' => ['icon' => 'plus', 'direction' => 'up', 'size' => 'sm'],
    'splitter'   => ['orientation' => 'horizontal', 'gutter_size' => 8],
    'carousel'   => [
        'autoplay'        => false,
        'interval'        => 5000,
        'loop'            => true,
        'pause_on_hover'  => true,
        'show_indicators' => true,
        'show_navigation' => true,
        'num_visible'     => 1,
        'gap'             => 16,
    ],
    'icon' => ['prefix' => 'lucide', 'size' => null],
    'page-loading' => ['type' => 'spinner', 'blur' => true, 'text' => null],
],
'ui' => [
    'size' => 'md',    // Tamaño global para componentes UI

    'button' => [
        'variant' => 'solid',     // solid|outline|ghost|soft|link
        'color'   => 'primary',   // primary|secondary|destructive|success|warning|info
    ],
    'alert'    => ['variant' => 'soft'],
    'badge'    => ['variant' => 'soft'],
    'card'     => ['bordered' => true, 'shadow' => true],
    'dropdown' => ['position' => 'bottom-start', 'width' => 'auto'],
    'tooltip'  => ['position' => 'top', 'delay' => 200],
    'avatar'   => ['shape' => 'circle'],
    'loading'  => ['type' => 'spinner'],
    'divider'  => ['type' => 'solid'],
    'progress' => ['size' => 'md', 'color' => 'primary'],
    'toolbar'  => ['variant' => 'default'],
    'accordion' => ['variant' => 'bordered'],
    'tab'      => ['variant' => 'line'],
    'stepper'  => ['variant' => 'horizontal', 'linear' => false],
    'skeleton' => ['animation' => 'shimmer'],   // shimmer|pulse|none
    'chip'     => ['variant' => 'soft'],
    'timeline' => ['variant' => 'left'],
    'stats'    => ['variant' => 'default', 'animated' => true],
    'clipboard' => ['variant' => 'input'],
    'kbd'      => ['size' => 'md'],
    'boolean'  => [
        'true_icon'   => 'check',
        'false_icon'  => 'x',
        'true_color'  => 'success',
        'false_color' => 'destructive',
    ],
    'speed-dial' => ['icon' => 'plus', 'direction' => 'up', 'size' => 'sm'],
    'splitter'   => ['orientation' => 'horizontal', 'gutter_size' => 8],
    'carousel'   => [
        'autoplay'        => false,
        'interval'        => 5000,
        'loop'            => true,
        'pause_on_hover'  => true,
        'show_indicators' => true,
        'show_navigation' => true,
        'num_visible'     => 1,
        'gap'             => 16,
    ],
    'icon' => ['prefix' => 'lucide', 'size' => null],
    'page-loading' => ['type' => 'spinner', 'blur' => true, 'text' => null],
],

DataTable

Defaults para el componente DataTable: paginación, búsqueda, densidad, filtros y exportación.

config/kore-ui.php — datatable
'datatable' => [
    'per_page'              => 25,               // Registros por página
    'per_page_options'      => [10, 25, 50, 100], // Opciones del selector
    'density'               => 'normal',         // compact|normal|relaxed
    'pagination_type'       => 'standard',       // standard|simple|cursor
    'search_debounce'       => 300,              // Debounce de búsqueda (ms)
    'filter_layout'         => 'popover',        // popover|slide-down|inline|drawer
    'column_select'         => true,             // Selector de columnas visibles
    'responsive_mode'       => 'scroll',         // scroll|collapse|card
    'responsive_breakpoint' => 768,              // Breakpoint para modo responsive
    'query_string'          => false,            // Persistir estado en URL
    'export' => [
        'enabled'  => false,       // Habilitar exportación
        'formats'  => ['csv'],     // Formatos disponibles
        'max_rows' => 10000,       // Máximo de filas exportables
    ],
    'deferred_loading' => false,                 // Carga diferida
    'empty_text'       => 'No se encontraron resultados',
    'empty_icon'       => 'inbox',
    'translations'     => [
        'search'        => 'Buscar...',
        'per_page'      => 'Por página',
        'showing'       => 'Mostrando :from a :to de :total resultados',
        'no_results'    => 'No se encontraron resultados',
        'filters'       => 'Filtros',
        'actions'       => 'Acciones',
        'selected'      => 'seleccionado(s)',
        'clear_filters' => 'Limpiar filtros',
        'apply'         => 'Aplicar',
        'columns'       => 'Columnas',
        'reset_columns' => 'Restablecer',
        'sorted_by'     => 'Ordenado por',
        'clear_sorts'   => 'Limpiar ordenamiento',
        'export'        => 'Exportar',
        'cancel'        => 'Cancelar',
    ],
],
'datatable' => [
    'per_page'              => 25,               // Registros por página
    'per_page_options'      => [10, 25, 50, 100], // Opciones del selector
    'density'               => 'normal',         // compact|normal|relaxed
    'pagination_type'       => 'standard',       // standard|simple|cursor
    'search_debounce'       => 300,              // Debounce de búsqueda (ms)
    'filter_layout'         => 'popover',        // popover|slide-down|inline|drawer
    'column_select'         => true,             // Selector de columnas visibles
    'responsive_mode'       => 'scroll',         // scroll|collapse|card
    'responsive_breakpoint' => 768,              // Breakpoint para modo responsive
    'query_string'          => false,            // Persistir estado en URL
    'export' => [
        'enabled'  => false,       // Habilitar exportación
        'formats'  => ['csv'],     // Formatos disponibles
        'max_rows' => 10000,       // Máximo de filas exportables
    ],
    'deferred_loading' => false,                 // Carga diferida
    'empty_text'       => 'No se encontraron resultados',
    'empty_icon'       => 'inbox',
    'translations'     => [
        'search'        => 'Buscar...',
        'per_page'      => 'Por página',
        'showing'       => 'Mostrando :from a :to de :total resultados',
        'no_results'    => 'No se encontraron resultados',
        'filters'       => 'Filtros',
        'actions'       => 'Acciones',
        'selected'      => 'seleccionado(s)',
        'clear_filters' => 'Limpiar filtros',
        'apply'         => 'Aplicar',
        'columns'       => 'Columnas',
        'reset_columns' => 'Restablecer',
        'sorted_by'     => 'Ordenado por',
        'clear_sorts'   => 'Limpiar ordenamiento',
        'export'        => 'Exportar',
        'cancel'        => 'Cancelar',
    ],
],

Spotlight

Configuración del command palette activado con Cmd+K / Ctrl+K.

config/kore-ui.php — spotlight
'spotlight' => [
    'providers'   => [],              // Clases PHP proveedoras de items
    'shortcut'    => 'k',             // Tecla de atajo (con Cmd/Ctrl)
    'placeholder' => 'Buscar acciones, páginas...', // Placeholder del input
    'show_results_without_input' => true,  // Mostrar items antes de escribir
    'show_recent'  => true,           // Mostrar historial reciente
    'recent_count' => 5,              // Items recientes a mostrar
    'max_history'  => 10,             // Máximo de historial en localStorage
    'search_url'   => null,           // Endpoint de búsqueda remota
    'search_method' => 'GET',         // Método HTTP para búsqueda
    'debounce'     => 300,            // Debounce para búsqueda remota (ms)
    'max_results'  => 50,             // Máximo de resultados totales
    'z_index'      => 'z-[70]',      // z-index del panel
],
'spotlight' => [
    'providers'   => [],              // Clases PHP proveedoras de items
    'shortcut'    => 'k',             // Tecla de atajo (con Cmd/Ctrl)
    'placeholder' => 'Buscar acciones, páginas...', // Placeholder del input
    'show_results_without_input' => true,  // Mostrar items antes de escribir
    'show_recent'  => true,           // Mostrar historial reciente
    'recent_count' => 5,              // Items recientes a mostrar
    'max_history'  => 10,             // Máximo de historial en localStorage
    'search_url'   => null,           // Endpoint de búsqueda remota
    'search_method' => 'GET',         // Método HTTP para búsqueda
    'debounce'     => 300,            // Debounce para búsqueda remota (ms)
    'max_results'  => 50,             // Máximo de resultados totales
    'z_index'      => 'z-[70]',      // z-index del panel
],

Theme

Configuración del theme switcher y script anti-FOUC.

config/kore-ui.php — theme
'theme' => [
    'default' => 'system',  // Tema por defecto: 'light', 'dark', 'system'
    'nonce'   => null,      // CSP nonce para el script inline anti-FOUC
],
'theme' => [
    'default' => 'system',  // Tema por defecto: 'light', 'dark', 'system'
    'nonce'   => null,      // CSP nonce para el script inline anti-FOUC
],

CSP Nonce: Si tu aplicación usa una Content Security Policy estricta, pasa un nonce para que el script inline de @koreThemeScript sea permitido por el navegador.