@quilltap/theme-storybook 1.0.55 → 1.0.57

package/dist/index.css

@@ -550,6 +550,10 @@ body {
   --qt-overlay-muted-fg: rgb(255 255 255 / 0.7);
   --qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
   --qt-spinner-indicator: var(--color-primary);
+  --qt-progress-track: var(--color-muted);
+  --qt-progress-indicator: var(--color-primary);
+  --qt-progress-indicator-success: var(--color-success);
+  --qt-progress-indicator-danger: var(--color-destructive);
   --qt-favorite-color: hsl(45 96% 58%);
   --qt-toggle-knob-bg: white;
   --qt-warning-box-bg: color-mix(in srgb, var(--color-warning) 8%, transparent);
@@ -1762,6 +1766,9 @@ body {
 .qt-text-destructive {
   color: var(--color-destructive);
 }
+.qt-text-danger {
+  color: var(--color-destructive);
+}
 .qt-border-primary {
   border-color: var(--color-primary);
 }
@@ -1845,6 +1852,43 @@ body {
   border: 4px solid var(--qt-spinner-track, color-mix(in srgb, var(--color-primary) 20%, transparent));
   border-right-color: var(--qt-spinner-indicator, var(--color-primary));
 }
+.qt-progress {
+  background-color: var(--qt-progress-track, var(--color-muted));
+  border-radius: 9999px;
+  overflow: hidden;
+  height: 0.5rem;
+}
+.qt-progress-sm {
+  height: 0.375rem;
+}
+.qt-progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+  background-color: var(--qt-progress-indicator, var(--color-primary));
+  transition: width 500ms ease-out;
+}
+.qt-progress-fill-success {
+  background-color: var(--qt-progress-indicator-success, var(--color-success));
+}
+.qt-progress-fill-danger {
+  background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
+}
+.qt-progress-fill-idle {
+  background-color: transparent;
+}
+.qt-progress-indeterminate {
+  width: 40% !important;
+  transition: none;
+  animation: qt-progress-slide 1.4s ease-in-out infinite;
+}
+@keyframes qt-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
 .qt-text-favorite {
   color: var(--qt-favorite-color, hsl(45 96% 58%));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/css/qt-components.css

@@ -494,6 +494,12 @@
   --qt-spinner-track: color-mix(in srgb, var(--color-primary) 20%, transparent);
   --qt-spinner-indicator: var(--color-primary);
 
+  /* Progress bar variables — every bar-shaped construct in the app */
+  --qt-progress-track: var(--color-muted);
+  --qt-progress-indicator: var(--color-primary);
+  --qt-progress-indicator-success: var(--color-success);
+  --qt-progress-indicator-danger: var(--color-destructive);
+
   /* Favorite star color */
   --qt-favorite-color: hsl(45 96% 58%);
 
@@ -2088,6 +2094,10 @@
   color: var(--color-destructive);
 }
 
+.qt-text-danger {
+  color: var(--color-destructive);
+}
+
 /* Border utilities */
 .qt-border-primary {
   border-color: var(--color-primary);
@@ -2210,6 +2220,56 @@
   border-right-color: var(--qt-spinner-indicator, var(--color-primary));
 }
 
+/* ==========================================================================
+   PROGRESS BAR UTILITIES
+   Multi-phase task progress and static value meters.
+   ========================================================================== */
+
+.qt-progress {
+  background-color: var(--qt-progress-track, var(--color-muted));
+  border-radius: 9999px;
+  overflow: hidden;
+  height: 0.5rem;
+}
+
+.qt-progress-sm {
+  height: 0.375rem;
+}
+
+.qt-progress-fill {
+  height: 100%;
+  border-radius: 9999px;
+  background-color: var(--qt-progress-indicator, var(--color-primary));
+  transition: width 500ms ease-out;
+}
+
+.qt-progress-fill-success {
+  background-color: var(--qt-progress-indicator-success, var(--color-success));
+}
+
+.qt-progress-fill-danger {
+  background-color: var(--qt-progress-indicator-danger, var(--color-destructive));
+}
+
+.qt-progress-fill-idle {
+  background-color: transparent;
+}
+
+.qt-progress-indeterminate {
+  width: 40% !important;
+  transition: none;
+  animation: qt-progress-slide 1.4s ease-in-out infinite;
+}
+
+@keyframes qt-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+
 /* ==========================================================================
    FAVORITE / TOGGLE / WARNING BOX UTILITIES
    ========================================================================== */