@valcis/brand 2.0.4 → 2.1.0

package/README.md

@@ -1,6 +1,11 @@
 # @valcis/brand
 
-Componentes React de marca **valcis**: Logo SVG y Footer con soporte SSR.
+[![npm version](https://img.shields.io/npm/v/@valcis/brand.svg)](https://www.npmjs.com/package/@valcis/brand)
+[![npm downloads](https://img.shields.io/npm/dm/@valcis/brand.svg)](https://www.npmjs.com/package/@valcis/brand)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/@valcis/brand)](https://bundlephobia.com/package/@valcis/brand)
+[![license](https://img.shields.io/npm/l/@valcis/brand.svg)](https://github.com/valcis/branding_valcis/blob/main/LICENSE)
+
+Componentes React de marca **valcis**: Logo SVG, Footer, Spinner, Watermark y tema con soporte SSR.
 
 ## Instalación
 
@@ -21,8 +26,9 @@ import { Logo } from '@valcis/brand';
 // Completo: >valcis|
 <Logo variant="full" size={40} />
 
-// Animado con cursor blink
-<Logo variant="full" size={32} animated />
+// El logo full viene animado por defecto (cursor blink)
+// Para desactivarlo:
+<Logo variant="full" size={32} animated={false} />
 ```
 
 ### Props
@@ -31,7 +37,7 @@ import { Logo } from '@valcis/brand';
 |------|------|---------|-------------|
 | `variant` | `'icon' \| 'full'` | `'icon'` | Variante del logo |
 | `size` | `number \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `24` | Tamaño en px o preset |
-| `animated` | `boolean` | `false` | Animación CSS-only (respeta `prefers-reduced-motion`) |
+| `animated` | `boolean` | `true` (full) / `false` (icon) | Animación CSS-only (respeta `prefers-reduced-motion`) |
 | `accentColor` | `string` | — | Color de brackets/chevron/cursor |
 | `textColor` | `string` | — | Color de letras |
 | `className` | `string` | — | Clase CSS adicional |
@@ -47,6 +53,56 @@ import { Logo } from '@valcis/brand';
 | `lg` | 32 |
 | `xl` | 48 |
 
+## Spinner
+
+Indicador de carga con el logo animado.
+
+```tsx
+import { Spinner } from '@valcis/brand';
+
+// Básico
+<Spinner />
+
+// Con opciones
+<Spinner size="lg" animation="spin" label="Cargando datos..." />
+```
+
+### Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `size` | `number \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Tamaño |
+| `animation` | `'pulse' \| 'spin' \| 'bounce'` | `'pulse'` | Tipo de animación |
+| `accentColor` | `string` | — | Color de acento |
+| `textColor` | `string` | — | Color de texto |
+| `label` | `string` | `'Cargando...'` | Texto para screen readers |
+| `className` | `string` | — | Clase CSS adicional |
+
+## Watermark
+
+Marca de agua posicionable para imágenes o secciones.
+
+```tsx
+import { Watermark } from '@valcis/brand';
+
+// El contenedor padre debe tener position: relative
+<div style={{ position: 'relative' }}>
+  <img src="foto.jpg" alt="Foto" />
+  <Watermark position="bottom-right" opacity={0.3} />
+</div>
+```
+
+### Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'center'` | `'bottom-right'` | Posición |
+| `opacity` | `number` | `0.3` | Opacidad (0-1) |
+| `size` | `number` | `48` | Tamaño del logo |
+| `rotation` | `number` | `0` | Rotación en grados |
+| `showOnHover` | `boolean` | `false` | Solo visible en hover |
+| `className` | `string` | — | Clase CSS adicional |
+
 ## Footer
 
 Footer de atribución con logo, contacto y modos de copyright.
@@ -78,7 +134,7 @@ import { Footer } from '@valcis/brand';
 | `position` | `'static' \| 'sticky' \| 'fixed'` | `'sticky'` | Posicionamiento CSS |
 | `padding` | `'compact' \| 'normal' \| 'spacious' \| { x?, y? }` | `'normal'` | Densidad |
 | `border` | `boolean \| 'top' \| 'bottom' \| 'both' \| 'none'` | `'top'` | Borde separador |
-| `accentColor` | `string` | — | Color de acento (texto, links). No afecta al logo |
+| `accentColor` | `string` | — | Color de acento (texto, links) |
 | `backgroundColor` | `string` | `'transparent'` | Fondo |
 | `textColor` | `string` | — | Color de texto override |
 | `as` | `'footer' \| 'div' \| 'section'` | `'div'` | Tag HTML |
@@ -90,10 +146,88 @@ import { Footer } from '@valcis/brand';
 
 | Modo | Resultado |
 |------|-----------|
-| `owner` | © 2025 >valcis\| |
-| `designer` | © 2025 · Diseñado por >valcis\| |
+| `owner` | © 2026 >valcis\| |
+| `designer` | © 2026 · Diseñado por >valcis\| |
 | `partner` | Powered by >valcis\| |
 
+## useTheme
+
+Hook para detectar y controlar dark/light mode.
+
+```tsx
+import { useTheme } from '@valcis/brand';
+
+function App() {
+  const { theme, isDark, toggleTheme, setTheme } = useTheme();
+
+  return (
+    <div className={isDark ? 'dark' : 'light'}>
+      <button onClick={toggleTheme}>
+        {isDark ? '☀️' : '🌙'}
+      </button>
+
+      {/* Volver a preferencia del sistema */}
+      <button onClick={() => setTheme(null)}>Auto</button>
+    </div>
+  );
+}
+```
+
+### Retorno
+
+| Propiedad | Tipo | Descripción |
+|-----------|------|-------------|
+| `theme` | `'light' \| 'dark'` | Tema actual |
+| `isDark` | `boolean` | `true` si es dark mode |
+| `isLight` | `boolean` | `true` si es light mode |
+| `setTheme` | `(theme: 'light' \| 'dark' \| null) => void` | Forzar tema (`null` = auto) |
+| `toggleTheme` | `() => void` | Alternar entre light/dark |
+
+## Paleta de colores
+
+Colores de marca exportados como constantes.
+
+```tsx
+import { colors, primary, text, cssVariables } from '@valcis/brand';
+
+// Usar en estilos
+const style = { color: primary.DEFAULT }; // '#3B82F6'
+
+// Paleta completa
+console.log(colors.primary[500]); // '#3B82F6'
+console.log(colors.text.DEFAULT); // '#1E293B'
+console.log(colors.semantic.success); // '#22C55E'
+
+// Inyectar CSS custom properties
+const GlobalStyles = () => <style>{cssVariables}</style>;
+```
+
+### Colores disponibles
+
+```ts
+colors.primary    // Azules de marca (50-900, DEFAULT, light, dark)
+colors.text       // Colores de texto (DEFAULT, dark, muted, mutedDark)
+colors.background // Fondos (light, dark, muted, mutedDark)
+colors.border     // Bordes (light, dark)
+colors.semantic   // Semánticos (success, warning, error, info)
+```
+
+### CSS Custom Properties
+
+```css
+/* Disponibles tras inyectar cssVariables */
+--valcis-primary
+--valcis-primary-light
+--valcis-primary-dark
+--valcis-text
+--valcis-text-muted
+--valcis-bg
+--valcis-bg-muted
+--valcis-border
+--valcis-logo-accent
+--valcis-logo-text
+```
+
 ## SSR
 
 ```tsx
@@ -134,6 +268,29 @@ Para uso sin React, se exportan los paths SVG crudos:
 import { V_CALLIGRAPHIC_PATH, BRACKET_LEFT_PATH, VIEWBOXES } from '@valcis/brand';
 ```
 
+## Accesibilidad
+
+El componente cumple con WCAG 2.2:
+
+- **Contraste**: Colores con ratio AA (4.5:1)
+- **Focus visible**: `:focus-visible` con outline
+- **Target size**: Links con área mínima 44x44px
+- **Semántica**: Uso de `<nav>`, `<footer>`, `aria-label`
+- **Logo decorativo**: `aria-hidden="true"` (excepto si se proporciona `ariaLabel`)
+- **Reduced motion**: Animaciones respetan `prefers-reduced-motion`
+
+## Desarrollo
+
+```bash
+npm run build        # Build de producción
+npm run dev          # Build en modo watch
+npm run lint         # Ejecutar ESLint
+npm run lint:fix     # Arreglar errores de lint
+npm run format       # Formatear con Prettier
+npm test             # Ejecutar tests (81 tests)
+npm run test:watch   # Tests en modo watch
+```
+
 ## Licencia
 
 MIT

package/dist/index.d.mts

@@ -175,4 +175,217 @@ declare const FETCH_TIMEOUT = 2000;
 declare const CACHE_DURATION: number;
 declare const CACHE_KEY = "valcis-brand-dev-info";
 
-export { ASPECT_RATIOS, A_PATH, BRACKET_LEFT_PATH, BRACKET_RIGHT_PATH, CACHE_DURATION, CACHE_KEY, CHEVRON_RIGHT_FULL_PATH, CURSOR_PATH, C_PATH, type CopyrightMode, DEFAULT_DEV_INFO, DEV_INFO_URL, type DevInfo, FETCH_TIMEOUT, FULL_GLYPH_OFFSETS, Footer, type FooterProps, I_PATH, L_PATH, Logo, type LogoProps, type LogoSize, type LogoVariant, S_PATH, VIEWBOXES, V_CALLIGRAPHIC_FULL_TRANSFORM, V_CALLIGRAPHIC_PATH, getDevInfo, useDevInfo };
+interface WatermarkProps {
+    /** Posición del watermark */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+    /** Opacidad (0-1) */
+    opacity?: number;
+    /** Tamaño del logo */
+    size?: number;
+    /** Rotación en grados */
+    rotation?: number;
+    /** Mostrar solo en hover del contenedor padre */
+    showOnHover?: boolean;
+    /** Clase CSS adicional */
+    className?: string;
+}
+/**
+ * Watermark - Marca de agua con logo valcis
+ *
+ * Útil para imágenes, documentos o secciones que requieren atribución.
+ * Se posiciona de forma absoluta, el contenedor padre debe tener position: relative.
+ */
+declare const Watermark: React.FC<WatermarkProps>;
+
+interface SpinnerProps {
+    /** Tamaño del spinner */
+    size?: number | 'sm' | 'md' | 'lg' | 'xl';
+    /** Tipo de animación */
+    animation?: 'pulse' | 'spin' | 'bounce';
+    /** Color de acento */
+    accentColor?: string;
+    /** Color del texto/letra */
+    textColor?: string;
+    /** Texto de carga (accesibilidad) */
+    label?: string;
+    /** Clase CSS adicional */
+    className?: string;
+}
+/**
+ * Spinner - Indicador de carga con logo valcis animado
+ *
+ * Usa el logo icon con diferentes animaciones.
+ * Respeta prefers-reduced-motion.
+ */
+declare const Spinner: React.FC<SpinnerProps>;
+
+type Theme = 'light' | 'dark';
+interface UseThemeResult {
+    /** Tema actual */
+    theme: Theme;
+    /** true si es dark mode */
+    isDark: boolean;
+    /** true si es light mode */
+    isLight: boolean;
+    /** Forzar tema manualmente (null = auto) */
+    setTheme: (theme: Theme | null) => void;
+    /** Alternar entre light y dark */
+    toggleTheme: () => void;
+}
+/**
+ * Hook para detectar y controlar el tema (dark/light mode)
+ *
+ * Por defecto detecta la preferencia del sistema (prefers-color-scheme).
+ * Permite override manual que persiste en localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { theme, isDark, toggleTheme } = useTheme();
+ *
+ * return (
+ *   <div className={isDark ? 'dark' : 'light'}>
+ *     <button onClick={toggleTheme}>
+ *       {isDark ? '☀️' : '🌙'}
+ *     </button>
+ *   </div>
+ * );
+ * ```
+ */
+declare function useTheme(): UseThemeResult;
+
+/**
+ * Paleta de colores de marca valcis
+ *
+ * Uso:
+ * ```ts
+ * import { colors } from '@valcis/brand';
+ * console.log(colors.primary.DEFAULT); // '#3B82F6'
+ * ```
+ */
+/** Colores primarios de marca */
+declare const primary: {
+    /** Azul principal */
+    readonly DEFAULT: "#3B82F6";
+    /** Azul claro (para dark mode) */
+    readonly light: "#60A5FA";
+    /** Azul oscuro (hover) */
+    readonly dark: "#2563EB";
+    /** Azul muy claro (backgrounds) */
+    readonly 50: "#EFF6FF";
+    readonly 100: "#DBEAFE";
+    readonly 200: "#BFDBFE";
+    readonly 300: "#93C5FD";
+    readonly 400: "#60A5FA";
+    readonly 500: "#3B82F6";
+    readonly 600: "#2563EB";
+    readonly 700: "#1D4ED8";
+    readonly 800: "#1E40AF";
+    readonly 900: "#1E3A8A";
+};
+/** Colores de texto */
+declare const text: {
+    /** Texto principal (light mode) */
+    readonly DEFAULT: "#1E293B";
+    /** Texto principal (dark mode) */
+    readonly dark: "#F1F5F9";
+    /** Texto secundario (light mode) */
+    readonly muted: "#64748B";
+    /** Texto secundario (dark mode) */
+    readonly mutedDark: "#94A3B8";
+};
+/** Colores de fondo */
+declare const background: {
+    /** Fondo claro */
+    readonly light: "#FFFFFF";
+    /** Fondo oscuro */
+    readonly dark: "#0F172A";
+    /** Fondo gris claro */
+    readonly muted: "#F8FAFC";
+    /** Fondo gris oscuro */
+    readonly mutedDark: "#1E293B";
+};
+/** Colores de borde */
+declare const border: {
+    /** Borde claro */
+    readonly light: "#E2E8F0";
+    /** Borde oscuro */
+    readonly dark: "#334155";
+};
+/** Colores semánticos */
+declare const semantic: {
+    readonly success: "#22C55E";
+    readonly warning: "#F59E0B";
+    readonly error: "#EF4444";
+    readonly info: "#3B82F6";
+};
+/** Paleta completa */
+declare const colors: {
+    readonly primary: {
+        /** Azul principal */
+        readonly DEFAULT: "#3B82F6";
+        /** Azul claro (para dark mode) */
+        readonly light: "#60A5FA";
+        /** Azul oscuro (hover) */
+        readonly dark: "#2563EB";
+        /** Azul muy claro (backgrounds) */
+        readonly 50: "#EFF6FF";
+        readonly 100: "#DBEAFE";
+        readonly 200: "#BFDBFE";
+        readonly 300: "#93C5FD";
+        readonly 400: "#60A5FA";
+        readonly 500: "#3B82F6";
+        readonly 600: "#2563EB";
+        readonly 700: "#1D4ED8";
+        readonly 800: "#1E40AF";
+        readonly 900: "#1E3A8A";
+    };
+    readonly text: {
+        /** Texto principal (light mode) */
+        readonly DEFAULT: "#1E293B";
+        /** Texto principal (dark mode) */
+        readonly dark: "#F1F5F9";
+        /** Texto secundario (light mode) */
+        readonly muted: "#64748B";
+        /** Texto secundario (dark mode) */
+        readonly mutedDark: "#94A3B8";
+    };
+    readonly background: {
+        /** Fondo claro */
+        readonly light: "#FFFFFF";
+        /** Fondo oscuro */
+        readonly dark: "#0F172A";
+        /** Fondo gris claro */
+        readonly muted: "#F8FAFC";
+        /** Fondo gris oscuro */
+        readonly mutedDark: "#1E293B";
+    };
+    readonly border: {
+        /** Borde claro */
+        readonly light: "#E2E8F0";
+        /** Borde oscuro */
+        readonly dark: "#334155";
+    };
+    readonly semantic: {
+        readonly success: "#22C55E";
+        readonly warning: "#F59E0B";
+        readonly error: "#EF4444";
+        readonly info: "#3B82F6";
+    };
+};
+/**
+ * CSS Custom Properties para usar en estilos
+ *
+ * Uso:
+ * ```css
+ * color: var(--valcis-primary);
+ * ```
+ */
+declare const cssVariables: string;
+type Colors = typeof colors;
+type Primary = typeof primary;
+type Text = typeof text;
+type Background = typeof background;
+type Border = typeof border;
+type Semantic = typeof semantic;
+
+export { ASPECT_RATIOS, A_PATH, BRACKET_LEFT_PATH, BRACKET_RIGHT_PATH, type Background, type Border, CACHE_DURATION, CACHE_KEY, CHEVRON_RIGHT_FULL_PATH, CURSOR_PATH, C_PATH, type Colors, type CopyrightMode, DEFAULT_DEV_INFO, DEV_INFO_URL, type DevInfo, FETCH_TIMEOUT, FULL_GLYPH_OFFSETS, Footer, type FooterProps, I_PATH, L_PATH, Logo, type LogoProps, type LogoSize, type LogoVariant, type Primary, S_PATH, type Semantic, Spinner, type SpinnerProps, type Text, type Theme, type UseThemeResult, VIEWBOXES, V_CALLIGRAPHIC_FULL_TRANSFORM, V_CALLIGRAPHIC_PATH, Watermark, type WatermarkProps, background, border, colors, cssVariables, getDevInfo, primary, semantic, text, useDevInfo, useTheme };

package/dist/index.d.ts

@@ -175,4 +175,217 @@ declare const FETCH_TIMEOUT = 2000;
 declare const CACHE_DURATION: number;
 declare const CACHE_KEY = "valcis-brand-dev-info";
 
-export { ASPECT_RATIOS, A_PATH, BRACKET_LEFT_PATH, BRACKET_RIGHT_PATH, CACHE_DURATION, CACHE_KEY, CHEVRON_RIGHT_FULL_PATH, CURSOR_PATH, C_PATH, type CopyrightMode, DEFAULT_DEV_INFO, DEV_INFO_URL, type DevInfo, FETCH_TIMEOUT, FULL_GLYPH_OFFSETS, Footer, type FooterProps, I_PATH, L_PATH, Logo, type LogoProps, type LogoSize, type LogoVariant, S_PATH, VIEWBOXES, V_CALLIGRAPHIC_FULL_TRANSFORM, V_CALLIGRAPHIC_PATH, getDevInfo, useDevInfo };
+interface WatermarkProps {
+    /** Posición del watermark */
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+    /** Opacidad (0-1) */
+    opacity?: number;
+    /** Tamaño del logo */
+    size?: number;
+    /** Rotación en grados */
+    rotation?: number;
+    /** Mostrar solo en hover del contenedor padre */
+    showOnHover?: boolean;
+    /** Clase CSS adicional */
+    className?: string;
+}
+/**
+ * Watermark - Marca de agua con logo valcis
+ *
+ * Útil para imágenes, documentos o secciones que requieren atribución.
+ * Se posiciona de forma absoluta, el contenedor padre debe tener position: relative.
+ */
+declare const Watermark: React.FC<WatermarkProps>;
+
+interface SpinnerProps {
+    /** Tamaño del spinner */
+    size?: number | 'sm' | 'md' | 'lg' | 'xl';
+    /** Tipo de animación */
+    animation?: 'pulse' | 'spin' | 'bounce';
+    /** Color de acento */
+    accentColor?: string;
+    /** Color del texto/letra */
+    textColor?: string;
+    /** Texto de carga (accesibilidad) */
+    label?: string;
+    /** Clase CSS adicional */
+    className?: string;
+}
+/**
+ * Spinner - Indicador de carga con logo valcis animado
+ *
+ * Usa el logo icon con diferentes animaciones.
+ * Respeta prefers-reduced-motion.
+ */
+declare const Spinner: React.FC<SpinnerProps>;
+
+type Theme = 'light' | 'dark';
+interface UseThemeResult {
+    /** Tema actual */
+    theme: Theme;
+    /** true si es dark mode */
+    isDark: boolean;
+    /** true si es light mode */
+    isLight: boolean;
+    /** Forzar tema manualmente (null = auto) */
+    setTheme: (theme: Theme | null) => void;
+    /** Alternar entre light y dark */
+    toggleTheme: () => void;
+}
+/**
+ * Hook para detectar y controlar el tema (dark/light mode)
+ *
+ * Por defecto detecta la preferencia del sistema (prefers-color-scheme).
+ * Permite override manual que persiste en localStorage.
+ *
+ * @example
+ * ```tsx
+ * const { theme, isDark, toggleTheme } = useTheme();
+ *
+ * return (
+ *   <div className={isDark ? 'dark' : 'light'}>
+ *     <button onClick={toggleTheme}>
+ *       {isDark ? '☀️' : '🌙'}
+ *     </button>
+ *   </div>
+ * );
+ * ```
+ */
+declare function useTheme(): UseThemeResult;
+
+/**
+ * Paleta de colores de marca valcis
+ *
+ * Uso:
+ * ```ts
+ * import { colors } from '@valcis/brand';
+ * console.log(colors.primary.DEFAULT); // '#3B82F6'
+ * ```
+ */
+/** Colores primarios de marca */
+declare const primary: {
+    /** Azul principal */
+    readonly DEFAULT: "#3B82F6";
+    /** Azul claro (para dark mode) */
+    readonly light: "#60A5FA";
+    /** Azul oscuro (hover) */
+    readonly dark: "#2563EB";
+    /** Azul muy claro (backgrounds) */
+    readonly 50: "#EFF6FF";
+    readonly 100: "#DBEAFE";
+    readonly 200: "#BFDBFE";
+    readonly 300: "#93C5FD";
+    readonly 400: "#60A5FA";
+    readonly 500: "#3B82F6";
+    readonly 600: "#2563EB";
+    readonly 700: "#1D4ED8";
+    readonly 800: "#1E40AF";
+    readonly 900: "#1E3A8A";
+};
+/** Colores de texto */
+declare const text: {
+    /** Texto principal (light mode) */
+    readonly DEFAULT: "#1E293B";
+    /** Texto principal (dark mode) */
+    readonly dark: "#F1F5F9";
+    /** Texto secundario (light mode) */
+    readonly muted: "#64748B";
+    /** Texto secundario (dark mode) */
+    readonly mutedDark: "#94A3B8";
+};
+/** Colores de fondo */
+declare const background: {
+    /** Fondo claro */
+    readonly light: "#FFFFFF";
+    /** Fondo oscuro */
+    readonly dark: "#0F172A";
+    /** Fondo gris claro */
+    readonly muted: "#F8FAFC";
+    /** Fondo gris oscuro */
+    readonly mutedDark: "#1E293B";
+};
+/** Colores de borde */
+declare const border: {
+    /** Borde claro */
+    readonly light: "#E2E8F0";
+    /** Borde oscuro */
+    readonly dark: "#334155";
+};
+/** Colores semánticos */
+declare const semantic: {
+    readonly success: "#22C55E";
+    readonly warning: "#F59E0B";
+    readonly error: "#EF4444";
+    readonly info: "#3B82F6";
+};
+/** Paleta completa */
+declare const colors: {
+    readonly primary: {
+        /** Azul principal */
+        readonly DEFAULT: "#3B82F6";
+        /** Azul claro (para dark mode) */
+        readonly light: "#60A5FA";
+        /** Azul oscuro (hover) */
+        readonly dark: "#2563EB";
+        /** Azul muy claro (backgrounds) */
+        readonly 50: "#EFF6FF";
+        readonly 100: "#DBEAFE";
+        readonly 200: "#BFDBFE";
+        readonly 300: "#93C5FD";
+        readonly 400: "#60A5FA";
+        readonly 500: "#3B82F6";
+        readonly 600: "#2563EB";
+        readonly 700: "#1D4ED8";
+        readonly 800: "#1E40AF";
+        readonly 900: "#1E3A8A";
+    };
+    readonly text: {
+        /** Texto principal (light mode) */
+        readonly DEFAULT: "#1E293B";
+        /** Texto principal (dark mode) */
+        readonly dark: "#F1F5F9";
+        /** Texto secundario (light mode) */
+        readonly muted: "#64748B";
+        /** Texto secundario (dark mode) */
+        readonly mutedDark: "#94A3B8";
+    };
+    readonly background: {
+        /** Fondo claro */
+        readonly light: "#FFFFFF";
+        /** Fondo oscuro */
+        readonly dark: "#0F172A";
+        /** Fondo gris claro */
+        readonly muted: "#F8FAFC";
+        /** Fondo gris oscuro */
+        readonly mutedDark: "#1E293B";
+    };
+    readonly border: {
+        /** Borde claro */
+        readonly light: "#E2E8F0";
+        /** Borde oscuro */
+        readonly dark: "#334155";
+    };
+    readonly semantic: {
+        readonly success: "#22C55E";
+        readonly warning: "#F59E0B";
+        readonly error: "#EF4444";
+        readonly info: "#3B82F6";
+    };
+};
+/**
+ * CSS Custom Properties para usar en estilos
+ *
+ * Uso:
+ * ```css
+ * color: var(--valcis-primary);
+ * ```
+ */
+declare const cssVariables: string;
+type Colors = typeof colors;
+type Primary = typeof primary;
+type Text = typeof text;
+type Background = typeof background;
+type Border = typeof border;
+type Semantic = typeof semantic;
+
+export { ASPECT_RATIOS, A_PATH, BRACKET_LEFT_PATH, BRACKET_RIGHT_PATH, type Background, type Border, CACHE_DURATION, CACHE_KEY, CHEVRON_RIGHT_FULL_PATH, CURSOR_PATH, C_PATH, type Colors, type CopyrightMode, DEFAULT_DEV_INFO, DEV_INFO_URL, type DevInfo, FETCH_TIMEOUT, FULL_GLYPH_OFFSETS, Footer, type FooterProps, I_PATH, L_PATH, Logo, type LogoProps, type LogoSize, type LogoVariant, type Primary, S_PATH, type Semantic, Spinner, type SpinnerProps, type Text, type Theme, type UseThemeResult, VIEWBOXES, V_CALLIGRAPHIC_FULL_TRANSFORM, V_CALLIGRAPHIC_PATH, Watermark, type WatermarkProps, background, border, colors, cssVariables, getDevInfo, primary, semantic, text, useDevInfo, useTheme };