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

2026-06-18 10:21:29 +02:00
parent 0a619517b6
commit ee944ed5ce
181 changed files with 7699 additions and 1 deletions
--- a/penguinui-components/badge/animating-notification-badge.html
+++ b/penguinui-components/badge/animating-notification-badge.html
@@ -0,0 +1,36 @@
+<!-- primary Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-primary dark:bg-primary-dark" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-primary motion-reduce:animate-none dark:bg-primary-dark">
+    </span>
+</span>
+
+<!-- secondary Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-secondary dark:bg-secondary-dark" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-secondary motion-reduce:animate-none dark:bg-secondary-dark">
+    </span>
+</span>
+
+<!-- info Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-info dark:bg-info" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-info motion-reduce:animate-none dark:bg-info">
+    </span>
+</span>
+
+<!-- success Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-success dark:bg-success" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-success motion-reduce:animate-none dark:bg-success">
+    </span>
+</span>
+
+<!-- warning Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-warning dark:bg-warning" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-warning motion-reduce:animate-none dark:bg-warning">
+    </span>
+</span>
+
+<!-- danger Badge -->
+<span class="flex size-3 items-center justify-center rounded-full bg-danger dark:bg-danger" aria-label="notification">
+    <span class="size-3 animate-ping rounded-full bg-danger motion-reduce:animate-none dark:bg-danger">
+    </span>
+</span>
+
--- a/penguinui-components/badge/badge-with-icon.html
+++ b/penguinui-components/badge/badge-with-icon.html
@@ -0,0 +1,60 @@
+<!-- primary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-primary bg-surface text-xs font-medium text-primary dark:border-primary-dark dark:bg-surface-dark dark:text-primary-dark">
+    <span class="flex items-center gap-1 bg-primary/10 px-2 py-1 dark:bg-primary-dark/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-3">
+             <path fill-rule="evenodd" d="M11.097 1.515a.75.75 0 01.589.882L10.666 7.5h4.47l1.079-5.397a.75.75 0 111.47.294L16.665 7.5h3.585a.75.75 0 010 1.5h-3.885l-1.2 6h3.585a.75.75 0 010 1.5h-3.885l-1.08 5.397a.75.75 0 11-1.47-.294l1.02-5.103h-4.47l-1.08 5.397a.75.75 0 01-1.47-.294l1.02-5.103H3.75a.75.75 0 110-1.5h3.885l1.2-6H5.25a.75.75 0 010-1.5h3.885l1.08-5.397a.75.75 0 01.882-.588zM10.365 9l-1.2 6h4.47l1.2-6h-4.47z" clip-rule="evenodd"/>
+        </svg>
+        Penguin
+    </span>
+</span>
+
+<!-- secondary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-secondary bg-surface text-xs font-medium text-secondary dark:border-secondary-dark dark:bg-surface-dark dark:text-secondary-dark">
+    <span class="flex items-center gap-1 bg-secondary/10 px-2 py-1 dark:bg-secondary-dark/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="size-4">
+             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+        Filter
+    </span>
+</span>
+
+<!-- info Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-info bg-surface text-xs font-medium text-info dark:border-info dark:bg-surface-dark dark:text-info">
+    <span class="flex items-center gap-1 bg-info/10 px-2 py-1 dark:bg-info/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
+             <path fill-rule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"/>
+        </svg>
+        Verified
+    </span>
+</span>
+
+<!-- success Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-success bg-surface text-xs font-medium text-success dark:border-success dark:bg-surface-dark dark:text-success">
+    <span class="flex items-center gap-1 bg-success/10 px-2 py-1 dark:bg-success/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
+             <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"/>
+        </svg>
+        Active
+    </span>
+</span>
+
+<!-- warning Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-warning bg-surface text-xs font-medium text-warning dark:border-warning dark:bg-surface-dark dark:text-warning">
+    <span class="flex items-center gap-1 bg-warning/10 px-2 py-1 dark:bg-warning/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
+             <path fill-rule="evenodd" d="M11.484 2.17a.75.75 0 011.032 0 11.209 11.209 0 007.877 3.08.75.75 0 01.722.515 12.74 12.74 0 01.635 3.985c0 5.942-4.064 10.933-9.563 12.348a.749.749 0 01-.374 0C6.314 20.683 2.25 15.692 2.25 9.75c0-1.39.223-2.73.635-3.985a.75.75 0 01.722-.516l.143.001c2.996 0 5.718-1.17 7.734-3.08zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zM12 15a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75v-.008a.75.75 0 00-.75-.75H12z" clip-rule="evenodd"/>
+        </svg>
+        Outdated
+    </span>
+</span>
+
+<!-- danger Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-danger bg-surface text-xs font-medium text-danger dark:border-danger dark:bg-surface-dark dark:text-danger">
+    <span class="flex items-center gap-1 bg-danger/10 px-2 py-1 dark:bg-danger/10">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-4">
+             <path fill-rule="evenodd" d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/>
+        </svg>
+        Disconnected
+    </span>
+</span>
+
--- a/penguinui-components/badge/badge-with-indicator.html
+++ b/penguinui-components/badge/badge-with-indicator.html
@@ -0,0 +1,64 @@
+<!-- default Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-outline bg-surface text-xs font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+    <span class="flex items-center gap-1 bg-surface-alt/10 px-2 py-1 dark:bg-surface-dark-alt/10">
+        <span class="size-1.5 rounded-full bg-on-surface dark:bg-on-surface-dark"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- inverse Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-outline-dark bg-surface text-xs font-medium text-on-surface dark:border-outline dark:bg-surface-dark dark:text-on-surface-dark">
+    <span class="flex items-center gap-1 bg-surface-dark-alt/10 px-2 py-1 dark:bg-surface-alt/10">
+        <span class="size-1.5 rounded-full bg-on-surface dark:bg-on-surface-dark"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- primary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-primary bg-surface text-xs font-medium text-primary dark:border-primary-dark dark:bg-surface-dark dark:text-primary-dark">
+    <span class="flex items-center gap-1 bg-primary/10 px-2 py-1 dark:bg-primary-dark/10">
+        <span class="size-1.5 rounded-full bg-primary dark:bg-primary-dark"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- secondary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-secondary bg-surface text-xs font-medium text-secondary dark:border-secondary-dark dark:bg-surface-dark dark:text-secondary-dark">
+    <span class="flex items-center gap-1 bg-secondary/10 px-2 py-1 dark:bg-secondary-dark/10">
+        <span class="size-1.5 rounded-full bg-secondary dark:bg-secondary-dark"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- info Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-info bg-surface text-xs font-medium text-info dark:border-info dark:bg-surface-dark dark:text-info">
+    <span class="flex items-center gap-1 bg-info/10 px-2 py-1 dark:bg-info/10">
+        <span class="size-1.5 rounded-full bg-info dark:bg-info"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- success Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-success bg-surface text-xs font-medium text-success dark:border-success dark:bg-surface-dark dark:text-success">
+    <span class="flex items-center gap-1 bg-success/10 px-2 py-1 dark:bg-success/10">
+        <span class="size-1.5 rounded-full bg-success dark:bg-success"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- warning Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-warning bg-surface text-xs font-medium text-warning dark:border-warning dark:bg-surface-dark dark:text-warning">
+    <span class="flex items-center gap-1 bg-warning/10 px-2 py-1 dark:bg-warning/10">
+        <span class="size-1.5 rounded-full bg-warning dark:bg-warning"></span>
+        Bagde
+    </span>
+</span>
+
+<!-- danger Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-danger bg-surface text-xs font-medium text-danger dark:border-danger dark:bg-surface-dark dark:text-danger">
+    <span class="flex items-center gap-1 bg-danger/10 px-2 py-1 dark:bg-danger/10">
+        <span class="size-1.5 rounded-full bg-danger dark:bg-danger"></span>
+        Bagde
+    </span>
+</span>
+
--- a/penguinui-components/badge/default-badge.html
+++ b/penguinui-components/badge/default-badge.html
@@ -0,0 +1,24 @@
+<!-- default Badge -->
+<span class="rounded-radius w-fit border border-outline bg-surface-alt px-2 py-1 text-xs font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Bagde</span>
+
+<!-- inverse Badge -->
+<span class="rounded-radius w-fit border border-outline-dark bg-surface-dark-alt px-2 py-1 text-xs font-medium text-on-surface-dark dark:border-outline dark:bg-surface-alt dark:text-on-surface">Bagde</span>
+
+<!-- primary Badge -->
+<span class="rounded-radius w-fit border border-primary bg-primary px-2 py-1 text-xs font-medium text-on-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary">Bagde</span>
+
+<!-- secondary Badge -->
+<span class="rounded-radius w-fit border border-secondary bg-secondary px-2 py-1 text-xs font-medium text-on-secondary dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark">Bagde</span>
+
+<!-- info Badge -->
+<span class="rounded-radius w-fit border border-info bg-info px-2 py-1 text-xs font-medium text-on-info dark:border-info dark:bg-info dark:text-on-info">Bagde</span>
+
+<!-- success Badge -->
+<span class="rounded-radius w-fit border border-success bg-success px-2 py-1 text-xs font-medium text-on-success dark:border-success dark:bg-success dark:text-on-success">Bagde</span>
+
+<!-- warning Badge -->
+<span class="rounded-radius w-fit border border-warning bg-warning px-2 py-1 text-xs font-medium text-on-warning dark:border-warning dark:bg-warning dark:text-on-warning">Bagde</span>
+
+<!-- danger Badge -->
+<span class="rounded-radius w-fit border border-danger bg-danger px-2 py-1 text-xs font-medium text-on-danger dark:border-danger dark:bg-danger dark:text-on-danger">Bagde</span>
+
--- a/penguinui-components/badge/notification-badge.html
+++ b/penguinui-components/badge/notification-badge.html
@@ -0,0 +1,14 @@
+<button class="relative w-fit text-on-surface dark:text-on-surface-dark" aria-label="notifications">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
+         <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"/>
+    </svg>
+    <span class="sr-only">notifications</span>
+    <span class="absolute left-1/2 -top-1 rounded-full bg-danger px-1 leading-4 text-xs font-medium text-on-danger">99+</span>
+</button>
+
+<button class="relative w-fit text-on-surface dark:text-on-surface-dark" aria-label="messages">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
+         <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 00-.266.112L8.78 21.53A.75.75 0 017.5 21v-3.955a48.842 48.842 0 01-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97z" clip-rule="evenodd"/>
+    </svg>
+    <span class="absolute -right-0.5 top-0 size-3 rounded-full bg-danger text-xs font-medium"></span>
+</button>
--- a/penguinui-components/badge/soft-color-badge.html
+++ b/penguinui-components/badge/soft-color-badge.html
@@ -0,0 +1,40 @@
+<!-- default Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-outline bg-surface text-xs font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+    <span class="px-2 py-1 bg-surface-alt/10 dark:bg-surface-dark-alt/10">Bagde</span>
+</span>
+
+<!-- inverse Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-outline-dark bg-surface text-xs font-medium text-on-surface dark:border-outline dark:bg-surface-dark dark:text-on-surface-dark">
+    <span class="px-2 py-1 bg-surface-dark-alt/10 dark:bg-surface-alt/10">Bagde</span>
+</span>
+
+<!-- primary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-primary bg-surface text-xs font-medium text-primary dark:border-primary-dark dark:bg-surface-dark dark:text-primary-dark">
+    <span class="px-2 py-1 bg-primary/10 dark:bg-primary-dark/10">Bagde</span>
+</span>
+
+<!-- secondary Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-secondary bg-surface text-xs font-medium text-secondary dark:border-secondary-dark dark:bg-surface-dark dark:text-secondary-dark">
+    <span class="px-2 py-1 bg-secondary/10 dark:bg-secondary-dark/10">Bagde</span>
+</span>
+
+<!-- info Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-info bg-surface text-xs font-medium text-info dark:border-info dark:bg-surface-dark dark:text-info">
+    <span class="px-2 py-1 bg-info/10 dark:bg-info/10">Bagde</span>
+</span>
+
+<!-- success Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-success bg-surface text-xs font-medium text-success dark:border-success dark:bg-surface-dark dark:text-success">
+    <span class="px-2 py-1 bg-success/10 dark:bg-success/10">Bagde</span>
+</span>
+
+<!-- warning Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-warning bg-surface text-xs font-medium text-warning dark:border-warning dark:bg-surface-dark dark:text-warning">
+    <span class="px-2 py-1 bg-warning/10 dark:bg-warning/10">Bagde</span>
+</span>
+
+<!-- danger Badge -->
+<span class="w-fit inline-flex overflow-hidden rounded-radius border border-danger bg-surface text-xs font-medium text-danger dark:border-danger dark:bg-surface-dark dark:text-danger">
+    <span class="px-2 py-1 bg-danger/10 dark:bg-danger/10">Bagde</span>
+</span>
+