@steveencues/starter-react-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,37 @@
+import { ThemeFontFamily, ThemeFontSizes, ThemeFontWeights, ThemeTextStyle } from '../../..';
+/**
+ * @description Define los estilos para encabezados, cuerpo, etiquetas y botones.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export interface ThemeTypography {
+    readonly fontFamily: ThemeFontFamily;
+    readonly fontSize: ThemeFontSizes;
+    readonly fontWeight: ThemeFontWeights;
+    readonly lineHeight: Readonly<Record<string, string | number>>;
+    readonly letterSpacing: Readonly<Record<string, string>>;
+    readonly heading: {
+        readonly h1: ThemeTextStyle;
+        readonly h2: ThemeTextStyle;
+        readonly h3: ThemeTextStyle;
+        readonly h4: ThemeTextStyle;
+        readonly h5: ThemeTextStyle;
+        readonly h6: ThemeTextStyle;
+    };
+    readonly body: {
+        readonly primary: ThemeTextStyle;
+        readonly secondary: ThemeTextStyle;
+        readonly muted: ThemeTextStyle;
+        readonly small: ThemeTextStyle;
+    };
+    readonly label: {
+        readonly primary: ThemeTextStyle;
+        readonly secondary: ThemeTextStyle;
+        readonly muted: ThemeTextStyle;
+    };
+    readonly button: {
+        readonly primary: ThemeTextStyle;
+        readonly secondary: ThemeTextStyle;
+    };
+    readonly code: ThemeTextStyle;
+}

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

@@ -0,0 +1,56 @@
+import { TranslationCatalog, TranslationParams } from '../..';
+import { ReactNode } from 'react';
+/**
+ * @description Estado publico del contexto de traducciones.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface ILanguageContextValue {
+    readonly language: string;
+    readonly languages: readonly string[];
+    readonly setLanguage: (language: string) => void;
+    readonly t: (key: string, params?: TranslationParams) => string;
+}
+/**
+ * @description Propiedades del proveedor de traducciones.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface ITranslateProviderProps {
+    readonly translations: TranslationCatalog;
+    readonly initialLanguage: string;
+    readonly fallbackLanguage?: string;
+    readonly children: ReactNode;
+    readonly languageEncryptionKey: string;
+}
+/**
+ * @description Defines the configuration required to manage language preferences.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface LanguagePreferenceConfiguration {
+    readonly translations: ITranslateProviderProps["translations"];
+    readonly initialLanguage: ITranslateProviderProps["initialLanguage"];
+    readonly fallbackLanguage: string;
+    readonly languageEncryptionKey: ITranslateProviderProps["languageEncryptionKey"];
+    readonly languages: readonly string[];
+}
+/**
+ * @description Represents the current language preference state and configuration.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface LanguagePreferenceState extends LanguagePreferenceConfiguration {
+    readonly selectedLanguage: string;
+    readonly isLoaded: boolean;
+}
+/**
+ * @description Defines the result returned by the language preference hook.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface LanguagePreferenceResult {
+    readonly language: string;
+    readonly isLoaded: boolean;
+    readonly setLanguage: (language: string) => void;
+}

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

@@ -0,0 +1,2 @@
+export * from './translation.types';
+export * from './theme';

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

@@ -0,0 +1,20 @@
+export * from './theme-animation.type';
+export * from './theme-border.type';
+export * from './theme-brand.type';
+export * from './theme-category.type';
+export * from './theme-css.type';
+export * from './theme-effect.type';
+export * from './theme-font.type';
+export * from './theme-gradient.type';
+export * from './theme-layout.type';
+export * from './theme-preference.type';
+export * from './theme-shadow.type';
+export * from './theme-state.type';
+export * from './theme-surface.type';
+export * from './theme-text-style.type';
+export * from './theme-text.type';
+export * from './theme-typography.type';
+export * from './theme-value.type';
+export * from './theme-name.types';
+export * from './theme-color-scale.type';
+export * from './theme-font-weights.type';

package/dist/libs/domain/types/theme/theme-animation.type.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description Defines the supported animation styles.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeAnimationStyle = "fade" | "slide" | "scale" | "bounce" | "pulse" | "shimmer" | "gradient" | "glow" | "spin" | "float" | "none";
+/**
+ * @description Defines the available easing curves.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeEasing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "spring";
+/**
+ * @description Defines the motion strategies supported by the system.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeMotionPreference = "full" | "reduced" | "system";

package/dist/libs/domain/types/theme/theme-border.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for border styles and colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type BorderVariables = Pick<ThemeCssVariables, "--rui-border-default" | "--rui-border-subtle" | "--rui-border-strong" | "--rui-border-focus" | "--rui-border-hover" | "--rui-border-active" | "--rui-border-disabled">;

package/dist/libs/domain/types/theme/theme-brand.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for brand colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type BrandVariables = Pick<ThemeCssVariables, "--rui-brand-primary" | "--rui-brand-primary-hover" | "--rui-brand-primary-active" | "--rui-brand-primary-contrast" | "--rui-brand-secondary" | "--rui-brand-secondary-hover" | "--rui-brand-secondary-active" | "--rui-brand-secondary-contrast" | "--rui-brand-accent" | "--rui-brand-accent-hover" | "--rui-brand-accent-contrast">;

package/dist/libs/domain/types/theme/theme-category.type.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description Defines the available categories for classifying a theme.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeCategory = "light" | "dark" | "colorful" | "brand" | "minimal" | "accessibility" | "custom";
+/**
+ * @description Defines the luminosity scheme of a theme.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeColorScheme = "light" | "dark" | "auto";

package/dist/libs/domain/types/theme/theme-color-scale.type.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Define una escala de colores con tonos progresivos.
+ * @author Steveen Cues
+ * @version 2.1.0
+ */
+export type ThemeColorScale = Readonly<Record<"50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950", string>>;

package/dist/libs/domain/types/theme/theme-css.type.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+/**
+ * @description Defines custom CSS variables supported by the library.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type ThemeCssVariables = CSSProperties & {
+    [property: `--rui-${string}`]: string;
+};
+/**
+ * @description Represents a CSS value compatible with the theme system.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeCssValue = string;

package/dist/libs/domain/types/theme/theme-effect.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for visual effects.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type EffectVariables = Pick<ThemeCssVariables, "--rui-effects-overlay" | "--rui-effects-backdrop" | "--rui-effects-blur" | "--rui-effects-blur-strong" | "--rui-effects-glass-background" | "--rui-effects-glass-border">;

package/dist/libs/domain/types/theme/theme-font-weights.type.d.ts

@@ -0,0 +1,7 @@
+import { THEME_FONT_WEIGHT } from '../..';
+/**
+ * @description Define los valores numericos permitidos para los pesos tipograficos.
+ * @author Steveen Cues
+ * @version 2.2.0
+ */
+export type ThemeFontWeightValue = (typeof THEME_FONT_WEIGHT)[keyof typeof THEME_FONT_WEIGHT];

package/dist/libs/domain/types/theme/theme-font.type.d.ts

@@ -0,0 +1,19 @@
+import { THEME_FONT_WEIGHT } from '../..';
+/**
+ * @description Defines the available typography sizes.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeFontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
+/**
+ * @description Defines the available typography weights.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeFontWeight = (typeof THEME_FONT_WEIGHT)[keyof typeof THEME_FONT_WEIGHT];
+/**
+ * @description Defines conventional typography styles.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeFontStyle = "normal" | "italic" | "oblique";

package/dist/libs/domain/types/theme/theme-gradient.type.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description Defines the supported gradient types.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeGradientType = "linear" | "radial" | "conic";
+/**
+ * @description Defines the permitted gradient directions.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeGradientDirection = "to-top" | "to-right" | "to-bottom" | "to-left" | "to-top-right" | "to-top-left" | "to-bottom-right" | "to-bottom-left";

package/dist/libs/domain/types/theme/theme-layout.type.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @description Defines the elevation levels of surfaces.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeElevation = "none" | "low" | "medium" | "high" | "highest";
+/**
+ * @description Defines the available visual density variants.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeDensity = "compact" | "comfortable" | "spacious";
+/**
+ * @description Defines the available border radius levels.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeRadius = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+/**
+ * @description Defines the supported device breakpoint sizes.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

package/dist/libs/domain/types/theme/theme-name.types.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @description Identificadores de los temas disponibles.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type ThemeName = "light" | "dark" | "semi-dark" | "system" | "auto" | "magenta" | "blue" | "indigo" | "purple" | "violet" | "pink" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "rose" | "ocean" | "midnight" | "sunset" | "nord" | "dracula" | "monokai" | "github" | "solarized-light" | "solarized-dark" | "high-contrast" | "high-contrast-light" | "high-contrast-dark";

package/dist/libs/domain/types/theme/theme-preference.type.d.ts

@@ -0,0 +1,8 @@
+import { ThemePreferenceState } from '../..';
+import { Dispatch, SetStateAction } from 'react';
+/**
+ * @description Defines the React state dispatcher for theme preference updates.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type SetThemePreferenceState = Dispatch<SetStateAction<ThemePreferenceState>>;

package/dist/libs/domain/types/theme/theme-shadow.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for shadows.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type ShadowVariables = Pick<ThemeCssVariables, "--rui-shadow-color" | "--rui-shadow-subtle" | "--rui-shadow-small" | "--rui-shadow-medium" | "--rui-shadow-large" | "--rui-shadow-glow">;

package/dist/libs/domain/types/theme/theme-state.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for status colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type StateVariables = Pick<ThemeCssVariables, "--rui-state-success" | "--rui-state-success-background" | "--rui-state-warning" | "--rui-state-warning-background" | "--rui-state-error" | "--rui-state-error-background" | "--rui-state-info" | "--rui-state-info-background">;

package/dist/libs/domain/types/theme/theme-surface.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for surface colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type SurfaceVariables = Pick<ThemeCssVariables, "--rui-surface-background" | "--rui-surface-surface" | "--rui-surface-surface-elevated" | "--rui-surface-surface-hover" | "--rui-surface-surface-active" | "--rui-surface-surface-disabled">;

package/dist/libs/domain/types/theme/theme-text-style.type.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description Defines the available text alignment variants.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeTextAlignment = "left" | "center" | "right" | "justify" | "start" | "end";
+/**
+ * @description Defines the supported text transformation options.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeTextTransform = "none" | "capitalize" | "uppercase" | "lowercase";

package/dist/libs/domain/types/theme/theme-text.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for text colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type TextVariables = Pick<ThemeCssVariables, "--rui-text-primary" | "--rui-text-secondary" | "--rui-text-muted" | "--rui-text-disabled" | "--rui-text-inverse" | "--rui-text-link" | "--rui-text-link-hover">;

package/dist/libs/domain/types/theme/theme-typography.type.d.ts

@@ -0,0 +1,7 @@
+import { ThemeCssVariables } from '../..';
+/**
+ * @description Defines CSS variables for typography colors.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type TypographyVariables = Pick<ThemeCssVariables, "--rui-typography-heading-primary" | "--rui-typography-heading-secondary" | "--rui-typography-heading-muted" | "--rui-typography-body-primary" | "--rui-typography-body-secondary" | "--rui-typography-body-muted" | "--rui-typography-label-primary" | "--rui-typography-label-secondary" | "--rui-typography-label-muted" | "--rui-typography-button-primary" | "--rui-typography-button-secondary">;

package/dist/libs/domain/types/theme/theme-value.type.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @description Represents an opacity value between zero and one.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeOpacity = number;
+/**
+ * @description Represents a numeric duration in milliseconds.
+ * @author Steveen Cues
+ * @version 2.0.0
+ */
+export type ThemeDuration = number;

package/dist/libs/domain/types/translation.types.d.ts

@@ -0,0 +1,33 @@
+import { LanguagePreferenceState } from '..';
+/**
+ * @description Valores admitidos en un catalogo de traducciones.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type TranslationValue = string | TranslationDictionary;
+/**
+ * @description Diccionario de traducciones que admite claves anidadas.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export interface TranslationDictionary {
+    readonly [key: string]: TranslationValue;
+}
+/**
+ * @description Catalogo de traducciones identificado por idioma.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type TranslationCatalog = Readonly<Record<string, TranslationDictionary>>;
+/**
+ * @description Parametros para interpolar variables en una traduccion.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type TranslationParams = Readonly<Record<string, string | number>>;
+/**
+ * @description Defines the React state dispatcher for language preference updates.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export type SetLanguagePreferenceState = React.Dispatch<React.SetStateAction<LanguagePreferenceState>>;

package/dist/libs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './aplicacion';
+export * from './components';
+export * from './domain';
+export * from './infraestructura';

package/dist/libs/infraestructura/index.d.ts

@@ -0,0 +1 @@
+export * from './storage';

package/dist/libs/infraestructura/storage/encrypted-preference.storage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description Encrypts and saves a preference in localStorage.
+ * @param storageKey Storage key.
+ * @param value Value to store.
+ * @param encryptionKey Encryption secret.
+ * @returns Promise resolved after the save attempt.
+ * @author Steveen Cues
+ * @version 3.0.0
+ */
+export declare function saveEncryptedPreference(storageKey: string, value: string, encryptionKey: string): Promise<void>;
+/**
+ * @description Loads and decrypts a preference from localStorage.
+ * @param storageKey Storage key.
+ * @param encryptionKey Encryption secret.
+ * @returns Decrypted preference or undefined when unavailable.
+ * @author Steveen Cues
+ * @version 3.0.0
+ */
+export declare function loadEncryptedPreference(storageKey: string, encryptionKey: string): Promise<string | undefined>;

package/dist/libs/infraestructura/storage/index.d.ts

@@ -0,0 +1,3 @@
+export * from './encrypted-preference.storage';
+export * from './language-preference.storage';
+export * from './theme-preference.storage';

package/dist/libs/infraestructura/storage/language-preference.storage.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @description Guarda el idioma activo de forma cifrada.
+ * @param language Codigo del idioma activo.
+ * @param encryptionKey Clave de cifrado proporcionada por el consumidor.
+ * @returns Promesa completada al finalizar el intento de guardado.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export declare function saveLanguagePreference(language: string, encryptionKey: string): Promise<void>;
+/**
+ * @description Recupera el idioma guardado y verifica que siga disponible.
+ * @param availableLanguages Idiomas admitidos por el proyecto.
+ * @param encryptionKey Clave de cifrado proporcionada por el consumidor.
+ * @returns Idioma recuperado o undefined si no existe o no es valido.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export declare function loadLanguagePreference(availableLanguages: readonly string[], encryptionKey: string): Promise<string | undefined>;

package/dist/libs/infraestructura/storage/theme-preference.storage.d.ts

@@ -0,0 +1,19 @@
+import { AppTheme, ThemeName } from '../../domain';
+/**
+ * @description Guarda el nombre del tema activo de forma cifrada.
+ * @param themeName Nombre del tema.
+ * @param encryptionKey Clave de cifrado proporcionada por el consumidor.
+ * @returns Promesa completada al finalizar el intento de guardado.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export declare function saveThemePreference(themeName: ThemeName, encryptionKey: string): Promise<void>;
+/**
+ * @description Recupera el tema guardado si existe entre los temas admitidos.
+ * @param themes Temas definidos por el proyecto consumidor.
+ * @param encryptionKey Clave de cifrado proporcionada por el consumidor.
+ * @returns Nombre del tema recuperado o undefined.
+ * @author Steveen Cues
+ * @version 1.0.0
+ */
+export declare function loadThemePreference(themes: readonly AppTheme[], encryptionKey: string): Promise<ThemeName | undefined>;

package/package.json

@@ -1,10 +1,21 @@
 {
   "name": "@steveencues/starter-react-ui",
+  "version": "1.0.2",
   "private": false,
-  "version": "1.0.0",
   "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "lint": "eslint .",
@@ -42,6 +53,7 @@
     "vite": "^8.3.0"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0"
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
   }
 }