filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Priec
2026-06-18 10:21:29 +02:00
parent 0a619517b6
commit ee944ed5ce
181 changed files with 7699 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
penguinui-components/range/default-range-slider.html Normal file
View File

@@ -0,0 +1,4 @@
<div class="flex w-full flex-col gap-4 text-on-surface dark:text-on-surface-dark">
<label for="rangeSlider" class="w-fit pl-0.5 text-sm">Mood Meter</label>
<input id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-on-surface/15 focus:outline-primary dark:bg-on-surface-dark/15 dark:focus:outline-primary-dark [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-primary dark:[&::-moz-range-thumb]:bg-primary-dark active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-primary active:[&::-webkit-slider-thumb]:scale-110 dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="1" />
</div>

10
penguinui-components/range/range-slider-with-icons.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="flex w-full items-center gap-4 text-on-surface dark:text-on-surface-dark">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="size-6" aria-hidden="true">
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707M3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707" />
</svg>
<label for="rangeSlider" class="sr-only">Brightness</label>
<input id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-on-surface/15 focus:outline-primary dark:bg-on-surface-dark/15 dark:focus:outline-primary-dark [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-primary active:[&::-moz-range-thumb]:scale-110 dark:[&::-moz-range-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-primary active:[&::-webkit-slider-thumb]:scale-110 dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="1" />
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="size-6" aria-hidden="true">
<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
</svg>
</div>

27
penguinui-components/range/range-slider-with-ticks.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="flex w-full flex-col text-on-surface dark:text-on-surface-dark">
<label for="rangeSlider" class="w-fit pl-0.5 text-sm">Mood Meter</label>
<input id="rangeSlider" type="range" class="z-10 mb-1 mt-4 h-2 w-full appearance-none bg-on-surface/15 focus:outline-primary dark:bg-on-surface-dark/15 dark:focus:outline-primary-dark [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-primary active:[&::-moz-range-thumb]:scale-110 dark:[&::-moz-range-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-primary active:[&::-webkit-slider-thumb]:scale-110 dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="5" />
<div class="flex items-center justify-between px-2 text-center text-on-surface dark:text-on-surface-dark">
<span class="w-0 -translate-x-1 text-xs even:hidden md:even:inline-block" aria-hidden="true">0</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>
<span class="w-0 -translate-x-2 text-xs even:hidden md:even:inline-block" aria-hidden="true">100</span>
</div>
</div>

8
penguinui-components/range/range-slider-with-value.html Normal file
View File

@@ -0,0 +1,8 @@
<div x-data="{ currentVal: 20 }" class="flex w-full items-center gap-4 text-on-surface dark:text-on-surface-dark">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="size-6 shrink-0" aria-hidden="true">
<path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" />
</svg>
<label for="rangeSlider" class="sr-only">Brightness</label>
<input x-model="currentVal" id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-on-surface/15 focus:outline-primary dark:bg-on-surface-dark/15 dark:focus:outline-primary-dark [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-primary active:[&::-moz-range-thumb]:scale-110 dark:[&::-moz-range-thumb]:bg-primary-dark [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-primary active:[&::-webkit-slider-thumb]:scale-110 dark:[&::-webkit-slider-thumb]:bg-primary-dark [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" min="0" max="100" step="1" />
<span class="w-10 text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong" x-text="currentVal"></span>
</div>