feat: countdown now supports 0 to 999 with dynamic width

Author: saadeghi

packages/daisyui/src/components/countdown.css

@@ -5,28 +5,43 @@
   }
 
   & > * {
-    @apply invisible relative inline-block overflow-y-hidden tabular-nums;
+    @apply invisible relative inline-block overflow-y-hidden;
+    transition: width 0.4s ease-out 0.2s;
     height: 1em;
-    min-width: 2ch;
-    --value-v: calc(mod(max(0, var(--value)), 100));
-    --value-1: calc(round(to-zero, var(--value-v) / 10, 1));
+    --value-v: calc(mod(max(0, var(--value)), 1000));
+    --value-hundreds: calc(round(to-zero, var(--value-v) / 100, 1));
+    --value-tens: calc(round(to-zero, mod(var(--value-v), 100) / 10, 1));
+    --value-ones: calc(mod(var(--value-v), 10));
+    --show-hundreds: clamp(0, var(--value-hundreds), 1);
+    --show-tens: clamp(0, var(--value-tens) + var(--show-hundreds), 1);
+    --first-digits: calc(round(to-zero, var(--value-v) / 10, 1));
+    width: calc(1ch + var(--show-tens) * 1ch + var(--show-hundreds) * 1ch);
 
     &:before,
     &:after {
       @apply visible absolute;
-      content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A";
+      font-variant-numeric: tabular-nums;
       white-space: pre;
       text-align: center;
-      transition: all 1s cubic-bezier(1, 0, 0, 1);
+      transition:
+        all 1s cubic-bezier(1, 0, 0, 1),
+        width 0.2s ease-out 0.2s,
+        opacity 0.2s ease-out 0.2s;
     }
 
     &:before {
-      top: calc(var(--value-1) * -1em);
+      content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99\A";
+      width: calc(1ch + var(--show-hundreds) * 1ch);
+      top: calc(var(--first-digits) * -1em);
       inset-inline-start: 0;
+      text-align: end;
+      opacity: var(--show-tens);
     }
 
     &:after {
-      top: calc(var(--value-v) * -1em);
+      content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A";
+      width: 1ch;
+      top: calc(var(--value-ones) * -1em);
       inset-inline-end: 0;
     }
   }