carfdevcss 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carfdevcss",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Tailwind CSS adapter for carfdev design system",
   "style": "./src/index.css",
   "exports": {

package/src/index.css

@@ -518,6 +518,8 @@
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
+    --animate-bouncing: bouncing 1s ease-in-out both;
+    --animate-fade-in-up: fade-in-up 0.6s ease-in-out both;
 
     @keyframes spin {
       to {
@@ -552,6 +554,29 @@
       }
     }
 
+    @keyframes bouncing {
+      0% {
+        transform: translateY(0);
+      }
+      50% {
+        transform: translateY(-10px);
+      }
+      100% {
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes fade-in-up {
+      0% {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
     --blur-xs: 4px;
     --blur-sm: 8px;
     --blur-md: 12px;
@@ -853,3 +878,135 @@
 @layer utilities {
   @tailwind utilities;
 }
+
+/* ============================================
+   Utility Classes - Animation Delay
+   ============================================ */
+
+@utility animate-delay-* {
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value(--tw-anim-delay-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Duration
+   ============================================ */
+
+@utility animate-duration-* {
+  animation-duration: calc(--value(integer) * 1ms);
+  animation-duration: --value(--tw-anim-duration-*, [duration], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Fill Mode
+   ============================================ */
+
+@utility animate-fill-mode-* {
+  animation-fill-mode: --value(--tw-anim-fill-mode-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Steps
+   ============================================ */
+
+@utility animate-steps-* {
+  animation-timing-function: steps(
+    --value(--tw-anim-steps-*, integer, [integer])
+  );
+}
+
+/* ============================================
+   Utility Classes - Animation Timing Functions
+   ============================================ */
+
+@utility animate-ease {
+  animation-timing-function: ease;
+}
+
+@utility animate-ease-in {
+  animation-timing-function: ease-in;
+}
+
+@utility animate-ease-out {
+  animation-timing-function: ease-out;
+}
+
+@utility animate-ease-in-out {
+  animation-timing-function: ease-in-out;
+}
+
+@utility animate-linear {
+  animation-timing-function: linear;
+}
+
+/* ============================================
+   Utility Classes - Animation Bezier Curves
+   ============================================ */
+
+@utility animate-bezier-* {
+  animation-timing-function: --value(--tw-anim-bezier-*, [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Direction
+   ============================================ */
+
+@utility animate-direction-normal {
+  animation-direction: normal;
+}
+
+@utility animate-direction-reverse {
+  animation-direction: reverse;
+}
+
+@utility animate-direction-alternate {
+  animation-direction: alternate;
+}
+
+@utility animate-direction-alternate-reverse {
+  animation-direction: alternate-reverse;
+}
+
+/* ============================================
+   Utility Classes - Animation Play State
+   ============================================ */
+
+@utility animate-play-running {
+  animation-play-state: running;
+}
+
+@utility animate-play-paused {
+  animation-play-state: paused;
+}
+
+/* ============================================
+   Utility Classes - Animation Timeline
+   ============================================ */
+
+@utility timeline-* {
+  animation-timeline: --value(--tw-timeline-*, [ident], [*]) !important;
+}
+
+/* ============================================
+   Utility Classes - Scroll Timeline Axis
+   ============================================ */
+
+@utility scroll-timeline-axis-* {
+  scroll-timeline-axis: --value(--tw-scroll-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - View Timeline Axis
+   ============================================ */
+
+@utility view-timeline-axis-* {
+  view-timeline-axis: --value(--tw-view-timeline-axis-*, [ident], [*]);
+}
+
+/* ============================================
+   Utility Classes - Animation Range
+   ============================================ */
+
+@utility animate-range-* {
+  animation-range: --value(--tw-anim-range-*, [*]);
+}