penguinui is now in the root dir in penguinui-components/

penguinui-components/progress/progress-bar-color-variants.html

@@ -0,0 +1,36 @@
+<!-- Primary Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+
+<!-- Secondary Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-secondary dark:bg-secondary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+
+<!-- Success Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-success dark:bg-success-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+
+<!-- Info Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-info dark:bg-info-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+
+<!-- Warning Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-warning dark:bg-warning-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+
+<!-- Danger Progress Bar -->
+<div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-danger dark:bg-danger-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+    </div>
+</div>
+

penguinui-components/progress/progress-bar-default.html

@@ -0,0 +1,3 @@
+<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>

penguinui-components/progress/progress-bar-gradient.html

@@ -0,0 +1,24 @@
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-yellow-400 to-lime-400" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-green-500 to-green-700" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-indigo-500 to-blue-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-rose-400 via-fuchsia-500 to-indigo-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-fuchsia-500 via-red-600 to-orange-400" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+
+<div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-linear-to-r from-pink-500 to-rose-500" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
+</div>
+

penguinui-components/progress/progress-bar-label-inside.html

@@ -0,0 +1,5 @@
+<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="flex h-4 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+    <div class="h-full rounded-radius bg-primary p-0.5 text-center text-xs font-semibold leading-none text-on-primary dark:bg-primary-dark dark:text-on-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+        <span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span>
+    </div>
+</div>

penguinui-components/progress/progress-bar-label-outside.html

@@ -0,0 +1,10 @@
+<div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="w-full">
+    <div class="mb-1 flex items-end justify-between gap-2 text-on-surface dark:text-on-surface-dark">   
+        <span>Progress</span>
+        <span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span>
+    </div> 
+    <div class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt" role="progressbar" aria-label="default progress bar" x-bind:aria-valuenow="currentVal" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal">
+        <div class="h-full rounded-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
+        </div>
+    </div>
+</div>

penguinui-components/progress/progress-bar-multiple.html

@@ -0,0 +1,5 @@
+<div x-data="{ currentValA: 20, currentValB: 30, currentValC: 25 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-radius bg-surface-alt dark:bg-surface-dark-alt">
+    <div class="h-full rounded-l-radius bg-primary dark:bg-primary-dark" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`" role="progressbar" aria-label="progress bar A" x-bind:aria-valuenow="currentValA" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
+    <div class="h-full bg-info dark:bg-info" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`" role="progressbar" aria-label="progress bar B" x-bind:aria-valuenow="currentValB" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
+    <div class="h-full rounded-r-radius bg-success dark:bg-success" x-bind:style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`" role="progressbar" aria-label="progress bar C" x-bind:aria-valuenow="currentValC" x-bind:aria-valuemin="minVal" x-bind:aria-valuemax="maxVal"></div>
+</div>