@steveencues/starter-react-ui 1.0.1 → 1.0.2

package/dist/libs/domain/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './translation.constants';
 export * from './encrypted-preference.constanst';
 export * from './theme-css-variable.const';
+export * from './theme-font-weight.const';

package/dist/libs/domain/constants/theme-font-weight.const.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description Defines the available typography weights.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export declare const THEME_FONT_WEIGHT: {
+    readonly THIN: 100;
+    readonly EXTRA_LIGHT: 200;
+    readonly LIGHT: 300;
+    readonly REGULAR: 400;
+    readonly MEDIUM: 500;
+    readonly SEMI_BOLD: 600;
+    readonly BOLD: 700;
+    readonly EXTRA_BOLD: 800;
+    readonly BLACK: 900;
+};

package/dist/libs/domain/interface/index.d.ts

@@ -1,2 +1,4 @@
 export * from './translation.interface';
-export * from './theme.interface';
+export * from './manifest';
+export * from './theme';
+export * from './manifest';

package/dist/libs/domain/interface/manifest/index.d.ts

@@ -0,0 +1 @@
+export * from './theme-manifest.interface';

package/dist/libs/domain/interface/manifest/theme-manifest.interface.d.ts

@@ -0,0 +1,23 @@
+import { ThemeCategory, ThemeColorScheme, ThemeName } from '../..';
+/**
+ * @description Define las propiedades basicas de un manifiesto de tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeManifest {
+    readonly id: ThemeName;
+    readonly name: string;
+    readonly description: string;
+    readonly version: string;
+    readonly author: string;
+    readonly category: ThemeCategory;
+    readonly colorScheme: ThemeColorScheme;
+    readonly tags: readonly string[];
+    readonly preview?: string;
+    readonly homepage?: string;
+    readonly license?: string;
+    readonly minLibraryVersion?: string;
+    readonly supportedFeatures: readonly string[];
+    readonly isDefault: boolean;
+    readonly isExperimental: boolean;
+}

package/dist/libs/domain/interface/theme/accessibility/index.d.ts

@@ -0,0 +1 @@
+export * from './theme-accessibility.interface';

package/dist/libs/domain/interface/theme/accessibility/theme-accessibility.interface.d.ts

@@ -0,0 +1,15 @@
+import { ThemeMotionPreference } from '../../..';
+/**
+ * @description Define las propiedades de accesibilidad.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeAccessibility {
+    readonly reducedMotion: ThemeMotionPreference;
+    readonly highContrast: boolean;
+    readonly focusRingWidth: string;
+    readonly focusRingOffset: string;
+    readonly focusRingStyle: string;
+    readonly minimumTargetSize: string;
+    readonly enforceReadableText: boolean;
+}

package/dist/libs/domain/interface/theme/colors/index.d.ts

@@ -0,0 +1,8 @@
+export * from './theme-border-colors.interface';
+export * from './theme-brand-colors.interface';
+export * from './theme-color-palette.interface';
+export * from './theme-data-colors.interface';
+export * from './theme-overlay-colors.interface';
+export * from './theme-state-colors.interface';
+export * from './theme-surface-colors.interface';
+export * from './theme-text-colors.interface';

package/dist/libs/domain/interface/theme/colors/theme-border-colors.interface.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @description Define los colores de los bordes e indicadores.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeBorderColors {
+    readonly default: string;
+    readonly subtle: string;
+    readonly strong: string;
+    readonly focus: string;
+    readonly hover: string;
+    readonly active: string;
+    readonly disabled: string;
+    readonly divider: string;
+    readonly input: string;
+    readonly error: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-brand-colors.interface.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @description Define los colores de identidad visual.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeBrandColors {
+    readonly primary: string;
+    readonly primaryHover: string;
+    readonly primaryActive: string;
+    readonly primaryDisabled: string;
+    readonly primaryContrast: string;
+    readonly primarySubtle: string;
+    readonly primaryStrong: string;
+    readonly secondary: string;
+    readonly secondaryHover: string;
+    readonly secondaryActive: string;
+    readonly secondaryContrast: string;
+    readonly secondarySubtle: string;
+    readonly accent: string;
+    readonly accentHover: string;
+    readonly accentActive: string;
+    readonly accentContrast: string;
+    readonly accentSubtle: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-color-palette.interface.d.ts

@@ -0,0 +1,30 @@
+import { ThemeColorScale } from '../../..';
+/**
+ * @description Define una coleccion de escalas cromaticas.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeColorPalette {
+    readonly slate: ThemeColorScale;
+    readonly gray: ThemeColorScale;
+    readonly zinc: ThemeColorScale;
+    readonly neutral: ThemeColorScale;
+    readonly stone: ThemeColorScale;
+    readonly red: ThemeColorScale;
+    readonly orange: ThemeColorScale;
+    readonly amber: ThemeColorScale;
+    readonly yellow: ThemeColorScale;
+    readonly lime: ThemeColorScale;
+    readonly green: ThemeColorScale;
+    readonly emerald: ThemeColorScale;
+    readonly teal: ThemeColorScale;
+    readonly cyan: ThemeColorScale;
+    readonly sky: ThemeColorScale;
+    readonly blue: ThemeColorScale;
+    readonly indigo: ThemeColorScale;
+    readonly violet: ThemeColorScale;
+    readonly purple: ThemeColorScale;
+    readonly fuchsia: ThemeColorScale;
+    readonly pink: ThemeColorScale;
+    readonly rose: ThemeColorScale;
+}

package/dist/libs/domain/interface/theme/colors/theme-data-colors.interface.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description Define los colores utilizados en graficos y visualizacion de datos.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeDataColors {
+    readonly series: readonly string[];
+    readonly positive: string;
+    readonly negative: string;
+    readonly neutral: string;
+    readonly grid: string;
+    readonly axis: string;
+    readonly tooltipBackground: string;
+    readonly tooltipText: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-overlay-colors.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description Define los colores utilizados en superposiciones.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeOverlayColors {
+    readonly scrim: string;
+    readonly modal: string;
+    readonly dropdown: string;
+    readonly tooltip: string;
+    readonly navigation: string;
+    readonly backdrop: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-state-colors.interface.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @description Define los colores de los estados semanticos.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeStateColors {
+    readonly success: string;
+    readonly successBackground: string;
+    readonly successBorder: string;
+    readonly successText: string;
+    readonly warning: string;
+    readonly warningBackground: string;
+    readonly warningBorder: string;
+    readonly warningText: string;
+    readonly error: string;
+    readonly errorBackground: string;
+    readonly errorBorder: string;
+    readonly errorText: string;
+    readonly info: string;
+    readonly infoBackground: string;
+    readonly infoBorder: string;
+    readonly infoText: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-surface-colors.interface.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description Define los colores de las superficies.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeSurfaceColors {
+    readonly background: string;
+    readonly backgroundSecondary: string;
+    readonly backgroundTertiary: string;
+    readonly surface: string;
+    readonly surfaceSecondary: string;
+    readonly surfaceElevated: string;
+    readonly surfaceHover: string;
+    readonly surfaceActive: string;
+    readonly surfaceDisabled: string;
+    readonly surfaceInverse: string;
+    readonly surfaceOverlay: string;
+    readonly surfaceTransparent: string;
+}

package/dist/libs/domain/interface/theme/colors/theme-text-colors.interface.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description Define los colores del contenido textual.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeTextColors {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly muted: string;
+    readonly disabled: string;
+    readonly inverse: string;
+    readonly link: string;
+    readonly linkHover: string;
+    readonly selection: string;
+    readonly placeholder: string;
+    readonly onPrimary: string;
+    readonly onSecondary: string;
+    readonly onAccent: string;
+}

package/dist/libs/domain/interface/theme/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './theme-button.interface';
+export * from './theme-card.interface';
+export * from './theme-components.interface';
+export * from './theme-input.interface';
+export * from './theme-interactive-colors.interface';
+export * from './theme-modal.interface';

package/dist/libs/domain/interface/theme/components/theme-button.interface.d.ts

@@ -0,0 +1,18 @@
+import { ThemeFontWeight, ThemeInteractiveColors } from '../../..';
+/**
+ * @description Define los tokens de un boton.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeButton {
+    readonly primary: ThemeInteractiveColors;
+    readonly secondary: ThemeInteractiveColors;
+    readonly outline: ThemeInteractiveColors;
+    readonly ghost: ThemeInteractiveColors;
+    readonly danger: ThemeInteractiveColors;
+    readonly radius: string;
+    readonly fontWeight: ThemeFontWeight;
+    readonly height: string;
+    readonly paddingInline: string;
+    readonly transition: string;
+}

package/dist/libs/domain/interface/theme/components/theme-card.interface.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description Define los tokens de una tarjeta.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeCard {
+    readonly background: string;
+    readonly foreground: string;
+    readonly border: string;
+    readonly radius: string;
+    readonly shadow: string;
+    readonly padding: string;
+    readonly hoverTransform: string;
+    readonly transition: string;
+}

package/dist/libs/domain/interface/theme/components/theme-components.interface.d.ts

@@ -0,0 +1,12 @@
+import { ThemeButton, ThemeCard, ThemeInput, ThemeModal } from '../../..';
+/**
+ * @description Define las propiedades visuales de los componentes.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeComponents {
+    readonly button: ThemeButton;
+    readonly input: ThemeInput;
+    readonly card: ThemeCard;
+    readonly modal: ThemeModal;
+}

package/dist/libs/domain/interface/theme/components/theme-input.interface.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description Define los tokens de un campo de entrada.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeInput {
+    readonly background: string;
+    readonly foreground: string;
+    readonly placeholder: string;
+    readonly border: string;
+    readonly borderHover: string;
+    readonly borderFocus: string;
+    readonly borderError: string;
+    readonly radius: string;
+    readonly height: string;
+    readonly paddingInline: string;
+    readonly shadowFocus: string;
+}

package/dist/libs/domain/interface/theme/components/theme-interactive-colors.interface.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description Define los colores de los componentes interactivos.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeInteractiveColors {
+    readonly background: string;
+    readonly backgroundHover: string;
+    readonly backgroundActive: string;
+    readonly backgroundDisabled: string;
+    readonly foreground: string;
+    readonly foregroundHover: string;
+    readonly border: string;
+    readonly borderHover: string;
+    readonly borderFocus: string;
+}

package/dist/libs/domain/interface/theme/components/theme-modal.interface.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @description Define los tokens de un modal.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeModal {
+    readonly background: string;
+    readonly foreground: string;
+    readonly border: string;
+    readonly radius: string;
+    readonly shadow: string;
+    readonly backdrop: string;
+    readonly maxWidth: string;
+}

package/dist/libs/domain/interface/theme/core/app-theme.interface.d.ts

@@ -0,0 +1,11 @@
+import { Theme, ThemeManifest, ThemeName } from '../../..';
+/**
+ * @description Define una configuracion visual completa de un tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface AppTheme {
+    readonly manifest: ThemeManifest;
+    readonly name: ThemeName;
+    readonly themes: Theme;
+}

package/dist/libs/domain/interface/theme/core/index.d.ts

@@ -0,0 +1,2 @@
+export * from './app-theme.interface';
+export * from './theme.interface';

package/dist/libs/domain/interface/theme/core/theme.interface.d.ts

@@ -0,0 +1,26 @@
+import { ThemeBrandColors, ThemeBorderColors, ThemeColorPalette, ThemeDataColors, ThemeOverlayColors, ThemeStateColors, ThemeSurfaceColors, ThemeTextColors, ThemeAccessibility, ThemeComponents, ThemeAnimations, ThemeEffects, ThemeGradients, ThemeTransitions, ThemeLayout, ThemeShadowColors, ThemeShadows, ThemeTypography } from '../../..';
+/**
+ * @description Define la configuracion completa de tokens visuales.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface Theme {
+    readonly palette: ThemeColorPalette;
+    readonly surface: ThemeSurfaceColors;
+    readonly text: ThemeTextColors;
+    readonly brand: ThemeBrandColors;
+    readonly state: ThemeStateColors;
+    readonly border: ThemeBorderColors;
+    readonly overlay: ThemeOverlayColors;
+    readonly data: ThemeDataColors;
+    readonly typography: ThemeTypography;
+    readonly gradients: ThemeGradients;
+    readonly shadows: ThemeShadows;
+    readonly shadowColors: ThemeShadowColors;
+    readonly effects: ThemeEffects;
+    readonly transitions: ThemeTransitions;
+    readonly animations: ThemeAnimations;
+    readonly layout: ThemeLayout;
+    readonly components: ThemeComponents;
+    readonly accessibility: ThemeAccessibility;
+}

package/dist/libs/domain/interface/theme/effects/index.d.ts

@@ -0,0 +1,7 @@
+export * from './theme-animation.interface';
+export * from './theme-animations.interface';
+export * from './theme-effects.interface';
+export * from './theme-gradient-stop.interface';
+export * from './theme-gradient.interface';
+export * from './theme-gradients.interface';
+export * from './theme-transitions.interface';

package/dist/libs/domain/interface/theme/effects/theme-animation.interface.d.ts

@@ -0,0 +1,17 @@
+import { ThemeDuration, ThemeEasing } from '../../..';
+/**
+ * @description Define la configuracion de una animacion.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeAnimation {
+    readonly name: string;
+    readonly duration: ThemeDuration;
+    readonly delay: ThemeDuration;
+    readonly easing: ThemeEasing;
+    readonly iterationCount: number | "infinite";
+    readonly direction: "normal" | "reverse" | "alternate" | "alternate-reverse";
+    readonly fillMode: "none" | "forwards" | "backwards" | "both";
+    readonly playState: "running" | "paused";
+    readonly reducedMotionAlternative?: string;
+}

package/dist/libs/domain/interface/theme/effects/theme-animations.interface.d.ts

@@ -0,0 +1,20 @@
+import { ThemeAnimation } from '../../..';
+/**
+ * @description Define las animaciones disponibles.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeAnimations {
+    readonly fadeIn: ThemeAnimation;
+    readonly fadeOut: ThemeAnimation;
+    readonly slideIn: ThemeAnimation;
+    readonly slideOut: ThemeAnimation;
+    readonly scaleIn: ThemeAnimation;
+    readonly scaleOut: ThemeAnimation;
+    readonly pulse: ThemeAnimation;
+    readonly shimmer: ThemeAnimation;
+    readonly gradient: ThemeAnimation;
+    readonly glow: ThemeAnimation;
+    readonly float: ThemeAnimation;
+    readonly spin: ThemeAnimation;
+}

package/dist/libs/domain/interface/theme/effects/theme-effects.interface.d.ts

@@ -0,0 +1,22 @@
+import { ThemeOpacity } from '../../..';
+/**
+ * @description Define los efectos visuales del tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeEffects {
+    readonly overlay: string;
+    readonly backdrop: string;
+    readonly blur: string;
+    readonly blurStrong: string;
+    readonly glassBackground: string;
+    readonly glassBorder: string;
+    readonly glassShadow: string;
+    readonly opacityDisabled: ThemeOpacity;
+    readonly opacityHover: ThemeOpacity;
+    readonly opacityOverlay: ThemeOpacity;
+    readonly saturation: string;
+    readonly contrast: string;
+    readonly brightness: string;
+    readonly grayscale: string;
+}

package/dist/libs/domain/interface/theme/effects/theme-gradient-stop.interface.d.ts

@@ -0,0 +1,11 @@
+import { ThemeOpacity } from '../../..';
+/**
+ * @description Define una parada de color de un gradiente.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeGradientStop {
+    readonly color: string;
+    readonly position?: string;
+    readonly opacity?: ThemeOpacity;
+}

package/dist/libs/domain/interface/theme/effects/theme-gradient.interface.d.ts

@@ -0,0 +1,16 @@
+import { ThemeDuration, ThemeGradientDirection, ThemeGradientStop, ThemeGradientType } from '../../..';
+/**
+ * @description Define un gradiente reutilizable.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeGradient {
+    readonly type: ThemeGradientType;
+    readonly direction?: ThemeGradientDirection;
+    readonly angle?: string;
+    readonly stops: readonly ThemeGradientStop[];
+    readonly css: string;
+    readonly animated: boolean;
+    readonly animationName?: string;
+    readonly animationDuration?: ThemeDuration;
+}

package/dist/libs/domain/interface/theme/effects/theme-gradients.interface.d.ts

@@ -0,0 +1,17 @@
+import { ThemeGradient } from '../../..';
+/**
+ * @description Define los gradientes disponibles del tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeGradients {
+    readonly primary: ThemeGradient;
+    readonly secondary: ThemeGradient;
+    readonly accent: ThemeGradient;
+    readonly background: ThemeGradient;
+    readonly surface: ThemeGradient;
+    readonly sunset: ThemeGradient;
+    readonly ocean: ThemeGradient;
+    readonly aurora: ThemeGradient;
+    readonly rainbow: ThemeGradient;
+}

package/dist/libs/domain/interface/theme/effects/theme-transitions.interface.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description Define las duraciones y curvas de las transiciones.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeTransitions {
+    readonly instant: string;
+    readonly fast: string;
+    readonly normal: string;
+    readonly slow: string;
+    readonly easing: {
+        readonly standard: string;
+        readonly emphasized: string;
+        readonly decelerate: string;
+        readonly accelerate: string;
+        readonly spring: string;
+    };
+}

package/dist/libs/domain/interface/theme/index.d.ts

@@ -0,0 +1,8 @@
+export * from './accessibility';
+export * from './colors';
+export * from './components';
+export * from './core';
+export * from './effects';
+export * from './layout';
+export * from './preferences';
+export * from './typography';

package/dist/libs/domain/interface/theme/layout/index.d.ts

@@ -0,0 +1,8 @@
+export * from './theme-breakpoints.interface';
+export * from './theme-dimensions.interface';
+export * from './theme-layout.interface';
+export * from './theme-radii.interface';
+export * from './theme-shadow-colors.interface';
+export * from './theme-shadows.interface';
+export * from './theme-spacing.interface';
+export * from './theme-z-index.interface';

package/dist/libs/domain/interface/theme/layout/theme-breakpoints.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description Define los puntos de parada para el diseno adaptable.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeBreakpoints {
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+}

package/dist/libs/domain/interface/theme/layout/theme-dimensions.interface.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description Define las dimensiones principales del diseno.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeDimensions {
+    readonly headerHeight: string;
+    readonly sidebarWidth: string;
+    readonly sidebarCollapsedWidth: string;
+    readonly contentMaxWidth: string;
+    readonly modalMaxWidth: string;
+    readonly inputHeight: string;
+    readonly buttonHeight: string;
+    readonly iconSize: string;
+}

package/dist/libs/domain/interface/theme/layout/theme-layout.interface.d.ts

@@ -0,0 +1,14 @@
+import { ThemeDensity, ThemeBreakpoints, ThemeDimensions, ThemeRadii, ThemeSpacing, ThemeZIndex } from '../../..';
+/**
+ * @description Define la configuracion de layout del tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeLayout {
+    readonly density: ThemeDensity;
+    readonly spacing: ThemeSpacing;
+    readonly radii: ThemeRadii;
+    readonly breakpoints: ThemeBreakpoints;
+    readonly dimensions: ThemeDimensions;
+    readonly zIndex: ThemeZIndex;
+}

package/dist/libs/domain/interface/theme/layout/theme-radii.interface.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @description Define los radios de borde.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeRadii {
+    readonly none: string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly "3xl": string;
+    readonly full: string;
+}

package/dist/libs/domain/interface/theme/layout/theme-shadow-colors.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description Define la configuracion de sombras del tema.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeShadowColors {
+    readonly color: string;
+    readonly subtle: string;
+    readonly small: string;
+    readonly medium: string;
+    readonly large: string;
+    readonly glow: string;
+}