@bsginstitute/bsg-integra 0.0.1

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@bsginstitute/bsg-integra",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Angular UI component library inspired by shadcn/ui. Built with standalone components, Tailwind CSS v4, and class-variance-authority (CVA).",
+  "keywords": [
+    "angular",
+    "components",
+    "ui",
+    "design-system",
+    "tailwind",
+    "shadcn",
+    "cva",
+    "standalone"
+  ],
+  "author": "BSG Institute",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BSGInstitute/LibreriaIntegra.git"
+  },
+  "homepage": "https://github.com/BSGInstitute/LibreriaIntegra#readme",
+  "bugs": {
+    "url": "https://github.com/BSGInstitute/LibreriaIntegra/issues"
+  },
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "fesm2022/bsginstitute-bsg-integra.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/bsginstitute-bsg-integra.mjs"
+    }
+  }
+}

package/src/lib/tokens/animations.css

@@ -0,0 +1,650 @@
+@theme {
+  /* ============================================
+     Animation Durations
+     Basado en investigación UX de Material Design
+     ============================================ */
+
+  /* Micro animations - Cambios instantáneos */
+  --duration-instant: 0ms;
+  --duration-fastest: 50ms;
+
+  /* Fast - Feedback inmediato */
+  --duration-fast: 100ms;
+  --duration-faster: 150ms;
+
+  /* Normal - Transiciones estándar */
+  --duration-normal: 200ms;
+  --duration-default: 250ms;
+  --duration-medium: 300ms;
+
+  /* Slow - Animaciones complejas */
+  --duration-slow: 400ms;
+  --duration-slower: 500ms;
+
+  /* Very slow - Animaciones dramáticas */
+  --duration-slowest: 700ms;
+  --duration-glacial: 1000ms;
+
+  /* Alias semánticos */
+  --duration-hover: var(--duration-faster);
+  --duration-tooltip: var(--duration-normal);
+  --duration-dropdown: var(--duration-default);
+  --duration-modal: var(--duration-medium);
+  --duration-page-transition: var(--duration-slow);
+  --duration-skeleton: 1500ms;
+
+  /* ============================================
+     Animation Delays
+     Para animaciones escalonadas (staggered)
+     ============================================ */
+  --delay-none: 0ms;
+  --delay-xs: 50ms;
+  --delay-sm: 100ms;
+  --delay-md: 150ms;
+  --delay-lg: 200ms;
+  --delay-xl: 300ms;
+  --delay-2xl: 500ms;
+
+  /* ============================================
+     Easing Functions - Curvas de Animación
+     ============================================ */
+
+  /* Linear */
+  --ease-linear: linear;
+
+  /* Standard CSS easings */
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Material Design easings */
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Entrada y salida */
+  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Solo salida */
+  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1); /* Solo entrada */
+  --ease-sharp: cubic-bezier(
+    0.4,
+    0,
+    0.6,
+    1
+  ); /* Objetos que salen de pantalla */
+
+  /* Custom easings - Más naturales */
+  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
+
+  /* Easings específicos por dirección */
+  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+
+  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+
+  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+
+  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
+  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+  /* Alias para uso común */
+  --ease-default: var(--ease-out);
+  --ease-emphasized: var(--ease-out-cubic);
+
+  /* ============================================
+     Transition Properties
+     Configuraciones completas de transición
+     ============================================ */
+
+  /* All properties - Usar con precaución (performance) */
+  --transition-all-fast: all var(--duration-fast) var(--ease-default);
+  --transition-all: all var(--duration-default) var(--ease-default);
+  --transition-all-slow: all var(--duration-slow) var(--ease-default);
+
+  /* Colors */
+  --transition-colors-fast:
+    color var(--duration-fast) var(--ease-default),
+    background-color var(--duration-fast) var(--ease-default),
+    border-color var(--duration-fast) var(--ease-default);
+
+  --transition-colors:
+    color var(--duration-default) var(--ease-default),
+    background-color var(--duration-default) var(--ease-default),
+    border-color var(--duration-default) var(--ease-default);
+
+  /* Opacity */
+  --transition-opacity-fast: opacity var(--duration-fast) var(--ease-default);
+  --transition-opacity: opacity var(--duration-default) var(--ease-default);
+  --transition-opacity-slow: opacity var(--duration-slow) var(--ease-default);
+
+  /* Transform */
+  --transition-transform-fast: transform var(--duration-fast)
+    var(--ease-default);
+  --transition-transform: transform var(--duration-default) var(--ease-default);
+  --transition-transform-slow: transform var(--duration-slow)
+    var(--ease-out-cubic);
+  --transition-transform-bounce: transform var(--duration-default)
+    var(--ease-bounce);
+
+  /* Shadow */
+  --transition-shadow-fast: box-shadow var(--duration-fast) var(--ease-default);
+  --transition-shadow: box-shadow var(--duration-default) var(--ease-default);
+  --transition-shadow-slow: box-shadow var(--duration-slow) var(--ease-default);
+
+  /* Combinaciones comunes */
+  --transition-base:
+    background-color var(--duration-default) var(--ease-default),
+    border-color var(--duration-default) var(--ease-default),
+    color var(--duration-default) var(--ease-default),
+    box-shadow var(--duration-default) var(--ease-default);
+
+  --transition-interactive:
+    transform var(--duration-faster) var(--ease-out),
+    box-shadow var(--duration-faster) var(--ease-out),
+    background-color var(--duration-faster) var(--ease-out);
+
+  /* ============================================
+     Component Transitions
+     ============================================ */
+
+  /* Button */
+  --transition-button:
+    background-color var(--duration-faster) var(--ease-out),
+    color var(--duration-faster) var(--ease-out),
+    border-color var(--duration-faster) var(--ease-out),
+    box-shadow var(--duration-faster) var(--ease-out),
+    transform var(--duration-faster) var(--ease-out);
+
+  /* Input */
+  --transition-input:
+    border-color var(--duration-normal) var(--ease-out),
+    box-shadow var(--duration-normal) var(--ease-out),
+    background-color var(--duration-normal) var(--ease-out);
+
+  /* Card */
+  --transition-card:
+    box-shadow var(--duration-default) var(--ease-out),
+    transform var(--duration-default) var(--ease-out),
+    border-color var(--duration-default) var(--ease-out);
+
+  /* Link */
+  --transition-link:
+    color var(--duration-fast) var(--ease-out),
+    text-decoration-color var(--duration-fast) var(--ease-out);
+
+  /* Modal/Dialog */
+  --transition-modal:
+    opacity var(--duration-medium) var(--ease-out),
+    transform var(--duration-medium) var(--ease-out-cubic);
+
+  /* Dropdown */
+  --transition-dropdown:
+    opacity var(--duration-default) var(--ease-out),
+    transform var(--duration-default) var(--ease-out-back);
+
+  /* Tooltip */
+  --transition-tooltip: opacity var(--duration-normal) var(--ease-out);
+
+  /* Toast */
+  --transition-toast:
+    transform var(--duration-default) var(--ease-out-back),
+    opacity var(--duration-default) var(--ease-out);
+
+  /* ============================================
+     Accordion Animations - Based on shadcn/ui
+     ============================================ */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+/* ============================================
+   Keyframe Animations
+   Animaciones reutilizables predefinidas
+   ============================================ */
+
+/* Accordion animations - Based on shadcn/ui */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Fade animations */
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+/* Slide animations */
+@keyframes slide-in-up {
+  from {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-down {
+  from {
+    transform: translateY(-16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(16px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-out-up {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-16px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-down {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(16px);
+    opacity: 0;
+  }
+}
+
+/* Scale animations */
+@keyframes scale-in {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+}
+
+@keyframes scale-bounce {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Zoom animations */
+@keyframes zoom-in {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/* Rotation animations */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes rotate-reverse {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+/* Spin (loading) */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Pulse animations */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes pulse-scale {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
+
+/* Ping (notification indicator) */
+@keyframes ping {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+/* Bounce animations */
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes bounce-horizontal {
+  0%,
+  100% {
+    transform: translateX(0);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateX(25%);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* Shake animation */
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-8px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(8px);
+  }
+}
+
+@keyframes shake-vertical {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateY(-8px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateY(8px);
+  }
+}
+
+/* Wiggle animation */
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+}
+
+/* Swing animation */
+@keyframes swing {
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+/* Flip animations */
+@keyframes flip-horizontal {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes flip-vertical {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(360deg);
+  }
+}
+
+/* Skeleton loading */
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* Progress bar */
+@keyframes progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}
+
+/* Ripple effect */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+/* Heartbeat */
+@keyframes heartbeat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  10%,
+  30% {
+    transform: scale(1.1);
+  }
+  20%,
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Blink */
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/* Float */
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+/* ============================================
+   Accessibility - Reduced Motion
+   Respeta prefers-reduced-motion
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}