@tinybigui/react 0.1.1 → 0.3.0

package/dist/index.css

@@ -0,0 +1,53 @@
+/* src/components/Progress/Progress.css */
+@keyframes progress-linear-indeterminate-1 {
+  0% {
+    left: -35%;
+    right: 100%;
+  }
+  60% {
+    left: 100%;
+    right: -90%;
+  }
+  100% {
+    left: 100%;
+    right: -90%;
+  }
+}
+@keyframes progress-linear-indeterminate-2 {
+  0% {
+    left: -200%;
+    right: 100%;
+  }
+  60% {
+    left: 107%;
+    right: -8%;
+  }
+  100% {
+    left: 107%;
+    right: -8%;
+  }
+}
+@keyframes progress-circular-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes progress-circular-dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
+}
+@theme { --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2 var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite; --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4) linear infinite; --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4) var(--md-sys-motion-easing-standard) infinite; }
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Progress/Progress.css"],"sourcesContent":["/*\n * Progress Indicator Animations\n * Material Design 3 motion tokens for indeterminate progress states.\n *\n * Keyframes are defined here (co-located with the component) per project\n * convention — they are NOT added to the global tokens.css.\n *\n * Motion tokens referenced (from packages/tokens/src/tokens.css):\n *   --md-sys-motion-duration-medium4 : 400ms  (determinate transitions — applied via Tailwind)\n *   --md-sys-motion-duration-long2   : 500ms  (linear indeterminate cycle)\n *   --md-sys-motion-duration-long4   : 600ms  (circular indeterminate rotation)\n *   --md-sys-motion-easing-standard  : cubic-bezier(0.2, 0, 0, 1)\n */\n\n/* ---------------------------------------------------------------------------\n   LINEAR INDETERMINATE\n   Two-segment bar animation per MD3 spec.\n   First segment: starts narrow at left, expands, then slides off right.\n   Second segment: follows the first with a short delay.\n   Duration: long2 = 500ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-linear-indeterminate-1 {\n  0% {\n    left: -35%;\n    right: 100%;\n  }\n  60% {\n    left: 100%;\n    right: -90%;\n  }\n  100% {\n    left: 100%;\n    right: -90%;\n  }\n}\n\n@keyframes progress-linear-indeterminate-2 {\n  0% {\n    left: -200%;\n    right: 100%;\n  }\n  60% {\n    left: 107%;\n    right: -8%;\n  }\n  100% {\n    left: 107%;\n    right: -8%;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   CIRCULAR INDETERMINATE\n   Two-part animation per MD3 spec:\n   1. Container rotation: continuous 360° spin.\n   2. Dash animation: stroke-dasharray pulses between a short and long arc.\n   Rotation duration: long4 = 600ms per cycle (repeating).\n   --------------------------------------------------------------------------- */\n\n@keyframes progress-circular-rotate {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes progress-circular-dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n/* ---------------------------------------------------------------------------\n   TAILWIND @theme INTEGRATION\n   Register animations so they can be used as Tailwind utilities:\n     animate-progress-linear-indeterminate-1\n     animate-progress-linear-indeterminate-2\n     animate-progress-circular-rotate\n     animate-progress-circular-dash\n   --------------------------------------------------------------------------- */\n\n@theme {\n  --animate-progress-linear-indeterminate-1: progress-linear-indeterminate-1\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-linear-indeterminate-2: progress-linear-indeterminate-2\n    var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard) infinite;\n\n  --animate-progress-circular-rotate: progress-circular-rotate var(--md-sys-motion-duration-long4)\n    linear infinite;\n\n  --animate-progress-circular-dash: progress-circular-dash var(--md-sys-motion-duration-long4)\n    var(--md-sys-motion-easing-standard) infinite;\n}\n"],"mappings":";AAsBA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAEA,WAAW;AACT;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACA;AACE,UAAM;AACN,WAAO;AACT;AACF;AAUA,WAAW;AACT;AACE,eAAW,OAAO;AACpB;AACA;AACE,eAAW,OAAO;AACpB;AACF;AAEA,WAAW;AACT;AACE,sBAAkB,CAAC,EAAE;AACrB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACA;AACE,sBAAkB,EAAE,EAAE;AACtB,uBAAmB;AACrB;AACF;AAWA,OAAO,EACL,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,yCAAyC,EAAE,gCACzC,IAAI,gCAAgC,IAAI,iCAAiC,QAAQ,EAEnF,kCAAkC,EAAE,yBAAyB,IAAI,gCAC/D,OAAO,QAAQ,EAEjB,gCAAgC,EAAE,uBAAuB,IAAI,gCAC3D,IAAI,iCAAiC,QAAQ;","names":[]}