@rainersoft/design-tokens 1.0.4 → 2.0.0

package/dist/index.d.ts

@@ -566,7 +566,7 @@ var darkColors = {
 	colors: colors
 };
 
-var typography$1 = {
+var typography = {
 	fontFamily: {
 		sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
 		serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
@@ -826,11 +826,11 @@ var typography$1 = {
 		}
 	}
 };
-var typography = {
-	typography: typography$1
+var typography$1 = {
+	typography: typography
 };
 
-var spacing$1 = {
+var spacing = {
 	"0": "0px",
 	"1": "0.25rem",
 	"2": "0.5rem",
@@ -867,11 +867,11 @@ var spacing$1 = {
 	"2.5": "0.625rem",
 	"3.5": "0.875rem"
 };
-var spacing = {
-	spacing: spacing$1
+var spacing$1 = {
+	spacing: spacing
 };
 
-var radius$1 = {
+var radius = {
 	none: "0px",
 	sm: "0.125rem",
 	base: "0.25rem",
@@ -882,11 +882,11 @@ var radius$1 = {
 	"3xl": "1.5rem",
 	full: "9999px"
 };
-var radius = {
-	radius: radius$1
+var radius$1 = {
+	radius: radius
 };
 
-var shadows$1 = {
+var shadows = {
 	light: {
 		xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
 		sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
@@ -914,9 +914,213 @@ var shadows$1 = {
 		}
 	}
 };
-var shadows = {
-	shadows: shadows$1
+var shadows$1 = {
+	shadows: shadows
+};
+
+var animations = {
+	"accordion-down": {
+		name: "accordion-down",
+		duration: "0.2s",
+		timingFunction: "ease-out",
+		keyframes: {
+			from: {
+				height: "0"
+			},
+			to: {
+				height: "var(--radix-accordion-content-height)"
+			}
+		}
+	},
+	"accordion-up": {
+		name: "accordion-up",
+		duration: "0.2s",
+		timingFunction: "ease-out",
+		keyframes: {
+			from: {
+				height: "var(--radix-accordion-content-height)"
+			},
+			to: {
+				height: "0"
+			}
+		}
+	},
+	"slide-in": {
+		name: "slide-in",
+		duration: "0.3s",
+		timingFunction: "ease-out",
+		keyframes: {
+			"0%": {
+				transform: "translateY(-10px)",
+				opacity: "0"
+			},
+			"100%": {
+				transform: "translateY(0)",
+				opacity: "1"
+			}
+		}
+	},
+	"fade-in": {
+		name: "fade-in",
+		duration: "0.5s",
+		timingFunction: "ease-in",
+		keyframes: {
+			"0%": {
+				opacity: "0"
+			},
+			"100%": {
+				opacity: "1"
+			}
+		}
+	},
+	glitch: {
+		name: "glitch",
+		duration: "4s",
+		timingFunction: "linear",
+		iterationCount: "infinite",
+		keyframes: {
+			"0%, 100%": {
+				transform: "translate(0)"
+			},
+			"10%": {
+				transform: "translate(-2px, 2px)"
+			},
+			"20%": {
+				transform: "translate(2px, -2px)"
+			},
+			"30%, 50%, 70%, 90%": {
+				transform: "translate(0)"
+			}
+		}
+	},
+	"neon-pulse": {
+		name: "neon-pulse",
+		duration: "2s",
+		timingFunction: "ease-in-out",
+		iterationCount: "infinite",
+		direction: "alternate",
+		keyframes: {
+			"0%, 100%": {
+				filter: "brightness(1) saturate(1)"
+			},
+			"50%": {
+				filter: "brightness(1.3) saturate(1.2)"
+			}
+		}
+	},
+	flicker: {
+		name: "flicker",
+		duration: "2s",
+		timingFunction: "linear",
+		iterationCount: "infinite",
+		keyframes: {
+			"0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+				opacity: "1",
+				filter: "brightness(1.2)"
+			},
+			"20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+				opacity: "0.85",
+				filter: "brightness(0.9)"
+			}
+		}
+	},
+	"scan-line": {
+		name: "scan-line",
+		duration: "4s",
+		timingFunction: "linear",
+		iterationCount: "infinite",
+		keyframes: {
+			"0%": {
+				top: "0"
+			},
+			"100%": {
+				top: "100%"
+			}
+		}
+	},
+	"glitch-after": {
+		name: "glitch-after",
+		duration: "3s",
+		timingFunction: "linear",
+		iterationCount: "infinite",
+		keyframes: {
+			"0%, 100%": {
+				opacity: "0"
+			},
+			"5%, 10%": {
+				opacity: "0.8",
+				transform: "translate(-3px, 3px)"
+			},
+			"15%, 95%": {
+				opacity: "0"
+			}
+		}
+	}
+};
+var animations$1 = {
+	animations: animations
+};
+
+var motion = {
+	duration: {
+		instant: "0ms",
+		fast: "100ms",
+		normal: "200ms",
+		slow: "300ms",
+		slower: "500ms",
+		slowest: "800ms"
+	},
+	easing: {
+		linear: "linear",
+		easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+		easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+		easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+		easeInQuad: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+		easeOutQuad: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+		easeInOutQuad: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+		easeInCubic: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+		easeOutCubic: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+		easeInOutCubic: "cubic-bezier(0.645, 0.045, 0.355, 1)",
+		spring: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+	},
+	delay: {
+		none: "0ms",
+		short: "50ms",
+		medium: "100ms",
+		long: "200ms"
+	}
+};
+var motion$1 = {
+	motion: motion
+};
+
+var breakpoints = {
+	xs: "0px",
+	sm: "640px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px",
+	"2xl": "1536px",
+	"3xl": "1920px"
+};
+var breakpoints$1 = {
+	breakpoints: breakpoints};
+
+var zIndex = {
+	base: 0,
+	dropdown: 1000,
+	sticky: 1020,
+	fixed: 1030,
+	modalBackdrop: 1040,
+	modal: 1050,
+	popover: 1060,
+	tooltip: 1070,
+	toast: 1080,
+	notification: 1090,
+	max: 9999
 };
+var zIndex$1 = {
+	zIndex: zIndex};
 
 /**
  * @fileoverview Tokens utilitários - Classes Tailwind CSS
@@ -927,7 +1131,7 @@ var shadows = {
  * facilitando o desenvolvimento e garantindo consistência visual.
  *
  * @module tokens/utilities
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -953,21 +1157,21 @@ var shadows = {
  *
  * @example
  * ```typescript
- * import { GRADIENT_DIRECTIONS } from 'rainer-design-tokens';
+ * import { GRADIENT_DIRECTIONS } from '@rainersoft/design-tokens';
  *
  * // Aplicar gradiente de cima para baixo
  * <div className={GRADIENT_DIRECTIONS.TO_BOTTOM}>
  * ```
  */
 declare const GRADIENT_DIRECTIONS: {
-    readonly TO_TOP: "bg-gradient-to-t";
-    readonly TO_BOTTOM: "bg-gradient-to-b";
-    readonly TO_LEFT: "bg-gradient-to-l";
-    readonly TO_RIGHT: "bg-gradient-to-r";
-    readonly TO_TL: "bg-gradient-to-tl";
-    readonly TO_TR: "bg-gradient-to-tr";
-    readonly TO_BL: "bg-gradient-to-bl";
-    readonly TO_BR: "bg-gradient-to-br";
+    readonly TO_TOP: "bg-linear-to-t";
+    readonly TO_BOTTOM: "bg-linear-to-b";
+    readonly TO_LEFT: "bg-linear-to-l";
+    readonly TO_RIGHT: "bg-linear-to-r";
+    readonly TO_TL: "bg-linear-to-tl";
+    readonly TO_TR: "bg-linear-to-tr";
+    readonly TO_BL: "bg-linear-to-bl";
+    readonly TO_BR: "bg-linear-to-br";
 };
 /**
  * Gradientes decorativos e utilitários como classes Tailwind CSS
@@ -989,7 +1193,7 @@ declare const GRADIENT_DIRECTIONS: {
  *
  * @example
  * ```typescript
- * import { GRADIENTS } from 'rainer-design-tokens';
+ * import { GRADIENTS } from '@rainersoft/design-tokens';
  *
  * // Aplicar gradiente em texto
  * <h1 className={GRADIENTS.TEXT_PRIMARY}>Título com Gradiente</h1>
@@ -1028,7 +1232,7 @@ declare const GRADIENTS: {
  *
  * @example
  * ```typescript
- * import { BACKGROUND } from 'rainer-design-tokens';
+ * import { BACKGROUND } from '@rainersoft/design-tokens';
  *
  * // Aplicar background de seção
  * <section className={BACKGROUND.SECTION_CYAN}>
@@ -1041,6 +1245,80 @@ declare const GRADIENTS: {
  * </div>
  * ```
  */
+/**
+ * Gradientes compostos - Direção + Cores (Padrão Enterprise)
+ *
+ * @description
+ * Combina direção e cores em um único token para uso direto.
+ * Elimina necessidade de concatenar strings manualmente.
+ * Padrão usado por grandes empresas (Google Material, Microsoft Fluent, Shopify Polaris).
+ *
+ * @type {Object}
+ * @property {string} HORIZONTAL_PRIMARY - Gradiente horizontal com cores primárias
+ * @property {string} HORIZONTAL_SECONDARY - Gradiente horizontal com cores secundárias
+ * @property {string} HORIZONTAL_DECORATIVE - Gradiente horizontal decorativo
+ * @property {string} VERTICAL_PRIMARY - Gradiente vertical com cores primárias
+ * @property {string} VERTICAL_SECONDARY - Gradiente vertical com cores secundárias
+ * @property {string} DIAGONAL_PRIMARY - Gradiente diagonal com cores primárias
+ * @property {string} DIAGONAL_SECONDARY - Gradiente diagonal com cores secundárias
+ *
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { GRADIENT_COMPOSITES } from '@rainersoft/design-tokens';
+ *
+ * // Usar diretamente sem concatenar
+ * <div className={GRADIENT_COMPOSITES.HORIZONTAL_PRIMARY}>
+ *   Conteúdo
+ * </div>
+ * ```
+ */
+declare const GRADIENT_COMPOSITES: {
+    readonly HORIZONTAL_PRIMARY: "bg-linear-to-r bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]";
+    readonly HORIZONTAL_SECONDARY: "bg-linear-to-r bg-linear-to-r from-[var(--color-secondary-base)] to-[var(--color-accent-base)]";
+    readonly HORIZONTAL_DECORATIVE: "bg-linear-to-r bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]";
+    readonly HORIZONTAL_CYAN_PURPLE: "bg-linear-to-r bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-secondary-base)]";
+    readonly VERTICAL_PRIMARY: "bg-linear-to-b bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]";
+    readonly VERTICAL_SECONDARY: "bg-linear-to-b bg-linear-to-r from-[var(--color-secondary-base)] to-[var(--color-accent-base)]";
+    readonly VERTICAL_DECORATIVE: "bg-linear-to-b bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]";
+    readonly DIAGONAL_PRIMARY: "bg-linear-to-br bg-linear-to-br from-[var(--color-primary-base)] via-[var(--color-secondary-base)] to-[var(--color-accent-base)]";
+    readonly DIAGONAL_SECONDARY: "bg-linear-to-br bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-secondary-base)]";
+    readonly DIAGONAL_GREEN_EMERALD: "bg-linear-to-br bg-linear-to-br from-[var(--color-status-success)] to-[var(--color-accent-base)]";
+};
+/**
+ * Gradientes de cores específicas usando tokens de cor
+ *
+ * @description
+ * Elimina valores hardcoded como "from-gray-500". Todos os gradientes
+ * usam tokens de cor do sistema para garantir consistência.
+ *
+ * @type {Object}
+ * @property {string} GRAY_SCALE - Gradiente em escala de cinza usando tokens
+ * @property {string} BLUE_SCALE - Gradiente em escala de azul usando tokens primários
+ * @property {string} SUCCESS_SCALE - Gradiente em escala de verde (sucesso) usando tokens
+ * @property {string} TEXT_MUTED - Gradiente para texto muted usando tokens
+ *
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { GRADIENT_COLORS } from '@rainersoft/design-tokens';
+ *
+ * // Usar gradiente de cinza sem valores hardcoded
+ * <div className={GRADIENT_COLORS.GRAY_SCALE}>
+ *   Conteúdo
+ * </div>
+ * ```
+ */
+declare const GRADIENT_COLORS: {
+    readonly GRAY_SCALE: "bg-linear-to-r from-[var(--color-text-tertiary)] to-[var(--color-text-secondary)]";
+    readonly BLUE_SCALE: "bg-linear-to-r from-[var(--color-primary-base)] to-[var(--color-primary-hover)]";
+    readonly SUCCESS_SCALE: "bg-linear-to-r from-[var(--color-status-success)] to-[var(--color-status-success-hover)]";
+    readonly TEXT_MUTED: "bg-linear-to-r from-[var(--color-text-tertiary)] to-[var(--color-text-secondary)]";
+};
 declare const BACKGROUND: {
     readonly FULL: "bg-[var(--color-background-primary)]";
     readonly GRADIENT_OVERLAY: "bg-linear-to-br from-[var(--color-primary-base)]/10 via-[var(--color-secondary-base)]/10 to-[var(--color-accent-base)]/10";
@@ -1060,6 +1338,280 @@ declare const BACKGROUND: {
  * Útil para type-checking e autocomplete em IDEs.
  */
 type GradientDirections = typeof GRADIENT_DIRECTIONS;
+/**
+ * Utilidades responsivas para breakpoints
+ *
+ * @description
+ * Classes e helpers para trabalhar com breakpoints responsivos,
+ * facilitando a criação de layouts mobile-first.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { RESPONSIVE } from '@rainersoft/design-tokens';
+ *
+ * // Usar classes responsivas
+ * <div className={RESPONSIVE.HIDE_ON_MOBILE}>
+ *   Visível apenas em desktop
+ * </div>
+ *
+ * // Usar container responsivo
+ * <div className={RESPONSIVE.CONTAINER.DEFAULT}>
+ *   Container com largura máxima responsiva
+ * </div>
+ * ```
+ */
+declare const RESPONSIVE: {
+    readonly HIDE_ON_MOBILE: "hidden sm:block";
+    readonly HIDE_ON_TABLET: "hidden lg:block";
+    readonly HIDE_ON_DESKTOP: "block lg:hidden";
+    readonly SHOW_ON_MOBILE: "block sm:hidden";
+    readonly SHOW_ON_TABLET: "block lg:hidden";
+    readonly SHOW_ON_DESKTOP: "hidden lg:block";
+    readonly CONTAINER: {
+        readonly DEFAULT: "w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl";
+        readonly FLUID: "w-full px-4 sm:px-6 lg:px-8";
+        readonly TIGHT: "w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl";
+        readonly WIDE: "w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-screen-2xl";
+        readonly PROSE: "w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-prose";
+    };
+    readonly GRID: {
+        readonly COLS_1_2: "grid grid-cols-1 md:grid-cols-2 gap-4";
+        readonly COLS_1_3: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4";
+        readonly COLS_1_4: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4";
+        readonly COLS_2_3: "grid grid-cols-2 lg:grid-cols-3 gap-4";
+        readonly COLS_2_4: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4";
+    };
+    readonly FLEX: {
+        readonly MOBILE_COLUMN: "flex flex-col sm:flex-row";
+        readonly TABLET_COLUMN: "flex flex-col lg:flex-row";
+        readonly MOBILE_REVERSE: "flex flex-col-reverse sm:flex-row";
+        readonly TABLET_REVERSE: "flex flex-col-reverse lg:flex-row";
+    };
+    readonly TEXT: {
+        readonly MOBILE_CENTER: "text-center sm:text-left";
+        readonly TABLET_CENTER: "text-center lg:text-left";
+        readonly RESPONSIVE_SIZE: "text-sm sm:text-base lg:text-lg";
+        readonly HEADING_SIZE: "text-2xl sm:text-3xl lg:text-4xl xl:text-5xl";
+    };
+    readonly SPACING: {
+        readonly MOBILE_TIGHT: "p-2 sm:p-4 lg:p-6";
+        readonly TABLET_TIGHT: "p-4 lg:p-8";
+        readonly RESPONSIVE_Y: "py-4 sm:py-6 lg:py-8 xl:py-12";
+        readonly RESPONSIVE_X: "px-4 sm:px-6 lg:px-8";
+    };
+};
+/**
+ * Helpers de motion para animações
+ *
+ * @description
+ * Classes utilitárias para aplicar motion tokens diretamente
+ * em elementos usando Tailwind CSS.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { MOTION } from '@rainersoft/design-tokens';
+ *
+ * // Aplicar transição suave
+ * <button className={MOTION.TRANSITION.DEFAULT}>
+ *   Clique aqui
+ * </button>
+ *
+ * // Aplicar animação de entrada
+ * <div className={MOTION.ANIMATE.FADE_IN}>
+ *   Conteúdo animado
+ * </div>
+ * ```
+ */
+declare const MOTION: {
+    readonly TRANSITION: {
+        readonly DEFAULT: "transition-all duration-200 ease-in-out";
+        readonly FAST: "transition-all duration-100 ease-out";
+        readonly SLOW: "transition-all duration-300 ease-in-out";
+        readonly COLOR: "transition-colors duration-200 ease-in-out";
+        readonly TRANSFORM: "transition-transform duration-200 ease-in-out";
+        readonly OPACITY: "transition-opacity duration-150 ease-in-out";
+        readonly SHADOW: "transition-shadow duration-200 ease-in-out";
+    };
+    readonly ANIMATE: {
+        readonly FADE_IN: "animate-fadeIn";
+        readonly FADE_OUT: "animate-fadeOut";
+        readonly SLIDE_IN_UP: "animate-slideInUp";
+        readonly SLIDE_IN_DOWN: "animate-slideInDown";
+        readonly SLIDE_IN_LEFT: "animate-slideInLeft";
+        readonly SLIDE_IN_RIGHT: "animate-slideInRight";
+        readonly SCALE_IN: "animate-scaleIn";
+        readonly SCALE_OUT: "animate-scaleOut";
+        readonly ROTATE: "animate-rotate";
+        readonly PULSE: "animate-pulse";
+        readonly BOUNCE: "animate-bounce";
+        readonly SHAKE: "animate-shake";
+        readonly FLASH: "animate-flash";
+    };
+    readonly DURATION: {
+        readonly INSTANT: "duration-0";
+        readonly FAST: "duration-100";
+        readonly NORMAL: "duration-200";
+        readonly SLOW: "duration-300";
+        readonly SLOWER: "duration-500";
+        readonly SLOWEST: "duration-700";
+    };
+    readonly DELAY: {
+        readonly NONE: "delay-0";
+        readonly SHORT: "delay-75";
+        readonly MEDIUM: "delay-150";
+        readonly LONG: "delay-300";
+        readonly LONGER: "delay-500";
+    };
+};
+/**
+ * Constantes de cores principais para uso direto
+ *
+ * @description
+ * Cores principais do tema light para uso direto em componentes.
+ * Retorna valores hexadecimais das cores base.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { COLORS } from '@rainersoft/design-tokens';
+ *
+ * // Usar cor primária
+ * const primaryColor = COLORS.primary; // "#0891b2"
+ *
+ * // Usar em estilo inline
+ * <div style={{ color: COLORS.primary }}>
+ *   Texto com cor primária
+ * </div>
+ * ```
+ */
+declare const COLORS: {
+    readonly primary: "#0891b2";
+    readonly secondary: "#9333ea";
+    readonly accent: "#db2777";
+    readonly success: "#22c55e";
+    readonly warning: "#f59e0b";
+    readonly error: "#ef4444";
+    readonly info: "#0891b2";
+};
+/**
+ * Estrutura de navegação padrão
+ *
+ * @description
+ * Array de itens de navegação para uso em componentes de layout.
+ * Pode ser sobrescrito ou estendido conforme necessário.
+ *
+ * @type {Array<{href: string, label: string}>}
+ * @constant
+ *
+ * @example
+ * ```typescript
+ * import { NAVIGATION } from '@rainersoft/design-tokens';
+ *
+ * // Usar em componente
+ * {NAVIGATION.map(item => (
+ *   <Link key={item.href} href={item.href}>
+ *     {item.label}
+ *   </Link>
+ * ))}
+ * ```
+ */
+declare const NAVIGATION: Array<{
+    href: string;
+    label: string;
+}>;
+/**
+ * Helpers de shadows (sombras) como classes Tailwind CSS
+ *
+ * @description
+ * Classes utilitárias para aplicar shadows tokens consistentes
+ * usando valores pré-definidos do tema light.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { SHADOWS } from '@rainersoft/design-tokens';
+ *
+ * // Aplicar shadow large
+ * <div className={SHADOWS.LARGE}>
+ *   Content with large shadow
+ * </div>
+ * ```
+ */
+declare const SHADOWS: {
+    readonly XS: "shadow-xs";
+    readonly SMALL: "shadow-sm";
+    readonly BASE: "shadow";
+    readonly MEDIUM: "shadow-md";
+    readonly LARGE: "shadow-lg";
+    readonly XL: "shadow-xl";
+    readonly '2XL': "shadow-2xl";
+    readonly INNER: "shadow-inner";
+};
+/**
+ * Helpers de z-index para camadas
+ *
+ * @description
+ * Classes utilitárias para aplicar z-index tokens consistentes
+ * usando valores pré-definidos.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { Z_INDEX } from '@rainersoft/design-tokens';
+ *
+ * // Aplicar z-index para modal
+ * <div className={Z_INDEX.MODAL}>
+ *   Modal content
+ * </div>
+ * ```
+ */
+declare const Z_INDEX: {
+    readonly BASE: "z-0";
+    readonly DROPDOWN: "z-[1000]";
+    readonly STICKY: "z-[1020]";
+    readonly FIXED: "z-[1030]";
+    readonly BACKDROP: "z-[1040]";
+    readonly MODAL: "z-[1050]";
+    readonly POPOVER: "z-[1060]";
+    readonly TOOLTIP: "z-[1070]";
+    readonly TOAST: "z-[1080]";
+    readonly SPOTLIGHT: "z-[1090]";
+    readonly PRIORITY: "z-[1100]";
+    readonly MAX: "z-[2147483647]";
+};
+/**
+ * Tipo TypeScript para cores
+ *
+ * @typedef {Object} Colors
+ * @description
+ * Tipo que representa todas as cores principais disponíveis.
+ */
+type Colors = typeof COLORS;
+/**
+ * Tipo TypeScript para navegação
+ *
+ * @typedef {Array<{href: string, label: string}>} Navigation
+ * @description
+ * Tipo que representa a estrutura de navegação.
+ */
+type Navigation = typeof NAVIGATION;
 /**
  * Tipo TypeScript para gradientes
  *
@@ -1068,6 +1620,22 @@ type GradientDirections = typeof GRADIENT_DIRECTIONS;
  * Tipo que representa todos os gradientes pré-configurados disponíveis.
  */
 type Gradients = typeof GRADIENTS;
+/**
+ * Tipo TypeScript para gradientes compostos
+ *
+ * @typedef {Object} GradientComposites
+ * @description
+ * Tipo que representa todos os gradientes compostos (direção + cores).
+ */
+type GradientComposites = typeof GRADIENT_COMPOSITES;
+/**
+ * Tipo TypeScript para gradientes de cores
+ *
+ * @typedef {Object} GradientColors
+ * @description
+ * Tipo que representa todos os gradientes de cores específicas.
+ */
+type GradientColors = typeof GRADIENT_COLORS;
 /**
  * Tipo TypeScript para backgrounds
  *
@@ -1086,7 +1654,7 @@ type Background = typeof BACKGROUND;
  * qualquer ambiente (web, mobile, desktop).
  *
  * @module tokens/accessibility
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -1261,7 +1829,7 @@ declare function validateContrast(foreground: string, background: string, option
  * framework ou tecnologia, garantindo consistência visual.
  *
  * @module tokens
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -1281,13 +1849,14 @@ declare function validateContrast(foreground: string, background: string, option
  * @property {Object} spacing - Tokens de espaçamento (margens, paddings)
  * @property {Object} radius - Tokens de raio de borda
  * @property {Object} shadows - Tokens de sombras para ambos os temas
+ * @property {Object} animations - Tokens de animações (keyframes e durações)
  *
  * @constant
  * @readonly
  *
  * @example
  * ```typescript
- * import { tokens } from 'rainer-design-tokens';
+ * import { tokens } from '@rainersoft/design-tokens';
  *
  * // Acessar cor primária do tema claro
  * const primaryColor = tokens.colors.light.brand.primary;
@@ -2195,67 +2764,549 @@ declare const tokens: {
             };
         };
     };
-};
-/**
- * Cores do tema claro
- *
- * @description
- * Exporta apenas as cores do tema claro para uso direto.
- *
- * @type {Object}
- * @constant
- * @readonly
- *
- * @example
- * ```typescript
- * import { lightThemeColors } from 'rainer-design-tokens';
- *
- * const primaryColor = lightThemeColors.brand.primary;
- * ```
- */
-declare const lightThemeColors: {
-    primary: {
-        base: string;
-        hover: string;
-        active: string;
-        disabled: string;
-        focus: string;
-        background: string;
-        backgroundHover: string;
-        backgroundActive: string;
-        border: string;
-        borderHover: string;
-        borderFocus: string;
-        text: string;
-        textHover: string;
-        textDisabled: string;
-    };
-    secondary: {
-        base: string;
-        hover: string;
-        active: string;
-        disabled: string;
-        focus: string;
-        background: string;
-        backgroundHover: string;
-        backgroundActive: string;
-        border: string;
-        borderHover: string;
-        borderFocus: string;
-        text: string;
-        textHover: string;
-        textDisabled: string;
-    };
-    accent: {
-        base: string;
-        hover: string;
-        active: string;
-        disabled: string;
-        focus: string;
-        background: string;
-        backgroundHover: string;
-        backgroundActive: string;
-        border: string;
+    readonly animations: {
+        "accordion-down": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            keyframes: {
+                from: {
+                    height: string;
+                };
+                to: {
+                    height: string;
+                };
+            };
+        };
+        "accordion-up": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            keyframes: {
+                from: {
+                    height: string;
+                };
+                to: {
+                    height: string;
+                };
+            };
+        };
+        "slide-in": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            keyframes: {
+                "0%": {
+                    transform: string;
+                    opacity: string;
+                };
+                "100%": {
+                    transform: string;
+                    opacity: string;
+                };
+            };
+        };
+        "fade-in": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            keyframes: {
+                "0%": {
+                    opacity: string;
+                };
+                "100%": {
+                    opacity: string;
+                };
+            };
+        };
+        glitch: {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            iterationCount: string;
+            keyframes: {
+                "0%, 100%": {
+                    transform: string;
+                };
+                "10%": {
+                    transform: string;
+                };
+                "20%": {
+                    transform: string;
+                };
+                "30%, 50%, 70%, 90%": {
+                    transform: string;
+                };
+            };
+        };
+        "neon-pulse": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            iterationCount: string;
+            direction: string;
+            keyframes: {
+                "0%, 100%": {
+                    filter: string;
+                };
+                "50%": {
+                    filter: string;
+                };
+            };
+        };
+        flicker: {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            iterationCount: string;
+            keyframes: {
+                "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+                    opacity: string;
+                    filter: string;
+                };
+                "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+                    opacity: string;
+                    filter: string;
+                };
+            };
+        };
+        "scan-line": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            iterationCount: string;
+            keyframes: {
+                "0%": {
+                    top: string;
+                };
+                "100%": {
+                    top: string;
+                };
+            };
+        };
+        "glitch-after": {
+            name: string;
+            duration: string;
+            timingFunction: string;
+            iterationCount: string;
+            keyframes: {
+                "0%, 100%": {
+                    opacity: string;
+                };
+                "5%, 10%": {
+                    opacity: string;
+                    transform: string;
+                };
+                "15%, 95%": {
+                    opacity: string;
+                };
+            };
+        };
+    };
+    readonly motion: {
+        duration: {
+            instant: string;
+            fast: string;
+            normal: string;
+            slow: string;
+            slower: string;
+            slowest: string;
+        };
+        easing: {
+            linear: string;
+            easeIn: string;
+            easeOut: string;
+            easeInOut: string;
+            easeInQuad: string;
+            easeOutQuad: string;
+            easeInOutQuad: string;
+            easeInCubic: string;
+            easeOutCubic: string;
+            easeInOutCubic: string;
+            spring: string;
+        };
+        delay: {
+            none: string;
+            short: string;
+            medium: string;
+            long: string;
+        };
+    };
+    readonly breakpoints: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    readonly zIndex: {
+        base: number;
+        dropdown: number;
+        sticky: number;
+        fixed: number;
+        modalBackdrop: number;
+        modal: number;
+        popover: number;
+        tooltip: number;
+        toast: number;
+        notification: number;
+        max: number;
+    };
+    readonly hero: {
+        title: {
+            fontSize: {
+                mobile: string;
+                responsive: string;
+                desktop: string;
+                clamp: string;
+            };
+            lineHeight: string;
+            letterSpacing: string;
+            wordSpacing: string;
+            fontWeight: string;
+            filter: string;
+            textShadow: {
+                dark: string;
+                light: string;
+            };
+        };
+        subtitle: {
+            fontSize: {
+                mobile: string;
+                responsive: string;
+                desktop: string;
+                clamp: string;
+            };
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string;
+            maxWidth: string;
+            textShadow: {
+                dark: string;
+                light: string;
+            };
+        };
+        container: {
+            maxWidth: {
+                mobile: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
+            padding: {
+                top: string;
+                bottom: string;
+                x: {
+                    mobile: string;
+                    sm: string;
+                    md: string;
+                };
+            };
+            gap: string;
+        };
+        effects: {
+            cyberpunk: {
+                glitch: {
+                    animation: string;
+                    animationDelay: string;
+                };
+                neon: {
+                    animation: string;
+                };
+                flicker: {
+                    animation: string;
+                };
+            };
+        };
+    };
+    readonly effects: {
+        filter: {
+            brightness: {
+                subtle: string;
+                moderate: string;
+                intense: string;
+                strong: string;
+                extreme: string;
+            };
+            contrast: {
+                subtle: string;
+                moderate: string;
+                strong: string;
+                intense: string;
+            };
+            saturate: {
+                subtle: string;
+                moderate: string;
+                strong: string;
+                intense: string;
+            };
+            combined: {
+                "neon-subtle": string;
+                "neon-moderate": string;
+                "neon-intense": string;
+                "neon-extreme": string;
+                glass: string;
+                frosted: string;
+            };
+        };
+        blur: {
+            none: string;
+            xs: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+        };
+        backdrop: {
+            blur: {
+                none: string;
+                sm: string;
+                base: string;
+                md: string;
+                lg: string;
+                xl: string;
+                "2xl": string;
+                "3xl": string;
+            };
+            saturate: {
+                default: string;
+                enhanced: string;
+                strong: string;
+            };
+        };
+        glow: {
+            star: {
+                small: {
+                    radius: string;
+                    color: string;
+                };
+                medium: {
+                    radius: string;
+                    color: string;
+                };
+                large: {
+                    radius: string;
+                    color: string;
+                };
+            };
+            neon: {
+                cyan: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                };
+                purple: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                };
+                pink: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                };
+                green: {
+                    subtle: string;
+                    moderate: string;
+                    intense: string;
+                };
+            };
+        };
+        textShadow: {
+            glow: {
+                "cyan-subtle": string;
+                "cyan-moderate": string;
+                "cyan-intense": string;
+            };
+            depth: {
+                subtle: string;
+                moderate: string;
+                strong: string;
+            };
+        };
+        boxShadow: {
+            cyberpunk: {
+                card: string;
+                cardHover: string;
+                elevated: string;
+            };
+            glass: {
+                subtle: string;
+                moderate: string;
+                strong: string;
+            };
+        };
+    };
+    readonly components: {
+        readonly celestialBackground: {
+            stars: {
+                default: {
+                    count: number;
+                    sizes: number[];
+                    opacity: number[];
+                    glow: {
+                        color: string;
+                        radius: number;
+                    };
+                };
+                dense: {
+                    count: number;
+                    sizes: number[];
+                    opacity: number[];
+                    glow: {
+                        color: string;
+                        radius: number;
+                    };
+                };
+                sparse: {
+                    count: number;
+                    sizes: number[];
+                    opacity: number[];
+                    glow: {
+                        color: string;
+                        radius: number;
+                    };
+                };
+            };
+            nebula: {
+                cyan: {
+                    position: {
+                        top: string;
+                        left: string;
+                    };
+                    size: {
+                        width: string;
+                        height: string;
+                    };
+                    gradient: {
+                        type: string;
+                        center: string;
+                        colorStops: {
+                            color: string;
+                            alpha: number;
+                            position: string;
+                        }[];
+                    };
+                    blur: string;
+                };
+                purple: {
+                    position: {
+                        top: string;
+                        right: string;
+                    };
+                    size: {
+                        width: string;
+                        height: string;
+                    };
+                    gradient: {
+                        type: string;
+                        center: string;
+                        colorStops: {
+                            color: string;
+                            alpha: number;
+                            position: string;
+                        }[];
+                    };
+                    blur: string;
+                };
+                pink: {
+                    position: {
+                        bottom: string;
+                        left: string;
+                    };
+                    size: {
+                        width: string;
+                        height: string;
+                    };
+                    gradient: {
+                        type: string;
+                        center: string;
+                        colorStops: {
+                            color: string;
+                            alpha: number;
+                            position: string;
+                        }[];
+                    };
+                    blur: string;
+                };
+            };
+            baseGradient: {
+                direction: string;
+                from: string;
+                via: {
+                    color: string;
+                    alpha: number;
+                };
+                to: string;
+            };
+        };
+    };
+};
+/**
+ * Cores do tema claro
+ *
+ * @description
+ * Exporta apenas as cores do tema claro para uso direto.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { lightThemeColors } from '@rainersoft/design-tokens';
+ *
+ * const primaryColor = lightThemeColors.brand.primary;
+ * ```
+ */
+declare const lightThemeColors: {
+    primary: {
+        base: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        focus: string;
+        background: string;
+        backgroundHover: string;
+        backgroundActive: string;
+        border: string;
+        borderHover: string;
+        borderFocus: string;
+        text: string;
+        textHover: string;
+        textDisabled: string;
+    };
+    secondary: {
+        base: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        focus: string;
+        background: string;
+        backgroundHover: string;
+        backgroundActive: string;
+        border: string;
+        borderHover: string;
+        borderFocus: string;
+        text: string;
+        textHover: string;
+        textDisabled: string;
+    };
+    accent: {
+        base: string;
+        hover: string;
+        active: string;
+        disabled: string;
+        focus: string;
+        background: string;
+        backgroundHover: string;
+        backgroundActive: string;
+        border: string;
         borderHover: string;
         borderFocus: string;
         text: string;
@@ -2493,7 +3544,7 @@ declare const lightThemeColors: {
  *
  * @example
  * ```typescript
- * import { darkThemeColors } from 'rainer-design-tokens';
+ * import { darkThemeColors } from '@rainersoft/design-tokens';
  *
  * const neonColor = darkThemeColors.accent.cyan;
  * ```
@@ -2803,7 +3854,7 @@ declare const darkThemeColors: {
  *
  * @example
  * ```typescript
- * import { typographyTokens } from 'rainer-design-tokens';
+ * import { typographyTokens } from '@rainersoft/design-tokens';
  *
  * const fontSize = typographyTokens.fontSize.lg;
  * const fontFamily = typographyTokens.fontFamily.sans;
@@ -3082,7 +4133,7 @@ declare const typographyTokens: {
  *
  * @example
  * ```typescript
- * import { spacingTokens } from 'rainer-design-tokens';
+ * import { spacingTokens } from '@rainersoft/design-tokens';
  *
  * const margin = spacingTokens.md;
  * const padding = spacingTokens.lg;
@@ -3137,7 +4188,7 @@ declare const spacingTokens: {
  *
  * @example
  * ```typescript
- * import { radiusTokens } from 'rainer-design-tokens';
+ * import { radiusTokens } from '@rainersoft/design-tokens';
  *
  * const borderRadius = radiusTokens.md;
  * ```
@@ -3166,7 +4217,7 @@ declare const radiusTokens: {
  *
  * @example
  * ```typescript
- * import { shadowTokens } from 'rainer-design-tokens';
+ * import { shadowTokens } from '@rainersoft/design-tokens';
  *
  * const shadow = shadowTokens.light.md;
  * const glow = shadowTokens.dark.glow.cyan;
@@ -3200,6 +4251,534 @@ declare const shadowTokens: {
         };
     };
 };
+/**
+ * Tokens de animações
+ *
+ * @description
+ * Exporta todos os tokens de animações, incluindo keyframes, durações
+ * e funções de timing para transições e animações do sistema.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { animationTokens } from '@rainersoft/design-tokens';
+ *
+ * const slideIn = animationTokens['slide-in'];
+ * const fadeIn = animationTokens['fade-in'];
+ * ```
+ */
+declare const animationTokens: {
+    "accordion-down": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        keyframes: {
+            from: {
+                height: string;
+            };
+            to: {
+                height: string;
+            };
+        };
+    };
+    "accordion-up": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        keyframes: {
+            from: {
+                height: string;
+            };
+            to: {
+                height: string;
+            };
+        };
+    };
+    "slide-in": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        keyframes: {
+            "0%": {
+                transform: string;
+                opacity: string;
+            };
+            "100%": {
+                transform: string;
+                opacity: string;
+            };
+        };
+    };
+    "fade-in": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        keyframes: {
+            "0%": {
+                opacity: string;
+            };
+            "100%": {
+                opacity: string;
+            };
+        };
+    };
+    glitch: {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        iterationCount: string;
+        keyframes: {
+            "0%, 100%": {
+                transform: string;
+            };
+            "10%": {
+                transform: string;
+            };
+            "20%": {
+                transform: string;
+            };
+            "30%, 50%, 70%, 90%": {
+                transform: string;
+            };
+        };
+    };
+    "neon-pulse": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        iterationCount: string;
+        direction: string;
+        keyframes: {
+            "0%, 100%": {
+                filter: string;
+            };
+            "50%": {
+                filter: string;
+            };
+        };
+    };
+    flicker: {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        iterationCount: string;
+        keyframes: {
+            "0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%": {
+                opacity: string;
+                filter: string;
+            };
+            "20%, 21.999%, 63%, 63.999%, 65%, 69.999%": {
+                opacity: string;
+                filter: string;
+            };
+        };
+    };
+    "scan-line": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        iterationCount: string;
+        keyframes: {
+            "0%": {
+                top: string;
+            };
+            "100%": {
+                top: string;
+            };
+        };
+    };
+    "glitch-after": {
+        name: string;
+        duration: string;
+        timingFunction: string;
+        iterationCount: string;
+        keyframes: {
+            "0%, 100%": {
+                opacity: string;
+            };
+            "5%, 10%": {
+                opacity: string;
+                transform: string;
+            };
+            "15%, 95%": {
+                opacity: string;
+            };
+        };
+    };
+};
+/**
+ * Tokens de efeitos visuais
+ *
+ * @description
+ * Exporta todos os tokens de efeitos visuais, incluindo filters, blur,
+ * glow, backdrop effects e outros efeitos para criar elementos visuais sofisticados.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { effectTokens } from '@rainersoft/design-tokens';
+ *
+ * const blur = effectTokens.blur.md;
+ * const glow = effectTokens.glow.neon.cyan.moderate;
+ * ```
+ */
+declare const effectTokens: {
+    filter: {
+        brightness: {
+            subtle: string;
+            moderate: string;
+            intense: string;
+            strong: string;
+            extreme: string;
+        };
+        contrast: {
+            subtle: string;
+            moderate: string;
+            strong: string;
+            intense: string;
+        };
+        saturate: {
+            subtle: string;
+            moderate: string;
+            strong: string;
+            intense: string;
+        };
+        combined: {
+            "neon-subtle": string;
+            "neon-moderate": string;
+            "neon-intense": string;
+            "neon-extreme": string;
+            glass: string;
+            frosted: string;
+        };
+    };
+    blur: {
+        none: string;
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+    };
+    backdrop: {
+        blur: {
+            none: string;
+            sm: string;
+            base: string;
+            md: string;
+            lg: string;
+            xl: string;
+            "2xl": string;
+            "3xl": string;
+        };
+        saturate: {
+            default: string;
+            enhanced: string;
+            strong: string;
+        };
+    };
+    glow: {
+        star: {
+            small: {
+                radius: string;
+                color: string;
+            };
+            medium: {
+                radius: string;
+                color: string;
+            };
+            large: {
+                radius: string;
+                color: string;
+            };
+        };
+        neon: {
+            cyan: {
+                subtle: string;
+                moderate: string;
+                intense: string;
+            };
+            purple: {
+                subtle: string;
+                moderate: string;
+                intense: string;
+            };
+            pink: {
+                subtle: string;
+                moderate: string;
+                intense: string;
+            };
+            green: {
+                subtle: string;
+                moderate: string;
+                intense: string;
+            };
+        };
+    };
+    textShadow: {
+        glow: {
+            "cyan-subtle": string;
+            "cyan-moderate": string;
+            "cyan-intense": string;
+        };
+        depth: {
+            subtle: string;
+            moderate: string;
+            strong: string;
+        };
+    };
+    boxShadow: {
+        cyberpunk: {
+            card: string;
+            cardHover: string;
+            elevated: string;
+        };
+        glass: {
+            subtle: string;
+            moderate: string;
+            strong: string;
+        };
+    };
+};
+/**
+ * Tokens de componentes
+ *
+ * @description
+ * Exporta todos os tokens específicos de componentes, incluindo configurações
+ * para celestial background, carousels e outros componentes visuais.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { componentTokens } from '@rainersoft/design-tokens';
+ *
+ * const starConfig = componentTokens.celestialBackground.stars.default;
+ * ```
+ */
+declare const componentTokens: {
+    celestialBackground: {
+        stars: {
+            default: {
+                count: number;
+                sizes: number[];
+                opacity: number[];
+                glow: {
+                    color: string;
+                    radius: number;
+                };
+            };
+            dense: {
+                count: number;
+                sizes: number[];
+                opacity: number[];
+                glow: {
+                    color: string;
+                    radius: number;
+                };
+            };
+            sparse: {
+                count: number;
+                sizes: number[];
+                opacity: number[];
+                glow: {
+                    color: string;
+                    radius: number;
+                };
+            };
+        };
+        nebula: {
+            cyan: {
+                position: {
+                    top: string;
+                    left: string;
+                };
+                size: {
+                    width: string;
+                    height: string;
+                };
+                gradient: {
+                    type: string;
+                    center: string;
+                    colorStops: {
+                        color: string;
+                        alpha: number;
+                        position: string;
+                    }[];
+                };
+                blur: string;
+            };
+            purple: {
+                position: {
+                    top: string;
+                    right: string;
+                };
+                size: {
+                    width: string;
+                    height: string;
+                };
+                gradient: {
+                    type: string;
+                    center: string;
+                    colorStops: {
+                        color: string;
+                        alpha: number;
+                        position: string;
+                    }[];
+                };
+                blur: string;
+            };
+            pink: {
+                position: {
+                    bottom: string;
+                    left: string;
+                };
+                size: {
+                    width: string;
+                    height: string;
+                };
+                gradient: {
+                    type: string;
+                    center: string;
+                    colorStops: {
+                        color: string;
+                        alpha: number;
+                        position: string;
+                    }[];
+                };
+                blur: string;
+            };
+        };
+        baseGradient: {
+            direction: string;
+            from: string;
+            via: {
+                color: string;
+                alpha: number;
+            };
+            to: string;
+        };
+    };
+};
+/**
+ * Tokens de motion
+ *
+ * @description
+ * Exporta todos os tokens relacionados a motion e animações, incluindo
+ * durações, easings, keyframes e transições seguindo Material Design e Fluent Design.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { motionTokens } from '@rainersoft/design-tokens';
+ *
+ * const duration = motionTokens.duration.normal;
+ * const easing = motionTokens.easing.standard.productive;
+ * ```
+ */
+declare const motionTokens: {
+    duration: {
+        instant: string;
+        fast: string;
+        normal: string;
+        slow: string;
+        slower: string;
+        slowest: string;
+    };
+    easing: {
+        linear: string;
+        easeIn: string;
+        easeOut: string;
+        easeInOut: string;
+        easeInQuad: string;
+        easeOutQuad: string;
+        easeInOutQuad: string;
+        easeInCubic: string;
+        easeOutCubic: string;
+        easeInOutCubic: string;
+        spring: string;
+    };
+    delay: {
+        none: string;
+        short: string;
+        medium: string;
+        long: string;
+    };
+};
+/**
+ * Tokens de breakpoints
+ *
+ * @description
+ * Exporta todos os tokens de breakpoints responsivos para criar layouts
+ * mobile-first consistentes em todas as plataformas.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { breakpointTokens } from '@rainersoft/design-tokens';
+ *
+ * const tabletSize = breakpointTokens.md;
+ * const mediaQuery = breakpointTokens.mediaQueries.lg;
+ * ```
+ */
+declare const breakpointTokens: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+};
+/**
+ * Tokens de z-index
+ *
+ * @description
+ * Exporta todos os tokens de z-index para gerenciar camadas e sobreposições
+ * de forma consistente e escalável.
+ *
+ * @type {Object}
+ * @constant
+ * @readonly
+ *
+ * @example
+ * ```typescript
+ * import { zIndexTokens } from '@rainersoft/design-tokens';
+ *
+ * const modalLayer = zIndexTokens.modal;
+ * const tooltipLayer = zIndexTokens.tooltip;
+ * ```
+ */
+declare const zIndexTokens: {
+    base: number;
+    dropdown: number;
+    sticky: number;
+    fixed: number;
+    modalBackdrop: number;
+    modal: number;
+    popover: number;
+    tooltip: number;
+    toast: number;
+    notification: number;
+    max: number;
+};
 /**
  * Tipo TypeScript para todos os tokens
  *
@@ -3232,7 +4811,7 @@ type DarkColors = typeof darkColors.colors;
  * @description
  * Tipo que representa todos os tokens de tipografia.
  */
-type Typography = typeof typography.typography;
+type Typography = typeof typography$1.typography;
 /**
  * Tipo TypeScript para tokens de espaçamento
  *
@@ -3240,7 +4819,7 @@ type Typography = typeof typography.typography;
  * @description
  * Tipo que representa todos os tokens de espaçamento.
  */
-type Spacing = typeof spacing.spacing;
+type Spacing = typeof spacing$1.spacing;
 /**
  * Tipo TypeScript para tokens de raio de borda
  *
@@ -3248,7 +4827,7 @@ type Spacing = typeof spacing.spacing;
  * @description
  * Tipo que representa todos os tokens de raio de borda.
  */
-type Radius = typeof radius.radius;
+type Radius = typeof radius$1.radius;
 /**
  * Tipo TypeScript para tokens de sombras
  *
@@ -3256,7 +4835,39 @@ type Radius = typeof radius.radius;
  * @description
  * Tipo que representa todos os tokens de sombras.
  */
-type Shadows = typeof shadows.shadows;
+type Shadows = typeof shadows$1.shadows;
+/**
+ * Tipo TypeScript para tokens de animações
+ *
+ * @typedef {Object} Animations
+ * @description
+ * Tipo que representa todos os tokens de animações.
+ */
+type Animations = typeof animations$1.animations;
+/**
+ * Tipo TypeScript para tokens de motion
+ *
+ * @typedef {Object} Motion
+ * @description
+ * Tipo que representa todos os tokens de motion.
+ */
+type Motion = typeof motion$1.motion;
+/**
+ * Tipo TypeScript para tokens de breakpoints
+ *
+ * @typedef {Object} Breakpoints
+ * @description
+ * Tipo que representa todos os tokens de breakpoints responsivos.
+ */
+type Breakpoints = typeof breakpoints$1.breakpoints;
+/**
+ * Tipo TypeScript para tokens de z-index
+ *
+ * @typedef {Object} ZIndex
+ * @description
+ * Tipo que representa todos os tokens de z-index.
+ */
+type ZIndex = typeof zIndex$1.zIndex;
 
 /**
  * @fileoverview Tema Claro - Rainer Design System
@@ -3268,7 +4879,7 @@ type Shadows = typeof shadows.shadows;
  * e profissionalismo.
  *
  * @module themes/light
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -3292,7 +4903,7 @@ type Shadows = typeof shadows.shadows;
  *
  * @example
  * ```typescript
- * import { lightTheme } from 'rainer-design-tokens';
+ * import { lightTheme } from '@rainersoft/design-tokens';
  *
  * // Acessar cores do tema claro
  * const primaryColor = lightTheme.colors.brand.primary;
@@ -3923,7 +5534,7 @@ type LightTheme = typeof lightTheme;
  * aplicações que buscam um visual futurista e impactante.
  *
  * @module themes/dark
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  */
@@ -3947,7 +5558,7 @@ type LightTheme = typeof lightTheme;
  *
  * @example
  * ```typescript
- * import { darkTheme } from 'rainer-design-tokens';
+ * import { darkTheme } from '@rainersoft/design-tokens';
  *
  * // Acessar cores neon do tema escuro
  * const neonCyan = darkTheme.colors.accent.cyan;
@@ -4608,7 +6219,7 @@ type DarkTheme = typeof darkTheme;
  * facilitando a aplicação de temas completos na aplicação.
  *
  * @module themes
- * @version 4.0.0
+ * @version 2.0.0
  * @author Rainer Teixeira
  * @since 1.0.0
  *
@@ -5850,4 +7461,4 @@ declare const themes: {
  */
 type Themes = typeof themes;
 
-export { BACKGROUND, type Background, type DarkColors, type DarkTheme, GRADIENTS, GRADIENT_DIRECTIONS, type GradientDirections, type Gradients, type LightColors, type LightTheme, type Radius, type Shadows, type Spacing, type Themes, type Tokens, type Typography, darkTheme, darkThemeColors, getContrast, getContrastInfo, getLuminance, hexToRgb, lightTheme, lightThemeColors, meetsWCAGAA, meetsWCAGAAA, radiusTokens, shadowTokens, spacingTokens, themes, tokens, typographyTokens, validateContrast };
+export { type Animations, BACKGROUND, type Background, type Breakpoints, COLORS, type Colors, type DarkColors, type DarkTheme, GRADIENTS, GRADIENT_COLORS, GRADIENT_COMPOSITES, GRADIENT_DIRECTIONS, type GradientColors, type GradientComposites, type GradientDirections, type Gradients, type LightColors, type LightTheme, MOTION, type Motion, NAVIGATION, type Navigation, RESPONSIVE, type Radius, SHADOWS, type Shadows, type Spacing, type Themes, type Tokens, type Typography, type ZIndex, Z_INDEX, animationTokens, breakpointTokens, componentTokens, darkTheme, darkThemeColors, effectTokens, getContrast, getContrastInfo, getLuminance, hexToRgb, lightTheme, lightThemeColors, meetsWCAGAA, meetsWCAGAAA, motionTokens, radiusTokens, shadowTokens, spacingTokens, themes, tokens, typographyTokens, validateContrast, zIndexTokens };