@tenerife.music/ui 1.2.1 → 2.0.0

package/dist/styles.css

@@ -430,6 +430,9 @@ body {
 .visible {
   visibility: visible;
 }
+.collapse {
+  visibility: collapse;
+}
 .static {
   position: static;
 }
@@ -482,6 +485,9 @@ body {
 .left-\[50\%\] {
   left: 50%;
 }
+.left-full {
+  left: 100%;
+}
 .left-md {
   left: 1rem;
 }
@@ -515,6 +521,9 @@ body {
 .top-3xl {
   top: 4rem;
 }
+.top-4 {
+  top: 1rem;
+}
 .top-\[50\%\] {
   top: 50%;
 }
@@ -542,6 +551,9 @@ body {
 .z-10 {
   z-index: 10;
 }
+.z-30 {
+  z-index: 30;
+}
 .z-40 {
   z-index: 40;
 }
@@ -554,6 +566,15 @@ body {
 .z-\[1\] {
   z-index: 1;
 }
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
 .order-first {
   order: -9999;
 }
@@ -582,6 +603,10 @@ body {
   margin-left: auto;
   margin-right: auto;
 }
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
 .my-sm {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -617,6 +642,9 @@ body {
 .ml-1 {
   margin-left: 0.25rem;
 }
+.ml-1\.5 {
+  margin-left: 0.375rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -647,6 +675,12 @@ body {
 .mt-2 {
   margin-top: 0.5rem;
 }
+.mt-4 {
+  margin-top: 1rem;
+}
+.mt-8 {
+  margin-top: 2rem;
+}
 .mt-lg {
   margin-top: 1.5rem;
 }
@@ -704,6 +738,9 @@ body {
 .hidden {
   display: none;
 }
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
 .aspect-video {
   aspect-ratio: 16 / 9;
 }
@@ -739,10 +776,6 @@ body {
   width: 1rem;
   height: 1rem;
 }
-.size-5 {
-  width: 1.25rem;
-  height: 1.25rem;
-}
 .size-8 {
   width: 2rem;
   height: 2rem;
@@ -750,6 +783,9 @@ body {
 .h-0\.5 {
   height: 0.125rem;
 }
+.h-1 {
+  height: 0.25rem;
+}
 .h-1\.5 {
   height: 0.375rem;
 }
@@ -762,6 +798,9 @@ body {
 .h-12 {
   height: 3rem;
 }
+.h-14 {
+  height: 3.5rem;
+}
 .h-16 {
   height: 4rem;
 }
@@ -816,9 +855,18 @@ body {
 .h-\[150px\] {
   height: 150px;
 }
+.h-\[1px\] {
+  height: 1px;
+}
 .h-\[200px\] {
   height: 200px;
 }
+.h-\[250px\] {
+  height: 250px;
+}
+.h-\[2px\] {
+  height: 2px;
+}
 .h-\[300px\] {
   height: 300px;
 }
@@ -828,6 +876,9 @@ body {
 .h-\[40rem\] {
   height: 40rem;
 }
+.h-\[50px\] {
+  height: 50px;
+}
 .h-\[calc\(\.\.\.\)\] {
   height: calc(...);
 }
@@ -867,39 +918,42 @@ body {
 .max-h-\[100vh\] {
   max-height: 100vh;
 }
-.max-h-\[384px\] {
-  max-height: 384px;
-}
 .max-h-\[400px\] {
   max-height: 400px;
 }
+.max-h-\[60vh\] {
+  max-height: 60vh;
+}
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
 .max-h-\[calc\(100vh-2rem\)\] {
   max-height: calc(100vh - 2rem);
 }
-.max-h-full {
-  max-height: 100%;
-}
 .max-h-screen {
   max-height: 100vh;
 }
+.min-h-20 {
+  min-height: 5rem;
+}
 .min-h-\[200px\] {
   min-height: 200px;
 }
 .min-h-\[3rem\] {
   min-height: 3rem;
 }
-.min-h-\[80px\] {
-  min-height: 80px;
-}
 .min-h-screen {
   min-height: 100vh;
 }
 .w-0\.5 {
   width: 0.125rem;
 }
+.w-1 {
+  width: 0.25rem;
+}
+.w-1\.5 {
+  width: 0.375rem;
+}
 .w-1\/2 {
   width: 50%;
 }
@@ -984,6 +1038,9 @@ body {
 .w-96 {
   width: 24rem;
 }
+.w-\[100px\] {
+  width: 100px;
+}
 .w-\[123px\] {
   width: 123px;
 }
@@ -1033,8 +1090,8 @@ body {
 .min-w-56 {
   min-width: 14rem;
 }
-.min-w-\[128px\] {
-  min-width: 128px;
+.min-w-\[200px\] {
+  min-width: 200px;
 }
 .min-w-\[8rem\] {
   min-width: 8rem;
@@ -1073,6 +1130,9 @@ body {
 .max-w-xl {
   max-width: 36rem;
 }
+.max-w-xs {
+  max-width: 20rem;
+}
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -1140,14 +1200,14 @@ body {
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
   50% {
-    transform: translateY(0);
+    transform: none;
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
 .animate-bounce {
-  animation: bounce 1s linear infinite;
+  animation: bounce 1s infinite;
 }
-@keyframes fadeIn {
+@keyframes fade-in {
   from {
     opacity: 0;
   }
@@ -1155,10 +1215,10 @@ body {
     opacity: 1;
   }
 }
-.animate-fadeIn {
-  animation: fadeIn 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-fade-in {
+  animation: fade-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes fadeOut {
+@keyframes fade-out {
   from {
     opacity: 1;
   }
@@ -1166,8 +1226,73 @@ body {
     opacity: 0;
   }
 }
-.animate-fadeOut {
-  animation: fadeOut 150ms cubic-bezier(0.4, 0, 1, 1);
+.animate-fade-out {
+  animation: fade-out 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-scale-in {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+.animate-fade-scale-in {
+  animation: fade-scale-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-down-in {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.animate-fade-slide-down-in {
+  animation: fade-slide-down-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-left-in {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.animate-fade-slide-left-in {
+  animation: fade-slide-left-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-right-in {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+.animate-fade-slide-right-in {
+  animation: fade-slide-right-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+@keyframes fade-slide-up-in {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.animate-fade-slide-up-in {
+  animation: fade-slide-up-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 .animate-none {
   animation: none;
@@ -1179,20 +1304,17 @@ body {
   }
 }
 .animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) cubic-bezier(0, 0, 0.2, 1) infinite;
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 @keyframes pulse {
   50% {
-    opacity: 0.5;
-  }
-  0%, 100% {
-    opacity: 1;
+    opacity: .5;
   }
 }
 .animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes scaleIn {
+@keyframes scale-in {
   from {
     transform: scale(0.95);
     opacity: 0;
@@ -1202,10 +1324,10 @@ body {
     opacity: 1;
   }
 }
-.animate-scaleIn {
-  animation: scaleIn 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-scale-in {
+  animation: scale-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes scaleOut {
+@keyframes scale-out {
   from {
     transform: scale(1);
     opacity: 1;
@@ -1215,24 +1337,10 @@ body {
     opacity: 0;
   }
 }
-.animate-scaleOut {
-  animation: scaleOut 150ms cubic-bezier(0.4, 0, 1, 1);
+.animate-scale-out {
+  animation: scale-out 150ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes shake {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  10%, 30%, 50%, 70%, 90% {
-    transform: translateX(-4px);
-  }
-  20%, 40%, 60%, 80% {
-    transform: translateX(4px);
-  }
-}
-.animate-shake {
-  animation: shake 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-}
-@keyframes slideInDown {
+@keyframes slide-down-in {
   from {
     transform: translateY(-100%);
     opacity: 0;
@@ -1242,12 +1350,12 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInDown {
-  animation: slideInDown 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-down-in {
+  animation: slide-down-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInLeft {
+@keyframes slide-left-in {
   from {
-    transform: translateX(-100%);
+    transform: translateX(100%);
     opacity: 0;
   }
   to {
@@ -1255,12 +1363,12 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInLeft {
-  animation: slideInLeft 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-left-in {
+  animation: slide-left-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInRight {
+@keyframes slide-right-in {
   from {
-    transform: translateX(100%);
+    transform: translateX(-100%);
     opacity: 0;
   }
   to {
@@ -1268,10 +1376,10 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInRight {
-  animation: slideInRight 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-right-in {
+  animation: slide-right-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
-@keyframes slideInUp {
+@keyframes slide-up-in {
   from {
     transform: translateY(100%);
     opacity: 0;
@@ -1281,16 +1389,13 @@ body {
     opacity: 1;
   }
 }
-.animate-slideInUp {
-  animation: slideInUp 300ms cubic-bezier(0, 0, 0.2, 1);
+.animate-slide-up-in {
+  animation: slide-up-in 250ms cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 @keyframes spin {
   to {
     transform: rotate(360deg);
   }
-  from {
-    transform: rotate(0deg);
-  }
 }
 .animate-spin {
   animation: spin 1s linear infinite;
@@ -1307,6 +1412,9 @@ body {
 .cursor-pointer {
   cursor: pointer;
 }
+.touch-none {
+  touch-action: none;
+}
 .select-none {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1356,6 +1464,15 @@ body {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
@@ -1422,6 +1539,9 @@ body {
 .justify-evenly {
   justify-content: space-evenly;
 }
+.gap-1 {
+  gap: 0.25rem;
+}
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1455,6 +1575,21 @@ body {
 .gap-xs {
   gap: 0.25rem;
 }
+.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-0.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(-0.75rem * calc(1 - var(--tw-space-x-reverse)));
+}
+.-space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1rem * var(--tw-space-x-reverse));
+  margin-left: calc(-1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-x-sm > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1465,6 +1600,11 @@ body {
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
   margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1692,6 +1832,9 @@ body {
 .border-destructive\/20 {
   border-color: hsl(var(--destructive) / 0.2);
 }
+.border-destructive\/30 {
+  border-color: hsl(var(--destructive) / 0.3);
+}
 .border-destructive\/50 {
   border-color: hsl(var(--destructive) / 0.5);
 }
@@ -1710,9 +1853,18 @@ body {
 .border-destructive\/95 {
   border-color: hsl(var(--destructive) / 0.95);
 }
+.border-error\/20 {
+  border-color: hsl(var(--semantic-error) / 0.2);
+}
+.border-error\/30 {
+  border-color: hsl(var(--semantic-error) / 0.3);
+}
 .border-info\/20 {
   border-color: hsl(var(--semantic-info) / 0.2);
 }
+.border-info\/30 {
+  border-color: hsl(var(--semantic-info) / 0.3);
+}
 .border-input {
   border-color: hsl(var(--input));
 }
@@ -1722,9 +1874,15 @@ body {
 .border-primary {
   border-color: hsl(var(--tm-primary));
 }
+.border-primary-600 {
+  border-color: hsl(var(--primary-600));
+}
 .border-primary\/20 {
   border-color: hsl(var(--tm-primary) / 0.2);
 }
+.border-primary\/30 {
+  border-color: hsl(var(--tm-primary) / 0.3);
+}
 .border-primary\/50 {
   border-color: hsl(var(--tm-primary) / 0.5);
 }
@@ -1746,6 +1904,9 @@ body {
 .border-secondary {
   border-color: hsl(var(--tm-secondary));
 }
+.border-secondary-600 {
+  border-color: hsl(var(--secondary-600));
+}
 .border-secondary\/20 {
   border-color: hsl(var(--tm-secondary) / 0.2);
 }
@@ -1770,12 +1931,18 @@ body {
 .border-success\/20 {
   border-color: hsl(var(--semantic-success) / 0.2);
 }
+.border-success\/30 {
+  border-color: hsl(var(--semantic-success) / 0.3);
+}
 .border-transparent {
   border-color: transparent;
 }
 .border-warning\/20 {
   border-color: hsl(var(--semantic-warning) / 0.2);
 }
+.border-warning\/30 {
+  border-color: hsl(var(--semantic-warning) / 0.3);
+}
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
@@ -1906,8 +2073,11 @@ body {
 .bg-destructive\/95 {
   background-color: hsl(var(--destructive) / 0.95);
 }
-.bg-green-500\/10 {
-  background-color: rgb(34 197 94 / 0.1);
+.bg-error\/10 {
+  background-color: hsl(var(--semantic-error) / 0.1);
+}
+.bg-error\/5 {
+  background-color: hsl(var(--semantic-error) / 0.05);
 }
 .bg-info {
   background-color: hsl(var(--semantic-info));
@@ -1915,6 +2085,9 @@ body {
 .bg-info\/10 {
   background-color: hsl(var(--semantic-info) / 0.1);
 }
+.bg-info\/5 {
+  background-color: hsl(var(--semantic-info) / 0.05);
+}
 .bg-muted {
   background-color: hsl(var(--muted));
 }
@@ -1930,9 +2103,18 @@ body {
 .bg-primary {
   background-color: hsl(var(--tm-primary));
 }
+.bg-primary-200 {
+  background-color: hsl(var(--primary-200));
+}
+.bg-primary-600 {
+  background-color: hsl(var(--primary-600));
+}
 .bg-primary\/10 {
   background-color: hsl(var(--tm-primary) / 0.1);
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--tm-primary) / 0.2);
+}
 .bg-primary\/50 {
   background-color: hsl(var(--tm-primary) / 0.5);
 }
@@ -1958,6 +2140,12 @@ body {
 .bg-secondary {
   background-color: hsl(var(--tm-secondary));
 }
+.bg-secondary-200 {
+  background-color: hsl(var(--secondary-200));
+}
+.bg-secondary-600 {
+  background-color: hsl(var(--secondary-600));
+}
 .bg-secondary\/10 {
   background-color: hsl(var(--tm-secondary) / 0.1);
 }
@@ -1988,6 +2176,12 @@ body {
 .bg-success\/10 {
   background-color: hsl(var(--semantic-success) / 0.1);
 }
+.bg-success\/20 {
+  background-color: hsl(var(--semantic-success) / 0.2);
+}
+.bg-success\/5 {
+  background-color: hsl(var(--semantic-success) / 0.05);
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -2009,6 +2203,11 @@ body {
 .bg-gradient-to-t {
   background-image: linear-gradient(to top, var(--tw-gradient-stops));
 }
+.from-accent {
+  --tw-gradient-from: hsl(var(--tm-accent)) var(--tw-gradient-from-position);
+  --tw-gradient-to: hsl(var(--tm-accent) / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .from-accent-500 {
   --tw-gradient-from: hsl(var(--accent-500)) var(--tw-gradient-from-position);
   --tw-gradient-to: hsl(var(--accent-500) / 0) var(--tw-gradient-to-position);
@@ -2047,6 +2246,9 @@ body {
 .to-muted\/50 {
   --tw-gradient-to: hsl(var(--muted) / 0.5) var(--tw-gradient-to-position);
 }
+.to-primary {
+  --tw-gradient-to: hsl(var(--tm-primary)) var(--tw-gradient-to-position);
+}
 .to-primary-600 {
   --tw-gradient-to: hsl(var(--primary-600)) var(--tw-gradient-to-position);
 }
@@ -2072,19 +2274,33 @@ body {
 .stroke-\[1px\] {
   stroke-width: 1px;
 }
+.object-contain {
+  -o-object-fit: contain;
+  object-fit: contain;
+}
 .object-cover {
   -o-object-fit: cover;
   object-fit: cover;
 }
+.object-fill {
+  -o-object-fit: fill;
+  object-fit: fill;
+}
 .p-0 {
   padding: 0;
 }
 .p-0\.5 {
   padding: 0.125rem;
 }
+.p-1 {
+  padding: 0.25rem;
+}
 .p-2 {
   padding: 0.5rem;
 }
+.p-3 {
+  padding: 0.75rem;
+}
 .p-4 {
   padding: 1rem;
 }
@@ -2117,6 +2333,10 @@ body {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2149,6 +2369,10 @@ body {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -2209,6 +2433,9 @@ body {
 .pt-8 {
   padding-top: 2rem;
 }
+.pt-lg {
+  padding-top: 1.5rem;
+}
 .pt-sm {
   padding-top: 0.5rem;
 }
@@ -2329,6 +2556,9 @@ body {
 .font-semibold {
   font-weight: 600;
 }
+.uppercase {
+  text-transform: uppercase;
+}
 .capitalize {
   text-transform: capitalize;
 }
@@ -2374,6 +2604,9 @@ body {
 .text-\[hsl\(var\(--accent-foreground\)\)\] {
   color: hsl(var(--accent-foreground));
 }
+.text-\[hsl\(var\(--card-foreground\)\)\] {
+  color: hsl(var(--card-foreground));
+}
 .text-\[hsl\(var\(--destructive\)\)\] {
   color: hsl(var(--destructive));
 }
@@ -2447,6 +2680,9 @@ body {
 .text-foreground\/50 {
   color: hsl(var(--foreground) / 0.5);
 }
+.text-foreground\/60 {
+  color: hsl(var(--foreground) / 0.6);
+}
 .text-foreground\/70 {
   color: hsl(var(--foreground) / 0.7);
 }
@@ -2465,9 +2701,9 @@ body {
 .text-foreground\/95 {
   color: hsl(var(--foreground) / 0.95);
 }
-.text-green-700 {
+.text-gray-600 {
   --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
+  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
 }
 .text-info {
   color: hsl(var(--semantic-info));
@@ -2774,50 +3010,26 @@ body {
 .duration-200 {
   transition-duration: 200ms;
 }
-.duration-250 {
-  transition-duration: 250ms;
-}
 .duration-300 {
   transition-duration: 300ms;
 }
-.duration-400 {
-  transition-duration: 400ms;
-}
 .duration-500 {
   transition-duration: 500ms;
 }
-.duration-600 {
-  transition-duration: 600ms;
-}
 .duration-700 {
   transition-duration: 700ms;
 }
 .duration-75 {
   transition-duration: 75ms;
 }
-.duration-800 {
-  transition-duration: 800ms;
-}
 .duration-fast {
   transition-duration: 150ms;
 }
 .duration-normal {
-  transition-duration: 300ms;
+  transition-duration: 250ms;
 }
 .duration-slow {
-  transition-duration: 500ms;
-}
-.duration-slower {
-  transition-duration: 700ms;
-}
-.duration-slowest {
-  transition-duration: 1000ms;
-}
-.ease-bounce {
-  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-.ease-elastic {
-  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition-duration: 350ms;
 }
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
@@ -2831,6 +3043,78 @@ body {
 .ease-out {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.tm-motion-fade-in {
+  animation: fade-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-out {
+  animation: fade-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-scale-in {
+  animation: scale-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-scale-out {
+  animation: scale-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-up {
+  animation: slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-down {
+  animation: slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-left {
+  animation: slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-slide-right {
+  animation: slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-scale {
+  animation: fade-scale-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-up {
+  animation: fade-slide-up-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-down {
+  animation: fade-slide-down-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-left {
+  animation: fade-slide-left-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-right {
+  animation: fade-slide-right-in var(--motion-duration-normal) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-scale-out {
+  animation: fade-scale-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-up-out {
+  animation: fade-slide-up-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-down-out {
+  animation: fade-slide-down-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-left-out {
+  animation: fade-slide-left-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-fade-slide-right-out {
+  animation: fade-slide-right-out var(--motion-duration-fast) var(--motion-easing-standard) both;
+}
+.tm-motion-hover-lift {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-hover-lift:hover {
+  transform: scale(1.05) translateY(-0.3125rem);
+}
+.tm-motion-hover-scale {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-hover-scale:hover {
+  transform: scale(1.05);
+}
+.tm-motion-tap-scale {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
+}
+.tm-motion-tap-scale:active {
+  transform: scale(0.95);
+}
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -2957,6 +3241,9 @@ body {
 .hover\:bg-accent\/80:hover {
   background-color: hsl(var(--tm-accent) / 0.8);
 }
+.hover\:bg-background\/50:hover {
+  background-color: hsl(var(--background) / 0.5);
+}
 .hover\:bg-card\/95:hover {
   background-color: hsl(var(--card) / 0.95);
 }
@@ -3116,6 +3403,9 @@ body {
 .focus-visible\:ring-ring:focus-visible {
   --tw-ring-color: hsl(var(--ring));
 }
+.focus-visible\:ring-secondary-600:focus-visible {
+  --tw-ring-color: hsl(var(--secondary-600));
+}
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -3275,6 +3565,9 @@ body {
 .data-\[orientation\=vertical\]\:flex-col[data-orientation=vertical] {
   flex-direction: column;
 }
+.data-\[state\=open\]\:border-ring[data-state=open] {
+  border-color: hsl(var(--ring));
+}
 .data-\[active\]\:bg-accent\/50[data-active] {
   background-color: hsl(var(--tm-accent) / 0.5);
 }
@@ -3284,12 +3577,18 @@ body {
 .data-\[state\=open\]\:bg-accent\/50[data-state=open] {
   background-color: hsl(var(--tm-accent) / 0.5);
 }
+.data-\[placeholder\]\:text-foreground[data-placeholder] {
+  color: hsl(var(--foreground));
+}
 .data-\[state\=open\]\:text-muted-foreground[data-state=open] {
   color: hsl(var(--muted-foreground));
 }
 .data-\[disabled\]\:opacity-50[data-disabled] {
   opacity: 0.5;
 }
+.data-\[placeholder\]\:opacity-70[data-placeholder] {
+  opacity: 0.7;
+}
 .data-\[swipe\=move\]\:transition-none[data-swipe=move] {
   transition-property: none;
 }
@@ -3302,9 +3601,26 @@ body {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.dark\:text-green-400:is([data-mode=night] *) {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity, 1));
+.dark\:border-primary-500:is([data-mode=night] *) {
+  border-color: hsl(var(--primary-500));
+}
+.dark\:border-secondary-500:is([data-mode=night] *) {
+  border-color: hsl(var(--secondary-500));
+}
+.dark\:bg-primary-500:is([data-mode=night] *) {
+  background-color: hsl(var(--primary-500));
+}
+.dark\:bg-primary-800:is([data-mode=night] *) {
+  background-color: hsl(var(--primary-800));
+}
+.dark\:bg-secondary-500:is([data-mode=night] *) {
+  background-color: hsl(var(--secondary-500));
+}
+.dark\:bg-secondary-800:is([data-mode=night] *) {
+  background-color: hsl(var(--secondary-800));
+}
+.dark\:focus-visible\:ring-secondary-500:focus-visible:is([data-mode=night] *) {
+  --tw-ring-color: hsl(var(--secondary-500));
 }
 @media (min-width: 640px) {
   .sm\:grid-cols-2 {
@@ -3367,8 +3683,8 @@ body {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
+  .lg\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
   .lg\:gap-xl {
     gap: 2rem;