penguinui is now in the root dir in penguinui-components/
This commit is contained in:
Priec
30
penguinui-components/README.md
Normal file
30
penguinui-components/README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 🐧 Penguin UI
|
||||
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
*A collection of beautifully designed UI components built with **Tailwind CSS** and **Alpine.js***
|
||||
|
||||
[📚 **Documentation**](https://www.penguinui.com) • [🚀 **Getting Started**](https://www.penguinui.com/docs/getting-started)
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
## 📄 License
|
||||
|
||||
This project is licensed under the MIT License - see the [LICENSE](https://www.penguinui.com/docs/license) for details.
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
|
||||
**Created by Salar Houshvand**
|
||||
|
||||
[](https://x.com/salar_houshvand)
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,69 @@
|
||||
<div class="w-full divide-y divide-outline text-on-surface dark:divide-outline-dark dark:text-on-surface-dark">
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemOne" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
||||
aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What browsers are supported?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
|
||||
x-collapse>
|
||||
<div class="pb-4 text-sm sm:text-base text-pretty">
|
||||
Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
|
||||
href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
|
||||
for additional information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemTwo" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
||||
aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
How can I contact customer support?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
|
||||
x-collapse>
|
||||
<div class="pb-4 text-sm sm:text-base text-pretty">
|
||||
Reach out to our dedicated support team via email at <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
|
||||
call our toll-free number at 1-800-123-4567 during business hours.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemThree" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 py-4 text-left underline-offset-2 focus-visible:underline focus-visible:outline-hidden"
|
||||
aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What is the refund policy?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
|
||||
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
||||
<div class="pb-4 text-sm sm:text-base text-pretty">
|
||||
Please refer to our <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
|
||||
the website for detailed information regarding eligibility, timeframes, and the process for requesting a
|
||||
refund.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
70
penguinui-components/accordion/default-accordion.html
Normal file
70
penguinui-components/accordion/default-accordion.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<div
|
||||
class="w-full divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt/40 text-on-surface dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemOne" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What browsers are supported?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
|
||||
x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
|
||||
href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
|
||||
for additional information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemTwo" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
How can I contact customer support?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
|
||||
x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Reach out to our dedicated support team via email at <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
|
||||
call our toll-free number at 1-800-123-4567 during business hours.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }">
|
||||
<button id="controlsAccordionItemThree" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What is the refund policy?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
|
||||
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Please refer to our <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
|
||||
the website for detailed information regarding eligibility, timeframes, and the process for requesting a
|
||||
refund.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
70
penguinui-components/accordion/single.open-accordion.html
Normal file
70
penguinui-components/accordion/single.open-accordion.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<div x-data="{ selectedAccordionItem: 'one' }"
|
||||
class="w-full divide-y divide-outline overflow-hidden rounded-sm border border-outline bg-surface-alt/40 text-on-surface dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark">
|
||||
<div>
|
||||
<button id="controlsAccordionItemOne" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemOne" x-on:click="selectedAccordionItem = 'one'"
|
||||
x-bind:class="selectedAccordionItem === 'one' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="selectedAccordionItem === 'one' ? 'true' : 'false'">
|
||||
What browsers are supported?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="selectedAccordionItem === 'one' ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="selectedAccordionItem === 'one'" id="accordionItemOne" role="region"
|
||||
aria-labelledby="controlsAccordionItemOne" x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
|
||||
href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
|
||||
for additional information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="controlsAccordionItemTwo" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemTwo" x-on:click="selectedAccordionItem = 'two'"
|
||||
x-bind:class="selectedAccordionItem === 'two' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="selectedAccordionItem === 'two' ? 'true' : 'false'">
|
||||
How can I contact customer support?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="selectedAccordionItem === 'two' ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="selectedAccordionItem === 'two'" id="accordionItemTwo" role="region"
|
||||
aria-labelledby="controlsAccordionItemTwo" x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Reach out to our dedicated support team via email at <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
|
||||
call our toll-free number at 1-800-123-4567 during business hours.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button id="controlsAccordionItemThree" type="button"
|
||||
class="flex w-full items-center justify-between gap-4 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemThree" x-on:click="selectedAccordionItem = 'three'"
|
||||
x-bind:class="selectedAccordionItem === 'three' ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="selectedAccordionItem === 'three' ? 'true' : 'false'">
|
||||
What is the refund policy?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="selectedAccordionItem === 'three' ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="selectedAccordionItem === 'three'" id="accordionItemThree" role="region"
|
||||
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Please refer to our <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
|
||||
the website for detailed information regarding eligibility, timeframes, and the process for requesting a
|
||||
refund.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
72
penguinui-components/accordion/split-accordion.html
Normal file
72
penguinui-components/accordion/split-accordion.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<div class="flex w-full flex-col gap-4 text-on-surface dark:text-on-surface-dark">
|
||||
<div x-data="{ isExpanded: false }"
|
||||
class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
|
||||
<button id="controlsAccordionItemOne" type="button"
|
||||
class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemOne" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What browsers are supported?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemOne" role="region" aria-labelledby="controlsAccordionItemOne"
|
||||
x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Our website is optimized for the latest versions of Chrome, Firefox, Safari, and Edge. Check our <a
|
||||
href="#" class="underline underline-offset-2 text-primary dark:text-primary-dark">documentation</a>
|
||||
for additional information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }"
|
||||
class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
|
||||
<button id="controlsAccordionItemTwo" type="button"
|
||||
class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemTwo" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
How can I contact customer support?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemTwo" role="region" aria-labelledby="controlsAccordionItemTwo"
|
||||
x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Reach out to our dedicated support team via email at <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">support@example.com</a> or
|
||||
call our toll-free number at 1-800-123-4567 during business hours.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="{ isExpanded: false }"
|
||||
class="overflow-hidden rounded-radius border border-outline bg-surface-alt/40 dark:border-outline-dark dark:bg-surface-dark-alt/50">
|
||||
<button id="controlsAccordionItemThree" type="button"
|
||||
class="flex w-full items-center justify-between gap-2 bg-surface-alt p-4 text-left underline-offset-2 hover:bg-surface-alt/75 focus-visible:bg-surface-alt/75 focus-visible:underline focus-visible:outline-hidden dark:bg-surface-dark-alt dark:hover:bg-surface-dark-alt/75 dark:focus-visible:bg-surface-dark-alt/75"
|
||||
aria-controls="accordionItemThree" x-on:click="isExpanded = ! isExpanded"
|
||||
x-bind:class="isExpanded ? 'text-on-surface-strong dark:text-on-surface-dark-strong font-bold' : 'text-on-surface dark:text-on-surface-dark font-medium'"
|
||||
x-bind:aria-expanded="isExpanded ? 'true' : 'false'">
|
||||
What is the refund policy?
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2"
|
||||
stroke="currentColor" class="size-5 shrink-0 transition" aria-hidden="true"
|
||||
x-bind:class="isExpanded ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<div x-cloak x-show="isExpanded" id="accordionItemThree" role="region"
|
||||
aria-labelledby="controlsAccordionItemThree" x-collapse>
|
||||
<div class="p-4 text-sm sm:text-base text-pretty">
|
||||
Please refer to our <a href="#"
|
||||
class="underline underline-offset-2 text-primary dark:text-primary-dark">refund policy page</a> on
|
||||
the website for detailed information regarding eligibility, timeframes, and the process for requesting a
|
||||
refund.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
59
penguinui-components/ai-options/image-style-selector.html
Normal file
59
penguinui-components/ai-options/image-style-selector.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<div class="flex max-w-sm flex-col gap-4 border-outline bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark rounded-radius border">
|
||||
<span id="voiceToneTitle" class="w-fit pl-0.5 text-sm font-medium">Image Style</span>
|
||||
<div class="grid grid-cols-3 place-content-center gap-4" role="group" aria-label="image style">
|
||||
<label for="imageStyleCustom" class="text-cente relative flex flex-col items-center">
|
||||
<input type="file" id="imageStyleCustom" class="peer fixed opacity-0 size-0 appearance-none"/>
|
||||
<div class="flex h-full w-full items-center justify-center border border-dashed border-on-surface peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:border-on-surface-dark dark:peer-focus:outline-primary-dark rounded-radius">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-10">
|
||||
<path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="mt-1 text-xs capitalize">Upload</span>
|
||||
</label>
|
||||
|
||||
<label for="imageStyleReal" class="text-center relative flex flex-col items-center" >
|
||||
<input id="imageStyleReal" type="radio" class="peer appearance-none size-0" value="real" name="imageStyle" checked />
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/real.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="real" aria-hidden="true"/>
|
||||
<span class="mt-1 text-xs capitalize">real</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<label for="imageStyleWatercolor" class="text-center relative flex flex-col items-center" >
|
||||
<input id="imageStyleWatercolor" type="radio" class="peer appearance-none size-0" value="watercolor" name="imageStyle" />
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/watercolor.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="watercolor" aria-hidden="true"/>
|
||||
<span class="mt-1 text-xs capitalize">watercolor</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<label for="imageStyle3d" class="text-center relative flex flex-col items-center" >
|
||||
<input id="imageStyle3d" type="radio" class="peer appearance-none size-0" value="3d" name="imageStyle" />
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/3d.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="3d" aria-hidden="true"/>
|
||||
<span class="mt-1 text-xs capitalize">3d</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<label for="imageStyleIsometric" class="text-center relative flex flex-col items-center" >
|
||||
<input id="imageStyleIsometric" type="radio" class="peer appearance-none size-0" value="isometric" name="imageStyle" />
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/isometric.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="isometric" aria-hidden="true"/>
|
||||
<span class="mt-1 text-xs capitalize">isometric</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<label for="imageStyleFlat" class="text-center relative flex flex-col items-center" >
|
||||
<input id="imageStyleFlat" type="radio" class="peer appearance-none size-0" value="flat" name="imageStyle" />
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/image-styles/flat.webp" class="object-cover rounded-radius peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-primary dark:peer-focus:outline-primary-dark" alt="flat" aria-hidden="true"/>
|
||||
<span class="mt-1 text-xs capitalize">flat</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="absolute right-1 top-1 size-5 fill-surface opacity-0 peer-checked:opacity-100 dark:fill-surface-dark" >
|
||||
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm3.844-8.791a.75.75 0 0 0-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 1 0-1.114 1.004l2.25 2.5a.75.75 0 0 0 1.15-.043l4.25-5.5Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
39
penguinui-components/ai-options/model-selector.html
Normal file
39
penguinui-components/ai-options/model-selector.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<div class="flex w-full max-w-sm flex-col gap-4 rounded-radius border border-outline bg-surface-alt p-4 sm:p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark" role="group" aria-labelledby="aiModelTitle">
|
||||
<span id="aiModelTitle" class="w-fit px-4 text-sm font-medium">Model</span>
|
||||
|
||||
<label for="model3" class="flex items-center justify-between gap-2 px-4 py-2 rounded-radius hover:bg-surface-dark/5 has-focus-visible:bg-surface-dark/5 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-primary dark:hover:bg-surface/5 dark:has-focus-visible:bg-surface/5 dark:has-focus-visible:outline-primary-dark">
|
||||
<div class="flex items-center gap-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0 fill-primary dark:fill-primary-dark" aria-hidden="true">
|
||||
<path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
|
||||
</svg>
|
||||
<div class="text-left">
|
||||
<p class="text-sm font-bold">Pengu AI 3.1</p>
|
||||
<p class="text-xs text-on-surface dark:text-on-surface-dark">The most advanced AI model</p>
|
||||
</div>
|
||||
</div>
|
||||
<input id="model3" type="radio" class="peer appearance-none" name="model" value="3.1" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="size-6 opacity-0 peer-checked:opacity-100" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<label for="model2" class="flex items-center justify-between gap-2 px-4 py-2 rounded-radius hover:bg-surface-dark/5 has-focus-visible:bg-surface-dark/5 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-primary dark:hover:bg-surface/5 dark:has-focus-visible:bg-surface/5 dark:has-focus-visible:outline-primary-dark">
|
||||
<div class="flex items-center gap-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0 fill-secondary dark:fill-secondary-dark" aria-hidden="true">
|
||||
<path d="M15.98 1.804a1 1 0 0 0-1.96 0l-.24 1.192a1 1 0 0 1-.784.785l-1.192.238a1 1 0 0 0 0 1.962l1.192.238a1 1 0 0 1 .785.785l.238 1.192a1 1 0 0 0 1.962 0l.238-1.192a1 1 0 0 1 .785-.785l1.192-.238a1 1 0 0 0 0-1.962l-1.192-.238a1 1 0 0 1-.785-.785l-.238-1.192ZM6.949 5.684a1 1 0 0 0-1.898 0l-.683 2.051a1 1 0 0 1-.633.633l-2.051.683a1 1 0 0 0 0 1.898l2.051.684a1 1 0 0 1 .633.632l.683 2.051a1 1 0 0 0 1.898 0l.683-2.051a1 1 0 0 1 .633-.633l2.051-.683a1 1 0 0 0 0-1.898l-2.051-.683a1 1 0 0 1-.633-.633L6.95 5.684ZM13.949 13.684a1 1 0 0 0-1.898 0l-.184.551a1 1 0 0 1-.632.633l-.551.183a1 1 0 0 0 0 1.898l.551.183a1 1 0 0 1 .633.633l.183.551a1 1 0 0 0 1.898 0l.184-.551a1 1 0 0 1 .632-.633l.551-.183a1 1 0 0 0 0-1.898l-.551-.184a1 1 0 0 1-.633-.632l-.183-.551Z"/>
|
||||
</svg>
|
||||
<div class="text-left">
|
||||
<p class="text-sm font-bold">Pengu AI 2.4</p>
|
||||
<p class="text-xs text-on-surface dark:text-on-surface-dark">The older AI model</p>
|
||||
</div>
|
||||
</div>
|
||||
<input id="model2" type="radio" class="peer appearance-none" name="model" value="2.4" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
|
||||
class="size-6 opacity-0 peer-checked:opacity-100" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</label>
|
||||
|
||||
<button type="button" class="mx-4 mt-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:has-focus-visible:bg-surface/5 dark:focus-visible:outline-primary-dark rounded-radius">Upgrade to Pro</button>
|
||||
</div>
|
||||
45
penguinui-components/ai-options/voice-tone-selector.html
Normal file
45
penguinui-components/ai-options/voice-tone-selector.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<div class="flex flex-col gap-2 text-on-surface dark:text-on-surface-dark" role="group" aria-labelledby="voiceToneTitle">
|
||||
<span id="voiceToneTitle" class="w-fit pl-0.5 text-sm font-medium">Voice Tone</span>
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
|
||||
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneFriendly">
|
||||
<input type="checkbox" class="appearance-none" id="checkToneFriendly" value="friendly" name="tone" />
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="text-base" aria-hidden="true">🤗</span>
|
||||
Friendly
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneProfessional">
|
||||
<input type="checkbox" class="appearance-none" id="checkToneProfessional" value="professional" name="tone" />
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="text-base" aria-hidden="true">🤓</span>
|
||||
Professional
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneCheerful">
|
||||
<input type="checkbox" class="appearance-none" id="checkToneCheerful" value="cheerful" name="tone" />
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="text-base" aria-hidden="true">🤩</span>
|
||||
Cheerful
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkToneFunny">
|
||||
<input type="checkbox" class="appearance-none" id="checkToneFunny" value="funny" name="tone" />
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="text-base" aria-hidden="true">🤭</span>
|
||||
Funny
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex border border-transparent bg-surface-alt px-2 py-1.5 text-xs font-medium has-checked:border-primary has-checked:text-primary dark:bg-surface-dark-alt dark:has-checked:border-primary-dark dark:has-checked:text-primary-dark rounded-radius has-focus-visible:outline-2 has-focus-visible:outline-primary has-focus-visible:outline-offset-2 dark:has-focus-visible:outline-primary-dark" for="checkTonePersuasive">
|
||||
<input type="checkbox" class="appearance-none" id="checkTonePersuasive" value="persuasive" name="tone" />
|
||||
<span class="flex items-center gap-2">
|
||||
<span class="text-base" aria-hidden="true">😎</span>
|
||||
Persuasive
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
65
penguinui-components/ai-output-display/chat-display.html
Normal file
65
penguinui-components/ai-output-display/chat-display.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- User's Chat -->
|
||||
<div class="w-full max-w-2xl border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" class="size-8 rounded-full object-cover" alt="User avatar"/>
|
||||
<span class="text-sm font-bold">Alice Brown</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">write a short paragraph about penguin.</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Edit" aria-label="Edit your input">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4" >
|
||||
<path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"/>
|
||||
<path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI's Response -->
|
||||
<div class="w-full max-w-2xl border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-sm font-bold">Pengu AI</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">
|
||||
The penguin is a fascinating bird perfectly adapted to life in the cold Antarctic regions.
|
||||
With its distinctive black and white plumage, streamlined body, and flipper-like wings, the penguin
|
||||
is an agile swimmer and expert diver, hunting for fish, krill, and squid underwater. Penguins are
|
||||
highly social animals, often gathering in large colonies for breeding and protection. They have a unique
|
||||
waddling gait on land but are graceful and swift in the water, using their flippers to propel themselves
|
||||
through the icy seas. Known for their resilience in harsh environments, penguins evoke a sense of curiosity
|
||||
and admiration for their ability to thrive in one of Earth's most extreme habitats.
|
||||
</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Read Aloud" aria-label="Read Aloud" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M10.5 3.75a.75.75 0 0 0-1.264-.546L5.203 7H2.667a.75.75 0 0 0-.7.48A6.985 6.985 0 0 0 1.5 10c0 .887.165 1.737.468 2.52.111.29.39.48.7.48h2.535l4.033 3.796a.75.75 0 0 0 1.264-.546V3.75ZM16.45 5.05a.75.75 0 0 0-1.06 1.061 5.5 5.5 0 0 1 0 7.778.75.75 0 0 0 1.06 1.06 7 7 0 0 0 0-9.899Z"/>
|
||||
<path d="M14.329 7.172a.75.75 0 0 0-1.061 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 0 0 1.06 1.06 4 4 0 0 0 0-5.656Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Copy" aria-label="Copy" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Like" aria-label="Like" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="More settings" aria-label="More settings" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,56 @@
|
||||
<div class="flex flex-col gap-4 w-fit">
|
||||
<!-- User's Chat -->
|
||||
<div class="w-full max-w-2xl border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" class="size-8 rounded-full object-cover" alt="User avatar"/>
|
||||
<span class="text-sm font-bold">Alice Brown</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">what is a developer?</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Edit" aria-label="Edit your input">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4" >
|
||||
<path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"/>
|
||||
<path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-center text-on-surface dark:text-on-surface-dark">Which response do you prefer?</p>
|
||||
|
||||
<!-- AI's Response -->
|
||||
<div class="flex w-full max-w-2xl gap-4 overflow-x-auto pb-4">
|
||||
<!-- Response 1 -->
|
||||
<div class="w-full min-w-[80%] md:min-w-0 border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-sm font-bold">Response 1</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">
|
||||
A magician who turns caffeine into code, pizza into programs, and stress into syntax errors.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Response 2 -->
|
||||
<div class="w-full min-w-[80%] md:min-w-0 border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-sm font-bold">Response 2</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">
|
||||
Someone who talks to computers in their own language and occasionally gets a response.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
82
penguinui-components/ai-output-display/image-output.html
Normal file
82
penguinui-components/ai-output-display/image-output.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<div class="sm:grid-cols-2 grid-cols-1 grid w-full max-w-2xl gap-6 border-outline bg-surface-alt p-6 dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border">
|
||||
<div class="group relative">
|
||||
<img class="object-cover rounded-radius" src="https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/ai-fantasy-1.webp" alt="fantasy character version 1" />
|
||||
<button class="absolute right-4 top-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Download" aria-label="download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"/>
|
||||
<path d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="absolute right-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Share" aria-label="Share">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M12 6a2 2 0 1 0-1.994-1.842L5.323 6.5a2 2 0 1 0 0 3l4.683 2.342a2 2 0 1 0 .67-1.342L5.995 8.158a2.03 2.03 0 0 0 0-.316L10.677 5.5c.353.311.816.5 1.323.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="absolute left-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Report" aria-label="Report">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M2.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.5 0v-2.624l.33-.083A6.044 6.044 0 0 1 8 11c1.29.645 2.77.807 4.17.457l1.48-.37a.462.462 0 0 0 .35-.448V3.56a.438.438 0 0 0-.544-.425l-1.287.322C10.77 3.808 9.291 3.646 8 3a6.045 6.045 0 0 0-4.17-.457l-.34.085A.75.75 0 0 0 2.75 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="group relative">
|
||||
<img class="object-cover rounded-radius" src="https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/ai-fantasy-2.webp" alt="fantasy character version 2" />
|
||||
<button class="absolute right-4 top-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Download" aria-label="download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"/>
|
||||
<path d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="absolute right-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Share" aria-label="Share">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M12 6a2 2 0 1 0-1.994-1.842L5.323 6.5a2 2 0 1 0 0 3l4.683 2.342a2 2 0 1 0 .67-1.342L5.995 8.158a2.03 2.03 0 0 0 0-.316L10.677 5.5c.353.311.816.5 1.323.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="absolute left-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Report" aria-label="Report">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M2.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.5 0v-2.624l.33-.083A6.044 6.044 0 0 1 8 11c1.29.645 2.77.807 4.17.457l1.48-.37a.462.462 0 0 0 .35-.448V3.56a.438.438 0 0 0-.544-.425l-1.287.322C10.77 3.808 9.291 3.646 8 3a6.045 6.045 0 0 0-4.17-.457l-.34.085A.75.75 0 0 0 2.75 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="group relative">
|
||||
<img class="object-cover rounded-radius" src="https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/ai-fantasy-3.webp" alt="fantasy character version 3" />
|
||||
<button class="absolute right-4 top-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Download" aria-label="download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"/>
|
||||
<path d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="absolute right-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Share" aria-label="Share">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M12 6a2 2 0 1 0-1.994-1.842L5.323 6.5a2 2 0 1 0 0 3l4.683 2.342a2 2 0 1 0 .67-1.342L5.995 8.158a2.03 2.03 0 0 0 0-.316L10.677 5.5c.353.311.816.5 1.323.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="absolute left-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Report" aria-label="Report">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M2.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.5 0v-2.624l.33-.083A6.044 6.044 0 0 1 8 11c1.29.645 2.77.807 4.17.457l1.48-.37a.462.462 0 0 0 .35-.448V3.56a.438.438 0 0 0-.544-.425l-1.287.322C10.77 3.808 9.291 3.646 8 3a6.045 6.045 0 0 0-4.17-.457l-.34.085A.75.75 0 0 0 2.75 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="group relative">
|
||||
<img class="object-cover rounded-radius" src="https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/ai-fantasy-4.webp" alt="fantasy character version 4" />
|
||||
<button class="absolute right-4 top-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Download" aria-label="download">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"/>
|
||||
<path d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="absolute right-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Share" aria-label="Share">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M12 6a2 2 0 1 0-1.994-1.842L5.323 6.5a2 2 0 1 0 0 3l4.683 2.342a2 2 0 1 0 .67-1.342L5.995 8.158a2.03 2.03 0 0 0 0-.316L10.677 5.5c.353.311.816.5 1.323.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="absolute left-4 bottom-3 rounded-full bg-surface/75 p-1.5 text-on-surface opacity-0 transition hover:bg-surface/85 focus-visible:opacity-100 active:outline-offset-0 focus-visible:outline-offset-2 group-hover:opacity-100 group-focus:opacity-100 dark:bg-surface-dark/75 dark:text-on-surface-dark dark:hover:bg-surface-dark/85" title="Report" aria-label="Report">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M2.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.5 0v-2.624l.33-.083A6.044 6.044 0 0 1 8 11c1.29.645 2.77.807 4.17.457l1.48-.37a.462.462 0 0 0 .35-.448V3.56a.438.438 0 0 0-.544-.425l-1.287.322C10.77 3.808 9.291 3.646 8 3a6.045 6.045 0 0 0-4.17-.457l-.34.085A.75.75 0 0 0 2.75 2Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,74 @@
|
||||
<div class="flex flex-col gap-4">
|
||||
<!-- User's Chat -->
|
||||
<div class="w-full max-w-2xl border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" class="size-8 rounded-full object-cover" alt="User avatar"/>
|
||||
<span class="text-sm font-bold">Bob Johnson</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">Generate a code for "Hellow World" in Javascript</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Edit" aria-label="Edit your input">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-4" >
|
||||
<path d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"/>
|
||||
<path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI's Response -->
|
||||
<div class="w-full max-w-2xl border-outline bg-surface-alt p-6 text-left dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" >
|
||||
|
||||
<div class="flex items-center gap-2 text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<span class="flex size-8 items-center justify-center rounded-full bg-primary text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="text-sm font-bold">Pengu AI</span>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">
|
||||
Certainly! Below is a simple JavaScript code snippet to print "Hello World" to the console:
|
||||
</p>
|
||||
<div class="relative max-w-full overflow-hidden">
|
||||
<button class="absolute right-2 top-5 rounded-full p-1 text-on-surface-dark/75 hover:text-on-surface-dark focus:outline-hidden focus-visible:text-on-surface-dark focus-visible:outline-offset-0 focus-visible:outline-primary-dark active:-outline-offset-2" title="Copy Code" aria-label="Copy Code"/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<pre class="sm:ml-10 scroll-on my-4 overflow-x-auto bg-surface-dark p-4 text-sm text-on-surface-dark rounded-radius">
|
||||
<<span class="text-pink-400">script</span>>
|
||||
<span class="text-pink-400">console</span>.log("<span class="text-blue-400">Hello World!</span>")
|
||||
</<span class="text-pink-400">script</span>>
|
||||
</pre>
|
||||
</div>
|
||||
<p class="text-pretty sm:pl-10 mt-4 sm:mt-0 text-sm text-on-surface dark:text-on-surface-dark">
|
||||
Is there anything else I can help with?
|
||||
</p>
|
||||
<!-- Actions -->
|
||||
<div class="mt-2 flex items-center gap-2 sm:pl-10">
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Read Aloud" aria-label="Read Aloud" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M10.5 3.75a.75.75 0 0 0-1.264-.546L5.203 7H2.667a.75.75 0 0 0-.7.48A6.985 6.985 0 0 0 1.5 10c0 .887.165 1.737.468 2.52.111.29.39.48.7.48h2.535l4.033 3.796a.75.75 0 0 0 1.264-.546V3.75ZM16.45 5.05a.75.75 0 0 0-1.06 1.061 5.5 5.5 0 0 1 0 7.778.75.75 0 0 0 1.06 1.06 7 7 0 0 0 0-9.899Z"/>
|
||||
<path d="M14.329 7.172a.75.75 0 0 0-1.061 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 0 0 1.06 1.06 4 4 0 0 0 0-5.656Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Copy" aria-label="Copy" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Like" aria-label="Like" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="rounded-full p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="More settings" aria-label="More settings" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
<div x-data="{
|
||||
copiedToClipboard: false,
|
||||
copyToClipboard() {
|
||||
navigator.clipboard
|
||||
.writeText($refs.targetText.textContent)
|
||||
.then(() => {
|
||||
this.copiedToClipboard = true
|
||||
})
|
||||
.catch((err) => {
|
||||
this.copiedToClipboard = false
|
||||
})
|
||||
},
|
||||
}" class="flex flex-col gap-4 border border-outline rounded-radius bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<pre x-ref="targetText" class="w-full whitespace-normal">
|
||||
<p>Here is a joke about penguins:</p>
|
||||
<p>Why don't penguins like talking to strangers at parties?</p>
|
||||
<p>Because they find it too ice-breaking!</p>
|
||||
</pre>
|
||||
|
||||
<button class="rounded-full w-fit p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Copy" aria-label="Copy" x-on:click="copyToClipboard()" x-on:click.away="copiedToClipboard = false">
|
||||
<span class="sr-only" x-text="copiedToClipboard ? 'copied' : 'copy the response to clipboard'"></span>
|
||||
<svg x-show="!copiedToClipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<svg x-show="copiedToClipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 fill-success">
|
||||
<path fill-rule="evenodd" d="M11.986 3H12a2 2 0 0 1 2 2v6a2 2 0 0 1-1.5 1.937V7A2.5 2.5 0 0 0 10 4.5H4.063A2 2 0 0 1 6 3h.014A2.25 2.25 0 0 1 8.25 1h1.5a2.25 2.25 0 0 1 2.236 2ZM10.5 4v-.75a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0-.75.75V4h3Z" clip-rule="evenodd"/>
|
||||
<path fill-rule="evenodd" d="M2 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm6.585 1.08a.75.75 0 0 1 .336 1.005l-1.75 3.5a.75.75 0 0 1-1.16.234l-1.75-1.5a.75.75 0 0 1 .977-1.139l1.02.875 1.321-2.64a.75.75 0 0 1 1.006-.336Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
<div class="relative max-w-md">
|
||||
<img src="/your-file" alt="variation 1 - image in webp format" class="object-cover rounded-radius" />
|
||||
<a role="button" href="/your-file" download="penguin-ai-robot" class="absolute right-2.5 top-2.5 rounded-radius z-10 bg-surface-alt/75 p-1 text-on-surface dark:bg-surface-dark-alt/75 dark:text-on-surface-dark">
|
||||
<span class="sr-only">download variation 1</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
122
penguinui-components/ai-output-interactions/share-widget.html
Normal file
122
penguinui-components/ai-output-interactions/share-widget.html
Normal file
@@ -0,0 +1,122 @@
|
||||
<div x-data="{
|
||||
fallbackModalIsOpen: false,
|
||||
copiedToClipboard: false,
|
||||
share() {
|
||||
// check if web share API is available
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: document.title,
|
||||
text: 'Check out this site',
|
||||
url: window.location.href,
|
||||
})
|
||||
} else {
|
||||
this.fallbackModalIsOpen = true
|
||||
}
|
||||
},
|
||||
copyUrlToClipboard(url) {
|
||||
navigator.clipboard
|
||||
.writeText(url)
|
||||
.then(() => {
|
||||
this.copiedToClipboard = true
|
||||
})
|
||||
.catch((err) => {
|
||||
this.copiedToClipboard = false
|
||||
})
|
||||
},
|
||||
}">
|
||||
<button title="Share" x-on:click="share()" class="rounded-full p-1 text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark">
|
||||
<span class="sr-only">share</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-6">
|
||||
<path fill-rule="evenodd" d="M15.75 4.5a3 3 0 1 1 .825 2.066l-8.421 4.679a3.002 3.002 0 0 1 0 1.51l8.421 4.679a3 3 0 1 1-.729 1.31l-8.421-4.678a3 3 0 1 1 0-4.132l8.421-4.679a3 3 0 0 1-.096-.755Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Modal -->
|
||||
<div x-cloak x-show="fallbackModalIsOpen" class="fixed inset-0 z-100 flex items-end justify-center bg-black/30 p-4 pb-8 sm:items-center lg:p-8" role="dialog" aria-labelledby="sharetModalTitle" aria-modal="true" x-on:click.self="fallbackModalIsOpen = false" x-on:keydown.esc.window="fallbackModalIsOpen = false" x-transition.opacity.duration.200ms x-trap.inert.noscroll="fallbackModalIsOpen">
|
||||
<div x-show="fallbackModalIsOpen" class="flex w-full max-w-lg flex-col gap-4 rounded-radius border border-outline overflow-hidden bg-surface text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark" x-transition:enter="transition delay-100 duration-200 ease-out motion-reduce:transition-opacity" x-transition:enter-end="scale-100 opacity-100" x-transition:enter-start="scale-50 opacity-0">
|
||||
|
||||
<!-- Dialog Header -->
|
||||
<div class="flex items-center justify-between border-b border-outline bg-surface-alt/60 p-4 dark:border-outline-dark dark:bg-surface-dark/20">
|
||||
<h3 id="sharetModalTitle" class="font-semibold tracking-wide text-on-surface-strong dark:text-on-surface-dark-strong">Share</h3>
|
||||
<button aria-label="close modal" x-on:click="fallbackModalIsOpen = false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path fill-rule="evenodd" d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dialog Body -->
|
||||
<div class="flex flex-col gap-8 px-4 py-8">
|
||||
<!-- Social Icons -->
|
||||
<div class="grid grid-cols-3 gap-6 px-4 sm:grid-cols-5 sm:gap-4">
|
||||
|
||||
<!-- X - Twitter -->
|
||||
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.penguinui.com%2F&text=UI%20Components%20for%20Tailwind%20CSS%20and%20Alpine%20JS" class="flex flex-col items-center justify-center gap-1.5 text-white" target="_blank">
|
||||
<div class="w-fits flex items-center justify-center size-10 rounded-full bg-black p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-xs text-on-surface dark:text-on-surface-dark">X(Twitter)</span>
|
||||
</a>
|
||||
|
||||
<!-- Facebook -->
|
||||
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.penguinui.com%2F" class="flex flex-col items-center justify-center gap-1.5 text-white" target="_blank">
|
||||
<div class="w-fits flex items-center justify-center size-10 rounded-full bg-blue-500 p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-6">
|
||||
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-xs text-on-surface dark:text-on-surface-dark">Facebook</span>
|
||||
</a>
|
||||
|
||||
<!-- Reddit -->
|
||||
<a href="http://www.reddit.com/submit?url=https%3A%2F%2Fwww.penguinui.com%2F&title=UI%20Components%20for%20Tailwind%20CSS%20and%20Alpine%20JS" class="flex flex-col items-center justify-center gap-1.5 text-white" target="_blank">
|
||||
<div class="w-fits flex items-center justify-center size-10 rounded-full bg-orange-600 p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-7">
|
||||
<path d="M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z" />
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-xs text-on-surface dark:text-on-surface-dark">Reddit</span>
|
||||
</a>
|
||||
|
||||
<!-- LinkedIn -->
|
||||
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.penguinui.com%2F&title=UI%20Components%20for%20Tailwind%20CSS%20and%20Alpine%20JS" class="flex flex-col items-center justify-center gap-1.5 text-white" target="_blank">
|
||||
<div class="w-fits flex items-center justify-center size-10 rounded-full bg-blue-700 p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5">
|
||||
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-xs text-on-surface dark:text-on-surface-dark">Linkedin</span>
|
||||
</a>
|
||||
|
||||
<!-- Email -->
|
||||
<a href="mailto:?subject=Check out Penguin UI&body=Check out this cool UI components library http://www.penguinui.com." class="flex flex-col items-center justify-center gap-1.5" target="_blank">
|
||||
<div class="w-fits flex items-center justify-center size-10 rounded-full bg-primary dark:bg-primary-dark p-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-6 fill-on-primary dark:fill-on-primary-dark">
|
||||
<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
|
||||
<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="whitespace-nowrap text-xs text-on-surface dark:text-on-surface-dark">Email</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Copy -->
|
||||
<div class="relative px-2">
|
||||
<label for="shareLink" class="sr-only">share link</label>
|
||||
<input id="shareLink" type="text" class="w-full bg-surface-alt border border-outline rounded-radius px-2.5 py-2 pr-10 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" x-ref="shareUrl" x-bind:value="window.location.href" />
|
||||
<button class="absolute right-5 top-1/2 -translate-y-1/2 rounded-full p-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:focus-visible:outline-primary-dark" x-on:click="copyUrlToClipboard($refs.shareUrl.value)" x-on:click.away="copiedToClipboard = false">
|
||||
<span class="sr-only" x-text="copiedToClipboard ? 'copied' : 'copy the url to clipboard'"></span>
|
||||
<svg x-cloak x-show="!copiedToClipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="size-5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184" />
|
||||
</svg>
|
||||
<svg x-cloak x-show="copiedToClipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" aria-hidden="true" class="size-5 stroke-success">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
<div x-data class="flex w-full flex-col overflow-hidden border-outline bg-surface-alt text-on-surface has-[p:focus]:outline-2 has-[p:focus]:outline-offset-2 has-[p:focus]:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:has-[p:focus]:outline-primary-dark rounded-radius border">
|
||||
<div class="p-2">
|
||||
<p id="promptLabel" class="pb-1 pl-2 text-sm font-bold text-on-surface opacity-60 dark:text-on-surface-dark">Prompt</p>
|
||||
<p class="scroll-on max-h-44 w-full overflow-y-auto px-2 py-1 focus:outline-hidden" role="textbox" aria-labelledby="promptLabel" x-on:paste.prevent="document.execCommand('insertText', false, $event.clipboardData.getData('text/plain'))" x-ref="promptTextInput" contenteditable></p>
|
||||
<textarea name="promptText" x-ref="promptText" hidden></textarea>
|
||||
</div>
|
||||
<div class="flex w-full items-center px-2.5 py-2">
|
||||
<button type="button" class="ml-auto flex items-center gap-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-xs font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius" x-on:click="$refs.promptText.value = $refs.promptTextInput.innerText">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Generate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,8 @@
|
||||
<div class="relative w-full">
|
||||
<label for="aiPromt" for="aiPromt" class="sr-only">ai prompt</label>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" class="absolute left-3 top-1/2 size-4 -translate-y-1/2 fill-primary dark:fill-primary-dark">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<input id="aiPromt" type="text" class="w-full border-outline bg-surface-alt border border-outline rounded-radius px-2 py-2 pl-10 pr-24 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" name="prompt" placeholder="Ask AI ..." />
|
||||
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 bg-primary rounded-radius px-2 py-1 text-xs tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Generate</button>
|
||||
</div>
|
||||
36
penguinui-components/ai-prompt-input/with-action-button.html
Normal file
36
penguinui-components/ai-prompt-input/with-action-button.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<div x-data class="flex w-full flex-col overflow-hidden border-outline bg-surface-alt text-on-surface has-[p:focus]:outline-2 has-[p:focus]:outline-offset-2 has-[p:focus]:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:has-[p:focus]:outline-primary-dark rounded-radius border">
|
||||
<div class="p-2">
|
||||
<p id="promptLabel" class="pb-1 pl-2 text-sm font-bold text-on-surface opacity-60 dark:text-on-surface-dark">Prompt</p>
|
||||
<p class="scroll-on max-h-44 w-full overflow-y-auto px-2 py-1 focus:outline-hidden" role="textbox" aria-labelledby="promptLabel" x-on:paste.prevent="document.execCommand('insertText', false, $event.clipboardData.getData('text/plain'))" x-ref="promptTextInput" contenteditable></p>
|
||||
<textarea name="promptText" x-ref="promptText" hidden></textarea>
|
||||
</div>
|
||||
<div class="flex w-full items-center justify-end gap-4 px-2.5 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="rounded-radius p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Use Camera" aria-label="Use Camera">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||||
<path fill-rule="evenodd" d="M1 8a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 8.07 3h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 16.07 6H17a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8Zm13.5 3a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM10 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="rounded-radius p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Upload Image" aria-label="Upload Image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button class="rounded-radius p-1 text-on-surface/75 hover:bg-surface-dark/10 hover:text-on-surface focus:outline-hidden focus-visible:text-on-surface focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-primary active:bg-surface-dark/5 active:-outline-offset-2 dark:text-on-surface-dark/75 dark:hover:bg-surface/10 dark:hover:text-on-surface-dark dark:focus-visible:text-on-surface-dark dark:focus-visible:outline-primary-dark dark:active:bg-surface/5" title="Use Voice" aria-label="Use Voice">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5" aria-hidden="true">
|
||||
<path d="M7 4a3 3 0 0 1 6 0v6a3 3 0 1 1-6 0V4Z" />
|
||||
<path d="M5.5 9.643a.75.75 0 0 0-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.546A6.001 6.001 0 0 0 16 10v-.357a.75.75 0 0 0-1.5 0V10a4.5 4.5 0 0 1-9 0v-.357Z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="flex items-center gap-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-xs font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius" x-on:click="$refs.promptText.value = $refs.promptTextInput.innerText">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-3" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Generate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
19
penguinui-components/ai-prompt-input/with-suggestions.html
Normal file
19
penguinui-components/ai-prompt-input/with-suggestions.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="flex w-full flex-col gap-2">
|
||||
<div class="bg-surface-alt border-outline py-4 dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border">
|
||||
<ul class="text-on-surface dark:text-on-surface-dark text-sm">
|
||||
<li class="px-4 py-1 hover:bg-surface-dark/5 dark:hover:bg-surface/5"><button class="text-left">a penguin swimming in the ocean</button></li>
|
||||
<li class="px-4 py-1 hover:bg-surface-dark/5 dark:hover:bg-surface/5"><button class="text-left">a penguin fishing under the water</button></li>
|
||||
<li class="px-4 py-1 hover:bg-surface-dark/5 dark:hover:bg-surface/5"><button class="text-left">a penguin walking slowly on the snow</button></li>
|
||||
<li class="px-4 py-1 hover:bg-surface-dark/5 dark:hover:bg-surface/5"><button class="text-left">a penguin hugging another penguin</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="relative w-full">
|
||||
<label for="aiPromt" for="aiPromt" class="sr-only">ai prompt</label>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" class="absolute left-3 top-1/2 size-4 -translate-y-1/2 fill-primary dark:fill-primary-dark">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<input id="aiPromt" type="text" class="w-full border-outline bg-surface-alt border border-outline rounded-radius px-2 py-2 pl-10 pr-24 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" value="a penguin" name="prompt" placeholder="Ask AI ..." />
|
||||
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 bg-primary rounded-radius px-2 py-1 text-xs tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Generate</button>
|
||||
</div>
|
||||
</div>
|
||||
74
penguinui-components/ai-triggers/button.html
Normal file
74
penguinui-components/ai-triggers/button.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!-- Create - primary -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-primary border-primary text-on-primary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- Create - secondary -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-secondary border-secondary text-on-secondary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-secondary-dark dark:border-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- Create - inverse -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-surface-dark border-surface-dark text-on-surface-dark transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface dark:border-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Generate - primary -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-primary border-primary text-on-primary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"/>
|
||||
</svg>
|
||||
Generate
|
||||
</button>
|
||||
|
||||
<!-- Generate - secondary -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-secondary border-secondary text-on-secondary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-secondary-dark dark:border-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"/>
|
||||
</svg>
|
||||
Generate
|
||||
</button>
|
||||
|
||||
<!-- Generate - inverse -->
|
||||
<button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm border px-4 py-2 text-sm font-medium tracking-wide bg-surface-dark border-surface-dark text-on-surface-dark transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface dark:border-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707zM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1zM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707zM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0z"/>
|
||||
</svg>
|
||||
Generate
|
||||
</button>
|
||||
|
||||
|
||||
<!-- FAB - primary -->
|
||||
<button aria-label="AI Agent" class="inline-flex items-center justify-center rounded-full border p-4 tracking-wide bg-primary border-primary text-on-primary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6" aria-hidden="true">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- FAB - secondary -->
|
||||
<button aria-label="AI Agent" class="inline-flex items-center justify-center rounded-full border p-4 tracking-wide bg-secondary border-secondary text-on-secondary transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-secondary-dark dark:border-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6" aria-hidden="true">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- FAB - inverse -->
|
||||
<button aria-label="AI Agent" class="inline-flex items-center justify-center rounded-full border p-4 tracking-wide bg-surface-dark border-surface-dark text-on-surface-dark transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface dark:border-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-6" aria-hidden="true">
|
||||
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
|
||||
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
48
penguinui-components/ai-triggers/gradient-button.html
Normal file
48
penguinui-components/ai-triggers/gradient-button.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!-- cyan-blue -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-r from-cyan-600 to-blue-600 focus-visible:outline-cyan-600 dark:focus-visible:outline-cyan-600 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
<!-- blue-purple -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-br from-blue-600 to-purple-600 focus-visible:outline-blue-600 dark:focus-visible:outline-blue-600 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
<!-- violet -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-b from-violet-800 to-violet-500 focus-visible:outline-violet-800 dark:focus-visible:outline-violet-800 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
<!-- purple-pink -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-r from-purple-600 to-pink-600 focus-visible:outline-purple-600 dark:focus-visible:outline-purple-600 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
<!-- indigo-blue -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-r from-indigo-600 to-blue-600 focus-visible:outline-indigo-600 dark:focus-visible:outline-indigo-600 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
<!-- green-blue-indigo -->
|
||||
<button type="button" class="active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 font-medium bg-linear-to-br from-green-500 via-blue-500 to-indigo-700 focus-visible:outline-indigo-500 dark:focus-visible:outline-indigo-500 hover:opacity-75 inline-flex items-center justify-center gap-2 px-4 py-2 rounded-radius text-white text-sm tracking-wide transition whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
AI Assist
|
||||
</button>
|
||||
|
||||
10
penguinui-components/ai-triggers/keyboard-shortcut.html
Normal file
10
penguinui-components/ai-triggers/keyboard-shortcut.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<div x-data="{ aiPromptIsVisible: false }" class="fixed left-1/2 -translate-x-1/2 bottom-5 z-10 w-full max-w-xl" x-on:click.away="aiPromptIsVisible = false" x-on:keydown.cmd.shift.a.window.prevent="aiPromptIsVisible = ! aiPromptIsVisible" x-on:keydown.ctrl.shift.a.window.prevent="aiPromptIsVisible = ! aiPromptIsVisible" x-on:keydown.esc.window.prevent="aiPromptIsVisible = false">
|
||||
<div x-show="aiPromptIsVisible" class="relative w-full" x-transition x-trap="aiPromptIsVisible">
|
||||
<label for="aiPromt" for="aiPromt" class="sr-only">ai prompt</label>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" class="absolute left-3 top-1/2 size-4 -translate-y-1/2 fill-primary dark:fill-primary-dark">
|
||||
<path fill-rule="evenodd" d="M5 4a.75.75 0 0 1 .738.616l.252 1.388A1.25 1.25 0 0 0 6.996 7.01l1.388.252a.75.75 0 0 1 0 1.476l-1.388.252A1.25 1.25 0 0 0 5.99 9.996l-.252 1.388a.75.75 0 0 1-1.476 0L4.01 9.996A1.25 1.25 0 0 0 3.004 8.99l-1.388-.252a.75.75 0 0 1 0-1.476l1.388-.252A1.25 1.25 0 0 0 4.01 6.004l.252-1.388A.75.75 0 0 1 5 4ZM12 1a.75.75 0 0 1 .721.544l.195.682c.118.415.443.74.858.858l.682.195a.75.75 0 0 1 0 1.442l-.682.195a1.25 1.25 0 0 0-.858.858l-.195.682a.75.75 0 0 1-1.442 0l-.195-.682a1.25 1.25 0 0 0-.858-.858l-.682-.195a.75.75 0 0 1 0-1.442l.682-.195a1.25 1.25 0 0 0 .858-.858l.195-.682A.75.75 0 0 1 12 1ZM10 11a.75.75 0 0 1 .728.568.968.968 0 0 0 .704.704.75.75 0 0 1 0 1.456.968.968 0 0 0-.704.704.75.75 0 0 1-1.456 0 .968.968 0 0 0-.704-.704.75.75 0 0 1 0-1.456.968.968 0 0 0 .704-.704A.75.75 0 0 1 10 11Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<input id="aiPromt" type="text" class="w-full border-outline bg-surface-alt border border-outline rounded-radius px-2 py-2 pl-10 pr-24 text-sm text-on-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" name="prompt" placeholder="Ask AI to generate ..." />
|
||||
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 bg-primary rounded-radius px-2 py-1 text-xs tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Generate</button>
|
||||
</div>
|
||||
</div>
|
||||
44
penguinui-components/ai-triggers/trigger-orb.html
Normal file
44
penguinui-components/ai-triggers/trigger-orb.html
Normal file
@@ -0,0 +1,44 @@
|
||||
<button type="button" aria-label="AI Agent" class="rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:focus-visible:outline-primary-dark">
|
||||
<svg class="w-16" viewBox="0 0 838 837" fill="none" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M515.718 110.605C621.291 149.011 714.28 313.637 646.577 499.743C578.874 685.848 438.407 805.582 332.834 767.176C227.261 728.77 172.327 427.631 240.03 241.525C264.94 173.052 302.98 129.691 346.376 104.145C420.926 60.2597 448.989 86.3295 515.718 110.605Z" fill="url(#linearGradient1)" fill-opacity="0.6" />
|
||||
<path d="M156.136 453.009C156.169 480.494 140.036 537.977 222.056 604.127C338.957 655.053 526.064 778.991 591.853 627.973C657.641 476.956 715.723 241.089 598.822 190.163C481.921 139.237 221.924 301.992 156.136 453.009Z" fill="url(#linearGradient2)" fill-opacity="0.6" />
|
||||
<path opacity="0.8" d="M766.324 448.634C743.549 558.643 594.059 674.407 400.133 634.258C206.208 594.109 67.4634 472.382 90.2388 362.373C113.014 252.364 403.08 154.565 597.005 194.714C668.356 209.486 716.75 240.874 748.289 280.13C802.469 347.57 780.72 379.1 766.324 448.634Z" fill="url(#linearGradient3)" fill-opacity="0.5" />
|
||||
<ellipse cx="419" cy="409" rx="419" ry="409" fill="url(#radialGradient1)" />
|
||||
<ellipse class="animate-pulse" cx="419" cy="409" rx="419" ry="409" fill="url(#radialGradient2)" />
|
||||
<ellipse cx="419" cy="409" rx="419" ry="409" fill="url(#radialGradient3)" />
|
||||
|
||||
<defs>
|
||||
<lineargradient id="linearGradient1" x1="420.705" y1="249.747" x2="423.671" y2="663.385" gradientUnits="userSpaceOnUse" >
|
||||
<stop stop-color="#00D1FF" />
|
||||
<stop offset="1" stop-color="#C626FF" stop-opacity="0" />
|
||||
</lineargradient>
|
||||
|
||||
<lineargradient id="linearGradient2" x1="487.879" y1="-248.502" y2="140.966" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00A3FF" stop-opacity="0.14" />
|
||||
<stop offset="1" stop-color="#FF00B8" />
|
||||
</lineargradient>
|
||||
|
||||
<lineargradient id="linearGradient3" x1="161.766" y1="376.102" x2="594.449" y2="567.328" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#00FFE0"/>
|
||||
<stop offset="1" stop-color="#C626FF" stop-opacity="0" />
|
||||
</lineargradient>
|
||||
|
||||
<radialgradient id="radialGradient1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419 409) rotate(90) scale(358.5 367.131)">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="0.193741" stop-color="#E4E4E4" />
|
||||
<stop offset="1" stop-color="#737373" stop-opacity="0" />
|
||||
</radialgradient>
|
||||
|
||||
<radialgradient id="radialGradient2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419 409) rotate(90) scale(293.5 300.566)">
|
||||
<stop stop-color="white" />
|
||||
<stop offset="0.314072" stop-color="white" />
|
||||
<stop offset="1" stop-color="#737373" stop-opacity="0" />
|
||||
</radialgradient>
|
||||
|
||||
<radialgradient id="radialGradient3" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(419 409) rotate(90) scale(534 546.857)">
|
||||
<stop stop-color="#545454" stop-opacity="0" />
|
||||
<stop offset="1" stop-color="#5D64FF" stop-opacity="0.35" />
|
||||
</radialgradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</button>
|
||||
109
penguinui-components/alert/alert-dismiss-functionality.html
Normal file
109
penguinui-components/alert/alert-dismiss-functionality.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!-- info Alert -->
|
||||
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible"
|
||||
class="relative w-full overflow-hidden rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
||||
<div class="bg-info/15 text-info rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-info">Update Available</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">A new version is available. Please update to the latest version.
|
||||
</p>
|
||||
</div>
|
||||
<button type="button" @click="alertIsVisible = false" class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- success Alert -->
|
||||
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible"
|
||||
class="relative w-full overflow-hidden rounded-radius border border-success bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
<div class="flex w-full items-center gap-2 bg-success/10 p-4">
|
||||
<div class="bg-success/15 text-success rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-success">Successfully Subscribed</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Success! You've subscribed to our newsletter. Welcome aboard!</p>
|
||||
</div>
|
||||
<button type="button" @click="alertIsVisible = false" class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- warning Alert -->
|
||||
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible"
|
||||
class="relative w-full overflow-hidden rounded-radius border border-warning bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
<div class="flex w-full items-center gap-2 bg-warning/10 p-4">
|
||||
<div class="bg-warning/15 text-warning rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-warning">Credit Card Expires Soon</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Your credit card expires soon. Please update your payment
|
||||
information.</p>
|
||||
</div>
|
||||
<button type="button" @click="alertIsVisible = false" class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- danger Alert -->
|
||||
<div x-data="{ alertIsVisible: true }" x-show="alertIsVisible"
|
||||
class="relative w-full overflow-hidden rounded-radius border border-danger bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-100 scale-100"
|
||||
x-transition:leave-end="opacity-0 scale-90">
|
||||
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
||||
<div class="bg-danger/15 text-danger rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-danger">Invalid Email Address</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">The email address you entered is invalid. Please try again.</p>
|
||||
</div>
|
||||
<button type="button" @click="alertIsVisible = false" class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="w-4 h-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
127
penguinui-components/alert/alert-with-action.html
Normal file
127
penguinui-components/alert/alert-with-action.html
Normal file
@@ -0,0 +1,127 @@
|
||||
<!-- info Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
||||
<div class="bg-info/15 text-info rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 ml-2">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-info">Update Available</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">A new version is available. Please update to the latest
|
||||
version.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-semibold tracking-wide text-info transition hover:opacity-75 active:opacity-100">
|
||||
Update Now
|
||||
</button>
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 dark:text-on-surface-dark active:opacity-100">
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- success Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-success bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-success/10 p-4">
|
||||
<div class="bg-success/15 text-success rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 ml-2">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-success">Successfully Subscribed</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Success! You've subscribed to our newsletter. Welcome aboard!
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-semibold tracking-wide text-success transition hover:opacity-75 active:opacity-100">
|
||||
Dashboard
|
||||
</button>
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 dark:text-on-surface-dark active:opacity-100">
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- warning Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-warning bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-warning/10 p-4">
|
||||
<div class="bg-warning/15 text-warning rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 ml-2">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-warning">Credit Card Expires Soon</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Your credit card expires soon. Please update your payment
|
||||
information.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-semibold tracking-wide text-warning transition hover:opacity-75 active:opacity-100">
|
||||
Update Now
|
||||
</button>
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 dark:text-on-surface-dark active:opacity-100">
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- danger Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-danger bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
||||
<div class="bg-danger/15 text-danger rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 ml-2">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-danger">Invalid Email Address</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">The email address you entered is invalid. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-semibold tracking-wide text-danger transition hover:opacity-75 active:opacity-100">
|
||||
Try Again
|
||||
</button>
|
||||
<button type="button"
|
||||
class="whitespace-nowrap text-center text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 dark:text-on-surface-dark active:opacity-100">
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
103
penguinui-components/alert/alert-with-link.html
Normal file
103
penguinui-components/alert/alert-with-link.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!-- info Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-sky-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
||||
<div class="bg-sky-500/15 text-sky-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex w-full flex-col items-center justify-between gap-2 ml-2 sm:flex-row">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-info">Update Available</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">A new version is available. Please update to the latest
|
||||
version.</p>
|
||||
</div>
|
||||
<a href="#"
|
||||
class="whitespace-nowrap ml-auto text-sm font-medium text-info tracking-wide transition hover:opacity-75 text-center active:opacity-100">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- success Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-green-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-success/10 p-4">
|
||||
<div class="bg-green-500/15 text-green-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex w-full flex-col items-center justify-between gap-2 ml-2 sm:flex-row">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-success">Successfully Subscribed</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Success! You've subscribed to our newsletter. Welcome aboard!
|
||||
</p>
|
||||
</div>
|
||||
<a href="#"
|
||||
class="whitespace-nowrap ml-auto text-sm font-medium text-success tracking-wide transition hover:opacity-75 text-center active:opacity-100">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- warning Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-amber-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-warning/10 p-4">
|
||||
<div class="bg-amber-500/15 text-amber-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex w-full flex-col items-center justify-between gap-2 ml-2 sm:flex-row">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-warning">Credit Card Expires Soon</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Your credit card expires soon. Please update your payment
|
||||
information.</p>
|
||||
</div>
|
||||
<a href="#"
|
||||
class="whitespace-nowrap ml-auto text-sm font-medium text-warning tracking-wide transition hover:opacity-75 text-center active:opacity-100">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- danger Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-red-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
||||
<div class="bg-red-500/15 text-red-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex w-full flex-col items-center justify-between gap-2 ml-2 sm:flex-row">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-danger">Invalid Email Address</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">The email address you entered is invalid. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
<a href="#"
|
||||
class="whitespace-nowrap ml-auto text-sm font-medium text-danger tracking-wide transition hover:opacity-75 text-center active:opacity-100">
|
||||
Details
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
48
penguinui-components/alert/alert-with-list.html
Normal file
48
penguinui-components/alert/alert-with-list.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!-- danger Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-danger bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
||||
<div class="bg-danger/15 text-danger rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-danger">Password is not strong</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">The password you entered does not meet the requirements. Make sure
|
||||
your password:</p>
|
||||
<ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium text-danger sm:text-sm">
|
||||
<li>has <strong>minimum 8</strong> characters</li>
|
||||
<li>includes <strong>both upper and lower </strong> cases</li>
|
||||
<li>contains <strong>at least one number</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- info Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-radius border border-info bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
||||
<div class="bg-info/15 text-info rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-info">Password Requirements</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">In order to keep your account secure, make sure your password:</p>
|
||||
<ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium sm:text-sm">
|
||||
<li>has <strong>minimum 8</strong> characters</li>
|
||||
<li>includes <strong>both upper and lower </strong> cases</li>
|
||||
<li>contains <strong>at least one number</strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
101
penguinui-components/alert/default-alert.html
Normal file
101
penguinui-components/alert/default-alert.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!-- info Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-sm border border-sky-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-info/10 p-4">
|
||||
<div class="bg-sky-500/15 text-sky-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-info">Update Available</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">A new version is available. Please update to the latest version.
|
||||
</p>
|
||||
</div>
|
||||
<button class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- success Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-sm border border-green-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-success/10 p-4">
|
||||
<div class="bg-green-500/15 text-green-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-success">Successfully Subscribed</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Success! You've subscribed to our newsletter. Welcome aboard!</p>
|
||||
</div>
|
||||
<button class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- warning Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-sm border border-amber-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-warning/10 p-4">
|
||||
<div class="bg-amber-500/15 text-amber-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-8-5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-1.5 0v-4.5A.75.75 0 0 1 10 5Zm0 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-warning">Credit Card Expires Soon</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">Your credit card expires soon. Please update your payment
|
||||
information.</p>
|
||||
</div>
|
||||
<button class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- danger Alert -->
|
||||
<div class="relative w-full overflow-hidden rounded-sm border border-red-500 bg-surface text-on-surface dark:bg-surface-dark dark:text-on-surface-dark"
|
||||
role="alert">
|
||||
<div class="flex w-full items-center gap-2 bg-danger/10 p-4">
|
||||
<div class="bg-red-500/15 text-red-500 rounded-full p-1" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6"
|
||||
aria-hidden="true">
|
||||
<path fill-rule="evenodd"
|
||||
d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<h3 class="text-sm font-semibold text-danger">Invalid Email Address</h3>
|
||||
<p class="text-xs font-medium sm:text-sm">The email address you entered is invalid. Please try again.</p>
|
||||
</div>
|
||||
<button class="ml-auto" aria-label="dismiss alert">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor"
|
||||
fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
15
penguinui-components/avatar/avatar-with-border.html
Normal file
15
penguinui-components/avatar/avatar-with-border.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!-- info Border Avatar -->
|
||||
<img class="size-14 rounded-full border-2 border-info object-cover object-center p-0.5"
|
||||
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
|
||||
<!-- success Border Avatar -->
|
||||
<img class="size-14 rounded-full border-2 border-success object-cover object-center p-0.5"
|
||||
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
|
||||
<!-- warning Border Avatar -->
|
||||
<img class="size-14 rounded-full border-2 border-warning object-cover object-center p-0.5"
|
||||
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
|
||||
<!-- danger Border Avatar -->
|
||||
<img class="size-14 rounded-full border-2 border-danger object-cover object-center p-0.5"
|
||||
src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
@@ -0,0 +1,56 @@
|
||||
<!-- default Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-on-surface/50 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- inverse Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline-dark bg-surface-dark-alt text-on-surface-dark/50 dark:border-outline dark:bg-surface-alt dark:text-on-surface/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- primary Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-on-primary/50 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- secondary Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-secondary bg-secondary text-on-secondary/50 dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- info Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-info bg-info text-on-info/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- success Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-success bg-success text-on-success/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- warning Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-warning bg-warning text-on-warning/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<!-- danger Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-danger bg-danger text-on-danger/50">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-full h-full mt-3">
|
||||
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
24
penguinui-components/avatar/avatar-with-initials.html
Normal file
24
penguinui-components/avatar/avatar-with-initials.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!-- default Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-2xl font-bold tracking-wider text-on-surface/80 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/80">JS</span>
|
||||
|
||||
<!-- inverse Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-outline-dark bg-surface-dark-alt text-2xl font-bold tracking-wider text-on-surface-dark/80 dark:border-outline dark:bg-surface-alt dark:text-on-surface/80">JS</span>
|
||||
|
||||
<!-- primary Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-primary bg-primary text-2xl font-bold tracking-wider text-on-primary/80 dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary/80">JS</span>
|
||||
|
||||
<!-- secondary Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-secondary bg-secondary text-2xl font-bold tracking-wider text-on-secondary/80 dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark/80">JS</span>
|
||||
|
||||
<!-- info Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-info bg-info text-2xl font-bold tracking-wider text-on-info/80">JS</span>
|
||||
|
||||
<!-- success Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-success bg-success text-2xl font-bold tracking-wider text-on-success/80">JS</span>
|
||||
|
||||
<!-- warning Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-warning bg-warning text-2xl font-bold tracking-wider text-on-warning/80">JS</span>
|
||||
|
||||
<!-- danger Avatar -->
|
||||
<span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-danger bg-danger text-2xl font-bold tracking-wider text-on-danger/80">JS</span>
|
||||
|
||||
35
penguinui-components/avatar/avatar-with-status.html
Normal file
35
penguinui-components/avatar/avatar-with-status.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!-- Avatar - offline Status -->
|
||||
<div class="relative w-fit">
|
||||
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-outline dark:bg-outline-dark">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Avatar - info Status -->
|
||||
<div class="relative w-fit">
|
||||
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-info">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Avatar - success Status -->
|
||||
<div class="relative w-fit">
|
||||
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-success">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Avatar - warning Status -->
|
||||
<div class="relative w-fit">
|
||||
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-warning">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Avatar - danger Status -->
|
||||
<div class="relative w-fit">
|
||||
<img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-surface dark:border-surface-dark bg-danger">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
1
penguinui-components/avatar/default-avatar.html
Normal file
1
penguinui-components/avatar/default-avatar.html
Normal file
@@ -0,0 +1 @@
|
||||
<img class="size-14 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
1
penguinui-components/avatar/square-avatar.html
Normal file
1
penguinui-components/avatar/square-avatar.html
Normal file
@@ -0,0 +1 @@
|
||||
<img class="size-14 rounded-md object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
6
penguinui-components/avatar/stacked-avatars.html
Normal file
6
penguinui-components/avatar/stacked-avatars.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<div class="flex items-center -space-x-4">
|
||||
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
|
||||
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-3.webp" alt="Rounded avatar">
|
||||
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-5.webp" alt="Rounded avatar">
|
||||
<img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="Rounded avatar">
|
||||
</div>
|
||||
36
penguinui-components/badge/animating-notification-badge.html
Normal file
36
penguinui-components/badge/animating-notification-badge.html
Normal file
@@ -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>
|
||||
|
||||
60
penguinui-components/badge/badge-with-icon.html
Normal file
60
penguinui-components/badge/badge-with-icon.html
Normal file
@@ -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>
|
||||
|
||||
64
penguinui-components/badge/badge-with-indicator.html
Normal file
64
penguinui-components/badge/badge-with-indicator.html
Normal file
@@ -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>
|
||||
|
||||
24
penguinui-components/badge/default-badge.html
Normal file
24
penguinui-components/badge/default-badge.html
Normal file
@@ -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>
|
||||
|
||||
14
penguinui-components/badge/notification-badge.html
Normal file
14
penguinui-components/badge/notification-badge.html
Normal file
@@ -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>
|
||||
40
penguinui-components/badge/soft-color-badge.html
Normal file
40
penguinui-components/badge/soft-color-badge.html
Normal file
@@ -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>
|
||||
|
||||
11
penguinui-components/banner/banner-with-button.html
Normal file
11
penguinui-components/banner/banner-with-button.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<div class="relative flex border-outline bg-surface-alt p-4 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark border-b">
|
||||
<div class="mx-auto flex flex-wrap items-center gap-2 px-6">
|
||||
<p class="sm:text-sm text-pretty text-xs">Get Fit Anywhere, Anytime 💪</p>
|
||||
<button type="button" class="whitespace-nowrap bg-primary px-4 py-1 text-center text-xs font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">Start free trial</button>
|
||||
</div>
|
||||
<button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
22
penguinui-components/banner/cookie-banner.html
Normal file
22
penguinui-components/banner/cookie-banner.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="flex max-w-sm flex-col gap-4 border-outline bg-surface-alt/50 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark rounded-radius border">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between border-b border-outline bg-surface-alt/60 px-4 py-2 dark:border-outline-dark dark:bg-surface-dark-alt/20">
|
||||
<h3 class="flex items-center gap-2 font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">
|
||||
<span class="text-3xl" aria-hidden="true">🍪</span>
|
||||
Cookie Time!
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="px-4 text-sm">
|
||||
<p class="text-pretty">
|
||||
We use cookies to make your experience sweet and crispy. For more information, please read our <a href="#" class="cursor-pointer font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark">Privacy Policy</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="flex flex-col-reverse justify-end gap-2 border-t border-outline bg-surface-alt/60 px-4 py-2 sm:flex-row sm:items-center dark:border-outline-dark dark:bg-surface-dark/20">
|
||||
<button type="button" class="cursor-pointer whitespace-nowrap p-2 text-center text-xs font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark rounded-radius">No, thank you</button>
|
||||
<button type="button" class="cursor-pointer whitespace-nowrap bg-primary px-4 py-2 border border-primary text-center text-xs font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:border-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">Sounds Good!</button>
|
||||
</div>
|
||||
</div>
|
||||
8
penguinui-components/banner/fixed-banner.html
Normal file
8
penguinui-components/banner/fixed-banner.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="fixed inset-x-0 top-0 z-10 flex border-outline bg-surface-alt p-4 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark border-b">
|
||||
<p class="px-6 text-xs sm:text-sm text-pretty mx-auto">Limited Time Offer! Explore exclusive <a href="#" class="font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark">deals & savings</a> </p>
|
||||
<button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
8
penguinui-components/banner/simple-banner.html
Normal file
8
penguinui-components/banner/simple-banner.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="relative flex border-outline bg-surface-alt p-4 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark border-b">
|
||||
<p class="px-6 text-xs sm:text-sm text-pretty mx-auto">Limited Time Offer! Explore exclusive <a href="#" class="font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark">deals & savings</a> </p>
|
||||
<button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="size-4 shrink-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -0,0 +1,17 @@
|
||||
<nav class="text-sm font-medium text-on-surface dark:text-on-surface-dark" aria-label="breadcrumb">
|
||||
<ol class="flex flex-wrap items-center gap-1">
|
||||
<li class="flex items-center gap-1">
|
||||
<a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Home</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="flex items-center gap-1">
|
||||
<a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Components</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="flex items-center text-on-surface-strong gap-1 font-bold dark:text-on-surface-dark-strong" aria-current="page">Breadcrumb</li>
|
||||
</ol>
|
||||
</nav>
|
||||
21
penguinui-components/breadcrumbs/breadcrumb-with-icon.html
Normal file
21
penguinui-components/breadcrumbs/breadcrumb-with-icon.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<nav class="text-sm font-medium text-on-surface dark:text-on-surface-dark" aria-label="breadcrumb">
|
||||
<ol class="flex flex-wrap items-center gap-1">
|
||||
<li class="flex items-center gap-1.5">
|
||||
<a href="#" aira-label="home" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" class="size-4">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="flex items-center gap-1">
|
||||
<a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Components</a>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</li>
|
||||
<li class="flex items-center gap-1 font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-current="page">Breadcrumb</li>
|
||||
</ol>
|
||||
</nav>
|
||||
13
penguinui-components/breadcrumbs/breadcrumb-with-slash.html
Normal file
13
penguinui-components/breadcrumbs/breadcrumb-with-slash.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<nav class="text-sm font-medium text-on-surface dark:text-on-surface-dark" aria-label="breadcrumb">
|
||||
<ol class="flex flex-wrap items-center gap-2">
|
||||
<li class="flex items-center gap-2">
|
||||
<a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Home</a>
|
||||
<span aria-hidden="true">/</span>
|
||||
</li>
|
||||
<li class="flex items-center gap-2">
|
||||
<a href="#" class="hover:text-on-surface-strong dark:hover:text-on-surface-dark-strong">Components</a>
|
||||
<span aria-hidden="true">/</span>
|
||||
</li>
|
||||
<li class="text-on-surface-strong font-bold dark:text-on-surface-dark-strong" aria-current="page">Breadcrumb</li>
|
||||
</ol>
|
||||
</nav>
|
||||
64
penguinui-components/buttons/button-with-icon.html
Normal file
64
penguinui-components/buttons/button-with-icon.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!-- primary Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-primary border border-primary dark:border-primary-dark px-4 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-primary dark:fill-on-primary-dark" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- secondary Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-secondary border border-secondary dark:border-secondary-dark px-4 py-2 text-sm font-medium tracking-wide text-on-secondary transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-secondary dark:fill-on-secondary-dark" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- alternate Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-surface-alt border border-surface-alt dark:border-surface-dark-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-surface-strong dark:fill-on-surface-dark-strong" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- inverse Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-surface-dark border border-surface-dark dark:border-surface px-4 py-2 text-sm font-medium tracking-wide text-on-surface-dark transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-surface-dark dark:fill-on-surface" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- info Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-info border border-info dark:border-info px-4 py-2 text-sm font-medium tracking-wide text-on-info transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-info dark:text-on-info dark:focus-visible:outline-info">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-info dark:fill-on-info" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- danger Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-danger border border-danger dark:border-danger px-4 py-2 text-sm font-medium tracking-wide text-on-danger transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-danger dark:text-on-danger dark:focus-visible:outline-danger">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-danger dark:fill-on-danger" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- warning Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-warning border border-warning dark:border-warning px-4 py-2 text-sm font-medium tracking-wide text-on-warning transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-warning dark:text-on-warning dark:focus-visible:outline-warning">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-warning dark:fill-on-warning" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
<!-- success Button with Icon -->
|
||||
<button type="button" class="inline-flex justify-center items-center gap-2 whitespace-nowrap rounded-radius bg-success border border-success dark:border-success px-4 py-2 text-sm font-medium tracking-wide text-on-success transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-success dark:text-on-success dark:focus-visible:outline-success">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-success dark:fill-on-success" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Create
|
||||
</button>
|
||||
|
||||
24
penguinui-components/buttons/default-button.html
Normal file
24
penguinui-components/buttons/default-button.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!-- primary Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-primary border border-primary px-4 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">Primary</button>
|
||||
|
||||
<!-- secondary Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-secondary border border-secondary px-4 py-2 text-sm font-medium tracking-wide text-on-secondary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-secondary-dark dark:border-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">Secondary</button>
|
||||
|
||||
<!-- alternate Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-surface-alt border border-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface-dark-alt dark:border-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">Alternate</button>
|
||||
|
||||
<!-- inverse Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-surface-dark border border-surface-dark px-4 py-2 text-sm font-medium tracking-wide text-on-surface-dark transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface dark:border-surface dark:text-on-surface dark:focus-visible:outline-surface">Inverse</button>
|
||||
|
||||
<!-- info Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-info border border-info px-4 py-2 text-sm font-medium tracking-wide text-onInfo transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-info dark:border-info dark:text-onInfo dark:focus-visible:outline-info">Info</button>
|
||||
|
||||
<!-- danger Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-danger border border-danger px-4 py-2 text-sm font-medium tracking-wide text-onDanger transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-danger dark:border-danger dark:text-onDanger dark:focus-visible:outline-danger">Danger</button>
|
||||
|
||||
<!-- warning Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-warning border border-warning px-4 py-2 text-sm font-medium tracking-wide text-onWarning transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-warning dark:border-warning dark:text-onWarning dark:focus-visible:outline-warning">Warning</button>
|
||||
|
||||
<!-- success Button -->
|
||||
<button type="button" class="whitespace-nowrap rounded-radius bg-success border border-success px-4 py-2 text-sm font-medium tracking-wide text-onSuccess transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-success dark:border-success dark:text-onSuccess dark:focus-visible:outline-success">Success</button>
|
||||
|
||||
56
penguinui-components/buttons/floating-action-button.html
Normal file
56
penguinui-components/buttons/floating-action-button.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!-- primary Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-primary bg-primary p-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-primary dark:fill-on-primary-dark" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- secondary Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-secondary bg-secondary p-2 text-sm font-medium tracking-wide text-on-secondary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-secondary-dark dark:bg-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-secondary dark:fill-on-secondary-dark" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- alternate Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-surface-alt bg-surface-alt p-2 text-sm font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-surface-dark-alt dark:bg-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-surface-strong dark:fill-on-surface-dark-strong" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- inverse Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-surface-dark bg-surface-dark p-2 text-sm font-medium tracking-wide text-on-surface-dark transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-surface dark:bg-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-surface-dark dark:fill-on-surface" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- info Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-info bg-info p-2 text-sm font-medium tracking-wide text-on-info transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-info dark:bg-info dark:text-on-info dark:focus-visible:outline-info">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-info dark:fill-on-info" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- danger Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-danger bg-danger p-2 text-sm font-medium tracking-wide text-on-danger transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-danger dark:bg-danger dark:text-on-danger dark:focus-visible:outline-danger">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-danger dark:fill-on-danger" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- warning Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-warning bg-warning p-2 text-sm font-medium tracking-wide text-on-warning transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-warning dark:bg-warning dark:text-on-warning dark:focus-visible:outline-warning">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-warning dark:fill-on-warning" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- success Floating Button -->
|
||||
<button aria-label="create something epic" type="button" class="inline-flex justify-center items-center aspect-square whitespace-nowrap rounded-full border border-success bg-success p-2 text-sm font-medium tracking-wide text-on-success transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-success dark:bg-success dark:text-on-success dark:focus-visible:outline-success">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 fill-on-success dark:fill-on-success" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M12 3.75a.75.75 0 01.75.75v6.75h6.75a.75.75 0 010 1.5h-6.75v6.75a.75.75 0 01-1.5 0v-6.75H4.5a.75.75 0 010-1.5h6.75V4.5a.75.75 0 01.75-.75z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
24
penguinui-components/buttons/ghost-button.html
Normal file
24
penguinui-components/buttons/ghost-button.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!-- primary Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-primary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-primary-dark dark:focus-visible:outline-primary-dark">Primary</button>
|
||||
|
||||
<!-- secondary Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-secondary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-secondary-dark dark:focus-visible:outline-secondary-dark">Secondary</button>
|
||||
|
||||
<!-- alternate Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-outline transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-outline-dark dark:focus-visible:outline-outline-dark">Alternate</button>
|
||||
|
||||
<!-- inverse Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-surface-dark transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-surface dark:focus-visible:outline-surface">Inverse</button>
|
||||
|
||||
<!-- info Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-info transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-info dark:focus-visible:outline-info">Info</button>
|
||||
|
||||
<!-- danger Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-danger transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-danger dark:focus-visible:outline-danger">Danger</button>
|
||||
|
||||
<!-- warning Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-warning transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-warning dark:focus-visible:outline-warning">Warning</button>
|
||||
|
||||
<!-- success Ghost Button -->
|
||||
<button type="button" class="bg-transparent rounded-radius px-4 py-2 text-sm font-medium tracking-wide text-success transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-success dark:focus-visible:outline-success">Success</button>
|
||||
|
||||
72
penguinui-components/buttons/loading-button.html
Normal file
72
penguinui-components/buttons/loading-button.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<!-- primary Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-primary border border-primary px-4 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-primary dark:fill-on-primary-dark" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- secondary Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-secondary border border-secondary px-4 py-2 text-sm font-medium tracking-wide text-on-secondary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-secondary-dark dark:border-secondary-dark dark:text-on-secondary-dark dark:focus-visible:outline-secondary-dark">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-secondary dark:fill-on-secondary-dark" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- alternate Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-surface-alt border border-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface-strong transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-alt active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface-dark-alt dark:border-surface-dark-alt dark:text-on-surface-dark-strong dark:focus-visible:outline-surface-dark-alt">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-surface-strong dark:fill-on-surface-dark-strong" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- inverse Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-surface-dark border border-surface-dark px-4 py-2 text-sm font-medium tracking-wide text-on-surface-dark transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-surface dark:border-surface dark:text-on-surface dark:focus-visible:outline-surface">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-surface-dark dark:fill-on-surface" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- info Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-info border border-info px-4 py-2 text-sm font-medium tracking-wide text-on-info transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-info dark:border-info dark:text-on-info dark:focus-visible:outline-info">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-info dark:fill-on-info" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- danger Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-danger border border-danger px-4 py-2 text-sm font-medium tracking-wide text-on-danger transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-danger dark:border-danger dark:text-on-danger dark:focus-visible:outline-danger">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-danger dark:fill-on-danger" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- warning Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-warning border border-warning px-4 py-2 text-sm font-medium tracking-wide text-on-warning transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-warning dark:border-warning dark:text-on-warning dark:focus-visible:outline-warning">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-warning dark:fill-on-warning" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
<!-- success Loading Button -->
|
||||
<button type="button" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius bg-success border border-success px-4 py-2 text-sm font-medium tracking-wide text-on-success transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-success dark:border-success dark:text-on-success dark:focus-visible:outline-success">
|
||||
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 animate-spin motion-reduce:animate-none fill-on-success dark:fill-on-success" >
|
||||
<path opacity="0.25" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" />
|
||||
<path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
|
||||
</svg>
|
||||
Loading
|
||||
</button>
|
||||
|
||||
24
penguinui-components/buttons/outline-button.html
Normal file
24
penguinui-components/buttons/outline-button.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!-- primary Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-primary px-4 py-2 text-sm font-medium tracking-wide text-primary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-primary-dark dark:text-primary-dark dark:focus-visible:outline-primary-dark">Primary</button>
|
||||
|
||||
<!-- secondary Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-secondary px-4 py-2 text-sm font-medium tracking-wide text-secondary transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-secondary-dark dark:text-secondary-dark dark:focus-visible:outline-secondary-dark">Secondary</button>
|
||||
|
||||
<!-- alternate Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-outline px-4 py-2 text-sm font-medium tracking-wide text-outline transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-outline-dark dark:text-outline-dark dark:focus-visible:outline-outline-dark">Alternate</button>
|
||||
|
||||
<!-- inverse Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-surface-dark px-4 py-2 text-sm font-medium tracking-wide text-surface-dark transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-surface-dark active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-surface dark:text-surface dark:focus-visible:outline-surface">Inverse</button>
|
||||
|
||||
<!-- info Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-info px-4 py-2 text-sm font-medium tracking-wide text-info transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-info active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-info dark:text-info dark:focus-visible:outline-info">Info</button>
|
||||
|
||||
<!-- danger Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-danger px-4 py-2 text-sm font-medium tracking-wide text-danger transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-danger dark:text-danger dark:focus-visible:outline-danger">Danger</button>
|
||||
|
||||
<!-- warning Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-warning px-4 py-2 text-sm font-medium tracking-wide text-warning transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-warning active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-warning dark:text-warning dark:focus-visible:outline-warning">Warning</button>
|
||||
|
||||
<!-- success Outline Button -->
|
||||
<button type="button" class="whitespace-nowrap bg-transparent rounded-radius border border-success px-4 py-2 text-sm font-medium tracking-wide text-success transition hover:opacity-75 text-center focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-success dark:text-success dark:focus-visible:outline-success">Success</button>
|
||||
|
||||
20
penguinui-components/card/card-with-button.html
Normal file
20
penguinui-components/card/card-with-button.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<article class="group flex rounded-radius max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<div class="h-44 md:h-64 overflow-hidden">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-2.webp" class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="view of a coastal Mediterranean village on a hillside, with small boats in the water." />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<div class="flex items-center gap-1 font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
|
||||
</svg>
|
||||
<span>Europe</span>
|
||||
</div>
|
||||
<h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="tripDescription">Mediterranean Escape</h3>
|
||||
<p id="tripDescription" class="text-pretty text-sm mb-2">
|
||||
Relax under the sun, savor delicious cuisine, and create
|
||||
memories that last a lifetime. Book your getaway now.
|
||||
</p>
|
||||
<button type="button" class="whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">Book Now</button>
|
||||
</div>
|
||||
</article>
|
||||
14
penguinui-components/card/default-card.html
Normal file
14
penguinui-components/card/default-card.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<article class="group flex rounded-radius max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<div class="h-44 md:h-64 overflow-hidden">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-1.webp" class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="a penguin robot talking with a human" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<span class="text-sm font-medium">Features</span>
|
||||
<h3 class="text-balance text-xl lg:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="featureDescription">Penguai can teach you Javascript</h3>
|
||||
<p id="featureDescription" class="text-pretty text-sm">
|
||||
Learning JavaScript doesn't need to be difficult. Our penguin AI
|
||||
robot can learn how much you know and will go at your speed.
|
||||
Although Penguai is small, he's got a mighty big CPU.
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
47
penguinui-components/card/ecommerce-product-card.html
Normal file
47
penguinui-components/card/ecommerce-product-card.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<article class="group flex rounded-radius max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<!-- Image -->
|
||||
<div class="h-44 md:h-64 overflow-hidden">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-3.webp" class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="CASIO G-SHOCK GA2100, Black face, black bands" />
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row gap-4 md:gap-12 justify-between">
|
||||
<!-- Title & Rating -->
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-lg lg:text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="productDescription">CASIO G-SHOCK GA2100</h3>
|
||||
<!-- Rating -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="sr-only">Rated 3 stars</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xl"><span class="sr-only">Price</span>$99.99</span>
|
||||
</div>
|
||||
<p id="productDescription" class="mb-2 text-pretty text-sm">
|
||||
The Casio G-Shock GA2100 is simply designed for easy
|
||||
timekeeping, featuring a sleek profile and clear display.
|
||||
</p>
|
||||
<!-- Button -->
|
||||
<button type="button" class="flex items-center justify-center gap-2 whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5">
|
||||
<path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Add to Cart
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
22
penguinui-components/card/horizontal-card.html
Normal file
22
penguinui-components/card/horizontal-card.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<article class="group grid rounded-radius max-w-2xl grid-cols-1 md:grid-cols-8 overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<!-- image -->
|
||||
<div class="col-span-3 overflow-hidden">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-4.webp" class="h-52 md:h-full w-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="a men wearing VR goggles" />
|
||||
</div>
|
||||
<!-- body -->
|
||||
<div class="flex flex-col justify-center p-6 col-span-5">
|
||||
<small class="mb-4 font-medium">Artificial Intelligence</small>
|
||||
<h3 class="text-balance text-xl font-bold text-on-surface-strong lg:text-2xl dark:text-on-surface-dark-strong" aria-describedby="articleDescription">AI-Powered VR Goggles Redefine Reality: Augmented Vision for Al</h3>
|
||||
<p id="articleDescription" class="my-4 max-w-lg text-pretty text-sm">
|
||||
Experience the next level of augmented reality with smart
|
||||
goggles integrating cutting-edge AI for seamless interaction
|
||||
with the world around you.
|
||||
</p>
|
||||
<a href="#" class="w-fit font-medium text-primary underline-offset-2 hover:underline focus:underline focus:outline-hidden dark:text-primary-dark">
|
||||
Read full story
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" aria-hidden="true" class="inline size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
17
penguinui-components/card/pricing-card.html
Normal file
17
penguinui-components/card/pricing-card.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<article class="group flex rounded-radius w-full max-w-xs flex-col overflow-hidden border-2 border-primary bg-surface-alt p-6 text-on-surface dark:border-primary-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<span class="ml-auto w-fit rounded-radius bg-primary px-2 py-1 text-xs font-medium text-on-primary dark:bg-primary-dark dark:text-on-primary-dark">TOP CHOICE</span>
|
||||
<h3 class="text-xl text-balance md:text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="planDescription">Premium</h3>
|
||||
<p id="planDescription" class="mt-2 text-pretty text-xs font-medium">Best tools for productivity</p>
|
||||
<span class="mt-8 text-balance text-3xl md:text-4xl font-medium text-on-surface dark:text-on-surface-dark">$8.99</span>
|
||||
<span class="mt-2 text-pretty text-xs font-medium">Per month</span>
|
||||
<h4 class="mt-12 font-medium text-on-surface-strong dark:text-on-surface-dark-strong">Features</h4>
|
||||
<ul class="mt-4 list-inside list-disc space-y-2 text-sm font-medium marker:text-lg marker:text-primary dark:marker:text-primary-dark">
|
||||
<li>Unlimited access to all courses</li>
|
||||
<li>Personalized learning plan</li>
|
||||
<li>Offline viewing</li>
|
||||
<li>No ads</li>
|
||||
<li>High quality video</li>
|
||||
<li>Cancel anytime</li>
|
||||
</ul>
|
||||
<button type="button" class="mt-12 w-full whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">Start your free trial</button>
|
||||
</article>
|
||||
51
penguinui-components/card/socials-card.html
Normal file
51
penguinui-components/card/socials-card.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<article class="group flex rounded-radius max-w-xs flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<!-- Images -->
|
||||
<div class="relative h-36">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-5.gif" class="h-full w-full object-cover" alt="cover photo" />
|
||||
<div class="relative z-10 mx-auto -mt-14 size-28 overflow-hidden rounded-full border-4 border-surface-alt dark:border-surface-dark-alt">
|
||||
<!-- The 3D avatar is generated by AI using https://perchance.org/ai-character-generator with the art style of 'Cute 3D Icon'. -->
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/3d-avatar-1.webp" class="h-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="avatar" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Body -->
|
||||
<div class="flex flex-col gap-2 p-6 text-center mt-12">
|
||||
<h3 class="text-balance text-xl font-bold text-on-surface-strong lg:text-2xl dark:text-on-surface-dark-strong" aria-describedby="profileDescription">Alice Brown</h3>
|
||||
<span class="mx-auto w-fit bg-primary px-2 py-1 text-xs text-on-primary dark:bg-primary-dark dark:text-on-primary-dark rounded-radius">UX DESIGNER</span>
|
||||
<p id="profileDescription" class="mt-4 text-pretty text-sm">
|
||||
Making tech products user-friendly and delightful. Looking to
|
||||
collaborate and create meaningful digital products.
|
||||
</p>
|
||||
<!-- Social Links -->
|
||||
<div class="mt-4 flex items-center justify-center gap-6">
|
||||
|
||||
<!-- Email -->
|
||||
<a href="mailto:youremailaddress@email.com" class="text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark" aria-label="email">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" class="size-7 shrink-0">
|
||||
<path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
|
||||
<path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Instagram -->
|
||||
<a href="https://www.instagram.com" target="_blank" class="text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark" aria-label="instagram">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-6 shrink-0">
|
||||
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- X (Twitter) -->
|
||||
<a href="https://www.x.com" target="_blank" class="text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark" aria-label="x or twitter">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-5 shrink-0">
|
||||
<path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Linkedin -->
|
||||
<a href="https://www.linkedin.com" target="_blank" class="text-on-surface hover:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark" aria-label="linkedin">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-6 shrink-0">
|
||||
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
40
penguinui-components/card/testimonial-card.html
Normal file
40
penguinui-components/card/testimonial-card.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<article class="group rounded-radius flex max-w-md flex-col border border-outline bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-12 text-on-surface-strong dark:text-on-surface-dark-strong group-hover:scale-105 transition duration-500 ease-out" aria-hidden="true">
|
||||
<path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z" />
|
||||
</svg>
|
||||
<p class="mt-2 text-pretty text-sm">
|
||||
Simply put, this software transformed my workflow! Its intuitive
|
||||
interface and powerful features make tasks a breeze. A game-changer
|
||||
for productivity!
|
||||
</p>
|
||||
<!-- avatar & rating -->
|
||||
<div class="flex flex-col-reverse md:flex-row md:items-center mt-8 justify-between gap-6">
|
||||
<!-- avatar & title -->
|
||||
<div class="flex items-center gap-2">
|
||||
<img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" class="size-10 rounded-full object-cover" alt="avatar"/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="font-bold leading-4 text-on-surface-strong dark:text-on-surface-dark-strong">Bob Johnson</h3>
|
||||
<span class="text-xs">CEO - TechNova</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Rating -->
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="sr-only">Rated 4 stars</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
89
penguinui-components/carousel/carousel-on-card.html
Normal file
89
penguinui-components/carousel/carousel-on-card.html
Normal file
@@ -0,0 +1,89 @@
|
||||
<article class="group flex rounded-radius max-w-sm flex-col overflow-hidden border border-outline bg-surface-alt text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark" style="-webkit-mask-image: -webkit-radial-gradient(white, black)">
|
||||
<!-- Carousel -->
|
||||
<div class="h-48 md:h-64 overflow-hidden">
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/nft-1.webp',
|
||||
imgAlt: 'An illustration of a cyberpunk-style ape wearing a hoodie and futuristic headphones.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/nft-2.webp',
|
||||
imgAlt: 'An illustration of a cyberpunk-style ape wearing ajacket.',
|
||||
},
|
||||
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/nft-3.webp',
|
||||
imgAlt: 'An illustration of a cyberpunk-style ape wearing a cape with chains on the neck.',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<div class="relative h-48 md:h-64 w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.300ms>
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col gap-4 p-6">
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col md:flex-row gap-4 md:gap-12 justify-between">
|
||||
<!-- Title -->
|
||||
<div class="flex flex-col">
|
||||
<h3 class="text-lg lg:text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong" aria-describedby="nftDescription">BioHazardApe #343</h3>
|
||||
</div>
|
||||
<!-- Price -->
|
||||
<span class="w-fit bg-secondary h-fit rounded-radius px-2 py-1 text-xs font-medium text-on-secondary dark:bg-secondary-dark dark:text-on-secondary-dark"><span class="sr-only">price</span>0.45 ETH</span>
|
||||
</div>
|
||||
<p id="nftDescription" class="mb-2 text-pretty text-sm">
|
||||
by <a href="#" class="text-primary dark:text-primary-dark">@apeMakers</a>
|
||||
<br/>
|
||||
<br/>
|
||||
BioHazardApe NFT showcases a captivating collection of digital artworks inspired by the wild essence of apes, each piece a gem in the jungle of digital art.
|
||||
</p>
|
||||
<!-- Button -->
|
||||
<button type="button" class="flex items-center justify-center gap-2 border border-primary whitespace-nowrap bg-primary px-4 py-2 text-center text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark rounded-radius">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="size-3.5">
|
||||
<path fill-rule="evenodd" d="M5 4a3 3 0 0 1 6 0v1h.643a1.5 1.5 0 0 1 1.492 1.35l.7 7A1.5 1.5 0 0 1 12.342 15H3.657a1.5 1.5 0 0 1-1.492-1.65l.7-7A1.5 1.5 0 0 1 4.357 5H5V4Zm4.5 0v1h-3V4a1.5 1.5 0 0 1 3 0Zm-3 3.75a.75.75 0 0 0-1.5 0v1a3 3 0 1 0 6 0v-1a.75.75 0 0 0-1.5 0v1a1.5 1.5 0 1 1-3 0v-1Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
I Must Have It
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
91
penguinui-components/carousel/carousel-with-autoplay.html
Normal file
91
penguinui-components/carousel/carousel-with-autoplay.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<div x-data="{
|
||||
// Sets the time between each slides in milliseconds
|
||||
autoplayIntervalTime: 4000,
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
title: 'Front end developers',
|
||||
description: 'The architects of the digital world, constantly battling against their mortal enemy – browser compatibility.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
title: 'Back end developers',
|
||||
description: 'Because not all superheroes wear capes, some wear headphones and stare at terminal screens',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
title: 'Full stack developers',
|
||||
description: 'Where "burnout" is just a fancy term for "Tuesday".',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
isPaused: false,
|
||||
autoplayInterval: null,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
autoplay() {
|
||||
this.autoplayInterval = setInterval(() => {
|
||||
if (! this.isPaused) {
|
||||
this.next()
|
||||
}
|
||||
}, this.autoplayIntervalTime)
|
||||
},
|
||||
// Updates interval time
|
||||
setAutoplayInterval(newIntervalTime) {
|
||||
clearInterval(this.autoplayInterval)
|
||||
this.autoplayIntervalTime = newIntervalTime
|
||||
this.autoplay()
|
||||
},
|
||||
}" x-init="autoplay" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||||
|
||||
<!-- Title and description -->
|
||||
<div class="lg:px-32 lg:py-14 absolute inset-0 z-10 flex flex-col items-center justify-end gap-2 bg-linear-to-t from-surface-dark/85 to-transparent px-16 py-12 text-center">
|
||||
<h3 class="w-full lg:w-[80%] text-balance text-2xl lg:text-3xl font-bold text-on-surface-dark-strong" x-text="slide.title" x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"></h3>
|
||||
<p class="lg:w-1/2 w-full text-pretty text-sm text-on-surface-dark" x-text="slide.description" x-bind:id="'slide' + (index + 1) + 'Description'"></p>
|
||||
</div>
|
||||
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Pause/Play Button -->
|
||||
<button type="button" class="absolute bottom-5 right-5 z-20 rounded-full text-on-surface-dark opacity-50 transition hover:opacity-80 focus-visible:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-dark active:outline-offset-0" aria-label="pause carousel" x-on:click="(isPaused = !isPaused), setAutoplayInterval(autoplayIntervalTime)" x-bind:aria-pressed="isPaused">
|
||||
<svg x-cloak x-show="isPaused" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-7">
|
||||
<path fill-rule="evenodd" d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm6.39-2.908a.75.75 0 0 1 .766.027l3.5 2.25a.75.75 0 0 1 0 1.262l-3.5 2.25A.75.75 0 0 1 8 12.25v-4.5a.75.75 0 0 1 .39-.658Z" clip-rule="evenodd">
|
||||
</svg>
|
||||
<svg x-cloak x-show="!isPaused" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-7">
|
||||
<path fill-rule="evenodd" d="M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm5-2.25A.75.75 0 0 1 7.75 7h.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-4.5Zm4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 .75.75v4.5a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1-.75-.75v-4.5Z" clip-rule="evenodd">
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition" x-on:click="(currentSlideIndex = index + 1), setAutoplayInterval(autoplayIntervalTime)" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface-dark' : 'bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
85
penguinui-components/carousel/carousel-with-cta-button.html
Normal file
85
penguinui-components/carousel/carousel-with-cta-button.html
Normal file
@@ -0,0 +1,85 @@
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
title: 'Front end developers',
|
||||
description: 'The architects of the digital world, constantly battling against their mortal enemy – browser compatibility.',
|
||||
ctaUrl: 'https://example.com',
|
||||
ctaText: 'Become a Developer',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
title: 'Back end developers',
|
||||
description: 'Because not all superheroes wear capes, some wear headphones and stare at terminal screens',
|
||||
ctaUrl: 'https://example.com',
|
||||
ctaText: 'Become a Developer',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
title: 'Full stack developers',
|
||||
description: 'Where "burnout" is just a fancy term for "Tuesday".',
|
||||
ctaUrl: 'https://example.com',
|
||||
ctaText: 'Become a Developer',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||||
|
||||
<!-- Title and description -->
|
||||
<div class="lg:px-32 lg:py-14 absolute inset-0 z-10 flex flex-col items-center justify-end gap-2 bg-linear-to-t from-surface-dark/85 to-transparent px-16 py-12 text-center">
|
||||
<h3 class="w-full lg:w-[80%] text-balance text-2xl lg:text-3xl font-bold text-on-surface-dark-strong" x-text="slide.title" x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"></h3>
|
||||
<p class="lg:w-1/2 w-full text-pretty text-sm text-on-surface-dark" x-text="slide.description" x-bind:id="'slide' + (index + 1) + 'Description'"></p>
|
||||
<button type="button" x-cloak x-show="slide.ctaUrl !== null" class="mt-2 whitespace-nowrap rounded-radius border border-on-surface-dark-strong bg-transparent px-4 py-2 text-center text-xs font-medium tracking-wide text-on-surface-dark-strong transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-on-surface-dark-strong active:opacity-100 active:outline-offset-0 md:text-sm" x-text="slide.ctaText"></button>
|
||||
</div>
|
||||
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-neutral-300' : 'bg-neutral-300/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,66 @@
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-1.webp',
|
||||
imgAlt: 'New collection - ride the wave of excitement.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-2.webp',
|
||||
imgAlt: 'Up to 30% discount, gear up for adventure.',
|
||||
},
|
||||
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-3.webp',
|
||||
imgAlt: '30% off all surfing essentials, ride like a pro.',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change aspect-3/1 to match your images aspect ratio -->
|
||||
<div class="relative aspect-3/1 w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.700ms>
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 bg-surface/75 px-1.5 py-1 md:px-2 dark:bg-surface-dark/75" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition bg-on-surface dark:bg-on-surface-dark" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface dark:bg-on-surface-dark' : 'bg-on-surface/50 dark:bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
78
penguinui-components/carousel/carousel-with-text.html
Normal file
78
penguinui-components/carousel/carousel-with-text.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
title: 'Front end developers',
|
||||
description: 'The architects of the digital world, constantly battling against their mortal enemy – browser compatibility.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
title: 'Back end developers',
|
||||
description: 'Because not all superheroes wear capes, some wear headphones and stare at terminal screens',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
title: 'Full stack developers',
|
||||
description: 'Where "burnout" is just a fancy term for "Tuesday".'
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||||
|
||||
<!-- Title and description -->
|
||||
<div class="lg:px-32 lg:py-14 absolute inset-0 z-10 flex flex-col items-center justify-end gap-2 bg-linear-to-t from-surface-dark/85 to-transparent px-16 py-12 text-center">
|
||||
<h3 class="w-full lg:w-[80%] text-balance text-2xl lg:text-3xl font-bold text-on-surface-dark-strong" x-text="slide.title" x-bind:aria-describedby="'slide' + (index + 1) + 'Description'"></h3>
|
||||
<p class="lg:w-1/2 w-full text-pretty text-sm text-on-surface-dark" x-text="slide.description" x-bind:id="'slide' + (index + 1) + 'Description'"></p>
|
||||
</div>
|
||||
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 px-1.5 py-1 md:px-2" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface-dark' : 'bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
72
penguinui-components/carousel/carousel-with-touch.html
Normal file
72
penguinui-components/carousel/carousel-with-touch.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
touchStartX: null,
|
||||
touchEndX: null,
|
||||
swipeThreshold: 50,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
handleTouchStart(event) {
|
||||
this.touchStartX = event.touches[0].clientX
|
||||
},
|
||||
handleTouchMove(event) {
|
||||
this.touchEndX = event.touches[0].clientX
|
||||
},
|
||||
handleTouchEnd() {
|
||||
if(this.touchEndX){
|
||||
if (this.touchStartX - this.touchEndX > this.swipeThreshold) {
|
||||
this.next()
|
||||
}
|
||||
if (this.touchStartX - this.touchEndX < -this.swipeThreshold) {
|
||||
this.previous()
|
||||
}
|
||||
this.touchStartX = null
|
||||
this.touchEndX = null
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[50svh] w-full" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.700ms>
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 bg-surface/75 px-1.5 py-1 md:px-2 dark:bg-surface-dark/75" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition bg-on-surface dark:bg-on-surface-dark" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface dark:bg-on-surface-dark' : 'bg-on-surface/50 dark:bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
65
penguinui-components/carousel/default-carousel.html
Normal file
65
penguinui-components/carousel/default-carousel.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<div x-data="{
|
||||
slides: [
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',
|
||||
},
|
||||
{
|
||||
imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',
|
||||
imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',
|
||||
},
|
||||
],
|
||||
currentSlideIndex: 1,
|
||||
previous() {
|
||||
if (this.currentSlideIndex > 1) {
|
||||
this.currentSlideIndex = this.currentSlideIndex - 1
|
||||
} else {
|
||||
// If it's the first slide, go to the last slide
|
||||
this.currentSlideIndex = this.slides.length
|
||||
}
|
||||
},
|
||||
next() {
|
||||
if (this.currentSlideIndex < this.slides.length) {
|
||||
this.currentSlideIndex = this.currentSlideIndex + 1
|
||||
} else {
|
||||
// If it's the last slide, go to the first slide
|
||||
this.currentSlideIndex = 1
|
||||
}
|
||||
},
|
||||
}" class="relative w-full overflow-hidden">
|
||||
|
||||
<!-- previous button -->
|
||||
<button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="previous slide" x-on:click="previous()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- next button -->
|
||||
<button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:outline-offset-0 dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark" aria-label="next slide" x-on:click="next()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- slides -->
|
||||
<!-- Change min-h-[50svh] to your preferred height size -->
|
||||
<div class="relative min-h-[50svh] w-full">
|
||||
<template x-for="(slide, index) in slides">
|
||||
<div x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.1000ms>
|
||||
<img class="absolute w-full h-full inset-0 object-cover text-on-surface dark:text-on-surface-dark" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- indicators -->
|
||||
<div class="absolute rounded-radius bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 bg-surface/75 px-1.5 py-1 md:px-2 dark:bg-surface-dark/75" role="group" aria-label="slides" >
|
||||
<template x-for="(slide, index) in slides">
|
||||
<button class="size-2 rounded-full transition bg-on-surface dark:bg-on-surface-dark" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-on-surface dark:bg-on-surface-dark' : 'bg-on-surface/50 dark:bg-on-surface-dark/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,34 @@
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<!-- Recieved -->
|
||||
<div class="flex items-end gap-2">
|
||||
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
||||
<div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
||||
<div class="text-sm">
|
||||
Hi there! How can I assist you today?
|
||||
</div>
|
||||
<span class="ml-auto text-xs">11:32 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sent -->
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="ml-auto flex max-w-[70%] flex-col gap-2 rounded-l-radius rounded-tr-radius bg-primary p-4 text-sm text-on-primary md:max-w-[60%] dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
I accidentally deleted some important files. Can they be recovered?
|
||||
<span class="ml-auto text-xs">11:34 AM</span>
|
||||
</div>
|
||||
<span class="flex size-8 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-sm font-bold tracking-wider text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">JS</span>
|
||||
</div>
|
||||
|
||||
<!-- Recieved -->
|
||||
<div class="flex items-end gap-2">
|
||||
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
||||
<div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
||||
<div class="text-sm">
|
||||
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
|
||||
</div>
|
||||
<span class="ml-auto text-xs">11:32 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<!-- Recieved -->
|
||||
<div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface-strong md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
|
||||
<span class="font-semibold">Penguin UI</span>
|
||||
<div class="text-sm text-on-surface dark:text-on-surface-dark">
|
||||
Hi there! How can I assist you today?
|
||||
</div>
|
||||
<span class="ml-auto text-xs">11:32 AM</span>
|
||||
</div>
|
||||
|
||||
<!-- Sent -->
|
||||
<div class="ml-auto flex max-w-[80%] flex-col gap-2 rounded-l-radius rounded-tr-radius bg-primary p-4 text-sm text-on-primary md:max-w-[60%] dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
I accidentally deleted some important files. Can they be recovered?
|
||||
<span class="ml-auto text-xs">11:34 AM</span>
|
||||
</div>
|
||||
|
||||
<!-- Recieved -->
|
||||
<div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface-strong md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark-strong">
|
||||
<span class="font-semibold">Penguin UI</span>
|
||||
<div class="text-sm text-on-surface dark:text-on-surface-dark">
|
||||
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
|
||||
</div>
|
||||
<span class="ml-auto text-xs">11:35 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
22
penguinui-components/chat-bubble/default-chat-bubble.html
Normal file
22
penguinui-components/chat-bubble/default-chat-bubble.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<!-- Recieved -->
|
||||
<div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 md:max-w-[60%] dark:bg-surface-dark-alt">
|
||||
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
||||
<div class="text-sm text-on-surface dark:text-on-surface-dark">
|
||||
Hi there! How can I assist you today?
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sent -->
|
||||
<div class="ml-auto flex max-w-[80%] flex-col gap-2 rounded-l-radius rounded-tr-radius bg-primary p-4 text-sm text-on-primary md:max-w-[60%] dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
I accidentally deleted some important files. Can they be recovered?
|
||||
</div>
|
||||
|
||||
<!-- Recieved -->
|
||||
<div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
||||
<div class="text-sm">
|
||||
I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
32
penguinui-components/chat-bubble/typing-indicator.html
Normal file
32
penguinui-components/chat-bubble/typing-indicator.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<div class="flex w-full flex-col gap-4">
|
||||
<!-- Recieved -->
|
||||
<div class="flex items-end gap-2">
|
||||
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
||||
<div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-radius rounded-tl-radius bg-surface-alt p-4 text-on-surface md:max-w-[60%] dark:bg-surface-dark-alt dark:text-on-surface-dark">
|
||||
<span class="font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Penguin UI</span>
|
||||
<div class="text-sm">
|
||||
Hi there! How can I assist you today?
|
||||
</div>
|
||||
<span class="ml-auto text-xs">11:32 AM</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sent -->
|
||||
<div class="flex items-end gap-2">
|
||||
<div class="ml-auto flex max-w-[70%] flex-col gap-2 rounded-l-radius rounded-tr-radius bg-primary p-4 text-sm text-on-primary md:max-w-[60%] dark:bg-primary-dark dark:text-on-primary-dark">
|
||||
I accidentally deleted some important files. Can they be recovered?
|
||||
<span class="ml-auto text-xs">11:34 AM</span>
|
||||
</div>
|
||||
<span class="flex size-8 items-center justify-center overflow-hidden rounded-full border border-outline bg-surface-alt text-sm font-bold tracking-wider text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">JS</span>
|
||||
</div>
|
||||
|
||||
<!-- Recieved -->
|
||||
<div class="flex items-end gap-2">
|
||||
<img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
|
||||
<div class="flex gap-1">
|
||||
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
||||
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
||||
<span class="size-1.5 rounded-full bg-on-surface motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-on-surface-dark"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
66
penguinui-components/checkbox/checkbox-color-variants.html
Normal file
66
penguinui-components/checkbox/checkbox-color-variants.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!-- primary Checkbox -->
|
||||
<label for="checkboxPrimary" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxPrimary" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>primary</span>
|
||||
</label>
|
||||
|
||||
<!-- secondary Checkbox -->
|
||||
<label for="checkboxSecondary" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxSecondary" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-secondary checked:before:bg-secondary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-secondary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-secondary-dark dark:checked:before:bg-secondary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-secondary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-secondary peer-checked:visible dark:text-on-secondary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>secondary</span>
|
||||
</label>
|
||||
|
||||
<!-- info Checkbox -->
|
||||
<label for="checkboxInfo" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxInfo" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-info checked:before:bg-info focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-info active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-info dark:checked:before:bg-info dark:focus:outline-outline-dark-strong dark:checked:focus:outline-info" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-info peer-checked:visible dark:text-on-info-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>info</span>
|
||||
</label>
|
||||
|
||||
<!-- success Checkbox -->
|
||||
<label for="checkboxSuccess" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxSuccess" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-success checked:before:bg-success focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-success active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-success dark:checked:before:bg-success dark:focus:outline-outline-dark-strong dark:checked:focus:outline-success" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-success peer-checked:visible dark:text-on-success-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>success</span>
|
||||
</label>
|
||||
|
||||
<!-- warning Checkbox -->
|
||||
<label for="checkboxWarning" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxWarning" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-warning checked:before:bg-warning focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-warning active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-warning dark:checked:before:bg-warning dark:focus:outline-outline-dark-strong dark:checked:focus:outline-warning" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-warning peer-checked:visible dark:text-on-warning-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>warning</span>
|
||||
</label>
|
||||
|
||||
<!-- danger Checkbox -->
|
||||
<label for="checkboxDanger" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxDanger" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-danger checked:before:bg-danger focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-danger active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-danger dark:checked:before:bg-danger dark:focus:outline-outline-dark-strong dark:checked:focus:outline-danger" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-danger peer-checked:visible dark:text-on-danger-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>danger</span>
|
||||
</label>
|
||||
|
||||
36
penguinui-components/checkbox/checkbox-group.html
Normal file
36
penguinui-components/checkbox/checkbox-group.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<h3 class="mb-2 pl-1 font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">Notifications</h3>
|
||||
<ul class="flex min-w-52 flex-col divide-y divide-outline overflow-clip rounded-radius border border-outline dark:divide-outline-dark dark:border-outline-dark">
|
||||
<li>
|
||||
<label for="Email notificationsCheckbox" class="flex items-center gap-2 p-3 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="Email notificationsCheckbox" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" value="Email notifications" checked/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Email notifications</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="Push notificationsCheckbox" class="flex items-center gap-2 p-3 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="Push notificationsCheckbox" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" value="Push notifications" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Push notifications</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="SMS alertsCheckbox" class="flex items-center gap-2 p-3 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="SMS alertsCheckbox" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" value="SMS alerts" checked/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>SMS alerts</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
29
penguinui-components/checkbox/checkbox-with-animation.html
Normal file
29
penguinui-components/checkbox/checkbox-with-animation.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<label for="checkboxSlideUp" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxSlideUp" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/4 peer-checked:-translate-y-1/2 transition duration-200 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
|
||||
<label for="checkboxScaleUp" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxScaleUp" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 before:scale-0 before:rounded-full before:transition before:duration-200 checked:border-primary checked:before:scale-125 checked:before:bg-primary focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 scale-0 transition duration-200 delay-200 peer-checked:scale-100 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
|
||||
<label for="checkboxSlideDown" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxSlideDown" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 before:-translate-y-4 before:transition before:duration-200 checked:border-primary checked:before:translate-y-0 checked:before:bg-primary focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-y-1/2 -translate-x-1/2 text-on-primary opacity-0 transition delay-200 duration-200 peer-checked:visible peer-checked:opacity-100 dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
@@ -0,0 +1,9 @@
|
||||
<label for="checkboxDefault" class="inline-flex min-w-52 items-center justify-between rounded-radius gap-3 border border-outline bg-surface-alt px-4 py-2 text-sm font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span>Notifications</span>
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
</label>
|
||||
33
penguinui-components/checkbox/checkbox-with-custom-icon.html
Normal file
33
penguinui-components/checkbox/checkbox-with-custom-icon.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!-- Xmark Checkbox -->
|
||||
<label for="checkboxXmark" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxXmark" value="" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
|
||||
<!-- Minus Checkbox -->
|
||||
<label for="checkboxMinus" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxMinus" value="" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
|
||||
<!-- Plus Checkbox -->
|
||||
<label for="checkboxPlus" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxPlus" value="" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Check Me</span>
|
||||
</label>
|
||||
|
||||
12
penguinui-components/checkbox/checkbox-with-description.html
Normal file
12
penguinui-components/checkbox/checkbox-with-description.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="flex flex-col items-start">
|
||||
<label for="checkboxDefault" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:opacity-75 has-disabled:cursor-not-allowed">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" aria-describedby="checkboxDescription" checked/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Email Updates</span>
|
||||
</label>
|
||||
<span id="checkboxDescription" class="ml-6 text-sm text-on-surface dark:text-on-surface-dark">You only gonna get good news, promise.</span>
|
||||
</div>
|
||||
9
penguinui-components/checkbox/default-checkbox.html
Normal file
9
penguinui-components/checkbox/default-checkbox.html
Normal file
@@ -0,0 +1,9 @@
|
||||
<label for="checkboxDefault" class="flex items-center gap-2 text-sm font-medium text-on-surface dark:text-on-surface-dark has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75">
|
||||
<span class="relative flex items-center">
|
||||
<input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 appearance-none overflow-hidden rounded-sm border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" checked/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>Notifications</span>
|
||||
</label>
|
||||
129
penguinui-components/combobox/combobox-with-checkboxes.html
Normal file
129
penguinui-components/combobox/combobox-with-checkboxes.html
Normal file
@@ -0,0 +1,129 @@
|
||||
<div x-data="{
|
||||
options: [
|
||||
{
|
||||
value: 'C++',
|
||||
label: 'C++',
|
||||
},
|
||||
{
|
||||
value: 'CSS',
|
||||
label: 'CSS',
|
||||
},
|
||||
{
|
||||
value: 'Golang',
|
||||
label: 'Golang',
|
||||
},
|
||||
{
|
||||
value: 'HTML',
|
||||
label: 'HTML',
|
||||
},
|
||||
{
|
||||
value: 'Java',
|
||||
label: 'Java',
|
||||
},
|
||||
{
|
||||
value: 'Javascript',
|
||||
label: 'Javascript',
|
||||
},
|
||||
{
|
||||
value: 'Kotlin',
|
||||
label: 'Kotlin',
|
||||
},
|
||||
{
|
||||
value: 'Perl',
|
||||
label: 'Perl',
|
||||
},
|
||||
{
|
||||
value: 'PHP',
|
||||
label: 'PHP',
|
||||
},
|
||||
{
|
||||
value: 'Python',
|
||||
label: 'Python',
|
||||
},
|
||||
{
|
||||
value: 'Ruby',
|
||||
label: 'Ruby',
|
||||
},
|
||||
{
|
||||
value: 'Rust',
|
||||
label: 'Rust',
|
||||
},
|
||||
{
|
||||
value: 'TypeScript',
|
||||
label: 'TypeScript',
|
||||
},
|
||||
],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOptions: [],
|
||||
setLabelText() {
|
||||
const count = this.selectedOptions.length;
|
||||
|
||||
// if there are no selected options
|
||||
if (count === 0) return 'Please Select';
|
||||
|
||||
// join the selected options with a comma
|
||||
return this.selectedOptions.join(', ');
|
||||
},
|
||||
highlightFirstMatchingOption(pressedKey) {
|
||||
// if Enter pressed, do nothing
|
||||
if (pressedKey === 'Enter') return
|
||||
|
||||
// find and focus the option that starts with the pressed key
|
||||
const option = this.options.find((item) =>
|
||||
item.label.toLowerCase().startsWith(pressedKey.toLowerCase()),
|
||||
)
|
||||
if (option) {
|
||||
const index = this.options.indexOf(option)
|
||||
const allOptions = document.querySelectorAll('.combobox-option')
|
||||
if (allOptions[index]) {
|
||||
allOptions[index].focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
handleOptionToggle(option) {
|
||||
if (option.checked) {
|
||||
this.selectedOptions.push(option.value)
|
||||
} else {
|
||||
// remove the unchecked option from the selectedOptions array
|
||||
this.selectedOptions = this.selectedOptions.filter(
|
||||
(opt) => opt !== option.value,
|
||||
)
|
||||
}
|
||||
// set the value of the hidden field to the selectedOptions array
|
||||
this.$refs.hiddenTextField.value = this.selectedOptions
|
||||
},
|
||||
}" class="w-full max-w-xs flex flex-col gap-1" x-on:keydown="highlightFirstMatchingOption($event.key)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false">
|
||||
<label for="skills" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Skills(s)</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" role="combobox" class="inline-flex w-full items-center justify-between gap-2 whitespace-nowrap border-outline bg-surface-alt px-4 py-2 text-sm font-medium capitalize tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark border rounded-radius" aria-haspopup="listbox" aria-controls="skillsList" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-label="setLabelText()" x-bind:aria-expanded="isOpen || openedWithKeyboard">
|
||||
<span class="text-sm w-full font-normal text-start overflow-hidden text-ellipsis whitespace-nowrap" x-text="setLabelText()"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- hidden input to grab the selected value -->
|
||||
<input id="skills" name="skills" type="text" x-ref="hiddenTextField" hidden />
|
||||
<ul x-cloak x-show="isOpen || openedWithKeyboard" id="skillsList" class="absolute z-10 left-0 top-11 flex max-h-44 w-full flex-col overflow-hidden overflow-y-auto border-outline bg-surface-alt py-1.5 dark:border-outline-dark dark:bg-surface-dark-alt border rounded-radius" role="listbox" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<!-- option -->
|
||||
<li role="option">
|
||||
<label class="flex items-center gap-2 px-4 py-3 text-sm font-medium text-on-surface hover:bg-surface-dark/5 has-focus:bg-surface-dark/5 dark:text-on-surface-dark dark:hover:bg-surface/5 dark:has-focus:bg-surface/5 has-checked:text-on-surface-strong dark:has-checked:text-on-surface-dark-strong has-disabled:cursor-not-allowed has-disabled:opacity-75" x-bind:for="'checkboxOption' + index">
|
||||
<div class="relative flex items-center">
|
||||
<input type="checkbox" class="combobox-option before:content[''] peer relative size-4 appearance-none overflow-hidden border border-outline bg-surface-alt before:absolute before:inset-0 checked:border-primary checked:before:bg-primary focus:outline-2 focus:outline-offset-2 focus:outline-outline-strong checked:focus:outline-primary active:outline-offset-0 disabled:cursor-not-allowed dark:border-outline-dark rounded-sm dark:bg-surface-dark-alt dark:checked:border-primary-dark dark:checked:before:bg-primary-dark dark:focus:outline-outline-dark-strong dark:checked:focus:outline-primary-dark" x-on:change="handleOptionToggle($el)" x-on:keydown.enter.prevent="$el.checked = ! $el.checked; handleOptionToggle($el)" x-bind:value="item.value" x-bind:id="'checkboxOption' + index" />
|
||||
<!-- Checkmark -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-on-primary peer-checked:visible dark:text-on-primary-dark" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span x-text="item.label"></span>
|
||||
</label>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
115
penguinui-components/combobox/combobox-with-images.html
Normal file
115
penguinui-components/combobox/combobox-with-images.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<div x-data="{
|
||||
options: [
|
||||
{
|
||||
value: 'Aiden Walker',
|
||||
label: 'Aiden Walker',
|
||||
email: 'aiden.walker@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-1.webp',
|
||||
},
|
||||
{
|
||||
value: 'Alex Martinez',
|
||||
label: 'Alex Martinez',
|
||||
email: 'alex.martinez@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-6.webp',
|
||||
},
|
||||
{
|
||||
value: 'Ava Collins',
|
||||
label: 'Ava Collins',
|
||||
email: 'ava.collins@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-8.webp',
|
||||
},
|
||||
{
|
||||
value: 'Bob Johnson',
|
||||
label: 'Bob Johnson',
|
||||
email: 'bob.johnson@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-2.webp',
|
||||
},
|
||||
{
|
||||
value: 'Emily Rodriguez',
|
||||
label: 'Emily Rodriguez',
|
||||
email: 'emily.rodriguez@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-5.webp',
|
||||
},
|
||||
{
|
||||
value: 'Emma Thompson',
|
||||
label: 'Emma Thompson',
|
||||
email: 'emma.thompson@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-4.webp',
|
||||
},
|
||||
{
|
||||
value: 'Ethan Brown',
|
||||
label: 'Ethan Brown',
|
||||
email: 'ethan.brown@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-9.webp',
|
||||
},
|
||||
{
|
||||
value: 'Isabella Davis',
|
||||
label: 'Isabella Davis',
|
||||
email: 'isabellea.davis@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-3.webp',
|
||||
},
|
||||
{
|
||||
value: 'Noah Brooks',
|
||||
label: 'Noah Brooks',
|
||||
email: 'noah.brooks@example.com',
|
||||
img: 'https://res.cloudinary.com/ds8pgw1pf/image/upload/penguinui/component-assets/avatars/avatar-7.webp',
|
||||
},
|
||||
],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.hiddenTextField.value = option.value
|
||||
},
|
||||
highlightFirstMatchingOption(pressedKey) {
|
||||
const option = this.options.find((item) =>
|
||||
item.label.toLowerCase().startsWith(pressedKey.toLowerCase()),
|
||||
)
|
||||
if (option) {
|
||||
const index = this.options.indexOf(option)
|
||||
const allOptions = document.querySelectorAll('.combobox-option')
|
||||
if (allOptions[index]) {
|
||||
allOptions[index].focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
}" class="w-full max-w-xs flex flex-col gap-1" x-on:keydown="highlightFirstMatchingOption($event.key)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false">
|
||||
<label for="user" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Share with</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" role="combobox" class="inline-flex w-full items-center justify-between gap-2 whitespace-nowrap border-outline bg-surface-alt px-4 py-2 text-sm font-medium capitalize tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark rounded-radius border" aria-haspopup="listbox" aria-controls="usersList" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'" x-bind:aria-expanded="isOpen || openedWithKeyboard">
|
||||
<span class="text-sm font-normal" x-text="selectedOption ? selectedOption.value : 'Please Select'"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- hidden input to grab the selected value -->
|
||||
<input id="user" name="user" type="text" x-ref="hiddenTextField" hidden/>
|
||||
<ul x-cloak x-show="isOpen || openedWithKeyboard" id="usersList" class="absolute z-10 left-0 top-11 flex max-h-44 w-full flex-col overflow-hidden overflow-y-auto border-outline bg-surface-alt py-1.5 dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" role="listbox" aria-label="users list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="combobox-option inline-flex justify-between items-center gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0" >
|
||||
<div class="flex items-center gap-2">
|
||||
<img class="size-8 rounded-full" x-bind:src="item.img" alt="" aria-hidden="true"/>
|
||||
<!-- Label -->
|
||||
<div class="flex flex-col">
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.label"></span>
|
||||
<span class="text-xs"x-text="item.email"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Checkmark -->
|
||||
<svg x-cloak x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
259
penguinui-components/combobox/combobox-with-search.html
Normal file
259
penguinui-components/combobox/combobox-with-search.html
Normal file
@@ -0,0 +1,259 @@
|
||||
<div x-data="{
|
||||
allOptions: [
|
||||
{
|
||||
label: 'Acura',
|
||||
value: 'Acura'
|
||||
},
|
||||
{
|
||||
label: 'Alfa Romeo',
|
||||
value: 'Alfa Romeo'
|
||||
},
|
||||
{
|
||||
label: 'Aston Martin',
|
||||
value: 'Aston Martin'
|
||||
},
|
||||
{
|
||||
label: 'Audi',
|
||||
value: 'Audi'
|
||||
},
|
||||
{
|
||||
label: 'Bentley',
|
||||
value: 'Bentley'
|
||||
},
|
||||
{
|
||||
label: 'BMW',
|
||||
value: 'BMW'
|
||||
},
|
||||
{
|
||||
label: 'Bugatti',
|
||||
value: 'Bugatti'
|
||||
},
|
||||
{
|
||||
label: 'Buick',
|
||||
value: 'Buick'
|
||||
},
|
||||
{
|
||||
label: 'Cadillac',
|
||||
value: 'Cadillac'
|
||||
},
|
||||
{
|
||||
label: 'Chevrolet',
|
||||
value: 'Chevrolet'
|
||||
},
|
||||
{
|
||||
label: 'Chrysler',
|
||||
value: 'Chrysler'
|
||||
},
|
||||
{
|
||||
label: 'Citroën',
|
||||
value: 'Citroën'
|
||||
},
|
||||
{
|
||||
label: 'Dodge',
|
||||
value: 'Dodge'
|
||||
},
|
||||
{
|
||||
label: 'Ferrari',
|
||||
value: 'Ferrari'
|
||||
},
|
||||
{
|
||||
label: 'Fiat',
|
||||
value: 'Fiat'
|
||||
},
|
||||
{
|
||||
label: 'Ford',
|
||||
value: 'Ford'
|
||||
},
|
||||
{
|
||||
label: 'Genesis',
|
||||
value: 'Genesis'
|
||||
},
|
||||
{
|
||||
label: 'GMC',
|
||||
value: 'GMC'
|
||||
},
|
||||
{
|
||||
label: 'Honda',
|
||||
value: 'Honda'
|
||||
},
|
||||
{
|
||||
label: 'Hyundai',
|
||||
value: 'Hyundai'
|
||||
},
|
||||
{
|
||||
label: 'Infiniti',
|
||||
value: 'Infiniti'
|
||||
},
|
||||
{
|
||||
label: 'Jaguar',
|
||||
value: 'Jaguar'
|
||||
},
|
||||
{
|
||||
label: 'Jeep',
|
||||
value: 'Jeep'
|
||||
},
|
||||
{
|
||||
label: 'Kia',
|
||||
value: 'Kia'
|
||||
},
|
||||
{
|
||||
label: 'Lamborghini',
|
||||
value: 'Lamborghini'
|
||||
},
|
||||
{
|
||||
label: 'Land Rover',
|
||||
value: 'Land Rover'
|
||||
},
|
||||
{
|
||||
label: 'Lexus',
|
||||
value: 'Lexus'
|
||||
},
|
||||
{
|
||||
label: 'Lincoln',
|
||||
value: 'Lincoln'
|
||||
},
|
||||
{
|
||||
label: 'Maserati',
|
||||
value: 'Maserati'
|
||||
},
|
||||
{
|
||||
label: 'Mazda',
|
||||
value: 'Mazda'
|
||||
},
|
||||
{
|
||||
label: 'McLaren',
|
||||
value: 'McLaren'
|
||||
},
|
||||
{
|
||||
label: 'Mercedes-Benz',
|
||||
value: 'Mercedes-Benz'
|
||||
},
|
||||
{
|
||||
label: 'Mini',
|
||||
value: 'Mini'
|
||||
},
|
||||
{
|
||||
label: 'Mitsubishi',
|
||||
value: 'Mitsubishi'
|
||||
},
|
||||
{
|
||||
label: 'Nissan',
|
||||
value: 'Nissan'
|
||||
},
|
||||
{
|
||||
label: 'Peugeot',
|
||||
value: 'Peugeot'
|
||||
},
|
||||
{
|
||||
label: 'Porsche',
|
||||
value: 'Porsche'
|
||||
},
|
||||
{
|
||||
label: 'Ram',
|
||||
value: 'Ram'
|
||||
},
|
||||
{
|
||||
label: 'Renault',
|
||||
value: 'Renault'
|
||||
},
|
||||
{
|
||||
label: 'Rolls-Royce',
|
||||
value: 'Rolls-Royce'
|
||||
},
|
||||
{
|
||||
label: 'Subaru',
|
||||
value: 'Subaru'
|
||||
},
|
||||
{
|
||||
label: 'Suzuki',
|
||||
value: 'Suzuki'
|
||||
},
|
||||
{
|
||||
label: 'Tesla',
|
||||
value: 'Tesla'
|
||||
},
|
||||
{
|
||||
label: 'Toyota',
|
||||
value: 'Toyota'
|
||||
},
|
||||
{
|
||||
label: 'Volkswagen',
|
||||
value: 'Volkswagen'
|
||||
},
|
||||
{
|
||||
label: 'Volvo',
|
||||
value: 'Volvo'
|
||||
},
|
||||
],
|
||||
options: [],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.hiddenTextField.value = option.value
|
||||
},
|
||||
getFilteredOptions(query) {
|
||||
this.options = this.allOptions.filter((option) =>
|
||||
option.label.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
if (this.options.length === 0) {
|
||||
this.$refs.noResultsMessage.classList.remove('hidden')
|
||||
} else {
|
||||
this.$refs.noResultsMessage.classList.add('hidden')
|
||||
}
|
||||
},
|
||||
handleKeydownOnOptions(event) {
|
||||
// if the user presses backspace or the alpha-numeric keys, focus on the search field
|
||||
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 8) {
|
||||
this.$refs.searchField.focus()
|
||||
}
|
||||
},
|
||||
}" class="flex w-full max-w-xs flex-col gap-1" x-on:keydown="handleKeydownOnOptions($event)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false" x-init="options = allOptions">
|
||||
<label for="make" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Make</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" class="inline-flex w-full items-center justify-between gap-2 border border-outline rounded-radius bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" role="combobox" aria-controls="makesList" aria-haspopup="listbox" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'" >
|
||||
<span class="text-sm font-normal" x-text="selectedOption ? selectedOption.value : 'Please Select'"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"class="size-5" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Hidden Input To Grab The Selected Value -->
|
||||
<input id="make" name="make" x-ref="hiddenTextField" hidden=""/>
|
||||
<div x-show="isOpen || openedWithKeyboard" id="makesList" class="absolute left-0 top-11 z-10 w-full overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="listbox" aria-label="industries list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true" >
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
</svg>
|
||||
<input type="text" class="w-full border-b border-outline bg-surface-alt py-2.5 pl-11 pr-4 text-sm text-on-surface focus:outline-hidden focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:border-primary-dark" name="searchField" aria-label="Search" x-on:input="getFilteredOptions($el.value)" x-ref="searchField" placeholder="Search" />
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<ul class="flex max-h-44 flex-col overflow-y-auto">
|
||||
<li class="hidden px-4 py-2 text-sm text-on-surface dark:text-on-surface-dark" x-ref="noResultsMessage">
|
||||
<span>No matches found</span>
|
||||
</li>
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="combobox-option inline-flex justify-between gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0">
|
||||
<!-- Label -->
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.label"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
<!-- Checkmark -->
|
||||
<svg x-cloak x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5">
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,318 @@
|
||||
<div x-data="{
|
||||
allOptions: [
|
||||
{ label: 'Afghanistan', value: 'Afghanistan', iso: 'af' },
|
||||
{ label: 'Albania', value: 'Albania', iso: 'al' },
|
||||
{ label: 'Algeria', value: 'Algeria', iso: 'dz' },
|
||||
{ label: 'Andorra', value: 'Andorra', iso: 'ad' },
|
||||
{ label: 'Angola', value: 'Angola', iso: 'ao' },
|
||||
{ label: 'Anguilla', value: 'Anguilla', iso: 'ai' },
|
||||
{ label: 'Antigua and Barbuda', value: 'Antigua and Barbuda', iso: 'ag' },
|
||||
{ label: 'Argentina', value: 'Argentina', iso: 'ar' },
|
||||
{ label: 'Armenia', value: 'Armenia', iso: 'am' },
|
||||
{ label: 'Aruba', value: 'Aruba', iso: 'aw' },
|
||||
{ label: 'Australia', value: 'Australia', iso: 'au' },
|
||||
{ label: 'Austria', value: 'Austria', iso: 'at' },
|
||||
{ label: 'Azerbaijan', value: 'Azerbaijan', iso: 'az' },
|
||||
{ label: 'Bahamas', value: 'Bahamas', iso: 'bs' },
|
||||
{ label: 'Bahrain', value: 'Bahrain', iso: 'bh' },
|
||||
{ label: 'Bangladesh', value: 'Bangladesh', iso: 'bd' },
|
||||
{ label: 'Barbados', value: 'Barbados', iso: 'bb' },
|
||||
{ label: 'Belarus', value: 'Belarus', iso: 'by' },
|
||||
{ label: 'Belgium', value: 'Belgium', iso: 'be' },
|
||||
{ label: 'Belize', value: 'Belize', iso: 'bz' },
|
||||
{ label: 'Benin', value: 'Benin', iso: 'bj' },
|
||||
{ label: 'Bermuda', value: 'Bermuda', iso: 'bm' },
|
||||
{ label: 'Bhutan', value: 'Bhutan', iso: 'bt' },
|
||||
{ label: 'Bolivia', value: 'Bolivia', iso: 'bo' },
|
||||
{ label: 'Bosnia and Herzegovina', value: 'Bosnia and Herzegovina', iso: 'ba' },
|
||||
{ label: 'Botswana', value: 'Botswana', iso: 'bw' },
|
||||
{ label: 'Brazil', value: 'Brazil', iso: 'br' },
|
||||
{ label: 'British Indian Ocean Territory', value: 'British Indian Ocean Territory', iso: 'io' },
|
||||
{ label: 'British Virgin Islands', value: 'British Virgin Islands', iso: 'vg' },
|
||||
{ label: 'Brunei', value: 'Brunei', iso: 'bn' },
|
||||
{ label: 'Bulgaria', value: 'Bulgaria', iso: 'bg' },
|
||||
{ label: 'Burkina Faso', value: 'Burkina Faso', iso: 'bf' },
|
||||
{ label: 'Burundi', value: 'Burundi', iso: 'bi' },
|
||||
{ label: 'Cambodia', value: 'Cambodia', iso: 'kh' },
|
||||
{ label: 'Cameroon', value: 'Cameroon', iso: 'cm' },
|
||||
{ label: 'Canada', value: 'Canada', iso: 'ca' },
|
||||
{ label: 'Cape Verde', value: 'Cape Verde', iso: 'cv' },
|
||||
{ label: 'Cayman Islands', value: 'Cayman Islands', iso: 'ky' },
|
||||
{ label: 'Central African Republic', value: 'Central African Republic', iso: 'cf' },
|
||||
{ label: 'Chad', value: 'Chad', iso: 'td' },
|
||||
{ label: 'Chile', value: 'Chile', iso: 'cl' },
|
||||
{ label: 'China', value: 'China', iso: 'cn' },
|
||||
{ label: 'Colombia', value: 'Colombia', iso: 'co' },
|
||||
{ label: 'Comoros', value: 'Comoros', iso: 'km' },
|
||||
{ label: 'Congo (Brazzaville)', value: 'Congo (Brazzaville)', iso: 'cg' },
|
||||
{ label: 'Congo (Kinshasa)', value: 'Congo (Kinshasa)', iso: 'cd' },
|
||||
{ label: 'Cook Islands', value: 'Cook Islands', iso: 'ck' },
|
||||
{ label: 'Costa Rica', value: 'Costa Rica', iso: 'cr' },
|
||||
{ label: 'Croatia', value: 'Croatia', iso: 'hr' },
|
||||
{ label: 'Cuba', value: 'Cuba', iso: 'cu' },
|
||||
{ label: 'Curaçao', value: 'Curaçao', iso: 'cw' },
|
||||
{ label: 'Cyprus', value: 'Cyprus', iso: 'cy' },
|
||||
{ label: 'Czechia', value: 'Czechia', iso: 'cz' },
|
||||
{ label: 'Denmark', value: 'Denmark', iso: 'dk' },
|
||||
{ label: 'Djibouti', value: 'Djibouti', iso: 'dj' },
|
||||
{ label: 'Dominica', value: 'Dominica', iso: 'dm' },
|
||||
{ label: 'Dominican Republic', value: 'Dominican Republic', iso: 'do' },
|
||||
{ label: 'Ecuador', value: 'Ecuador', iso: 'ec' },
|
||||
{ label: 'Egypt', value: 'Egypt', iso: 'eg' },
|
||||
{ label: 'El Salvador', value: 'El Salvador', iso: 'sv' },
|
||||
{ label: 'England', value: 'England', iso: 'gb-eng' },
|
||||
{ label: 'Equatorial Guinea', value: 'Equatorial Guinea', iso: 'gq' },
|
||||
{ label: 'Eritrea', value: 'Eritrea', iso: 'er' },
|
||||
{ label: 'Estonia', value: 'Estonia', iso: 'ee' },
|
||||
{ label: 'Eswatini (Swaziland)', value: 'Eswatini (Swaziland)', iso: 'sz' },
|
||||
{ label: 'Ethiopia', value: 'Ethiopia', iso: 'et' },
|
||||
{ label: 'Falkland Islands (Islas Malvinas)', value: 'Falkland Islands (Islas Malvinas)', iso: 'fk' },
|
||||
{ label: 'Faroe Islands', value: 'Faroe Islands', iso: 'fo' },
|
||||
{ label: 'Fiji', value: 'Fiji', iso: 'fj' },
|
||||
{ label: 'Finland', value: 'Finland', iso: 'fi' },
|
||||
{ label: 'France', value: 'France', iso: 'fr' },
|
||||
{ label: 'French Guiana', value: 'French Guiana', iso: 'gf' },
|
||||
{ label: 'French Polynesia', value: 'French Polynesia', iso: 'pf' },
|
||||
{ label: 'French Southern and Antarctic Lands', value: 'French Southern and Antarctic Lands', iso: 'tf' },
|
||||
{ label: 'Gabon', value: 'Gabon', iso: 'ga' },
|
||||
{ label: 'Gambia', value: 'Gambia', iso: 'gm' },
|
||||
{ label: 'Georgia', value: 'Georgia', iso: 'ge' },
|
||||
{ label: 'Germany', value: 'Germany', iso: 'de' },
|
||||
{ label: 'Ghana', value: 'Ghana', iso: 'gh' },
|
||||
{ label: 'Gibraltar', value: 'Gibraltar', iso: 'gi' },
|
||||
{ label: 'Greece', value: 'Greece', iso: 'gr' },
|
||||
{ label: 'Greenland', value: 'Greenland', iso: 'gl' },
|
||||
{ label: 'Grenada', value: 'Grenada', iso: 'gd' },
|
||||
{ label: 'Guadeloupe', value: 'Guadeloupe', iso: 'gp' },
|
||||
{ label: 'Guam', value: 'Guam', iso: 'gu' },
|
||||
{ label: 'Guatemala', value: 'Guatemala', iso: 'gt' },
|
||||
{ label: 'Guernsey', value: 'Guernsey', iso: 'gg' },
|
||||
{ label: 'Guinea', value: 'Guinea', iso: 'gn' },
|
||||
{ label: 'Guinea-Bissau', value: 'Guinea-Bissau', iso: 'gw' },
|
||||
{ label: 'Guyana', value: 'Guyana', iso: 'gy' },
|
||||
{ label: 'Haiti', value: 'Haiti', iso: 'ht' },
|
||||
{ label: 'Honduras', value: 'Honduras', iso: 'hn' },
|
||||
{ label: 'Hong Kong', value: 'Hong Kong', iso: 'hk' },
|
||||
{ label: 'Hungary', value: 'Hungary', iso: 'hu' },
|
||||
{ label: 'Iceland', value: 'Iceland', iso: 'is' },
|
||||
{ label: 'India', value: 'India', iso: 'in' },
|
||||
{ label: 'Indonesia', value: 'Indonesia', iso: 'id' },
|
||||
{ label: 'Iran', value: 'Iran', iso: 'ir' },
|
||||
{ label: 'Iraq', value: 'Iraq', iso: 'iq' },
|
||||
{ label: 'Ireland', value: 'Ireland', iso: 'ie' },
|
||||
{ label: 'Isle of Man', value: 'Isle of Man', iso: 'im' },
|
||||
{ label: 'Israel', value: 'Israel', iso: 'il' },
|
||||
{ label: 'Italy', value: 'Italy', iso: 'it' },
|
||||
{ label: 'Ivory Coast', value: 'Ivory Coast', iso: 'ci' },
|
||||
{ label: 'Jamaica', value: 'Jamaica', iso: 'jm' },
|
||||
{ label: 'Japan', value: 'Japan', iso: 'jp' },
|
||||
{ label: 'Jersey', value: 'Jersey', iso: 'je' },
|
||||
{ label: 'Jordan', value: 'Jordan', iso: 'jo' },
|
||||
{ label: 'Kazakhstan', value: 'Kazakhstan', iso: 'kz' },
|
||||
{ label: 'Kenya', value: 'Kenya', iso: 'ke' },
|
||||
{ label: 'Kiribati', value: 'Kiribati', iso: 'ki' },
|
||||
{ label: 'Kosovo', value: 'Kosovo', iso: 'xk' },
|
||||
{ label: 'Kuwait', value: 'Kuwait', iso: 'kw' },
|
||||
{ label: 'Kyrgyzstan', value: 'Kyrgyzstan', iso: 'kg' },
|
||||
{ label: 'Laos', value: 'Laos', iso: 'la' },
|
||||
{ label: 'Latvia', value: 'Latvia', iso: 'lv' },
|
||||
{ label: 'Lebanon', value: 'Lebanon', iso: 'lb' },
|
||||
{ label: 'Lesotho', value: 'Lesotho', iso: 'ls' },
|
||||
{ label: 'Liberia', value: 'Liberia', iso: 'lr' },
|
||||
{ label: 'Libya', value: 'Libya', iso: 'ly' },
|
||||
{ label: 'Liechtenstein', value: 'Liechtenstein', iso: 'li' },
|
||||
{ label: 'Lithuania', value: 'Lithuania', iso: 'lt' },
|
||||
{ label: 'Luxembourg', value: 'Luxembourg', iso: 'lu' },
|
||||
{ label: 'Macao', value: 'Macao', iso: 'mo' },
|
||||
{ label: 'Madagascar', value: 'Madagascar', iso: 'mg' },
|
||||
{ label: 'Malawi', value: 'Malawi', iso: 'mw' },
|
||||
{ label: 'Malaysia', value: 'Malaysia', iso: 'my' },
|
||||
{ label: 'Maldives', value: 'Maldives', iso: 'mv' },
|
||||
{ label: 'Mali', value: 'Mali', iso: 'ml' },
|
||||
{ label: 'Malta', value: 'Malta', iso: 'mt' },
|
||||
{ label: 'Marshall Islands', value: 'Marshall Islands', iso: 'mh' },
|
||||
{ label: 'Martinique', value: 'Martinique', iso: 'mq' },
|
||||
{ label: 'Mauritania', value: 'Mauritania', iso: 'mr' },
|
||||
{ label: 'Mauritius', value: 'Mauritius', iso: 'mu' },
|
||||
{ label: 'Mayotte', value: 'Mayotte', iso: 'yt' },
|
||||
{ label: 'Mexico', value: 'Mexico', iso: 'mx' },
|
||||
{ label: 'Micronesia', value: 'Micronesia', iso: 'fm' },
|
||||
{ label: 'Moldova', value: 'Moldova', iso: 'md' },
|
||||
{ label: 'Monaco', value: 'Monaco', iso: 'mc' },
|
||||
{ label: 'Mongolia', value: 'Mongolia', iso: 'mn' },
|
||||
{ label: 'Montenegro', value: 'Montenegro', iso: 'me' },
|
||||
{ label: 'Montserrat', value: 'Montserrat', iso: 'ms' },
|
||||
{ label: 'Morocco', value: 'Morocco', iso: 'ma' },
|
||||
{ label: 'Mozambique', value: 'Mozambique', iso: 'mz' },
|
||||
{ label: 'Myanmar (Burma)', value: 'Myanmar (Burma)', iso: 'mm' },
|
||||
{ label: 'Namibia', value: 'Namibia', iso: 'na' },
|
||||
{ label: 'Nauru', value: 'Nauru', iso: 'nr' },
|
||||
{ label: 'Nepal', value: 'Nepal', iso: 'np' },
|
||||
{ label: 'Netherlands', value: 'Netherlands', iso: 'nl' },
|
||||
{ label: 'New Caledonia', value: 'New Caledonia', iso: 'nc' },
|
||||
{ label: 'New Zealand', value: 'New Zealand', iso: 'nz' },
|
||||
{ label: 'Nicaragua', value: 'Nicaragua', iso: 'ni' },
|
||||
{ label: 'Niger', value: 'Niger', iso: 'ne' },
|
||||
{ label: 'Nigeria', value: 'Nigeria', iso: 'ng' },
|
||||
{ label: 'Niue', value: 'Niue', iso: 'nu' },
|
||||
{ label: 'Norfolk Island', value: 'Norfolk Island', iso: 'nf' },
|
||||
{ label: 'North Korea', value: 'North Korea', iso: 'kp' },
|
||||
{ label: 'North Macedonia', value: 'North Macedonia', iso: 'mk' },
|
||||
{ label: 'Northern Ireland', value: 'Northern Ireland', iso: 'gb-nir' },
|
||||
{ label: 'Northern Mariana Islands', value: 'Northern Mariana Islands', iso: 'mp' },
|
||||
{ label: 'Norway', value: 'Norway', iso: 'no' },
|
||||
{ label: 'Oman', value: 'Oman', iso: 'om' },
|
||||
{ label: 'Pakistan', value: 'Pakistan', iso: 'pk' },
|
||||
{ label: 'Palau', value: 'Palau', iso: 'pw' },
|
||||
{ label: 'Palestine', value: 'Palestine', iso: 'ps' },
|
||||
{ label: 'Panama', value: 'Panama', iso: 'pa' },
|
||||
{ label: 'Papua New Guinea', value: 'Papua New Guinea', iso: 'pg' },
|
||||
{ label: 'Paraguay', value: 'Paraguay', iso: 'py' },
|
||||
{ label: 'Peru', value: 'Peru', iso: 'pe' },
|
||||
{ label: 'Philippines', value: 'Philippines', iso: 'ph' },
|
||||
{ label: 'Pitcairn Islands', value: 'Pitcairn Islands', iso: 'pn' },
|
||||
{ label: 'Poland', value: 'Poland', iso: 'pl' },
|
||||
{ label: 'Portugal', value: 'Portugal', iso: 'pt' },
|
||||
{ label: 'Puerto Rico', value: 'Puerto Rico', iso: 'pr' },
|
||||
{ label: 'Qatar', value: 'Qatar', iso: 'qa' },
|
||||
{ label: 'Romania', value: 'Romania', iso: 'ro' },
|
||||
{ label: 'Russia', value: 'Russia', iso: 'ru' },
|
||||
{ label: 'Rwanda', value: 'Rwanda', iso: 'rw' },
|
||||
{ label: 'Saint Helena, Ascension and Tristan da Cunha', value: 'Saint Helena, Ascension and Tristan da Cunha', iso: 'sh' },
|
||||
{ label: 'Saint Kitts and Nevis', value: 'Saint Kitts and Nevis', iso: 'kn' },
|
||||
{ label: 'Saint Lucia', value: 'Saint Lucia', iso: 'lc' },
|
||||
{ label: 'Saint Pierre and Miquelon', value: 'Saint Pierre and Miquelon', iso: 'pm' },
|
||||
{ label: 'Saint Vincent and the Grenadines', value: 'Saint Vincent and the Grenadines', iso: 'vc' },
|
||||
{ label: 'Samoa', value: 'Samoa', iso: 'ws' },
|
||||
{ label: 'San Marino', value: 'San Marino', iso: 'sm' },
|
||||
{ label: 'Sao Tome and Principe', value: 'Sao Tome and Principe', iso: 'st' },
|
||||
{ label: 'Saudi Arabia', value: 'Saudi Arabia', iso: 'sa' },
|
||||
{ label: 'Scotland', value: 'Scotland', iso: 'gb-sct' },
|
||||
{ label: 'Senegal', value: 'Senegal', iso: 'sn' },
|
||||
{ label: 'Serbia', value: 'Serbia', iso: 'rs' },
|
||||
{ label: 'Seychelles', value: 'Seychelles', iso: 'sc' },
|
||||
{ label: 'Sierra Leone', value: 'Sierra Leone', iso: 'sl' },
|
||||
{ label: 'Singapore', value: 'Singapore', iso: 'sg' },
|
||||
{ label: 'Sint Maarten', value: 'Sint Maarten', iso: 'sx' },
|
||||
{ label: 'Slovakia', value: 'Slovakia', iso: 'sk' },
|
||||
{ label: 'Slovenia', value: 'Slovenia', iso: 'si' },
|
||||
{ label: 'Solomon Islands', value: 'Solomon Islands', iso: 'sb' },
|
||||
{ label: 'Somalia', value: 'Somalia', iso: 'so' },
|
||||
{ label: 'South Africa', value: 'South Africa', iso: 'za' },
|
||||
{ label: 'South Korea', value: 'South Korea', iso: 'kr' },
|
||||
{ label: 'South Sudan', value: 'South Sudan', iso: 'ss' },
|
||||
{ label: 'Spain', value: 'Spain', iso: 'es' },
|
||||
{ label: 'Sri Lanka', value: 'Sri Lanka', iso: 'lk' },
|
||||
{ label: 'Sudan', value: 'Sudan', iso: 'sd' },
|
||||
{ label: 'Suriname', value: 'Suriname', iso: 'sr' },
|
||||
{ label: 'Svalbard and Jan Mayen', value: 'Svalbard and Jan Mayen', iso: 'sj' },
|
||||
{ label: 'Sweden', value: 'Sweden', iso: 'se' },
|
||||
{ label: 'Switzerland', value: 'Switzerland', iso: 'ch' },
|
||||
{ label: 'Syria', value: 'Syria', iso: 'sy' },
|
||||
{ label: 'Taiwan', value: 'Taiwan', iso: 'tw' },
|
||||
{ label: 'Tajikistan', value: 'Tajikistan', iso: 'tj' },
|
||||
{ label: 'Tanzania', value: 'Tanzania', iso: 'tz' },
|
||||
{ label: 'Thailand', value: 'Thailand', iso: 'th' },
|
||||
{ label: 'Timor-Leste', value: 'Timor-Leste', iso: 'tl' },
|
||||
{ label: 'Togo', value: 'Togo', iso: 'tg' },
|
||||
{ label: 'Tokelau', value: 'Tokelau', iso: 'tk' },
|
||||
{ label: 'Tonga', value: 'Tonga', iso: 'to' },
|
||||
{ label: 'Trinidad and Tobago', value: 'Trinidad and Tobago', iso: 'tt' },
|
||||
{ label: 'Tunisia', value: 'Tunisia', iso: 'tn' },
|
||||
{ label: 'Turkey', value: 'Turkey', iso: 'tr' },
|
||||
{ label: 'Turkmenistan', value: 'Turkmenistan', iso: 'tm' },
|
||||
{ label: 'Turks and Caicos Islands', value: 'Turks and Caicos Islands', iso: 'tc' },
|
||||
{ label: 'Tuvalu', value: 'Tuvalu', iso: 'tv' },
|
||||
{ label: 'Uganda', value: 'Uganda', iso: 'ug' },
|
||||
{ label: 'Ukraine', value: 'Ukraine', iso: 'ua' },
|
||||
{ label: 'United Arab Emirates', value: 'United Arab Emirates', iso: 'ae' },
|
||||
{ label: 'United Kingdom', value: 'United Kingdom', iso: 'gb' },
|
||||
{ label: 'United States of America', value: 'United States of America', iso: 'us' },
|
||||
{ label: 'Uruguay', value: 'Uruguay', iso: 'uy' },
|
||||
{ label: 'Uzbekistan', value: 'Uzbekistan', iso: 'uz' },
|
||||
{ label: 'Vanuatu', value: 'Vanuatu', iso: 'vu' },
|
||||
{ label: 'Vatican City (Holy See)', value: 'Vatican City (Holy See)', iso: 'va' },
|
||||
{ label: 'Venezuela', value: 'Venezuela', iso: 've' },
|
||||
{ label: 'Vietnam', value: 'Vietnam', iso: 'vn' },
|
||||
{ label: 'Wales', value: 'Wales', iso: 'gb-wls' },
|
||||
{ label: 'Western Sahara', value: 'Western Sahara', iso: 'eh' },
|
||||
{ label: 'Yemen', value: 'Yemen', iso: 'ye' },
|
||||
{ label: 'Zambia', value: 'Zambia', iso: 'zm' },
|
||||
{ label: 'Zimbabwe', value: 'Zimbabwe', iso: 'zw' },
|
||||
],
|
||||
options: [],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.hiddenTextField.value = option.value
|
||||
},
|
||||
getFilteredOptions(query) {
|
||||
this.options = this.allOptions.filter((option) =>
|
||||
option.label.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
if (this.options.length === 0) {
|
||||
this.$refs.noResultsMessage.classList.remove('hidden')
|
||||
} else {
|
||||
this.$refs.noResultsMessage.classList.add('hidden')
|
||||
}
|
||||
},
|
||||
handleKeydownOnOptions(event) {
|
||||
// if the user presses backspace or the alpha-numeric keys, focus on the search field
|
||||
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 8) {
|
||||
this.$refs.searchField.focus()
|
||||
}
|
||||
},
|
||||
}" class="flex w-full max-w-xs flex-col gap-1" x-on:keydown="handleKeydownOnOptions($event)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false" x-init="options = allOptions">
|
||||
<label for="country" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Country</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" class="inline-flex w-full items-center justify-between gap-2 border border-outline rounded-radius bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" role="combobox" aria-controls="countriesList" aria-haspopup="listbox" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'" >
|
||||
<span class="text-sm font-normal" x-text="selectedOption ? selectedOption.value : 'Please Select'"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"class="size-5" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Hidden Input To Grab The Selected Value -->
|
||||
<input id="country" name="country" autocomplete="off" x-ref="hiddenTextField" hidden=""/>
|
||||
<div x-show="isOpen || openedWithKeyboard" id="countriesList" class="absolute left-0 top-11 z-10 w-full overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="listbox" aria-label="countries list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true" >
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
</svg>
|
||||
<input type="text" class="w-full border-b border-outline bg-surface-alt py-2.5 pl-11 pr-4 text-sm text-on-surface focus:outline-hidden focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:border-primary-dark" name="searchField" aria-label="Search" x-on:input="getFilteredOptions($el.value)" x-ref="searchField" placeholder="Search" />
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<ul class="flex max-h-44 flex-col overflow-y-auto">
|
||||
<li class="hidden px-4 py-2 text-sm text-on-surface dark:text-on-surface-dark" x-ref="noResultsMessage">
|
||||
<span>No matches found</span>
|
||||
</li>
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="combobox-option inline-flex justify-between gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Flag image -->
|
||||
<img class="w-5 h-3.5" x-bind:src="'https://flagcdn.com/' + item.iso + '.svg'" alt="" aria-hidden="true"/>
|
||||
<!-- Country name -->
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.label"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
</div>
|
||||
<!-- Checkmark -->
|
||||
<svg x-cloak x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5">
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,317 @@
|
||||
<div x-data="{
|
||||
allOptions: [
|
||||
{ label: 'Afghanistan', value: 'Afghanistan', iso: 'af', phoneCode: '+93' },
|
||||
{ label: 'Albania', value: 'Albania', iso: 'al', phoneCode: '+355' },
|
||||
{ label: 'Algeria', value: 'Algeria', iso: 'dz', phoneCode: '+213' },
|
||||
{ label: 'Andorra', value: 'Andorra', iso: 'ad', phoneCode: '+376' },
|
||||
{ label: 'Angola', value: 'Angola', iso: 'ao', phoneCode: '+244' },
|
||||
{ label: 'Anguilla', value: 'Anguilla', iso: 'ai', phoneCode: '+1-264' },
|
||||
{ label: 'Antigua and Barbuda', value: 'Antigua and Barbuda', iso: 'ag', phoneCode: '+1-268' },
|
||||
{ label: 'Argentina', value: 'Argentina', iso: 'ar', phoneCode: '+54' },
|
||||
{ label: 'Armenia', value: 'Armenia', iso: 'am', phoneCode: '+374' },
|
||||
{ label: 'Aruba', value: 'Aruba', iso: 'aw', phoneCode: '+297' },
|
||||
{ label: 'Australia', value: 'Australia', iso: 'au', phoneCode: '+61' },
|
||||
{ label: 'Austria', value: 'Austria', iso: 'at', phoneCode: '+43' },
|
||||
{ label: 'Azerbaijan', value: 'Azerbaijan', iso: 'az', phoneCode: '+994' },
|
||||
{ label: 'Bahamas', value: 'Bahamas', iso: 'bs', phoneCode: '+1-242' },
|
||||
{ label: 'Bahrain', value: 'Bahrain', iso: 'bh', phoneCode: '+973' },
|
||||
{ label: 'Bangladesh', value: 'Bangladesh', iso: 'bd', phoneCode: '+880' },
|
||||
{ label: 'Barbados', value: 'Barbados', iso: 'bb', phoneCode: '+1-246' },
|
||||
{ label: 'Belarus', value: 'Belarus', iso: 'by', phoneCode: '+375' },
|
||||
{ label: 'Belgium', value: 'Belgium', iso: 'be', phoneCode: '+32' },
|
||||
{ label: 'Belize', value: 'Belize', iso: 'bz', phoneCode: '+501' },
|
||||
{ label: 'Benin', value: 'Benin', iso: 'bj', phoneCode: '+229' },
|
||||
{ label: 'Bermuda', value: 'Bermuda', iso: 'bm', phoneCode: '+1-441' },
|
||||
{ label: 'Bhutan', value: 'Bhutan', iso: 'bt', phoneCode: '+975' },
|
||||
{ label: 'Bolivia', value: 'Bolivia', iso: 'bo', phoneCode: '+591' },
|
||||
{ label: 'Bosnia and Herzegovina', value: 'Bosnia and Herzegovina', iso: 'ba', phoneCode: '+387' },
|
||||
{ label: 'Botswana', value: 'Botswana', iso: 'bw', phoneCode: '+267' },
|
||||
{ label: 'Brazil', value: 'Brazil', iso: 'br', phoneCode: '+55' },
|
||||
{ label: 'British Indian Ocean Territory', value: 'British Indian Ocean Territory', iso: 'io', phoneCode: '+246' },
|
||||
{ label: 'British Virgin Islands', value: 'British Virgin Islands', iso: 'vg', phoneCode: '+1-284' },
|
||||
{ label: 'Brunei', value: 'Brunei', iso: 'bn', phoneCode: '+673' },
|
||||
{ label: 'Bulgaria', value: 'Bulgaria', iso: 'bg', phoneCode: '+359' },
|
||||
{ label: 'Burkina Faso', value: 'Burkina Faso', iso: 'bf', phoneCode: '+226' },
|
||||
{ label: 'Burundi', value: 'Burundi', iso: 'bi', phoneCode: '+257' },
|
||||
{ label: 'Cambodia', value: 'Cambodia', iso: 'kh', phoneCode: '+855' },
|
||||
{ label: 'Cameroon', value: 'Cameroon', iso: 'cm', phoneCode: '+237' },
|
||||
{ label: 'Canada', value: 'Canada', iso: 'ca', phoneCode: '+1' },
|
||||
{ label: 'Cape Verde', value: 'Cape Verde', iso: 'cv', phoneCode: '+238' },
|
||||
{ label: 'Cayman Islands', value: 'Cayman Islands', iso: 'ky', phoneCode: '+1-345' },
|
||||
{ label: 'Central African Republic', value: 'Central African Republic', iso: 'cf', phoneCode: '+236' },
|
||||
{ label: 'Chad', value: 'Chad', iso: 'td', phoneCode: '+235' },
|
||||
{ label: 'Chile', value: 'Chile', iso: 'cl', phoneCode: '+56' },
|
||||
{ label: 'China', value: 'China', iso: 'cn', phoneCode: '+86' },
|
||||
{ label: 'Colombia', value: 'Colombia', iso: 'co', phoneCode: '+57' },
|
||||
{ label: 'Comoros', value: 'Comoros', iso: 'km', phoneCode: '+269' },
|
||||
{ label: 'Congo (Brazzaville)', value: 'Congo (Brazzaville)', iso: 'cg', phoneCode: '+242' },
|
||||
{ label: 'Congo (Kinshasa)', value: 'Congo (Kinshasa)', iso: 'cd', phoneCode: '+243' },
|
||||
{ label: 'Cook Islands', value: 'Cook Islands', iso: 'ck', phoneCode: '+682' },
|
||||
{ label: 'Costa Rica', value: 'Costa Rica', iso: 'cr', phoneCode: '+506' },
|
||||
{ label: 'Croatia', value: 'Croatia', iso: 'hr', phoneCode: '+385' },
|
||||
{ label: 'Cuba', value: 'Cuba', iso: 'cu', phoneCode: '+53' },
|
||||
{ label: 'Curaçao', value: 'Curaçao', iso: 'cw', phoneCode: '+599' },
|
||||
{ label: 'Cyprus', value: 'Cyprus', iso: 'cy', phoneCode: '+357' },
|
||||
{ label: 'Czechia', value: 'Czechia', iso: 'cz', phoneCode: '+420' },
|
||||
{ label: 'Denmark', value: 'Denmark', iso: 'dk', phoneCode: '+45' },
|
||||
{ label: 'Djibouti', value: 'Djibouti', iso: 'dj', phoneCode: '+253' },
|
||||
{ label: 'Dominica', value: 'Dominica', iso: 'dm', phoneCode: '+1-767' },
|
||||
{ label: 'Dominican Republic', value: 'Dominican Republic', iso: 'do', phoneCode: '+1-809' },
|
||||
{ label: 'Ecuador', value: 'Ecuador', iso: 'ec', phoneCode: '+593' },
|
||||
{ label: 'Egypt', value: 'Egypt', iso: 'eg', phoneCode: '+20' },
|
||||
{ label: 'El Salvador', value: 'El Salvador', iso: 'sv', phoneCode: '+503' },
|
||||
{ label: 'England', value: 'England', iso: 'gb-eng', phoneCode: '+44' },
|
||||
{ label: 'Equatorial Guinea', value: 'Equatorial Guinea', iso: 'gq', phoneCode: '+240' },
|
||||
{ label: 'Eritrea', value: 'Eritrea', iso: 'er', phoneCode: '+291' },
|
||||
{ label: 'Estonia', value: 'Estonia', iso: 'ee', phoneCode: '+372' },
|
||||
{ label: 'Eswatini (Swaziland)', value: 'Eswatini (Swaziland)', iso: 'sz', phoneCode: '+268' },
|
||||
{ label: 'Ethiopia', value: 'Ethiopia', iso: 'et', phoneCode: '+251' },
|
||||
{ label: 'Falkland Islands (Islas Malvinas)', value: 'Falkland Islands (Islas Malvinas)', iso: 'fk', phoneCode: '+500' },
|
||||
{ label: 'Faroe Islands', value: 'Faroe Islands', iso: 'fo', phoneCode: '+298' },
|
||||
{ label: 'Fiji', value: 'Fiji', iso: 'fj', phoneCode: '+679' },
|
||||
{ label: 'Finland', value: 'Finland', iso: 'fi', phoneCode: '+358' },
|
||||
{ label: 'France', value: 'France', iso: 'fr', phoneCode: '+33' },
|
||||
{ label: 'French Guiana', value: 'French Guiana', iso: 'gf', phoneCode: '+594' },
|
||||
{ label: 'French Polynesia', value: 'French Polynesia', iso: 'pf', phoneCode: '+689' },
|
||||
{ label: 'French Southern and Antarctic Lands', value: 'French Southern and Antarctic Lands', iso: 'tf', phoneCode: '+262' },
|
||||
{ label: 'Gabon', value: 'Gabon', iso: 'ga', phoneCode: '+241' },
|
||||
{ label: 'Gambia', value: 'Gambia', iso: 'gm', phoneCode: '+220' },
|
||||
{ label: 'Georgia', value: 'Georgia', iso: 'ge', phoneCode: '+995' },
|
||||
{ label: 'Germany', value: 'Germany', iso: 'de', phoneCode: '+49' },
|
||||
{ label: 'Ghana', value: 'Ghana', iso: 'gh', phoneCode: '+233' },
|
||||
{ label: 'Gibraltar', value: 'Gibraltar', iso: 'gi', phoneCode: '+350' },
|
||||
{ label: 'Greece', value: 'Greece', iso: 'gr', phoneCode: '+30' },
|
||||
{ label: 'Greenland', value: 'Greenland', iso: 'gl', phoneCode: '+299' },
|
||||
{ label: 'Grenada', value: 'Grenada', iso: 'gd', phoneCode: '+1-473' },
|
||||
{ label: 'Guadeloupe', value: 'Guadeloupe', iso: 'gp', phoneCode: '+590' },
|
||||
{ label: 'Guam', value: 'Guam', iso: 'gu', phoneCode: '+1-671' },
|
||||
{ label: 'Guatemala', value: 'Guatemala', iso: 'gt', phoneCode: '+502' },
|
||||
{ label: 'Guinea', value: 'Guinea', iso: 'gn', phoneCode: '+224' },
|
||||
{ label: 'Guinea-Bissau', value: 'Guinea-Bissau', iso: 'gw', phoneCode: '+245' },
|
||||
{ label: 'Guyana', value: 'Guyana', iso: 'gy', phoneCode: '+592' },
|
||||
{ label: 'Haiti', value: 'Haiti', iso: 'ht', phoneCode: '+509' },
|
||||
{ label: 'Honduras', value: 'Honduras', iso: 'hn', phoneCode: '+504' },
|
||||
{ label: 'Hong Kong', value: 'Hong Kong', iso: 'hk', phoneCode: '+852' },
|
||||
{ label: 'Hungary', value: 'Hungary', iso: 'hu', phoneCode: '+36' },
|
||||
{ label: 'Iceland', value: 'Iceland', iso: 'is', phoneCode: '+354' },
|
||||
{ label: 'India', value: 'India', iso: 'in', phoneCode: '+91' },
|
||||
{ label: 'Indonesia', value: 'Indonesia', iso: 'id', phoneCode: '+62' },
|
||||
{ label: 'Iran', value: 'Iran', iso: 'ir', phoneCode: '+98' },
|
||||
{ label: 'Iraq', value: 'Iraq', iso: 'iq', phoneCode: '+964' },
|
||||
{ label: 'Ireland', value: 'Ireland', iso: 'ie', phoneCode: '+353' },
|
||||
{ label: 'Israel', value: 'Israel', iso: 'il', phoneCode: '+972' },
|
||||
{ label: 'Italy', value: 'Italy', iso: 'it', phoneCode: '+39' },
|
||||
{ label: 'Ivory Coast', value: 'Ivory Coast', iso: 'ci', phoneCode: '+225' },
|
||||
{ label: 'Jamaica', value: 'Jamaica', iso: 'jm', phoneCode: '+1-876' },
|
||||
{ label: 'Japan', value: 'Japan', iso: 'jp', phoneCode: '+81' },
|
||||
{ label: 'Jordan', value: 'Jordan', iso: 'jo', phoneCode: '+962' },
|
||||
{ label: 'Kazakhstan', value: 'Kazakhstan', iso: 'kz', phoneCode: '+7' },
|
||||
{ label: 'Kenya', value: 'Kenya', iso: 'ke', phoneCode: '+254' },
|
||||
{ label: 'Kiribati', value: 'Kiribati', iso: 'ki', phoneCode: '+686' },
|
||||
{ label: 'Kosovo', value: 'Kosovo', iso: 'xk', phoneCode: '+383' },
|
||||
{ label: 'Kuwait', value: 'Kuwait', iso: 'kw', phoneCode: '+965' },
|
||||
{ label: 'Kyrgyzstan', value: 'Kyrgyzstan', iso: 'kg', phoneCode: '+996' },
|
||||
{ label: 'Laos', value: 'Laos', iso: 'la', phoneCode: '+856' },
|
||||
{ label: 'Latvia', value: 'Latvia', iso: 'lv', phoneCode: '+371' },
|
||||
{ label: 'Lebanon', value: 'Lebanon', iso: 'lb', phoneCode: '+961' },
|
||||
{ label: 'Lesotho', value: 'Lesotho', iso: 'ls', phoneCode: '+266' },
|
||||
{ label: 'Liberia', value: 'Liberia', iso: 'lr', phoneCode: '+231' },
|
||||
{ label: 'Libya', value: 'Libya', iso: 'ly', phoneCode: '+218' },
|
||||
{ label: 'Liechtenstein', value: 'Liechtenstein', iso: 'li', phoneCode: '+423' },
|
||||
{ label: 'Lithuania', value: 'Lithuania', iso: 'lt', phoneCode: '+370' },
|
||||
{ label: 'Luxembourg', value: 'Luxembourg', iso: 'lu', phoneCode: '+352' },
|
||||
{ label: 'Macau', value: 'Macau', iso: 'mo', phoneCode: '+853' },
|
||||
{ label: 'Madagascar', value: 'Madagascar', iso: 'mg', phoneCode: '+261' },
|
||||
{ label: 'Malawi', value: 'Malawi', iso: 'mw', phoneCode: '+265' },
|
||||
{ label: 'Malaysia', value: 'Malaysia', iso: 'my', phoneCode: '+60' },
|
||||
{ label: 'Maldives', value: 'Maldives', iso: 'mv', phoneCode: '+960' },
|
||||
{ label: 'Mali', value: 'Mali', iso: 'ml', phoneCode: '+223' },
|
||||
{ label: 'Malta', value: 'Malta', iso: 'mt', phoneCode: '+356' },
|
||||
{ label: 'Marshall Islands', value: 'Marshall Islands', iso: 'mh', phoneCode: '+692' },
|
||||
{ label: 'Martinique', value: 'Martinique', iso: 'mq', phoneCode: '+596' },
|
||||
{ label: 'Mauritania', value: 'Mauritania', iso: 'mr', phoneCode: '+222' },
|
||||
{ label: 'Mauritius', value: 'Mauritius', iso: 'mu', phoneCode: '+230' },
|
||||
{ label: 'Mexico', value: 'Mexico', iso: 'mx', phoneCode: '+52' },
|
||||
{ label: 'Micronesia', value: 'Micronesia', iso: 'fm', phoneCode: '+691' },
|
||||
{ label: 'Moldova', value: 'Moldova', iso: 'md', phoneCode: '+373' },
|
||||
{ label: 'Monaco', value: 'Monaco', iso: 'mc', phoneCode: '+377' },
|
||||
{ label: 'Mongolia', value: 'Mongolia', iso: 'mn', phoneCode: '+976' },
|
||||
{ label: 'Montenegro', value: 'Montenegro', iso: 'me', phoneCode: '+382' },
|
||||
{ label: 'Montserrat', value: 'Montserrat', iso: 'ms', phoneCode: '+1-664' },
|
||||
{ label: 'Morocco', value: 'Morocco', iso: 'ma', phoneCode: '+212' },
|
||||
{ label: 'Mozambique', value: 'Mozambique', iso: 'mz', phoneCode: '+258' },
|
||||
{ label: 'Myanmar (Burma)', value: 'Myanmar (Burma)', iso: 'mm', phoneCode: '+95' },
|
||||
{ label: 'Namibia', value: 'Namibia', iso: 'na', phoneCode: '+264' },
|
||||
{ label: 'Nauru', value: 'Nauru', iso: 'nr', phoneCode: '+674' },
|
||||
{ label: 'Nepal', value: 'Nepal', iso: 'np', phoneCode: '+977' },
|
||||
{ label: 'Netherlands', value: 'Netherlands', iso: 'nl', phoneCode: '+31' },
|
||||
{ label: 'New Caledonia', value: 'New Caledonia', iso: 'nc', phoneCode: '+687' },
|
||||
{ label: 'New Zealand', value: 'New Zealand', iso: 'nz', phoneCode: '+64' },
|
||||
{ label: 'Nicaragua', value: 'Nicaragua', iso: 'ni', phoneCode: '+505' },
|
||||
{ label: 'Niger', value: 'Niger', iso: 'ne', phoneCode: '+227' },
|
||||
{ label: 'Nigeria', value: 'Nigeria', iso: 'ng', phoneCode: '+234' },
|
||||
{ label: 'Niue', value: 'Niue', iso: 'nu', phoneCode: '+683' },
|
||||
{ label: 'Norfolk Island', value: 'Norfolk Island', iso: 'nf', phoneCode: '+672' },
|
||||
{ label: 'North Korea', value: 'North Korea', iso: 'kp', phoneCode: '+850' },
|
||||
{ label: 'North Macedonia', value: 'North Macedonia', iso: 'mk', phoneCode: '+389' },
|
||||
{ label: 'Northern Ireland', value: 'Northern Ireland', iso: 'gb-nir', phoneCode: '+44' },
|
||||
{ label: 'Northern Mariana Islands', value: 'Northern Mariana Islands', iso: 'mp', phoneCode: '+1-670' },
|
||||
{ label: 'Norway', value: 'Norway', iso: 'no', phoneCode: '+47' },
|
||||
{ label: 'Oman', value: 'Oman', iso: 'om', phoneCode: '+968' },
|
||||
{ label: 'Pakistan', value: 'Pakistan', iso: 'pk', phoneCode: '+92' },
|
||||
{ label: 'Palau', value: 'Palau', iso: 'pw', phoneCode: '+680' },
|
||||
{ label: 'Palestine', value: 'Palestine', iso: 'ps', phoneCode: '+970' },
|
||||
{ label: 'Panama', value: 'Panama', iso: 'pa', phoneCode: '+507' },
|
||||
{ label: 'Papua New Guinea', value: 'Papua New Guinea', iso: 'pg', phoneCode: '+675' },
|
||||
{ label: 'Paraguay', value: 'Paraguay', iso: 'py', phoneCode: '+595' },
|
||||
{ label: 'Peru', value: 'Peru', iso: 'pe', phoneCode: '+51' },
|
||||
{ label: 'Philippines', value: 'Philippines', iso: 'ph', phoneCode: '+63' },
|
||||
{ label: 'Poland', value: 'Poland', iso: 'pl', phoneCode: '+48' },
|
||||
{ label: 'Portugal', value: 'Portugal', iso: 'pt', phoneCode: '+351' },
|
||||
{ label: 'Puerto Rico', value: 'Puerto Rico', iso: 'pr', phoneCode: '+1-787' },
|
||||
{ label: 'Qatar', value: 'Qatar', iso: 'qa', phoneCode: '+974' },
|
||||
{ label: 'Réunion', value: 'Réunion', iso: 're', phoneCode: '+262' },
|
||||
{ label: 'Romania', value: 'Romania', iso: 'ro', phoneCode: '+40' },
|
||||
{ label: 'Russia', value: 'Russia', iso: 'ru', phoneCode: '+7' },
|
||||
{ label: 'Rwanda', value: 'Rwanda', iso: 'rw', phoneCode: '+250' },
|
||||
{ label: 'Saint Barthélemy', value: 'Saint Barthélemy', iso: 'bl', phoneCode: '+590' },
|
||||
{ label: 'Saint Helena', value: 'Saint Helena', iso: 'sh', phoneCode: '+290' },
|
||||
{ label: 'Saint Kitts & Nevis', value: 'Saint Kitts & Nevis', iso: 'kn', phoneCode: '+1-869' },
|
||||
{ label: 'Saint Lucia', value: 'Saint Lucia', iso: 'lc', phoneCode: '+1-758' },
|
||||
{ label: 'Saint Martin', value: 'Saint Martin', iso: 'mf', phoneCode: '+590' },
|
||||
{ label: 'Saint Pierre & Miquelon', value: 'Saint Pierre & Miquelon', iso: 'pm', phoneCode: '+508' },
|
||||
{ label: 'Saint Vincent & Grenadines', value: 'Saint Vincent & Grenadines', iso: 'vc', phoneCode: '+1-784' },
|
||||
{ label: 'Samoa', value: 'Samoa', iso: 'ws', phoneCode: '+685' },
|
||||
{ label: 'San Marino', value: 'San Marino', iso: 'sm', phoneCode: '+378' },
|
||||
{ label: 'São Tomé & Príncipe', value: 'São Tomé & Príncipe', iso: 'st', phoneCode: '+239' },
|
||||
{ label: 'Saudi Arabia', value: 'Saudi Arabia', iso: 'sa', phoneCode: '+966' },
|
||||
{ label: 'Senegal', value: 'Senegal', iso: 'sn', phoneCode: '+221' },
|
||||
{ label: 'Serbia', value: 'Serbia', iso: 'rs', phoneCode: '+381' },
|
||||
{ label: 'Seychelles', value: 'Seychelles', iso: 'sc', phoneCode: '+248' },
|
||||
{ label: 'Sierra Leone', value: 'Sierra Leone', iso: 'sl', phoneCode: '+232' },
|
||||
{ label: 'Singapore', value: 'Singapore', iso: 'sg', phoneCode: '+65' },
|
||||
{ label: 'Sint Maarten', value: 'Sint Maarten', iso: 'sx', phoneCode: '+1-721' },
|
||||
{ label: 'Slovakia', value: 'Slovakia', iso: 'sk', phoneCode: '+421' },
|
||||
{ label: 'Slovenia', value: 'Slovenia', iso: 'si', phoneCode: '+386' },
|
||||
{ label: 'Solomon Islands', value: 'Solomon Islands', iso: 'sb', phoneCode: '+677' },
|
||||
{ label: 'Somalia', value: 'Somalia', iso: 'so', phoneCode: '+252' },
|
||||
{ label: 'South Africa', value: 'South Africa', iso: 'za', phoneCode: '+27' },
|
||||
{ label: 'South Korea', value: 'South Korea', iso: 'kr', phoneCode: '+82' },
|
||||
{ label: 'South Sudan', value: 'South Sudan', iso: 'ss', phoneCode: '+211' },
|
||||
{ label: 'Spain', value: 'Spain', iso: 'es', phoneCode: '+34' },
|
||||
{ label: 'Sri Lanka', value: 'Sri Lanka', iso: 'lk', phoneCode: '+94' },
|
||||
{ label: 'Sudan', value: 'Sudan', iso: 'sd', phoneCode: '+249' },
|
||||
{ label: 'Suriname', value: 'Suriname', iso: 'sr', phoneCode: '+597' },
|
||||
{ label: 'Sweden', value: 'Sweden', iso: 'se', phoneCode: '+46' },
|
||||
{ label: 'Switzerland', value: 'Switzerland', iso: 'ch', phoneCode: '+41' },
|
||||
{ label: 'Syria', value: 'Syria', iso: 'sy', phoneCode: '+963' },
|
||||
{ label: 'Taiwan', value: 'Taiwan', iso: 'tw', phoneCode: '+886' },
|
||||
{ label: 'Tajikistan', value: 'Tajikistan', iso: 'tj', phoneCode: '+992' },
|
||||
{ label: 'Tanzania', value: 'Tanzania', iso: 'tz', phoneCode: '+255' },
|
||||
{ label: 'Thailand', value: 'Thailand', iso: 'th', phoneCode: '+66' },
|
||||
{ label: 'Timor-Leste', value: 'Timor-Leste', iso: 'tl', phoneCode: '+670' },
|
||||
{ label: 'Togo', value: 'Togo', iso: 'tg', phoneCode: '+228' },
|
||||
{ label: 'Tonga', value: 'Tonga', iso: 'to', phoneCode: '+676' },
|
||||
{ label: 'Trinidad & Tobago', value: 'Trinidad & Tobago', iso: 'tt', phoneCode: '+1-868' },
|
||||
{ label: 'Tunisia', value: 'Tunisia', iso: 'tn', phoneCode: '+216' },
|
||||
{ label: 'Turkey', value: 'Turkey', iso: 'tr', phoneCode: '+90' },
|
||||
{ label: 'Turkmenistan', value: 'Turkmenistan', iso: 'tm', phoneCode: '+993' },
|
||||
{ label: 'Turks & Caicos Islands', value: 'Turks & Caicos Islands', iso: 'tc', phoneCode: '+1-649' },
|
||||
{ label: 'Tuvalu', value: 'Tuvalu', iso: 'tv', phoneCode: '+688' },
|
||||
{ label: 'Uganda', value: 'Uganda', iso: 'ug', phoneCode: '+256' },
|
||||
{ label: 'Ukraine', value: 'Ukraine', iso: 'ua', phoneCode: '+380' },
|
||||
{ label: 'United Arab Emirates', value: 'United Arab Emirates', iso: 'ae', phoneCode: '+971' },
|
||||
{ label: 'United Kingdom', value: 'United Kingdom', iso: 'gb', phoneCode: '+44' },
|
||||
{ label: 'United States', value: 'United States', iso: 'us', phoneCode: '+1' },
|
||||
{ label: 'Uruguay', value: 'Uruguay', iso: 'uy', phoneCode: '+598' },
|
||||
{ label: 'Uzbekistan', value: 'Uzbekistan', iso: 'uz', phoneCode: '+998' },
|
||||
{ label: 'Vanuatu', value: 'Vanuatu', iso: 'vu', phoneCode: '+678' },
|
||||
{ label: 'Vatican City', value: 'Vatican City', iso: 'va', phoneCode: '+379' },
|
||||
{ label: 'Venezuela', value: 'Venezuela', iso: 've', phoneCode: '+58' },
|
||||
{ label: 'Vietnam', value: 'Vietnam', iso: 'vn', phoneCode: '+84' },
|
||||
{ label: 'Wallis & Futuna', value: 'Wallis & Futuna', iso: 'wf', phoneCode: '+681' },
|
||||
{ label: 'Yemen', value: 'Yemen', iso: 'ye', phoneCode: '+967' },
|
||||
{ label: 'Zambia', value: 'Zambia', iso: 'zm', phoneCode: '+260' },
|
||||
{ label: 'Zimbabwe', value: 'Zimbabwe', iso: 'zw', phoneCode: '+263' }
|
||||
],
|
||||
options: [],
|
||||
isOpen: true,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.phoneNumber.value = option.phoneCode + ' '
|
||||
},
|
||||
getFilteredOptions(query) {
|
||||
this.options = this.allOptions.filter(
|
||||
(option) =>
|
||||
option.label.toLowerCase().includes(query.toLowerCase()) ||
|
||||
option.phoneCode.includes(query.toLowerCase()),
|
||||
)
|
||||
if (this.options.length === 0) {
|
||||
this.$refs.noResultsMessage.classList.remove('hidden')
|
||||
} else {
|
||||
this.$refs.noResultsMessage.classList.add('hidden')
|
||||
}
|
||||
},
|
||||
handleKeydownOnOptions(event) {
|
||||
// if the user presses backspace or the alpha-numeric keys, focus on the search field
|
||||
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 8) {
|
||||
this.$refs.searchField.focus()
|
||||
}
|
||||
},
|
||||
}" class="flex w-full max-w-xs flex-col gap-1">
|
||||
<label for="phoneNumber" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Phone Number</label>
|
||||
<div class="relative flex w-full" x-on:keydown="handleKeydownOnOptions($event)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false" x-init="(options = allOptions), setSelectedOption(options[222])">
|
||||
|
||||
<!-- Country Selector -->
|
||||
<div>
|
||||
<!-- Trigger Button -->
|
||||
<button type="button" class="inline-flex w-max items-center justify-between gap-2 whitespace-nowrap rounded-l-radius border border-outline border-r-0 bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" role="combobox" aria-controls="countriesList" aria-haspopup="listbox" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'">
|
||||
<!-- Selected Country Flag -->
|
||||
<img class="h-3.5 w-5" x-bind:alt="selectedOption.value" x-bind:src="'https://flagcdn.com/' + selectedOption.iso + '.svg'" />
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd">
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown -->
|
||||
<div x-show="isOpen || openedWithKeyboard" id="countriesList" class="absolute left-0 top-11 z-10 w-full overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="listbox" aria-label="countries list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-on-surface/50 dark:text-on-surface-dark/50" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
</svg>
|
||||
<input type="text" class="w-full border-b border-outline bg-surface-alt py-2.5 pl-11 pr-4 text-sm text-on-surface focus:outline-hidden focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:border-primary-dark" name="searchField" aria-label="Search" x-on:input="getFilteredOptions($el.value)" x-ref="searchField" placeholder="Search"/>
|
||||
</div>
|
||||
<!-- Options -->
|
||||
<ul class="flex max-h-44 flex-col overflow-y-auto">
|
||||
<li class="hidden px-4 py-2 text-sm text-on-surface dark:text-on-surface-dark" x-ref="noResultsMessage">
|
||||
<span>No matches found</span>
|
||||
</li>
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="inline-flex justify-between gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Flag Image -->
|
||||
<img class="h-3.5 w-5" alt="" aria-hidden="true" x-bind:src="'https://flagcdn.com/' + item.iso + '.svg'" />
|
||||
<!-- Label -->
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.value"></span>
|
||||
<span class="font-bold" x-text="'(' + item.phoneCode + ')'"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
</div>
|
||||
<!-- Checkmark -->
|
||||
<svg x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input id="phoneNumber" type="tel" class="w-full border-outline rounded-r-radius border rounded-l-none bg-surface-alt px-2.5 py-2 text-sm text-on-surface focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" x-ref="phoneNumber" autocomplete="phone" placeholder="+00 000-000-0000"/>
|
||||
</div>
|
||||
</div>
|
||||
107
penguinui-components/combobox/simple-combobox.html
Normal file
107
penguinui-components/combobox/simple-combobox.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<div x-data="{
|
||||
options: [
|
||||
{
|
||||
value: 'Agriculture',
|
||||
label: 'Agriculture',
|
||||
},
|
||||
{
|
||||
value: 'Construction',
|
||||
label: 'Construction',
|
||||
},
|
||||
{
|
||||
value: 'Education',
|
||||
label: 'Education',
|
||||
},
|
||||
{
|
||||
value: 'Entertainment',
|
||||
label: 'Entertainment',
|
||||
},
|
||||
{
|
||||
value: 'Finance',
|
||||
label: 'Finance',
|
||||
},
|
||||
{
|
||||
value: 'Healthcare',
|
||||
label: 'Healthcare',
|
||||
},
|
||||
{
|
||||
value: 'Hospitality',
|
||||
label: 'Hospitality',
|
||||
},
|
||||
{
|
||||
value: 'IT',
|
||||
label: 'IT',
|
||||
},
|
||||
{
|
||||
value: 'Manufacturing',
|
||||
label: 'Manufacturing',
|
||||
},
|
||||
{
|
||||
value: 'Marketing',
|
||||
label: 'Marketing',
|
||||
},
|
||||
{
|
||||
value: 'Real Estate',
|
||||
label: 'Real Estate',
|
||||
},
|
||||
{
|
||||
value: 'Retail',
|
||||
label: 'Retail',
|
||||
},
|
||||
{
|
||||
value: 'Transportation',
|
||||
label: 'Transportation',
|
||||
},
|
||||
],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.hiddenTextField.value = option.value
|
||||
},
|
||||
highlightFirstMatchingOption(pressedKey) {
|
||||
const option = this.options.find((item) =>
|
||||
item.label.toLowerCase().startsWith(pressedKey.toLowerCase()),
|
||||
)
|
||||
if (option) {
|
||||
const index = this.options.indexOf(option)
|
||||
const allOptions = document.querySelectorAll('.combobox-option')
|
||||
if (allOptions[index]) {
|
||||
allOptions[index].focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
}" class="w-full max-w-xs flex flex-col gap-1" x-on:keydown="highlightFirstMatchingOption($event.key)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false">
|
||||
<label for="industry" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Industry</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" role="combobox" class="inline-flex w-full items-center justify-between gap-2 whitespace-nowrap border-outline bg-surface-alt px-4 py-2 text-sm font-medium capitalize tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark rounded-radius border" aria-haspopup="listbox" aria-controls="industriesList" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'" x-bind:aria-expanded="isOpen || openedWithKeyboard">
|
||||
<span class="text-sm font-normal" x-text="selectedOption ? selectedOption.value : 'Please Select'"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- hidden input to grab the selected value -->
|
||||
<input id="industry" name="industry" type="text" x-ref="hiddenTextField" hidden/>
|
||||
<ul x-cloak x-show="isOpen || openedWithKeyboard" id="industriesList" class="absolute z-10 left-0 top-11 flex max-h-44 w-full flex-col overflow-hidden overflow-y-auto border-outline bg-surface-alt py-1.5 dark:border-outline-dark dark:bg-surface-dark-alt rounded-radius border" role="listbox" aria-label="industries list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="combobox-option inline-flex justify-between gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0" >
|
||||
<!-- Label -->
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.label"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
<!-- Checkmark -->
|
||||
<svg x-cloak x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,330 @@
|
||||
<div x-data="{
|
||||
allOptions: [
|
||||
{
|
||||
label: 'Alabama',
|
||||
value: 'Alabama',
|
||||
iso: 'AL'
|
||||
},
|
||||
{
|
||||
label: 'Alaska',
|
||||
value: 'Alaska',
|
||||
iso: 'AK'
|
||||
},
|
||||
{
|
||||
label: 'Arizona',
|
||||
value: 'Arizona',
|
||||
iso: 'AZ'
|
||||
},
|
||||
{
|
||||
label: 'Arkansas',
|
||||
value: 'Arkansas',
|
||||
iso: 'AR'
|
||||
},
|
||||
{
|
||||
label: 'California',
|
||||
value: 'California',
|
||||
iso: 'CA'
|
||||
},
|
||||
{
|
||||
label: 'Colorado',
|
||||
value: 'Colorado',
|
||||
iso: 'CO'
|
||||
},
|
||||
{
|
||||
label: 'Connecticut',
|
||||
value: 'Connecticut',
|
||||
iso: 'CT'
|
||||
},
|
||||
{
|
||||
label: 'Delaware',
|
||||
value: 'Delaware',
|
||||
iso: 'DE'
|
||||
},
|
||||
{
|
||||
label: 'Florida',
|
||||
value: 'Florida',
|
||||
iso: 'FL'
|
||||
},
|
||||
{
|
||||
label: 'Georgia',
|
||||
value: 'Georgia',
|
||||
iso: 'GA'
|
||||
},
|
||||
{
|
||||
label: 'Hawaii',
|
||||
value: 'Hawaii',
|
||||
iso: 'HI'
|
||||
},
|
||||
{
|
||||
label: 'Idaho',
|
||||
value: 'Idaho',
|
||||
iso: 'ID'
|
||||
},
|
||||
{
|
||||
label: 'Illinois',
|
||||
value: 'Illinois',
|
||||
iso: 'IL'
|
||||
},
|
||||
{
|
||||
label: 'Indiana',
|
||||
value: 'Indiana',
|
||||
iso: 'IN'
|
||||
},
|
||||
{
|
||||
label: 'Iowa',
|
||||
value: 'Iowa',
|
||||
iso: 'IA'
|
||||
},
|
||||
{
|
||||
label: 'Kansas',
|
||||
value: 'Kansas',
|
||||
iso: 'KS'
|
||||
},
|
||||
{
|
||||
label: 'Kentucky',
|
||||
value: 'Kentucky',
|
||||
iso: 'KY'
|
||||
},
|
||||
{
|
||||
label: 'Louisiana',
|
||||
value: 'Louisiana',
|
||||
iso: 'LA'
|
||||
},
|
||||
{
|
||||
label: 'Maine',
|
||||
value: 'Maine',
|
||||
iso: 'ME'
|
||||
},
|
||||
{
|
||||
label: 'Maryland',
|
||||
value: 'Maryland',
|
||||
iso: 'MD'
|
||||
},
|
||||
{
|
||||
label: 'Massachusetts',
|
||||
value: 'Massachusetts',
|
||||
iso: 'MA'
|
||||
},
|
||||
{
|
||||
label: 'Michigan',
|
||||
value: 'Michigan',
|
||||
iso: 'MI'
|
||||
},
|
||||
{
|
||||
label: 'Minnesota',
|
||||
value: 'Minnesota',
|
||||
iso: 'MN'
|
||||
},
|
||||
{
|
||||
label: 'Mississippi',
|
||||
value: 'Mississippi',
|
||||
iso: 'MS'
|
||||
},
|
||||
{
|
||||
label: 'Missouri',
|
||||
value: 'Missouri',
|
||||
iso: 'MO'
|
||||
},
|
||||
{
|
||||
label: 'Montana',
|
||||
value: 'Montana',
|
||||
iso: 'MT'
|
||||
},
|
||||
{
|
||||
label: 'Nebraska',
|
||||
value: 'Nebraska',
|
||||
iso: 'NE'
|
||||
},
|
||||
{
|
||||
label: 'Nevada',
|
||||
value: 'Nevada',
|
||||
iso: 'NV'
|
||||
},
|
||||
{
|
||||
label: 'New Hampshire',
|
||||
value: 'New Hampshire',
|
||||
iso: 'NH'
|
||||
},
|
||||
{
|
||||
label: 'New Jersey',
|
||||
value: 'New Jersey',
|
||||
iso: 'NJ'
|
||||
},
|
||||
{
|
||||
label: 'New Mexico',
|
||||
value: 'New Mexico',
|
||||
iso: 'NM'
|
||||
},
|
||||
{
|
||||
label: 'New York',
|
||||
value: 'New York',
|
||||
iso: 'NY'
|
||||
},
|
||||
{
|
||||
label: 'North Carolina',
|
||||
value: 'North Carolina',
|
||||
iso: 'NC'
|
||||
},
|
||||
{
|
||||
label: 'North Dakota',
|
||||
value: 'North Dakota',
|
||||
iso: 'ND'
|
||||
},
|
||||
{
|
||||
label: 'Ohio',
|
||||
value: 'Ohio',
|
||||
iso: 'OH'
|
||||
},
|
||||
{
|
||||
label: 'Oklahoma',
|
||||
value: 'Oklahoma',
|
||||
iso: 'OK'
|
||||
},
|
||||
{
|
||||
label: 'Oregon',
|
||||
value: 'Oregon',
|
||||
iso: 'OR'
|
||||
},
|
||||
{
|
||||
label: 'Pennsylvania',
|
||||
value: 'Pennsylvania',
|
||||
iso: 'PA'
|
||||
},
|
||||
{
|
||||
label: 'Rhode Island',
|
||||
value: 'Rhode Island',
|
||||
iso: 'RI'
|
||||
},
|
||||
{
|
||||
label: 'South Carolina',
|
||||
value: 'South Carolina',
|
||||
iso: 'SC'
|
||||
},
|
||||
{
|
||||
label: 'South Dakota',
|
||||
value: 'South Dakota',
|
||||
iso: 'SD'
|
||||
},
|
||||
{
|
||||
label: 'Tennessee',
|
||||
value: 'Tennessee',
|
||||
iso: 'TN'
|
||||
},
|
||||
{
|
||||
label: 'Texas',
|
||||
value: 'Texas',
|
||||
iso: 'TX'
|
||||
},
|
||||
{
|
||||
label: 'Utah',
|
||||
value: 'Utah',
|
||||
iso: 'UT'
|
||||
},
|
||||
{
|
||||
label: 'Vermont',
|
||||
value: 'Vermont',
|
||||
iso: 'VT'
|
||||
},
|
||||
{
|
||||
label: 'Virginia',
|
||||
value: 'Virginia',
|
||||
iso: 'VA'
|
||||
},
|
||||
{
|
||||
label: 'Washington',
|
||||
value: 'Washington',
|
||||
iso: 'WA'
|
||||
},
|
||||
{
|
||||
label: 'West Virginia',
|
||||
value: 'West Virginia',
|
||||
iso: 'WV'
|
||||
},
|
||||
{
|
||||
label: 'Wisconsin',
|
||||
value: 'Wisconsin',
|
||||
iso: 'WI'
|
||||
},
|
||||
{
|
||||
label: 'Wyoming',
|
||||
value: 'Wyoming',
|
||||
iso: 'WY'
|
||||
}
|
||||
],
|
||||
options: [],
|
||||
isOpen: false,
|
||||
openedWithKeyboard: false,
|
||||
selectedOption: null,
|
||||
setSelectedOption(option) {
|
||||
this.selectedOption = option
|
||||
this.isOpen = false
|
||||
this.openedWithKeyboard = false
|
||||
this.$refs.hiddenTextField.value = option.value
|
||||
},
|
||||
getFilteredOptions(query) {
|
||||
this.options = this.allOptions.filter((option) =>
|
||||
option.label.toLowerCase().includes(query.toLowerCase()) ||
|
||||
option.iso.toLowerCase().includes(query.toLowerCase())
|
||||
)
|
||||
if (this.options.length === 0) {
|
||||
this.$refs.noResultsMessage.classList.remove('hidden')
|
||||
} else {
|
||||
this.$refs.noResultsMessage.classList.add('hidden')
|
||||
}
|
||||
},
|
||||
handleKeydownOnOptions(event) {
|
||||
// if the user presses backspace or the alpha-numeric keys, focus on the search field
|
||||
if ((event.keyCode >= 65 && event.keyCode <= 90) || (event.keyCode >= 48 && event.keyCode <= 57) || event.keyCode === 8) {
|
||||
this.$refs.searchField.focus()
|
||||
}
|
||||
},
|
||||
}" class="flex w-full max-w-xs flex-col gap-1" x-on:keydown="handleKeydownOnOptions($event)" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false" x-init="options = allOptions">
|
||||
<label for="state" class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">State</label>
|
||||
<div class="relative">
|
||||
|
||||
<!-- trigger button -->
|
||||
<button type="button" class="inline-flex w-full items-center justify-between gap-2 border border-outline rounded-radius bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" role="combobox" aria-controls="statesList" aria-haspopup="listbox" x-on:click="isOpen = ! isOpen" x-on:keydown.down.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-bind:aria-expanded="isOpen || openedWithKeyboard" x-bind:aria-label="selectedOption ? selectedOption.value : 'Please Select'" >
|
||||
<span class="text-sm font-normal" x-text="selectedOption ? selectedOption.value : 'Please Select'"></span>
|
||||
<!-- Chevron -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"class="size-5" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Hidden Input To Grab The Selected Value -->
|
||||
<input id="state" name="state" autocomplete="off" x-ref="hiddenTextField" hidden=""/>
|
||||
<div x-show="isOpen || openedWithKeyboard" id="statesList" class="absolute left-0 top-11 z-10 w-full overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="listbox" aria-label="states list" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" x-transition x-trap="openedWithKeyboard">
|
||||
|
||||
<!-- Search -->
|
||||
<div class="relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="1.5" class="absolute left-4 top-1/2 size-5 -translate-y-1/2 text-on-surface dark:text-on-surface-dark" aria-hidden="true" >
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
|
||||
</svg>
|
||||
<input type="text" class="w-full border-b border-outline bg-surface-alt py-2.5 pl-11 pr-4 text-sm text-on-surface focus:outline-hidden focus-visible:border-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:border-primary-dark" name="searchField" aria-label="Search" x-on:input="getFilteredOptions($el.value)" x-ref="searchField" placeholder="Search" />
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<ul class="flex max-h-44 flex-col overflow-y-auto">
|
||||
<li class="hidden px-4 py-2 text-sm text-on-surface dark:text-on-surface-dark" x-ref="noResultsMessage">
|
||||
<span>No matches found</span>
|
||||
</li>
|
||||
<template x-for="(item, index) in options" x-bind:key="item.value">
|
||||
<li class="combobox-option inline-flex justify-between gap-6 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/5 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="option" x-on:click="setSelectedOption(item)" x-on:keydown.enter="setSelectedOption(item)" x-bind:id="'option-' + index" tabindex="0">
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Flag image -->
|
||||
<img class="w-5 h-3.5" x-bind:src="'https://flagcdn.com/us-' + item.iso.toLowerCase() + '.svg'" alt="" aria-hidden="true"/>
|
||||
<!-- State name -->
|
||||
<span x-bind:class="selectedOption == item ? 'font-bold' : null" x-text="item.label"></span>
|
||||
<!-- Screen reader 'selected' indicator -->
|
||||
<span class="sr-only" x-text="selectedOption == item ? 'selected' : null"></span>
|
||||
</div>
|
||||
<!-- Checkmark -->
|
||||
<svg x-cloak x-show="selectedOption == item" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" class="size-4" aria-hidden="true">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5">
|
||||
</svg>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
16
penguinui-components/counter/default-counter.html
Normal file
16
penguinui-components/counter/default-counter.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="flex flex-col gap-1">
|
||||
<label for="counterInput" class="pl-1 text-sm text-on-surface dark:text-on-surface-dark">Items(s)</label>
|
||||
<div x-on:dblclick.prevent class="flex items-center">
|
||||
<button x-on:click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="flex h-10 items-center justify-center rounded-l-radius border border-outline bg-surface-alt px-4 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="subtract">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="border-x-none h-10 w-20 rounded-none border-y border-outline bg-surface-alt/50 text-center text-on-surface-strong focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" readonly />
|
||||
<button x-on:click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="flex h-10 items-center justify-center rounded-r-radius border border-outline bg-surface-alt px-4 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="add">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
16
penguinui-components/counter/split-counter.html
Normal file
16
penguinui-components/counter/split-counter.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="flex flex-col gap-1">
|
||||
<label for="counterInput" class="pl-1 text-sm text-on-surface dark:text-on-surface-dark">Items(s)</label>
|
||||
<div x-on:dblclick.prevent class="flex items-center">
|
||||
<button x-on:click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="flex h-10 items-center justify-center rounded-radius border border-outline bg-surface-alt px-4 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="subtract">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="h-10 w-20 rounded-none bg-transparent text-center text-on-surface-strong focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-primary dark:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" readonly />
|
||||
<button x-on:click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="flex h-10 items-center justify-center rounded-radius border border-outline bg-surface-alt px-4 py-2 text-on-surface hover:opacity-75 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark" aria-label="add">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
82
penguinui-components/dropdowns/context-menu-dropdown.html
Normal file
82
penguinui-components/dropdowns/context-menu-dropdown.html
Normal file
@@ -0,0 +1,82 @@
|
||||
<div x-data="{ isOpen: false, openedWithKeyboard: false }" x-on:keydown.esc.prevent="isOpen = false, openedWithKeyboard = false" class="relative w-fit">
|
||||
<!-- Toggle Button -->
|
||||
<button type="button" aria-label="context menu" x-on:click="isOpen = ! isOpen" x-on:contextmenu.prevent="isOpen = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" class="inline-flex items-center bg-transparent transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong active:opacity-100 dark:focus-visible:outline-outline-dark-strong" x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-8 h-8">
|
||||
<path fill-rule="evenodd" d="M4.5 12a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm6 0a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-8 flex w-fit min-w-48 flex-col divide-y divide-outline overflow-hidden rounded-radius border-outline bg-surface-alt dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
||||
<!-- Dropdown Section -->
|
||||
<ul class="flex flex-col py-1.5" role="none">
|
||||
<li class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M9.53 2.47a.75.75 0 010 1.06L4.81 8.25H15a6.75 6.75 0 010 13.5h-3a.75.75 0 010-1.5h3a5.25 5.25 0 100-10.5H4.81l4.72 4.72a.75.75 0 11-1.06 1.06l-6-6a.75.75 0 010-1.06l6-6a.75.75 0 011.06 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Undo
|
||||
<div class="ml-auto flex items-center gap-1 font-semibold opacity-60" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-3 h-3">
|
||||
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
|
||||
</svg>
|
||||
Z
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Dropdown Section -->
|
||||
<ul class="flex flex-col py-1.5" role="none">
|
||||
<li class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M8.128 9.155a3.751 3.751 0 11.713-1.321l1.136.656a.75.75 0 01.222 1.104l-.006.007a.75.75 0 01-1.032.157 1.421 1.421 0 00-.113-.072l-.92-.531zm-4.827-3.53a2.25 2.25 0 013.994 2.063.756.756 0 00-.122.23 2.25 2.25 0 01-3.872-2.293zM13.348 8.272a5.073 5.073 0 00-3.428 3.57c-.101.387-.158.79-.165 1.202a1.415 1.415 0 01-.707 1.201l-.96.554a3.751 3.751 0 10.734 1.309l13.729-7.926a.75.75 0 00-.181-1.374l-.803-.215a5.25 5.25 0 00-2.894.05l-5.325 1.629zm-9.223 7.03a2.25 2.25 0 102.25 3.897 2.25 2.25 0 00-2.25-3.897zM12 12.75a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd"/>
|
||||
<path d="M16.372 12.615a.75.75 0 01.75 0l5.43 3.135a.75.75 0 01-.182 1.374l-.802.215a5.25 5.25 0 01-2.894-.051l-5.147-1.574a.75.75 0 01-.156-1.367l3-1.732z"/>
|
||||
</svg>
|
||||
Cut
|
||||
<div class="ml-auto flex items-center gap-1 font-semibold opacity-60" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-3 h-3">
|
||||
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
|
||||
</svg>
|
||||
X
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
||||
<path d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z"/>
|
||||
<path d="M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z"/>
|
||||
</svg>
|
||||
Copy
|
||||
<div class="ml-auto flex items-center gap-1 font-semibold opacity-60" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-3 h-3">
|
||||
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
|
||||
</svg>
|
||||
C
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M10.5 3A1.501 1.501 0 009 4.5h6A1.5 1.5 0 0013.5 3h-3zm-2.693.178A3 3 0 0110.5 1.5h3a3 3 0 012.694 1.678c.497.042.992.092 1.486.15 1.497.173 2.57 1.46 2.57 2.929V19.5a3 3 0 01-3 3H6.75a3 3 0 01-3-3V6.257c0-1.47 1.073-2.756 2.57-2.93.493-.057.989-.107 1.487-.15z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Paste
|
||||
<div class="ml-auto flex items-center gap-1 font-semibold opacity-60" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-3 h-3">
|
||||
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
|
||||
</svg>
|
||||
V
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Dropdown Section -->
|
||||
<ul class="flex flex-col py-1.5" role="none">
|
||||
<li class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem" tabindex="0">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
|
||||
<path fill-rule="evenodd" d="M7.875 1.5C6.839 1.5 6 2.34 6 3.375v2.99c-.426.053-.851.11-1.274.174-1.454.218-2.476 1.483-2.476 2.917v6.294a3 3 0 003 3h.27l-.155 1.705A1.875 1.875 0 007.232 22.5h9.536a1.875 1.875 0 001.867-2.045l-.155-1.705h.27a3 3 0 003-3V9.456c0-1.434-1.022-2.7-2.476-2.917A48.716 48.716 0 0018 6.366V3.375c0-1.036-.84-1.875-1.875-1.875h-8.25zM16.5 6.205v-2.83A.375.375 0 0016.125 3h-8.25a.375.375 0 00-.375.375v2.83a49.353 49.353 0 019 0zm-.217 8.265c.178.018.317.16.333.337l.526 5.784a.375.375 0 01-.374.409H7.232a.375.375 0 01-.374-.409l.526-5.784a.373.373 0 01.333-.337 41.741 41.741 0 018.566 0zm.967-3.97a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H18a.75.75 0 01-.75-.75V10.5zM15 9.75a.75.75 0 00-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 00.75-.75V10.5a.75.75 0 00-.75-.75H15z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Print
|
||||
<div class="ml-auto flex items-center gap-1 font-semibold opacity-60" aria-hidden="true">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-3 h-3">
|
||||
<path d="M3.5 2A1.5 1.5 0 0 1 5 3.5V5H3.5a1.5 1.5 0 1 1 0-3M6 5V3.5A2.5 2.5 0 1 0 3.5 6H5v4H3.5A2.5 2.5 0 1 0 6 12.5V11h4v1.5a2.5 2.5 0 1 0 2.5-2.5H11V6h1.5A2.5 2.5 0 1 0 10 3.5V5zm4 1v4H6V6zm1-1V3.5A1.5 1.5 0 1 1 12.5 5zm0 6h1.5a1.5 1.5 0 1 1-1.5 1.5zm-6 0v1.5A1.5 1.5 0 1 1 3.5 11z"/>
|
||||
</svg>
|
||||
P
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
16
penguinui-components/dropdowns/dropdown-with-click.html
Normal file
16
penguinui-components/dropdowns/dropdown-with-click.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div x-data="{ isOpen: false, openedWithKeyboard: false }" class="relative w-fit" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false">
|
||||
<!-- Toggle Button -->
|
||||
<button type="button" x-on:click="isOpen = ! isOpen" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:focus-visible:outline-outline-dark-strong" aria-haspopup="true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpen || openedWithKeyboard">
|
||||
Actions Menu
|
||||
<svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 rotate-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 left-0 flex w-fit min-w-48 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Dashboard</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Subscription</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Settings</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Sign Out</a>
|
||||
</div>
|
||||
</div>
|
||||
24
penguinui-components/dropdowns/dropdown-with-divider.html
Normal file
24
penguinui-components/dropdowns/dropdown-with-divider.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<div x-data="{ isOpened: false, openedWithKeyboard: false }" x-on:keydown.esc.window="isOpened = false, openedWithKeyboard = false" class="relative w-fit">
|
||||
<!-- Toggle Button -->
|
||||
<button type="button" x-on:click="isOpened = ! isOpened" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:focus-visible:outline-outline-dark-strong" x-bind:class="isOpened || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpened || openedWithKeyboard" aria-haspopup="true">
|
||||
Actions Menu
|
||||
<svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 rotate-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-cloak x-show="isOpened || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpened = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 flex w-fit min-w-48 flex-col divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Dashboard</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Messages</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Favorites</a>
|
||||
</div>
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Profile</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Settings</a>
|
||||
</div>
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Sign Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
16
penguinui-components/dropdowns/dropdown-with-hover.html
Normal file
16
penguinui-components/dropdowns/dropdown-with-hover.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<div x-data="{ isOpen: false, openedWithKeyboard: false, leaveTimeout: null }" x-on:mouseleave.prevent="leaveTimeout = setTimeout(() => { isOpen = false }, 250)" x-on:mouseenter="leaveTimeout ? clearTimeout(leaveTimeout) : true" x-on:keydown.esc.prevent="isOpen = false, openedWithKeyboard = false" x-on:click.outside="isOpen = false, openedWithKeyboard = false" class="relative w-fit">
|
||||
<!-- Toggle Button -->
|
||||
<button type="button" x-on:mouseover="isOpen = true" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:focus-visible:outline-outline-dark-strong" x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true">
|
||||
Actions Menu
|
||||
<svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 rotate-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 left-0 flex w-fit min-w-48 flex-col overflow-hidden rounded-radius border border-outline bg-surface-alt py-1.5 dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Dashboard</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Subscription</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Settings</a>
|
||||
<a href="#" class="bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">Sign Out</a>
|
||||
</div>
|
||||
</div>
|
||||
59
penguinui-components/dropdowns/dropdown-with-icons.html
Normal file
59
penguinui-components/dropdowns/dropdown-with-icons.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<div x-data="{ isOpen: false, openedWithKeyboard: false }" x-on:keydown.esc.window="isOpen = false, openedWithKeyboard = false" class="relative w-fit">
|
||||
<!-- Toggle Button -->
|
||||
<button type="button" x-on:click="isOpen = ! isOpen" x-on:keydown.space.prevent="openedWithKeyboard = true" x-on:keydown.enter.prevent="openedWithKeyboard = true" x-on:keydown.down.prevent="openedWithKeyboard = true" class="inline-flex items-center gap-2 whitespace-nowrap rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-outline-strong dark:border-outline-dark dark:bg-surface-dark-alt dark:focus-visible:outline-outline-dark-strong" x-bind:class="isOpen || openedWithKeyboard ? 'text-on-surface-strong dark:text-on-surface-dark-strong' : 'text-on-surface dark:text-on-surface-dark'" x-bind:aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true">
|
||||
Actions Menu
|
||||
<svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 rotate-0">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- Dropdown Menu -->
|
||||
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" x-on:click.outside="isOpen = false, openedWithKeyboard = false" x-on:keydown.down.prevent="$focus.wrap().next()" x-on:keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 flex w-fit min-w-48 flex-col divide-y divide-outline overflow-hidden rounded-radius border border-outline bg-surface-alt dark:divide-outline-dark dark:border-outline-dark dark:bg-surface-dark-alt" role="menu">
|
||||
<!-- Dropdown Section -->
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"/>
|
||||
</svg>
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z"/>
|
||||
<path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z"/>
|
||||
</svg>
|
||||
Messages
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<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="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Favorites
|
||||
</a>
|
||||
</div>
|
||||
<!-- Dropdown Section -->
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<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="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<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.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Settings
|
||||
</a>
|
||||
</div>
|
||||
<!-- Dropdown Section -->
|
||||
<div class="flex flex-col py-1.5">
|
||||
<a href="#" class="flex items-center gap-2 bg-surface-alt px-4 py-2 text-sm text-on-surface hover:bg-surface-dark-alt/5 hover:text-on-surface-strong focus-visible:bg-surface-dark-alt/10 focus-visible:text-on-surface-strong focus-visible:outline-hidden dark:bg-surface-dark-alt dark:text-on-surface-dark dark:hover:bg-surface-alt/5 dark:hover:text-on-surface-dark-strong dark:focus-visible:bg-surface-alt/10 dark:focus-visible:text-on-surface-dark-strong" role="menuitem">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path d="M12 .75a8.25 8.25 0 00-4.135 15.39c.686.398 1.115 1.008 1.134 1.623a.75.75 0 00.577.706c.352.083.71.148 1.074.195.323.041.6-.218.6-.544v-4.661a6.714 6.714 0 01-.937-.171.75.75 0 11.374-1.453 5.261 5.261 0 002.626 0 .75.75 0 11.374 1.452 6.712 6.712 0 01-.937.172v4.66c0 .327.277.586.6.545.364-.047.722-.112 1.074-.195a.75.75 0 00.577-.706c.02-.615.448-1.225 1.134-1.623A8.25 8.25 0 0012 .75z"/>
|
||||
<path fill-rule="evenodd" d="M9.013 19.9a.75.75 0 01.877-.597 11.319 11.319 0 004.22 0 .75.75 0 11.28 1.473 12.819 12.819 0 01-4.78 0 .75.75 0 01-.597-.876zM9.754 22.344a.75.75 0 01.824-.668 13.682 13.682 0 002.844 0 .75.75 0 11.156 1.492 15.156 15.156 0 01-3.156 0 .75.75 0 01-.668-.824z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Help Center
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
4
penguinui-components/file-input/default-file-input.html
Normal file
4
penguinui-components/file-input/default-file-input.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1">
|
||||
<label class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark" for="fileInput">Upload File</label>
|
||||
<input id="fileInput" type="file" class="w-full overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm text-on-surface file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
</div>
|
||||
22
penguinui-components/file-input/file-input-states.html
Normal file
22
penguinui-components/file-input/file-input-states.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!-- File input with error -->
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1 text-danger">
|
||||
<label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
|
||||
</svg>
|
||||
Upload File
|
||||
</label>
|
||||
<input id="fileInput" type="file" class="w-full overflow-clip rounded-radius border border-danger bg-surface-alt/50 text-sm text-danger file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface-dark-alt/50 dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
<small class="pl-0.5">Error: Please choose a file for upload</small>
|
||||
</div>
|
||||
|
||||
<!-- File input success -->
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1 text-success">
|
||||
<label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="size-4">
|
||||
<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
Upload File
|
||||
</label>
|
||||
<input id="fileInput" type="file" class="w-full max-w-md overflow-clip rounded-radius border border-success bg-surface-alt/50 text-sm text-success file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:bg-surface-dark-alt/50 dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
<div class="flex w-full max-w-xl text-center flex-col gap-1">
|
||||
<span class="w-fit pl-0.5 text-sm text-on-surface dark:text-on-surface-dark">Cover Picture</span>
|
||||
<div class="flex w-full flex-col items-center justify-center gap-2 rounded-radius border border-dashed border-outline p-8 text-on-surface dark:border-outline-dark dark:text-on-surface-dark">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-12 h-12 opacity-75">
|
||||
<path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<div class="group">
|
||||
<label for="fileInputDragDrop" class="font-medium text-primary group-focus-within:underline dark:text-primary-dark">
|
||||
<input id="fileInputDragDrop" type="file" class="sr-only" aria-describedby="validFileFormats" />
|
||||
Browse
|
||||
</label>
|
||||
or drag and drop here
|
||||
</div>
|
||||
<small id="validFileFormats">PNG, JPG, WebP - Max 5MB</small>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,5 @@
|
||||
<div class="relative flex w-full max-w-sm flex-col gap-1 text-on-surface dark:text-on-surface-dark">
|
||||
<label for="fileInput" class="w-fit pl-0.5 text-sm">Upload File</label>
|
||||
<input id="fileInput" type="file" class="w-full max-w-md overflow-clip rounded-radius border border-outline bg-surface-alt/50 text-sm file:mr-4 file:border-none file:bg-surface-alt file:px-4 file:py-2 file:font-medium file:text-on-surface-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:file:bg-surface-dark-alt dark:file:text-on-surface-dark-strong dark:focus-visible:outline-primary-dark" />
|
||||
<small class="pl-0.5">PNG, JPG, WebP - Max 5MB</small>
|
||||
</div>
|
||||
79
penguinui-components/kbd/alphabet-keys.html
Normal file
79
penguinui-components/kbd/alphabet-keys.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!-- A -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">A</kbd>
|
||||
|
||||
<!-- B -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">B</kbd>
|
||||
|
||||
<!-- C -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">C</kbd>
|
||||
|
||||
<!-- D -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">D</kbd>
|
||||
|
||||
<!-- E -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">E</kbd>
|
||||
|
||||
<!-- F -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F</kbd>
|
||||
|
||||
<!-- G -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">G</kbd>
|
||||
|
||||
<!-- H -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">H</kbd>
|
||||
|
||||
<!-- I -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">I</kbd>
|
||||
|
||||
<!-- J -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">J</kbd>
|
||||
|
||||
<!-- K -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">K</kbd>
|
||||
|
||||
<!-- L -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">L</kbd>
|
||||
|
||||
<!-- M -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">M</kbd>
|
||||
|
||||
<!-- N -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">N</kbd>
|
||||
|
||||
<!-- O -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">O</kbd>
|
||||
|
||||
<!-- P -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">P</kbd>
|
||||
|
||||
<!-- Q -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Q</kbd>
|
||||
|
||||
<!-- R -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">R</kbd>
|
||||
|
||||
<!-- S -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">S</kbd>
|
||||
|
||||
<!-- T -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">T</kbd>
|
||||
|
||||
<!-- U -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">U</kbd>
|
||||
|
||||
<!-- V -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">V</kbd>
|
||||
|
||||
<!-- W -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">W</kbd>
|
||||
|
||||
<!-- X -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">X</kbd>
|
||||
|
||||
<!-- Y -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Y</kbd>
|
||||
|
||||
<!-- Z -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Z</kbd>
|
||||
|
||||
|
||||
49
penguinui-components/kbd/frequently-used-keys.html
Normal file
49
penguinui-components/kbd/frequently-used-keys.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!-- Tab -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Tab</kbd>
|
||||
|
||||
<!-- Shift -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Shift</kbd>
|
||||
|
||||
<!-- space -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">space</kbd>
|
||||
|
||||
<!-- Ctrl -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Ctrl</kbd>
|
||||
|
||||
<!-- command -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">command</kbd>
|
||||
|
||||
<!-- alt -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">alt</kbd>
|
||||
|
||||
<!-- option -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">option</kbd>
|
||||
|
||||
<!-- Enter -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Enter</kbd>
|
||||
|
||||
<!-- Backspace -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Backspace</kbd>
|
||||
|
||||
<!-- Esc -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Esc</kbd>
|
||||
|
||||
<!-- Delete -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Delete</kbd>
|
||||
|
||||
<!-- Up -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Up</kbd>
|
||||
|
||||
<!-- Down -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Down</kbd>
|
||||
|
||||
<!-- Left -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Left</kbd>
|
||||
|
||||
<!-- Right -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Right</kbd>
|
||||
|
||||
<!-- Caps Lock -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">Caps Lock</kbd>
|
||||
|
||||
|
||||
34
penguinui-components/kbd/function-keys.html
Normal file
34
penguinui-components/kbd/function-keys.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!-- F1 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F1</kbd>
|
||||
|
||||
<!-- F2 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F2</kbd>
|
||||
|
||||
<!-- F3 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F3</kbd>
|
||||
|
||||
<!-- F4 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F4</kbd>
|
||||
|
||||
<!-- F5 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F5</kbd>
|
||||
|
||||
<!-- F6 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F6</kbd>
|
||||
|
||||
<!-- F7 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F7</kbd>
|
||||
|
||||
<!-- F8 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F8</kbd>
|
||||
|
||||
<!-- F10 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F10</kbd>
|
||||
|
||||
<!-- F11 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F11</kbd>
|
||||
|
||||
<!-- F12 -->
|
||||
<kbd class="inline-block size-min whitespace-nowrap rounded-md border border-outline bg-surface-alt px-2 py-1 font-mono text-xs font-semibold text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">F12</kbd>
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user