@mesalvo/react-ui 0.0.31889

package/dist/theme/animations/pump.css

@@ -0,0 +1,73 @@
+@theme {
+  --animate-pump: pump 2s ease-in-out infinite;
+  --animate-pump-soft: pump-soft 2s ease-in-out infinite;
+  --animate-pump-hard: pump-hard 2s ease-in-out infinite;
+  --animate-pump-fast: pump 1s ease-in-out infinite;
+  --animate-pump-slow: pump 3s ease-in-out infinite;
+  --animate-pump-x: pump-x 2s ease-in-out infinite;
+  --animate-pump-y: pump-y 2s ease-in-out infinite;
+  --animate-pump-bounce: pump-bounce 2s cubic-bezier(0.25, 0.8, 0.25, 1)
+    infinite;
+}
+
+@keyframes pump {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(var(--pump-amount, 1.1));
+    opacity: 0.8;
+  }
+}
+
+@keyframes pump-soft {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(var(--pump-soft-amount, 1.05));
+  }
+}
+
+@keyframes pump-hard {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(var(--pump-hard-amount, 1.2));
+  }
+}
+
+@keyframes pump-x {
+  0%,
+  100% {
+    transform: scaleX(1);
+  }
+  50% {
+    transform: scaleX(var(--pump-x-amount, 1.1));
+  }
+}
+
+@keyframes pump-y {
+  0%,
+  100% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(var(--pump-y-amount, 1.1));
+  }
+}
+
+@keyframes pump-bounce {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(var(--pump-bounce-amount, 1.15));
+  }
+}

package/dist/theme/animations/roll.css

@@ -0,0 +1,63 @@
+@theme {
+  --animate-roll-left: roll-left 0.8s ease-in-out;
+  --animate-roll-right: roll-right 0.8s ease-in-out;
+
+  --animate-to-roll-left: roll-left 0.8s ease-in-out reverse;
+  --animate-to-roll-right: roll-right 0.8s ease-in-out reverse;
+
+  --animate-roll-pulse: roll-pulse 1.5s infinite;
+  --animate-roll-flash: roll-flash 0.8s ease-in-out;
+}
+
+@keyframes roll-left {
+  from {
+    transform: translateX(0) rotate(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(var(--rolled-distance-negative))
+      rotate(var(--rolled-degree));
+    opacity: 0;
+  }
+}
+
+@keyframes roll-right {
+  from {
+    transform: translateX(0) rotate(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(var(--rolled-distance)) rotate(var(--rolled-degree));
+    opacity: 0;
+  }
+}
+
+@keyframes roll-pulse {
+  0% {
+    transform: rotate(0);
+  }
+  25% {
+    transform: rotate(var(--rolled-degree));
+  }
+  50% {
+    transform: rotate(0);
+  }
+  75% {
+    transform: rotate(var(--rolled-degree-negative));
+  }
+}
+
+@keyframes roll-flash {
+  0% {
+    transform: rotate(0);
+    opacity: 0;
+  }
+  50% {
+    transform: rotate(var(--rolled-degree));
+    opacity: 1;
+  }
+  100% {
+    transform: rotate(0);
+    opacity: 0;
+  }
+}

package/dist/theme/animations/shake.css

@@ -0,0 +1,80 @@
+@theme {
+  --animate-shake: shake 2s ease-in-out;
+  --animate-shake-x: shake-x 0.5s ease-in-out;
+  --animate-shake-y: shake-y 0.5s ease-in-out;
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translateX(var(--shake-amount-negative, -5px))
+      translateY(var(--shake-y-amount-negative, -5px));
+  }
+  20% {
+    transform: translateX(var(--shake-amount, 5px))
+      translateY(var(--shake-y-amount-negative, -5px));
+  }
+  30% {
+    transform: translateX(var(--shake-amount-negative, -5px))
+      translateY(var(--shake-y-amount, 5px));
+  }
+  40% {
+    transform: translateX(var(--shake-amount, 5px))
+      translateY(var(--shake-y-amount, 5px));
+  }
+  50% {
+    transform: translateX(var(--shake-amount-negative, -5px))
+      translateY(var(--shake-y-amount, 5px));
+  }
+  60% {
+    transform: translateX(var(--shake-amount, 5px))
+      translateY(var(--shake-y-amount-negative, -5px));
+  }
+  70% {
+    transform: translateX(var(--shake-amount-negative, -5px))
+      translateY(var(--shake-y-amount-negative, -5px));
+  }
+  80% {
+    transform: translateX(var(--shake-amount, 5px))
+      translateY(var(--shake-y-amount, 5px));
+  }
+  90% {
+    transform: translateX(var(--shake-amount-negative, -5px))
+      translateY(var(--shake-y-amount-negative, -5px));
+  }
+}
+
+@keyframes shake-x {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  25% {
+    transform: translateX(var(--shake-amount-negative, -5px));
+  }
+  50% {
+    transform: translateX(var(--shake-amount, 5px));
+  }
+  75% {
+    transform: translateX(var(--shake-amount-negative, -5px));
+  }
+}
+
+@keyframes shake-y {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  25% {
+    transform: translateY(var(--shake-amount-negative, -5px));
+  }
+  50% {
+    transform: translateY(var(--shake-amount, 5px));
+  }
+  75% {
+    transform: translateY(var(--shake-amount-negative, -5px));
+  }
+}

package/dist/theme/animations/shrink.css

@@ -0,0 +1,46 @@
+@theme {
+  --animate-shrink: shrink 0.2s ease-in-out;
+  --animate-shrink-out: shrink-out 0.2s ease-in-out;
+  --animate-shrink-x: shrink-x 0.2s ease-in-out;
+  --animate-shrink-y: shrink-y 0.2s ease-in-out;
+
+  @keyframes shrink {
+    from {
+      transform: scale(var(--larger-scale));
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  @keyframes shrink-out {
+    from {
+      transform: scale(1);
+      opacity: 1;
+    }
+    to {
+      transform: scale(var(--smaller-scale));
+      opacity: 0;
+    }
+  }
+
+  @keyframes shrink-x {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(var(--larger-scale));
+    }
+  }
+
+  @keyframes shrink-y {
+    from {
+      transform: scaleY(1);
+    }
+    to {
+      transform: scaleY(var(--larger-scale));
+    }
+  }
+}

package/dist/theme/animations/slide.css

@@ -0,0 +1,99 @@
+@theme {
+  --animate-slide-in-right: slide-in-right 0.3s ease-in-out;
+  --animate-slide-in-left: slide-in-left 0.3s ease-in-out;
+  --animate-slide-in-top: slide-in-top 0.3s ease-in-out;
+  --animate-slide-in-bottom: slide-in-bottom 0.3s ease-in-out;
+
+  --animate-slide-out-right: slide-out-right 0.3s ease-in-out;
+  --animate-slide-out-left: slide-out-left 0.3s ease-in-out;
+  --animate-slide-out-top: slide-out-top 0.3s ease-in-out;
+  --animate-slide-out-bottom: slide-out-bottom 0.3s ease-in-out;
+}
+@keyframes slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(var(--slide-amount-negative));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(var(--slide-amount));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(var(--slide-amount-negative));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(var(--slide-amount));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Animaciones slide-out */
+@keyframes slide-out-right {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--slide-amount));
+  }
+}
+
+@keyframes slide-out-left {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(var(--slide-amount-negative));
+  }
+}
+
+@keyframes slide-out-top {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--slide-amount-negative));
+  }
+}
+
+@keyframes slide-out-bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(var(--slide-amount));
+  }
+}

package/dist/theme/animations/wiggle.css

@@ -0,0 +1,46 @@
+@theme {
+  --animate-wiggle: wiggle 1s ease-out;
+  --animate-wiggle-hard: wiggle-hard 0.5s ease-out;
+  --animate-wiggle-soft: wiggle-soft 2s ease-out;
+}
+
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(
+      0deg
+    ); /* Se asegura que empiece y termine en el estado normal */
+  }
+  33% {
+    transform: rotate(var(--rotation));
+  }
+  66% {
+    transform: rotate(var(--rotation-negative));
+  }
+}
+
+@keyframes wiggle-hard {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(calc(2 * var(--rotation)));
+  }
+  66% {
+    transform: rotate(calc(2 * var(--rotation-negative)));
+  }
+}
+
+@keyframes wiggle-soft {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(var(--small-rotation));
+  }
+  66% {
+    transform: rotate(var(--small-rotation-negative));
+  }
+}

package/dist/theme/animations.css

@@ -0,0 +1,11 @@
+@import "./animations/blur.css";
+@import "./animations/fade.css";
+@import "./animations/flip.css";
+@import "./animations/grow.css";
+@import "./animations/pump.css";
+@import "./animations/shake.css";
+@import "./animations/shrink.css";
+@import "./animations/slide.css";
+@import "./animations/roll.css";
+@import "./animations/wiggle.css";
+@import "./animations/customs.css";

package/dist/theme/colors.css

@@ -0,0 +1,114 @@
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  --color-error-50: oklch(0.98 0.06 4.46); /* #fef2f2 */
+  --color-error-100: oklch(0.97 0.06 4.78); /* #fee2e2 */
+  --color-error-200: oklch(88.45% 0.059 18.33); /* #fecaca */
+  --color-error-300: oklch(80.77% 0.103 19.57); /* #fca5a5 */
+  --color-error-400: oklch(71.06% 0.166 22.22); /* #f87171 */
+  --color-error-500: oklch(63.68% 0.208 25.33); /* #ef4444 */
+  --color-error-600: oklch(57.71% 0.215 27.33); /* #dc2626 */
+  --color-error-700: oklch(50.54% 0.190 27.52); /* #b91c1c */
+  --color-error-800: oklch(44.37% 0.161 26.90); /* #991b1b */
+  --color-error-900: oklch(39.58% 0.133 25.72); /* #7f1d1d */
+  --color-error-950: oklch(0.25 0.08 24.0); /* #450a0a */
+
+	--color-warning-50: oklch(0.98 0.14 40.23); /* #fff7ed */
+	--color-warning-100: oklch(0.97 0.18 41.77); /* #ffedd5 */
+	--color-warning-200: oklch(0.94 0.23 44.37); /* #fed7aa */
+	--color-warning-300: oklch(0.92 0.27 46.99); /* #fdba74 */
+	--color-warning-400: oklch(0.85 0.33 52.67); /* #fb923c */
+	--color-warning-500: oklch(0.79 0.35 57.79); /* #f97316 */
+	--color-warning-600: oklch(0.75 0.37 61.33); /* #ea580c */
+	--color-warning-700: oklch(0.65 0.33 67.72); /* #c2410c */
+	--color-warning-800: oklch(0.58 0.28 70.64); /* #9a3412 */
+	--color-warning-900: oklch(0.49 0.24 72.94); /* #7c2d12 */
+	--color-warning-950: oklch(0.29 0.17 74.59); /* #431407 */
+
+	--color-success-50: oklch(0.98 0.02 145.0); /* #F5FDF6 */
+	--color-success-100: oklch(0.95 0.04 145.2); /* #ECFAED */
+	--color-success-200: oklch(0.91 0.08 145.5); /* #D8F5D5 */
+	--color-success-300: oklch(0.86 0.12 145.7); /* #C4F0BC */
+	--color-success-400: oklch(0.8 0.15 145.9); /* #B0EBA4 */
+	--color-success-500: oklch(0.68 0.19 146.0); /* #4CAF50 */
+	--color-success-600: oklch(0.6 0.18 146.2); /* #42A347 */
+	--color-success-700: oklch(0.52 0.17 146.5); /* #378B3B */
+	--color-success-800: oklch(0.42 0.14 146.7); /* #2C7230 */
+	--color-success-900: oklch(0.32 0.11 147.0); /* #225926 */
+
+	--color-info-50: oklch(0.97 0.02 240.0); /* #e9f5fe */
+	--color-info-100: oklch(0.91 0.07 240.5); /* #badefb */
+	--color-info-200: oklch(0.86 0.1 240.8); /* #99cff9 */
+	--color-info-300: oklch(0.8 0.15 241.2); /* #6ab9f7 */
+	--color-info-400: oklch(0.75 0.18 241.5); /* #4dabf5 */
+	--color-info-500: oklch(0.7 0.22 242.0); /* #2196f3 */
+	--color-info-600: oklch(0.65 0.2 242.3); /* #1e89dd */
+	--color-info-700: oklch(0.55 0.18 242.7); /* #176bad */
+	--color-info-800: oklch(0.45 0.15 243.0); /* #125386 */
+	--color-info-900: oklch(0.35 0.12 243.5); /* #0e3f66 */
+	--color-info-950: oklch(0.2 0.07 244.0);
+
+	--color-primary-50: oklch(0.97 0.03 193.5); /* #E6FEFF */
+	--color-primary-100: oklch(0.89 0.14 193.7); /* #8FF2F8 */
+	--color-primary-200: oklch(0.82 0.21 193.3); /* #5DD8DF */
+	--color-primary-300: oklch(0.75 0.22 193.1); /* #3ABCC3 */
+	--color-primary-400: oklch(0.69 0.23 192.9); /* #00A1A7 */
+	--color-primary-500: oklch(0.61 0.22 192.7); /* #00848A */
+	--color-primary-600: oklch(0.52 0.18 192.4); /* #00696E */
+	--color-primary-700: oklch(0.45 0.15 192.2); /* #005C60 */
+	--color-primary-800: oklch(0.36 0.12 192.0); /* #004346 */
+	--color-primary-900: oklch(0.26 0.08 191.8); /* #002B2D */
+	--color-primary-950: oklch(0.14 0.05 191.6);
+
+	--color-secondary-25: oklch(0.98 0 0);
+	--color-secondary-50: oklch(98.51% 0 0); /* #fafafa */
+	--color-secondary-100: oklch(97.02% 0 0); /* #f5f5f5 */
+	--color-secondary-200: oklch(92.19% 0 0); /* #e5e5e5 */
+	--color-secondary-300: oklch(86.99% 0 0); /* #d4d4d4 */
+	--color-secondary-400: oklch(71.55% 0 0); /* #a3a3a3 */
+	--color-secondary-500: oklch(55.55% 0 0); /* #737373 */
+	--color-secondary-600: oklch(43.86% 0 0); /* #525252 */
+	--color-secondary-700: oklch(37.15% 0 0); /* #404040 */
+	--color-secondary-800: oklch(26.86% 0 0); /* #262626 */
+	--color-secondary-900: oklch(20.46% 0 0); /* #171717 */
+	--color-secondary-950: oklch(14.48% 0 0); /* #0a0a0a */
+
+	--color-background: oklch(1 0 1);
+}
+@theme inline {
+  --color-dark: var(--color-secondary-950);
+	--color-light: var(--color-secondary-25);	
+}
+
+
+:root{
+ 	--background: var(--color-light);
+ 	--foreground: var(--color-dark);
+	--background-onPrimary: oklch(0.97 0 0);
+	--muted: var(--color-secondary-200);
+
+}
+
+
+.dark{
+ 	--background: var(--color-dark);
+ 	--foreground: var(--color-light);
+	--background-onPrimary: oklch(0.20 0 1);
+	--muted: var(--color-secondary-700);
+}
+ 
+@theme inline {
+	--color-primary: var(--color-primary-500);
+	--color-secondary: var(--color-secondary-500);
+	--color-info: var(--color-info-500);
+	--color-success: var(--color-success-500);
+	--color-warning: var(--color-warning-500);
+	--color-error: var(--color-error-500);
+
+	--color-background: var(--background);
+	--color-canvas: var(--background);
+  --color-foreground: var(--foreground);
+	--color-background-onPrimary: var(--background-onPrimary);
+	--color-muted: var(--muted);
+}
+

package/dist/theme/components/custom-select.css

@@ -0,0 +1,147 @@
+.custom-select {
+
+  @apply pl-2 pr-1 text-sm text-foreground/80 bg-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-secondary focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50 items-center flex;
+
+  &, &::picker(select) {
+    appearance: base-select;
+  }
+ 
+  
+  /* enable transitions in the drop down */
+  &::picker(select) {
+    transition: 
+      opacity .2s ease,
+      transform .2s var(--ease-out-3), 
+      display .2s allow-discrete, 
+      overlay .2s allow-discrete
+    ;
+  }
+  
+  &::picker-icon {
+    display: none;
+  }
+  
+  /* set the off stage styles */
+  &:not(:open)::picker(select) {
+    opacity: 0;
+    transform: scale(.95);
+  }
+  
+  /* set the on stage styles */
+  &:open::picker(select) {
+    opacity: 1;
+    transform: scale(1);
+  }
+  
+  /* transition the selected option changing */
+  selectedcontent > * {
+    transition: 
+      transform 1s 
+      display 1s allow-discrete, 
+      opacity 1s;
+    
+    @starting-style {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    opacity: 1;
+
+    .description{
+      @apply sr-only;
+    }
+  }
+  
+  /* customize the invoking button */
+  > button {
+  
+    &:focus-visible {
+      outline-offset: -3px;
+    }
+
+    &:has(selectedcontent) {
+      @apply flex gap-2 items-center;
+    }
+    & svg {
+      inline-size: 2ch;
+      transition: transform .3s 
+    }
+  }
+  
+  &:open > button svg {
+    transform: rotate(.5turn);
+  }
+  
+  /* reset some picker styles */
+  &::picker(select) {
+    @apply shadow bg-canvas/80 backdrop-blur-md;
+ 
+    border-radius: var(--radius-2);
+    padding: 0;
+    margin-block: 5px;
+    box-shadow: var(--shadow-5);
+    
+    @media (forced-colors: none) {
+      border: none;
+    }
+  }
+  
+  /* customize the picker contents */
+  > .dropdown-content {
+    min-inline-size: calc(anchor-size(self-inline) + 20px);
+    scroll-behavior: smooth;
+    @apply divide-y divide-foreground/10 py-2 rounded-lg shadow border border-foreground/20; 
+    
+    &.scrollable {
+      max-block-size: 20lh;
+      scrollbar-width: thin;
+    }
+
+    & hr {
+      @apply my-2 border-foreground/10;
+    }
+
+    & label {
+      display: block;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    & option {
+    @apply px-4 py-2 text-sm text-foreground/80 items-center gap-4  justify-start;
+
+      outline-offset: -1px;
+      
+      &::checkmark {
+        @apply sr-only;
+      }
+
+      &:focus-visible {
+        outline-offset: -1px;
+      }
+
+      &:is(:focus, :hover):not(:disabled) {  
+      @apply bg-foreground/5 outline-none outline-foreground/20 cursor-pointer;
+      }
+
+      &:is(:checked):not(:disabled) {  
+        @apply bg-foreground/10;
+      }
+      &:has(.description) {
+        @apply grid justify-start gap-2;
+        & .description {
+          @apply text-xs text-foreground/60;
+        }
+      }
+    
+      option:is(:checked) & .description {
+        font-weight: normal;
+      }
+    > div {
+        @apply flex flex-col gap-1;
+      }
+    
+    }
+  }
+}

package/dist/theme/components/date-input.css

@@ -0,0 +1,15 @@
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  -webkit-appearance: none;
+  appearance: none;
+  opacity: 0;
+  display: none;
+  width: 0;
+  height: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
+  background: transparent;
+}

package/dist/theme/components/index.css

@@ -0,0 +1,2 @@
+@import "./date-input.css";
+@import "./custom-select.css";