first commit

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,45 @@
+# Nuxt 3 + PrimeVue Starter
+
+## Setup
+
+Make sure to install the dependencies:
+
+Primevue locale Hungary
+
+```bash
+# pnpm
+pnpm install
+
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# pnpm
+pnpm run dev
+
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# pnpm
+pnpm run build
+
+```
+
+Locally preview production build:
+
+```bash
+# pnpm
+pnpm run preview
+
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+
+View Primevue out the [documentation](https://primevue.org/nuxt) for more information.

app.vue

@@ -0,0 +1,14 @@
+<template>
+    <div class="bg-surface-50 dark:bg-surface-950 dark:text-gray-100 min-h-svh">
+        <NuxtPage />
+    </div>
+</template>
+<script setup>
+
+</script>
+<style>
+html {
+    font-size: 14px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+</style>

assets/styles/base.css

@@ -0,0 +1,66 @@
+:root {
+    --p-primary-50: #ecfdf5;
+    --p-primary-100: #d1fae5;
+    --p-primary-200: #a7f3d0;
+    --p-primary-300: #6ee7b7;
+    --p-primary-400: #34d399;
+    --p-primary-500: #10b981;
+    --p-primary-600: #059669;
+    --p-primary-700: #047857;
+    --p-primary-800: #065f46;
+    --p-primary-900: #064e3b;
+    --p-primary-950: #022c22;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/* Dark */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --p-primary-color: var(--p-primary-400);
+        --p-primary-contrast-color: var(--p-surface-900);
+        --p-primary-hover-color: var(--p-primary-300);
+        --p-primary-active-color: var(--p-primary-200);
+        --p-content-border-color: var(--p-surface-700);
+        --p-content-hover-background: var(--p-surface-800);
+        --p-content-hover-color: var(--p-surface-0);
+        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+        --p-highlight-color: rgba(255, 255, 255, 0.87);
+        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+        --p-text-color: var(--p-surface-0);
+        --p-text-hover-color: var(--p-surface-0);
+        --p-text-muted-color: var(--p-surface-400);
+        --p-text-hover-muted-color: var(--p-surface-300);
+    }
+}

assets/styles/primevue/accordion.css

@@ -0,0 +1,58 @@
+.p-accordionpanel {
+    @apply flex flex-col border-b border-surface-200 dark:border-surface-700
+}
+
+.p-accordionheader {
+    @apply cursor-pointer disabled:cursor-auto flex items-center justify-between p-[1.125rem] font-semibold
+        bg-surface-0 dark:bg-surface-900
+        text-surface-500 dark:text-surface-400
+        transition-colors duration-200
+}
+
+.p-accordionpanel:first-child > .p-accordionheader {
+    @apply rounded-t-md
+}
+
+.p-accordionpanel:last-child > .p-accordionheader {
+    @apply rounded-b-md
+}
+
+.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
+    @apply rounded-b-md
+}
+
+.p-accordionheader-toggle-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
+    @apply outline outline-1 outline-offset-[-1px] outline-primary
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover  .p-accordionheader-toggle-icon {
+    @apply text-surface-700 dark:text-surface-0;
+}
+
+.p-accordioncontent-content {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 pt-0 px-[1.125rem] pb-[1.125rem]
+}

assets/styles/primevue/autocomplete.css

@@ -0,0 +1,143 @@
+@import './inputtext';
+@import './chip';
+
+.p-autocomplete {
+    @apply inline-flex
+}
+
+.p-autocomplete.p-disabled {
+    @apply opacity-100
+}
+
+.p-autocomplete-loader {
+    @apply absolute top-1/2 -mt-2 right-3
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-loader {
+    @apply right-[3.25rem]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply flex-auto w-[1%]
+}
+
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input,
+.p-autocomplete:has(.p-autocomplete-dropdown) .p-autocomplete-input-multiple {
+    @apply rounded-r-none
+}
+
+.p-autocomplete-dropdown {
+    @apply cursor-pointer inline-flex items-center justify-center select-none overflow-hidden relative w-10 rounded-r-md
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:hover:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-autocomplete .p-autocomplete-overlay {
+    @apply min-w-full
+}
+
+.p-autocomplete-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-autocomplete-list-container {
+    @apply overflow-auto
+}
+
+.p-autocomplete-list {
+    @apply m-0 p-1 list-none flex flex-col gap-[2px]
+}
+
+.p-autocomplete-option {
+    @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center px-3 py-2 rounded-sm
+        text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200
+}
+
+.p-autocomplete-option:not(.p-autocomplete-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-option-selected {
+    @apply bg-highlight
+}
+
+.p-autocomplete-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-autocomplete-option-group {
+    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
+}
+
+.p-autocomplete-input-multiple {
+    @apply m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap
+        px-3 py-1 gap-1 text-surface-700 dark:text-surface-0 bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700 rounded-md w-full
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200 outline-none
+}
+
+.p-autocomplete:not(.p-disabled):hover .p-autocomplete-input-multiple {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-input-multiple {
+    @apply border-primary
+}
+
+.p-autocomplete.p-invalid .p-autocomplete-input-multiple {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-variant-filled.p-autocomplete-input-multiple {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-autocomplete.p-disabled .p-autocomplete-input-multiple {
+    @apply opacity-100 cursor-default bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400
+}
+
+.p-autocomplete-chip.p-chip {
+    @apply py-1 rounded-sm
+}
+
+.p-autocomplete-input-multiple:has(.p-autocomplete-chip) {
+    @apply px-1
+}
+
+.p-autocomplete-chip-item.p-focus .p-autocomplete-chip {
+    @apply bg-surface-200 text-surface-800 dark:bg-surface-700 dark:text-surface-0
+}
+
+.p-autocomplete-input-chip {
+    @apply flex-auto inline-flex py-1
+}
+
+.p-autocomplete-input-chip input {
+    @apply border-none outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full text-inherit
+}
+
+.p-autocomplete-input-chip input::placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-autocomplete-empty-message {
+    @apply px-3 py-2
+}
+
+.p-autocomplete-fluid {
+    @apply flex
+}
+
+.p-autocomplete-fluid:has(.p-autocomplete-dropdown) .p-autocomplete-input {
+    @apply w-[1%]
+}

assets/styles/primevue/avatar.css

@@ -0,0 +1,50 @@
+.p-avatar {
+    @apply inline-flex items-center justify-center
+        w-8 h-8 text-base rounded-md
+        bg-surface-200 dark:bg-surface-700 
+}
+
+.p-avatar-image {
+    @apply bg-transparent
+}
+
+.p-avatar-circle,
+.p-avatar-circle img {
+    @apply rounded-full
+}
+
+.p-avatar-icon {
+    @apply text-base
+}
+
+.p-avatar img {
+    @apply w-full h-full
+}
+
+.p-avatar-lg {
+    @apply w-12 h-12 text-2xl
+}
+
+.p-avatar-lg .p-avatar-icon {
+    @apply text-2xl
+}
+
+.p-avatar-xl {
+    @apply w-16 h-16 text-[2rem]
+}
+
+.p-avatar-xl .p-avatar-icon {
+    @apply text-[2rem]
+}
+
+.p-avatar-group {
+    @apply flex items-center
+}
+
+.p-avatar-group .p-avatar + .p-avatar {
+    @apply -ml-4
+}
+
+.p-avatar-group .p-avatar {
+    @apply border-2 border-surface-200 dark:border-surface-700
+}

assets/styles/primevue/badge.css

@@ -0,0 +1,49 @@
+.p-badge {
+    @apply inline-flex items-center justify-center rounded-md
+        py-0 px-2 text-xs font-bold min-w-6 h-6
+        bg-primary text-primary-contrast
+}
+
+.p-badge-dot {
+    @apply min-w-2 h-2 rounded-full p-0
+}
+
+.p-badge-circle {
+    @apply p-0 rounded-full
+}
+
+.p-badge-secondary {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
+}
+
+.p-badge-success {
+    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950
+}
+
+.p-badge-info {
+    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950
+}
+
+.p-badge-warn {
+    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950
+}
+
+.p-badge-danger {
+    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950
+}
+
+.p-badge-contrast {
+    @apply bg-surface-950 dark:bg-white text-white dark:text-surface-950
+}
+
+.p-badge-sm {
+    @apply text-[0.625rem] min-w-5 h-5
+}
+
+.p-badge-lg {
+    @apply text-sm min-w-7 h-7
+}
+
+.p-badge-xl {
+    @apply text-base min-w-8 h-8
+}

assets/styles/primevue/blockui.css

@@ -0,0 +1,15 @@
+.p-blockui {
+    @apply relative
+}
+
+.p-blockui-mask {
+    @apply rounded-md
+}
+
+.p-blockui-mask.p-overlay-mask {
+    @apply absolute
+}
+
+.p-blockui-mask-document.p-overlay-mask {
+    @apply fixed
+}

assets/styles/primevue/breadcrumb.css

@@ -0,0 +1,37 @@
+.p-breadcrumb {
+    @apply bg-surface-0 dark:bg-surface-900 p-4 overflow-x-auto
+}
+
+.p-breadcrumb-list {
+    @apply m-0 p-0 list-none flex items-center flex-nowrap gap-2
+}
+
+.p-breadcrumb-separator {
+    @apply flex items-center text-surface-400 dark:text-surface-500
+}
+
+.p-breadcrumb::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-breadcrumb-item-link {
+    @apply no-underline flex items-center gap-2 transition-colors duration-200 rounded-md
+        text-surface-500 dark:text-surface-400
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-label {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-breadcrumb-item-label {
+    @apply transition-colors duration-200
+}
+
+.p-breadcrumb-item-icon {
+    @apply text-surface-400 dark:text-surface-500 transition-colors duration-200
+}
+
+.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}

assets/styles/primevue/button.css

@@ -0,0 +1,325 @@
+@import './badge';
+
+.p-button {
+    @apply inline-flex cursor-pointer select-none items-center justify-center overflow-hidden relative 
+        bg-primary enabled:hover:bg-primary-emphasis enabled:active:bg-primary-emphasis-alt text-primary-contrast
+        border border-primary enabled:hover:border-primary-emphasis enabled:active:border-primary-emphasis-alt
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        px-3 py-2 transition-colors duration-200 gap-2 rounded-md
+        disabled:cursor-default
+}
+
+.p-button-icon-right {
+    @apply order-1
+}
+
+.p-button-icon-bottom {
+    @apply order-2
+}
+
+.p-button-icon-only {
+    @apply w-10 px-0 gap-0
+}
+
+.p-button-icon-only.p-button-rounded {
+    @apply rounded-full h-10
+}
+
+.p-button-icon-only .p-button-label {
+    @apply invisible w-0
+}
+
+.p-button-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-button-sm .p-button-icon {
+    @apply text-sm
+}
+
+.p-button-lg {
+    @apply text-[1.125rem] px-[0.875rem] py-[0.625rem]
+}
+
+.p-button-lg .p-button-icon {
+    @apply text-[1.125rem]
+}
+
+.p-button-vertical {
+    @apply flex-col
+}
+
+.p-button-label {
+    @apply font-medium
+}
+
+.p-button-fluid {
+    @apply w-full
+}
+
+.p-button-fluid.p-button-icon-only {    
+    @apply w-10
+}
+
+.p-button .p-badge {
+    @apply min-w-4 h-4 leading-4
+}
+
+.p-button-raised {
+    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
+}
+
+.p-button-rounded {
+    @apply rounded-[2rem]
+}
+
+.p-button-secondary {
+    @apply bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        border-surface-100 enabled:hover:border-surface-200 enabled:active:border-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:border-surface-800 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-surface-600 dark:focus-visible:outline-surface-300
+}
+
+.p-button-success {
+    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700
+        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200
+        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200
+        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-green-500 dark:focus-visible:outline-green-400
+}
+
+.p-button-info {
+    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700
+        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200
+        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200
+        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400
+}
+
+.p-button-warn {
+    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700
+        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200
+        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200
+        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400
+}
+
+.p-button-help {
+    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
+        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
+        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
+        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
+}
+
+.p-button-help {
+    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
+        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
+        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
+        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
+}
+
+.p-button-danger {
+    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
+        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
+        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
+        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
+}
+
+.p-button-contrast {
+    @apply bg-surface-950 enabled:hover:bg-surface-900 enabled:active:bg-surface-800
+        border-surface-950 enabled:hover:border-surface-900 enabled:active:border-surface-800
+        text-white enabled:hover:text-white enabled:active:text-white
+        dark:bg-surface-0 dark:enabled:hover:bg-surface-100 dark:enabled:active:bg-surface-200
+        dark:border-surface-100 dark:enabled:hover:border-surface-200 dark:enabled:active:border-surface-300
+        dark:text-surface-950 dark:enabled:hover:text-surface-950 dark:enabled:active:text-surface-950
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 
+        focus-visible:outline-surface-950 dark:focus-visible:outline-surface-0
+}
+
+.p-button-outlined {
+    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
+        border-primary-200 enabled:hover:border-primary-200 enabled:active:border-primary-200
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
+        dark:border-primary-700 dark:enabled:hover:border-primary-700 dark:enabled:active:border-primary-700
+        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
+}
+
+.p-button-outlined.p-button-secondary {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
+        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
+        dark:bg-transparent dark:enabled:hover:bg-white/5 dark:enabled:active:bg-white/15
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
+}
+
+.p-button-outlined.p-button-success {
+    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
+        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200
+        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
+        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
+        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700
+        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+}
+
+.p-button-outlined.p-button-info {
+    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
+        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200
+        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
+        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
+        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700
+        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+}
+
+.p-button-outlined.p-button-warn {
+    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
+        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200
+        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
+        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
+        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700
+        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+}
+
+.p-button-outlined.p-button-help {
+    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
+        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200
+        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
+        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
+        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700
+        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+}
+
+.p-button-outlined.p-button-danger {
+    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
+        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200
+        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
+        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
+        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700
+        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+}
+
+.p-button-outlined.p-button-contrast {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-700 enabled:hover:border-surface-700 enabled:active:border-surface-700
+        text-surface-950 enabled:hover:text-surface-950 enabled:active:text-surface-950
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-500 dark:enabled:hover:border-surface-500 dark:enabled:active:border-surface-500
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-outlined.p-button-plain {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-surface-200 enabled:hover:border-surface-200 enabled:active:border-surface-200
+        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-600 dark:enabled:hover:border-surface-600 dark:enabled:active:border-surface-600
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-text {
+    @apply bg-transparent enabled:hover:bg-primary-50 enabled:active:bg-primary-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+        dark:bg-transparent dark:enabled:hover:bg-primary/5 dark:enabled:active:bg-primary/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-primary dark:enabled:hover:text-primary dark:enabled:active:text-primary
+}
+
+.p-button-text.p-button-secondary {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-surface-500 enabled:hover:text-surface-500 enabled:active:text-surface-500
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-surface-400 dark:enabled:hover:text-surface-400 dark:enabled:active:text-surface-400
+}
+
+.p-button-text.p-button-success {
+    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
+        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+}
+
+.p-button-text.p-button-info {
+    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
+        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+}
+
+.p-button-text.p-button-warn {
+    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
+        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+}
+
+.p-button-text.p-button-help {
+    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
+        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+}
+
+.p-button-text.p-button-danger {
+    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
+        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+}
+
+.p-button-text.p-button-plain {
+    @apply bg-transparent enabled:hover:bg-surface-50 enabled:active:bg-surface-100
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-surface-700 enabled:hover:text-surface-700 enabled:active:text-surface-700
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
+        dark:text-surface-0 dark:enabled:hover:text-surface-0 dark:enabled:active:text-surface-0
+}
+
+.p-button-link {
+    @apply bg-transparent enabled:hover:bg-transparent enabled:active:bg-transparent
+        border-transparent enabled:hover:border-transparent enabled:active:border-transparent
+        text-primary enabled:hover:text-primary enabled:active:text-primary
+}
+
+.p-button-link:not(:disabled):hover .p-button-label {
+    @apply underline
+}

assets/styles/primevue/buttongroup.css

@@ -0,0 +1,19 @@
+.p-buttongroup .p-button {
+    @apply m-0 focus-visible:relative focus-visible:z-10
+}
+
+.p-buttongroup .p-button:not(:last-child) {
+    @apply border-r-0
+}
+
+.p-buttongroup .p-button:not(:first-of-type):not(:last-of-type) {
+    @apply rounded-none
+}
+
+.p-buttongroup .p-button:first-of-type:not(:only-of-type) {
+    @apply rounded-r-none
+}
+
+.p-buttongroup .p-button:last-of-type:not(:only-of-type) {
+    @apply rounded-l-none
+}

assets/styles/primevue/card.css

@@ -0,0 +1,22 @@
+.p-card {
+    @apply flex flex-col rounded-xl
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_1px_3px_0_rgba(0,0,0,0.1),0_1px_2px_-1px_rgba(0,0,0,0.1)]
+}
+
+.p-card-caption {
+    @apply flex flex-col gap-2
+}
+
+.p-card-body {
+    @apply p-5 flex flex-col gap-2
+}
+
+.p-card-title {
+    @apply font-medium text-xl
+}
+
+.p-card-subtitle {
+    @apply text-surface-500 dark:text-surface-400
+}

assets/styles/primevue/carousel.css

@@ -0,0 +1,56 @@
+@import './button';
+
+.p-carousel {
+    @apply flex flex-col
+}
+
+.p-carousel-content-container {
+    @apply flex flex-col overflow-auto
+}
+
+.p-carousel-content {
+    @apply flex flex-row gap-1
+}
+
+.p-carousel-viewport {
+    @apply overflow-hidden w-full
+}
+
+.p-carousel-item-list {
+    @apply flex flex-row
+}
+
+.p-carousel-prev-button,
+.p-carousel-next-button {
+    @apply self-center flex-shrink-0
+}
+
+.p-carousel-indicator-list {
+    @apply flex flex-row justify-center flex-wrap p-4 gap-2 m-0 list-none
+}
+
+.p-carousel-indicator-button {
+    @apply flex items-center justify-center w-8 h-2 border-none rounded-md p-0 m-0 select-none cursor-pointer transition-colors duration-200
+        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-carousel-indicator-active .p-carousel-indicator-button {
+    @apply bg-primary
+}
+
+.p-carousel-vertical .p-carousel-content {
+    @apply flex-col
+}
+
+.p-carousel-vertical .p-carousel-item-list {
+    @apply flex-col h-full
+}
+
+.p-items-hidden .p-carousel-item {
+    @apply invisible
+}
+
+.p-items-hidden .p-carousel-item.p-carousel-item-active {
+    @apply visible
+}

assets/styles/primevue/cascadeselect.css

@@ -0,0 +1,148 @@
+.p-cascadeselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-cascadeselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600 
+}
+
+.p-cascadeselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-cascadeselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-cascadeselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-cascadeselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-cascadeselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-r-md
+}
+
+.p-cascadeselect-label {
+    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
+        py-2 px-3 overflow-ellipsis
+        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
+}
+
+.p-cascadeselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect-clearable .p-cascadeselect-label {
+    @apply pr-7
+}
+
+.p-cascadeselect.p-disabled .p-cascadeselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect-label-empty {
+    @apply overflow-hidden opacity-0  
+}
+
+.p-cascadeselect-fluid {
+    @apply flex
+}
+
+.p-cascadeselect-fluid .p-cascadeselect-label {
+    @apply w-[1%]
+}
+
+.p-cascadeselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-cascadeselect .p-cascadeselect-overlay {
+    @apply min-w-full
+}
+
+.p-cascadeselect-option-list {
+    @apply hidden min-w-full absolute z-10
+}
+
+.p-cascadeselect-list {
+    @apply min-w-full m-0 p-0 list-none p-1 flex flex-col gap-[2px]
+}
+
+.p-cascadeselect-option {
+    @apply cursor-pointer font-normal whitespace-nowrap 
+        text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200 rounded-sm
+}
+
+.p-cascadeselect-option-active {
+    @apply overflow-visible
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus > .p-cascadeselect-option-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-cascadeselect-option:not(.p-cascadeselect-option-selected):not(.p-disabled).p-focus .p-cascadeselect-group-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-cascadeselect-option-selected .p-cascadeselect-option-content {
+    @apply bg-highlight
+}
+
+.p-cascadeselect-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-cascadeselect-option-active > .p-cascadeselect-option-list {
+    @apply block left-full top-0
+}
+
+.p-cascadeselect-option-content {
+    @apply flex items-center justify-between overflow-hidden relative px-3 py-2
+}
+
+.p-cascadeselect-group-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem] text-surface-400 dark:text-surface-500
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-content {
+    @apply rounded-sm
+}
+
+.p-cascadeselect-mobile-active-active .p-cascadeselect-list {
+    @apply flex flex-col top-full left-0 z-10
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-list > .p-cascadeselect-option > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
+    @apply ml-auto transition-transform duration-200
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-list .p-cascadeselect-group-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-active > .p-cascadeselect-option-content .p-cascadeselect-group-icon {
+    @apply -rotate-90
+}
+
+.p-cascadeselect-mobile-active .p-cascadeselect-option-list {
+    @apply static shadow-none border-none pl-4
+}

assets/styles/primevue/checkbox.css

@@ -0,0 +1,66 @@
+.p-checkbox {
+    @apply relative inline-flex select-none w-5 h-5
+}
+
+.p-checkbox-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute left-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-sm
+}
+
+.p-checkbox-box {
+    @apply flex justify-center items-center rounded-sm w-5 h-5
+        border border-surface-300 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-950
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+}
+
+.p-checkbox-icon {
+    @apply text-surface-700 dark:text-surface-0
+        text-sm w-[0.875rem] h-[0.875rem]
+        transition-colors duration-200
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-checkbox-checked .p-checkbox-box {
+    @apply border-primary bg-primary
+}
+
+.p-checkbox-checked .p-checkbox-icon {
+    @apply text-primary-contrast
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+    @apply bg-primary-emphasis border-primary-emphasis
+}
+
+.p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-icon {
+    @apply text-primary-contrast
+}
+
+.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-checkbox.p-invalid > .p-checkbox-box {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-checkbox.p-variant-filled .p-checkbox-box {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-checkbox.p-disabled {
+    @apply opacity-100
+}
+
+.p-checkbox.p-disabled .p-checkbox-box {
+    @apply bg-surface-200 dark:bg-surface-400 border-surface-300 dark:border-surface-700
+}
+
+.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+    @apply text-surface-700 dark:text-surface-400
+}

assets/styles/primevue/chip.css

@@ -0,0 +1,27 @@
+.p-chip {
+    @apply inline-flex items-center rounded-2xl gap-2 px-3 py-2
+        bg-surface-100 dark:bg-surface-800
+        text-surface-800 dark:text-surface-0
+}
+
+.p-chip-icon {
+    @apply text-surface-800 dark:bg-surface-0 text-base w-4 h-4
+}
+
+.p-chip-image {
+    @apply rounded-full w-8 h-8 -ml-2
+}
+
+.p-chip:has(.p-chip-remove-icon) {
+    @apply pr-2
+}
+
+.p-chip:has(.p-chip-image) {
+    @apply pt-1 pb-1
+}
+
+.p-chip-remove-icon {
+    @apply cursor-pointer text-base w-4 h-4 rounded-full
+        text-surface-800 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}

assets/styles/primevue/colorpicker.css

@@ -0,0 +1,47 @@
+.p-colorpicker {
+    @apply inline-block relative;
+}
+
+.p-colorpicker-dragging {
+    @apply cursor-pointer
+}
+
+.p-colorpicker-preview {
+    @apply w-6 h-6 p-0 border-none rounded-md transition-colors duration-200 cursor-pointer disabled:cursor-auto
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-colorpicker-panel {
+    @apply bg-surface-800 dark:bg-surface-900
+        border border-surface-900 dark:border-surface-700
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        w-[193px] h-[166px] absolute top-0 left-0
+}
+
+.p-colorpicker-panel-inline {
+    @apply static shadow-none 
+}
+
+.p-colorpicker-content {
+    @apply relative;
+}
+
+.p-colorpicker-color-selector {
+    @apply w-[150px] h-[150px] top-[8px] left-[8px] absolute
+}
+
+.p-colorpicker-color-background {
+    @apply w-full h-full bg-[linear-gradient(to_top,#000_0%,rgba(0,0,0,0)_100%),linear-gradient(to_right,#fff_0%,rgba(255,255,255,0)_100%)];
+}
+
+.p-colorpicker-color-handle {
+    @apply absolute top-0 left-[150px] rounded-full w-[10px] h-[10px] border border-surface-0 -mt-[5px] mr-0 mb-0 -ml-[5px] cursor-pointer opacity-85
+}
+
+.p-colorpicker-hue {
+    @apply w-[17px] h-[150px] top-[8px] left-[167px] absolute opacity-85 bg-[linear-gradient(0deg,red_0,#ff0_17%,#0f0_33%,#0ff_50%,#00f_67%,#f0f_83%,red)];
+}
+
+.p-colorpicker-hue-handle {
+    @apply absolute top-[150px] left-0 w-[21px] -ml-[2px] -mt-[5px] h-[10px] border-2 opacity-85 border-surface-0 cursor-pointer
+}

assets/styles/primevue/common.css

@@ -0,0 +1,81 @@
+.p-connected-overlay-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-connected-overlay-leave-to {
+    @apply opacity-0    
+}
+
+.p-connected-overlay-enter-active {
+    @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-connected-overlay-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    @apply max-h-0
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-toggleable-content-leave-active {
+    @apply overflow-hidden transition-[max-height] animate-duration-[450ms] ease-[cubic-bezier(0,1,0,1)];
+}
+
+.p-toggleable-content-enter-active {
+    @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out
+}
+
+.p-disabled,
+.p-disabled * {
+    @apply cursor-default pointer-events-none select-none
+}
+
+.p-disabled,
+.p-component:disabled {
+    @apply opacity-60
+}
+
+.pi {
+    @apply text-base
+}
+
+.p-icon {
+    @apply w-4 h-4
+}
+
+.p-overlay-mask {
+    @apply bg-black/50 text-surface-200 transition-colors duration-150 fixed top-0 left-0 w-full h-full
+}
+
+.p-overlay-mask-enter {
+    animation: p-overlay-mask-enter-animation 150ms forwards;
+}
+
+.p-overlay-mask-leave {
+    animation: p-overlay-mask-leave-animation 150ms forwards;
+}
+
+@keyframes p-overlay-mask-enter-animation {
+    from {
+        background: transparent;
+    }
+    to {
+        background: rgba(0,0,0,0.5);
+    }
+}
+
+@keyframes p-overlay-mask-leave-animation {
+    from {
+        background: rgba(0,0,0,0.5);
+    }
+    to {
+        background: transparent;
+    }
+}

assets/styles/primevue/confirmdialog.css

@@ -0,0 +1,10 @@
+@import './dialog';
+@import './button';
+
+.p-confirmdialog .p-dialog-content {
+    @apply flex items-center gap-4
+}
+
+.p-confirmdialog-icon {
+    @apply text-surface-700 dark:text-surface-0 text-[2rem] h-8 w-8
+}

assets/styles/primevue/confirmpopup.css

@@ -0,0 +1,66 @@
+@import './button';
+
+.p-confirmpopup {
+    @apply absolute mt-[10px] top-0 left-0 
+        border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ml-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ml-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-confirmpopup-content {
+    @apply flex items-center p-3 gap-4
+}
+
+.p-confirmpopup-icon {
+    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
+}
+
+.p-confirmpopup-footer {
+    @apply flex justify-end gap-2 pt-0 px-3 pb-3
+}
+
+.p-confirmpopup-footer button {
+    @apply w-auto
+}
+
+.p-confirmpopup-footer button:last-child {
+    @apply m-0
+}
+
+.p-confirmpopup-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-confirmpopup-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-confirmpopup-leave-to {
+    @apply opacity-0
+}
+
+.p-confirmpopup-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-confirmpopup-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-confirmpopup-flipped:after,
+.p-confirmpopup-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-confirmpopup-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-confirmpopup-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}

assets/styles/primevue/contextmenu.css

@@ -0,0 +1,101 @@
+.p-contextmenu {
+    @apply bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52 shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-contextmenu-root-list,
+.p-contextmenu-submenu {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px] 
+}
+
+.p-contextmenu-submenu {
+    @apply absolute min-w-full z-10 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-contextmenu-item {
+    @apply relative
+}
+
+.p-contextmenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-contextmenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-contextmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-contextmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ml-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item.p-focus > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item:not(.p-disabled) > .p-contextmenu-item-content:hover .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-contextmenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-contextmenu-enter-from,
+.p-contextmenu-leave-active {
+    @apply opacity-0
+}
+
+.p-contextmenu-enter-active {
+    @apply transition-opacity duration-[250ms]
+}
+
+.p-contextmenu-mobile .p-contextmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
+}
+
+.p-contextmenu-mobile .p-contextmenu-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-contextmenu-mobile .p-contextmenu-item-active > .p-contextmenu-item-content .p-contextmenu-submenu-icon {
+    @apply -rotate-90
+}

assets/styles/primevue/datatable.css

@@ -0,0 +1,404 @@
+@import './paginator';
+
+.p-datatable {
+    @apply relative
+}
+
+.p-datatable-table {
+    @apply border-spacing-0 w-full
+}
+
+.p-datatable-scrollable > .p-datatable-table-container {
+    @apply relative
+}
+
+.p-datatable-scrollable-table > .p-datatable-thead {
+    @apply top-0 z-10
+}
+
+.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
+    @apply sticky z-10
+}
+
+.p-datatable-scrollable-table > .p-datatable-tfoot {
+    @apply bottom-0 z-10
+}
+
+.p-datatable-scrollable .p-datatable-frozen-column {
+    @apply sticky bg-surface-0 dark:bg-surface-900
+}
+
+.p-datatable-scrollable th.p-datatable-frozen-column {
+    @apply z-10
+}
+
+.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-thead,
+.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
+    @apply bg-surface-0 dark:bg-surface-900  
+}
+
+.p-datatable-scrollable > .p-datatable-table-container > .p-datatable-table > .p-datatable-tfoot,
+.p-datatable-scrollable > .p-datatable-table-container > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
+    @apply bg-surface-0 dark:bg-surface-900  
+}
+
+.p-datatable-flex-scrollable {
+    @apply flex flex-col h-full
+}
+
+.p-datatable-flex-scrollable > .p-datatable-table-container {
+    @apply flex flex-col flex-1 h-full
+}
+
+.p-datatable-scrollable-table > .p-datatable-tbody > .p-datatable-row-group-header {
+    @apply sticky z-10
+}
+
+.p-datatable-resizable-table > .p-datatable-thead > tr > th,
+.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
+.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
+    @apply overflow-hidden whitespace-nowrap
+}
+
+.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-datatable-resizable-column:not(.p-datatable-frozen-column) {
+    @apply bg-clip-padding relative
+}
+
+.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-datatable-resizable-column:last-child .p-datatable-column-resizer {
+    @apply hidden
+}
+
+.p-datatable-column-resizer {
+    @apply block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+}
+
+.p-datatable-column-header-content {
+    @apply flex items-center gap-2
+}
+
+.p-datatable-column-resize-indicator {
+    @apply w-px absolute z-10 hidden bg-primary
+}
+
+.p-datatable-row-reorder-indicator-up,
+.p-datatable-row-reorder-indicator-down {
+    @apply absolute hidden
+}
+
+.p-datatable-reorderable-column,
+.p-datatable-reorderable-row-handle {
+    @apply cursor-move
+}
+
+.p-datatable-mask {
+    @apply absolute flex items-center justify-center z-20
+}
+
+.p-datatable-inline-filter {
+    @apply flex items-center w-full gap-2
+}
+
+.p-datatable-inline-filter .p-datatable-filter-element-container {
+    @apply flex-auto w-[1%]
+}
+
+.p-datatable-filter-overlay {
+    @apply bg-surface-0 dark:bg-surface-900 rounded-md min-w-52
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datatable-filter-constraint-list {
+    @apply m-0 list-none flex flex-col p-1 gap-[2px]
+}
+
+.p-datatable-filter-constraint {
+    @apply px-3 py-2 rounded-sm cursor-pointer transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint-selected {
+    @apply bg-highlight
+}
+
+.p-datatable-filter-constraint:not(.p-datatable-filter-constraint-selected):not(.p-disabled):hover 
+{
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint:focus-visible {
+    @apply outline-none bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-datatable-filter-constraint-selected:focus-visible {
+    @apply bg-highlight-emphasis
+}
+
+.p-datatable-filter-constraint-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-popover-filter {
+    @apply inline-flex ml-auto
+}
+
+.p-datatable-filter-overlay-popover {
+    @apply flex flex-col gap-2 
+        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700 rounded-md p-3 min-w-52
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datatable-filter-operator-dropdown {
+    @apply w-full
+}
+
+.p-datatable-filter-rule-list,
+.p-datatable-filter-rule {
+    @apply flex flex-col gap-2
+}
+
+.p-datatable-filter-rule {
+    @apply border-b border-surface-200 dark:border-surface-700 last:border-b-0
+}
+
+.p-datatable-filter-add-rule-button {
+    @apply w-full
+}
+
+.p-datatable-filter-remove-button {
+    @apply w-full
+}
+
+.p-datatable-filter-buttonbar {
+    @apply p-0 flex items-center justify-between
+}
+
+.p-datatable-virtualscroller-spacer {
+    @apply flex
+}
+
+.p-datatable .p-virtualscroller .p-virtualscroller-loading {
+    @apply transform-none min-h-0 sticky top-0 left-0
+}
+
+.p-datatable-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datatable-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-footer {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-header-cell {
+    @apply py-3 px-4 font-normal text-left transition-colors duration-200
+        border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-column-title {
+    @apply font-semibold
+}
+
+.p-datatable-tbody > tr {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
+}
+
+.p-datatable-tbody > tr > td {
+    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800
+}
+
+.p-datatable-hoverable .p-datatable-tbody > tr:not(.p-datatable-row-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected {
+    @apply bg-highlight
+}
+
+.p-datatable-tbody > tr:has(+ .p-datatable-row-selected) > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-datatable-tbody > tr:focus-visible,
+.p-datatable-tbody > tr.p-datatable-contextmenu-row-selected {
+    @apply outline outline-1 -outline-offset-1 outline-primary
+}
+
+.p-datatable-tfoot > tr > td {
+    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-datatable-column-footer {
+    @apply font-semibold
+}
+
+.p-datatable-sortable-column {
+    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
+}
+
+.p-datatable-column-title,
+.p-datatable-sort-icon,
+.p-datatable-sort-badge {
+    @apply align-middle
+}
+
+.p-datatable-sort-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datatable-sortable-column:not(.p-datatable-column-sorted):hover .p-datatable-sort-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-datatable-column-sorted {
+    @apply bg-highlight
+}
+
+.p-datatable-column-sorted .p-datatable-sort-icon {
+    @apply bg-highlight
+}
+
+.p-datatable-hoverable .p-datatable-selectable-row {
+    @apply cursor-pointer
+}
+
+.p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
+    @apply shadow-[inset_0_2px_0_0_theme(colors.primary)]
+}
+
+.p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
+    @apply shadow-[inset_0_-2px_0_0_theme(colors.primary)]
+}
+
+.p-datatable-loading-icon {
+    @apply text-[2rem] w-8 h-8
+}
+
+.p-datatable-gridlines .p-datatable-header {
+    @apply border-t border-x
+}
+
+.p-datatable-gridlines .p-datatable-footer {
+    @apply border-b border-x
+}
+
+.p-datatable-gridlines .p-datatable-paginator-top {
+    @apply border-t border-x
+}
+
+.p-datatable-gridlines .p-datatable-paginator-bottom {
+    @apply border-b border-x
+}
+
+.p-datatable-gridlines .p-datatable-thead > tr > th {
+    @apply border-t border-x last:border
+}
+
+.p-datatable-gridlines .p-datatable-tbody > tr > td {
+    @apply border-t border-l last:border-r
+}
+
+.p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
+    @apply border-y border-l last:border
+}
+
+.p-datatable-gridlines .p-datatable-tfoot > tr > td {
+    @apply border-y border-l last:border
+}
+
+.p-datatable.p-datatable-gridlines .p-datatable-thead + .p-datatable-tfoot > tr > td {
+    @apply border-b border-l last:border-r
+}
+
+.p-datatable.p-datatable-gridlines:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody > tr > td {
+    @apply border-b border-l last:border-r
+}
+
+.p-datatable.p-datatable-gridlines:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody > tr:last-child > td {
+    @apply border-l last:border-r
+}
+
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
+    @apply bg-surface-50 dark:bg-surface-950
+}
+
+.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-datatable-row-selected {
+    @apply bg-highlight
+}
+
+.p-datatable.p-datatable-sm .p-datatable-header {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-tfoot > tr > td {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-sm .p-datatable-footer {
+    @apply py-1 px-2
+}
+
+.p-datatable.p-datatable-lg .p-datatable-header {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-thead > tr > th {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-tbody>tr>td {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-tfoot>tr>td {
+    @apply py-4 px-5
+}
+
+.p-datatable.p-datatable-lg .p-datatable-footer {
+    @apply py-4 px-5
+}
+
+.p-datatable-row-toggle-button {
+    @apply inline-flex items-center justify-center overflow-hidden relative w-7 h-7 cursor-pointer select-none
+        transition-colors duration-200 rounded-full border-none bg-transparent 
+        text-surface-500 enabled:hover:bg-surface-100 enabled:hover:text-surface-700
+        dark:text-surface-400 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        
+}
+
+.p-datatable-tbody > tr.p-datatable-row-selected .p-datatable-row-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}

assets/styles/primevue/dataview.css

@@ -0,0 +1,29 @@
+@import './paginator';
+
+.p-dataview {
+    @apply border-none
+}
+
+.p-dataview-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-content {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-footer {
+    @apply py-3 px-4 border-t border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-dataview-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-dataview-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}

assets/styles/primevue/datepicker.css

@@ -0,0 +1,204 @@
+@import './button';
+@import './inputtext';
+
+.p-datepicker {
+    @apply inline-flex max-w-full
+}
+
+.p-datepicker-input {
+    @apply flex-auto w-[1%]
+}
+
+.p-datepicker:has(.p-datepicker-dropdown) .p-datepicker-input {
+    @apply rounded-r-none
+}
+
+.p-datepicker-dropdown {
+    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none 
+        w-10 rounded-r-md border border-l-0 border-surface-300 dark:border-surface-700 
+        bg-surface-100 enabled:hover:bg-surface-200 enabled:active:bg-surface-300
+        text-surface-600 enabled:hover:text-surface-700 enabled:active:text-surface-800
+        dark:bg-surface-800 dark:enabled:hover:bg-surface-700 dark:enabled:active:bg-surface-600
+        dark:text-surface-300 dark:enabled:hover:text-surface-200 dark:enabled:active:text-surface-100
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) {
+    @apply relative
+}
+
+.p-datepicker:has(.p-datepicker-input-icon-container) .p-datepicker-input {
+    @apply pr-10
+}
+
+.p-datepicker-input-icon-container {
+    @apply cursor-pointer absolute top-1/2 right-3 -mt-2 text-surface-400
+}
+
+.p-datepicker-fluid {
+    @apply flex
+}
+
+.p-datepicker-fluid .p-datepicker-input {
+    @apply w-[1%]
+}
+
+.p-datepicker .p-datepicker-panel {
+    @apply min-w-full
+}
+
+.p-datepicker-panel {
+    @apply w-auto p-3 rounded-md 
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-datepicker-panel-inline {
+    @apply inline-block overflow-x-auto shadow-none
+}
+
+.p-datepicker-header {
+    @apply flex items-center justify-between pt-0 px-0 pb-2 font-medium gap-2
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        border-b border-surface-200 dark:border-surface-700
+}
+
+.p-datepicker-title {
+    @apply flex items-center justify-between gap-2 font-medium
+}
+
+.p-datepicker-select-year,
+.p-datepicker-select-month {
+    @apply border-none bg-transparent m-0 cursor-pointer font-medium transition-colors duration-200
+        py-1 px-2 rounded-md text-surface-700 dark:text-surface-0
+        enabled:hover:bg-surface-100 enabled:hover:text-surface-800
+        dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-calendar-container {
+    @apply flex
+}
+
+.p-datepicker-calendar-container .p-datepicker-calendar {
+    @apply flex-auto border-l border-surface-200 dark:border-surface-700 gap-3
+        first:pl-0 first:border-l-0 last:pr-0
+}
+
+.p-datepicker-day-view {
+    @apply w-full border-collapse text-base mt-2 mx-0 mb-0
+}
+
+.p-datepicker-weekday-cell {
+    @apply p-1
+}
+
+.p-datepicker-weekday {
+    @apply font-medium text-surface-700 dark:text-surface-0
+}
+
+.p-datepicker-day-cell {
+    @apply p-1
+}
+
+.p-datepicker-day {
+    @apply flex items-center justify-center cursor-pointer my-0 mx-auto overflow-hidden relative w-8 h-8 
+        rounded-full p-1 transition-colors duration-200 border border-transparent text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-day:not(.p-datepicker-day-selected):not(.p-disabled):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-day-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-day-selected-range {
+    @apply bg-highlight
+}
+
+.p-datepicker-today > .p-datepicker-day {
+    @apply bg-surface-200 text-surface-900 dark:bg-surface-700 dark:text-surface-0
+}
+
+.p-datepicker-today > .p-datepicker-day-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-today > .p-datepicker-day-selected-range {
+    @apply bg-highlight
+}
+
+.p-datepicker-weeknumber {
+    @apply text-center
+}
+
+.p-datepicker-month-view {
+    @apply mt-2 mb-0 mx-0
+}
+
+.p-datepicker-month {
+    @apply w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
+        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-month:not(.p-disabled):not(.p-datepicker-month-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-month-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-year-view {
+    @apply mt-2 mb-0 mx-0
+}
+
+.p-datepicker-year {
+    @apply w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative
+        p-[0.375rem] transition-colors duration-200 rounded-md text-surface-700 dark:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-datepicker-year:not(.p-disabled):not(.p-datepicker-year-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-datepicker-year-selected {
+    @apply bg-primary text-primary-contrast
+}
+
+.p-datepicker-buttonbar {
+    @apply flex justify-between items-center pt-2 pb-0 px-0 border-t border-surface-200 dark:border-surface-700
+}
+
+.p-datepicker-buttonbar .p-button {
+    @apply w-auto
+}
+
+.p-datepicker-time-picker {
+    @apply flex items-center justify-center border-t border-surface-200 dark:border-surface-700 p-0 gap-2
+}
+
+.p-datepicker-calendar-container + .p-datepicker-time-picker {
+    @apply pt-2 pb-0 px-0
+}
+
+.p-datepicker-time-picker > div {
+    @apply flex items-center flex-col gap-1
+}
+
+.p-datepicker-time-picker span {
+    @apply text-base
+}
+
+.p-datepicker-timeonly .p-datepicker-time-picker {
+    @apply border-t-0
+}

assets/styles/primevue/dialog.css

@@ -0,0 +1,108 @@
+@import './button';
+
+.p-dialog {
+    @apply max-h-[90%] scale-100 rounded-xl 
+        border border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-dialog-content {
+    @apply overflow-y-auto pt-0 px-5 pb-5
+}
+
+.p-dialog-header {
+    @apply flex items-center justify-between shrink-0 p-5
+}
+
+.p-dialog-title {
+    @apply font-semibold text-xl
+}
+
+.p-dialog-footer {
+    @apply shrink-0 pt-0 px-5 pb-5 flex justify-end gap-2
+}
+
+.p-dialog-header-actions {
+    @apply flex items-center gap-2
+}
+
+.p-dialog-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-dialog-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-dialog-enter-from,
+.p-dialog-leave-to {
+    @apply opacity-0 scale-75
+}
+
+.p-dialog-top .p-dialog,
+.p-dialog-bottom .p-dialog,
+.p-dialog-left .p-dialog,
+.p-dialog-right .p-dialog,
+.p-dialog-topleft .p-dialog,
+.p-dialog-topright .p-dialog,
+.p-dialog-bottomleft .p-dialog,
+.p-dialog-bottomright .p-dialog {
+    @apply m-3 [transform:translate3d(0,0,0)]
+}
+
+.p-dialog-top .p-dialog-enter-active,
+.p-dialog-top .p-dialog-leave-active,
+.p-dialog-bottom .p-dialog-enter-active,
+.p-dialog-bottom .p-dialog-leave-active,
+.p-dialog-left .p-dialog-enter-active,
+.p-dialog-left .p-dialog-leave-active,
+.p-dialog-right .p-dialog-enter-active,
+.p-dialog-right .p-dialog-leave-active,
+.p-dialog-topleft .p-dialog-enter-active,
+.p-dialog-topleft .p-dialog-leave-active,
+.p-dialog-topright .p-dialog-enter-active,
+.p-dialog-topright .p-dialog-leave-active,
+.p-dialog-bottomleft .p-dialog-enter-active,
+.p-dialog-bottomleft .p-dialog-leave-active,
+.p-dialog-bottomright .p-dialog-enter-active,
+.p-dialog-bottomright .p-dialog-leave-active {
+    @apply transition-all duration-300 ease-out
+}
+
+.p-dialog-top .p-dialog-enter-from,
+.p-dialog-top .p-dialog-leave-to {
+    @apply [transform:translate3d(0,-100%,0)]
+}
+
+.p-dialog-bottom .p-dialog-enter-from,
+.p-dialog-bottom .p-dialog-leave-to {
+    @apply [transform:translate3d(0,100%,0)]
+}
+
+.p-dialog-left .p-dialog-enter-from,
+.p-dialog-left .p-dialog-leave-to,
+.p-dialog-topleft .p-dialog-enter-from,
+.p-dialog-topleft .p-dialog-leave-to,
+.p-dialog-bottomleft .p-dialog-enter-from,
+.p-dialog-bottomleft .p-dialog-leave-to {
+    @apply [transform:translate3d(-100%,0,0)]
+}
+
+.p-dialog-right .p-dialog-enter-from,
+.p-dialog-right .p-dialog-leave-to,
+.p-dialog-topright .p-dialog-enter-from,
+.p-dialog-topright .p-dialog-leave-to,
+.p-dialog-bottomright .p-dialog-enter-from,
+.p-dialog-bottomright .p-dialog-leave-to {
+    @apply [transform:translate3d(100%,0,0)]
+}
+
+.p-dialog-maximized {
+    @apply !w-screen !h-screen top-0 left-0 max-h-full rounded-none 
+}
+
+.p-dialog-maximized .p-dialog-content {
+    @apply flex-grow
+}

assets/styles/primevue/divider.css

@@ -0,0 +1,47 @@
+.p-divider-horizontal {
+    @apply flex w-full relative items-center my-4 mx-0 py-0 px-4
+        before:absolute before:block before:top-1/2 before:left-0 before:w-full
+        before:border-t before:border-surface-200 dark:before:border-surface-700
+}
+
+.p-divider-horizontal .p-divider-content {
+    @apply py-0 px-2
+}
+
+.p-divider-vertical {
+    @apply min-h-full flex relative justify-center my-0 mx-4 py-2 px-0
+        before:absolute before:block before:top-0 before:left-1/2 before:h-full
+        before:border-l before:border-surface-200 before:dark:border-surface-700
+}
+
+.p-divider.p-divider-vertical .p-divider-content {
+    @apply py-2 px-0
+}
+
+.p-divider-content {
+    @apply z-10 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-divider-solid.p-divider-horizontal:before {
+    @apply border-solid
+}
+
+.p-divider-solid.p-divider-vertical:before {
+    @apply border-solid
+}
+
+.p-divider-dashed.p-divider-horizontal:before {
+    @apply border-dashed
+}
+
+.p-divider-dashed.p-divider-vertical:before {
+    @apply border-dashed
+}
+
+.p-divider-dotted.p-divider-horizontal:before {
+    @apply border-dotted
+}
+
+.p-divider-dotted.p-divider-vertical:before {
+    @apply border-dotted
+}

assets/styles/primevue/dock.css

@@ -0,0 +1,84 @@
+.p-dock {
+    @apply absolute z-10 flex justify-center items-center pointer-events-none
+}
+
+.p-dock-list-container {
+    @apply flex pointer-events-auto bg-white/10 border border-white/10 p-2 rounded-xl
+}
+
+.p-dock-list {
+    @apply m-0 p-0 list-none flex items-center justify-center outline-none
+}
+
+.p-dock-item {
+    @apply transition-all duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] will-change-transform p-2 rounded-md
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-dock-item-link {
+    @apply flex flex-col items-center justify-center relative cursor-default w-12 h-12
+}
+
+.p-dock-top {
+    @apply left-0 top-0 w-full
+}
+
+.p-dock-top .p-dock-item {
+    @apply origin-[center_top]
+}
+
+.p-dock-bottom {
+    @apply left-0 bottom-0 w-full
+}
+
+.p-dock-bottom .p-dock-item {
+    @apply origin-[center_bottom]
+}
+
+.p-dock-right {
+    @apply right-0 top-0 h-full
+}
+
+.p-dock-right .p-dock-item {
+    @apply origin-[center_right]
+}
+
+.p-dock-right .p-dock-list {
+    @apply flex-col
+}
+
+.p-dock-left {
+    @apply left-0 top-0 h-full
+}
+
+.p-dock-left .p-dock-item {
+    @apply origin-[center_left]
+}
+
+.p-dock-left .p-dock-list {
+    @apply flex-col
+}
+
+.p-dock-mobile.p-dock-top .p-dock-list-container,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container {
+    @apply overflow-x-auto w-full
+}
+
+.p-dock-mobile.p-dock-top .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-bottom .p-dock-list-container .p-dock-list {
+    @apply mt-0 mx-auto
+}
+
+.p-dock-mobile.p-dock-left .p-dock-list-container,
+.p-dock-mobile.p-dock-right .p-dock-list-container {
+    @apply overflow-y-auto h-full
+}
+
+.p-dock-mobile.p-dock-left .p-dock-list-container .p-dock-list,
+.p-dock-mobile.p-dock-right .p-dock-list-container .p-dock-list {
+    @apply mt-auto mx-0
+}
+
+.p-dock-mobile .p-dock-list .p-dock-item {
+    @apply transform-none m-0
+}

assets/styles/primevue/drawer.css

@@ -0,0 +1,90 @@
+@import './button';
+
+.p-drawer {
+    @apply flex flex-col pointer-events-auto relative transition-transform duration-300
+        border border-surface-200 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
+}
+
+.p-drawer {
+    @apply [transform:translate3d(0,0,0)]
+}
+
+.p-drawer-content {
+    @apply overflow-y-auto flex-grow pt-0 pb-5 px-5
+}
+
+.p-drawer-header {
+    @apply flex items-center justify-between flex-shrink-0 p-5
+}
+
+.p-drawer-footer {
+    @apply px-5
+}
+
+.p-drawer-title {
+    @apply font-semibold text-2xl 
+}
+
+.p-drawer-full .p-drawer {
+    @apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
+}
+
+.p-drawer-left .p-drawer-enter-from,
+.p-drawer-left .p-drawer-leave-to {
+    @apply -translate-x-full
+}
+
+.p-drawer-right .p-drawer-enter-from,
+.p-drawer-right .p-drawer-leave-to {
+    @apply translate-x-full
+}
+
+.p-drawer-top .p-drawer-enter-from,
+.p-drawer-top .p-drawer-leave-to {
+    @apply -translate-y-full
+}
+
+.p-drawer-bottom .p-drawer-enter-from,
+.p-drawer-bottom .p-drawer-leave-to {
+    @apply translate-y-full
+}
+
+.p-drawer-full .p-drawer-enter-from,
+.p-drawer-full .p-drawer-leave-to {
+    @apply opacity-0
+}
+
+.p-drawer-full .p-drawer-enter-active,
+.p-drawer-full .p-drawer-leave-active {
+    @apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
+}
+
+.p-drawer-left .p-drawer {
+    @apply w-80 h-full border-r
+}
+
+.p-drawer-right .p-drawer {
+    @apply w-80 h-full border-l
+}
+
+.p-drawer-top .p-drawer {
+    @apply h-40 w-full border-b
+}
+
+.p-drawer-bottom .p-drawer {
+    @apply h-40 w-full border-t
+}
+
+.p-drawer-left .p-drawer-content,
+.p-drawer-right .p-drawer-content,
+.p-drawer-top .p-drawer-content,
+.p-drawer-bottom .p-drawer-content {
+    @apply w-full h-full
+}
+
+.p-drawer-open {
+    @apply flex
+}

assets/styles/primevue/fieldset.css

@@ -0,0 +1,45 @@
+.p-fieldset {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        px-[1.125rem] pt-0 pb-[1.125rem]
+}
+
+.p-fieldset-legend {
+    @apply border border-transparent rounded-md px-3 py-2
+        transition-colors duration-200
+}
+
+.p-fieldset-toggleable > .p-fieldset-legend {
+    @apply p-0
+}
+
+.p-fieldset-toggle-button {
+    @apply select-none overflow-hidden relative
+        flex items-center justify-center gap-2
+        px-3 py-2
+        border-none rounded-md
+        bg-surface-0 dark:bg-surface-900
+        hover:bg-surface-100 dark:hover:bg-surface-800
+        text-surface-700 dark:text-surface-0
+        hover:text-surface-800 dark:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-fieldset-legend-label {
+    @apply font-semibold;
+}
+
+.p-fieldset-toggle-icon {
+    @apply text-surface-500 dark:text-surface-400
+        transition-colors duration-200
+}
+
+.p-fieldset-toggle-button:hover .p-fieldset-toggle-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-fieldset .p-fieldset-content {
+    @apply p-0
+}

assets/styles/primevue/fileupload.css

@@ -0,0 +1,57 @@
+@import './button';
+@import './message';
+@import './progressbar';
+
+.p-fileupload input[type="file"] {
+    @apply hidden
+}
+
+.p-fileupload-advanced {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md 
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+}
+
+.p-fileupload-header {
+    @apply flex items-center p-[1.125rem] gap-2 text-surface-700 dark:text-surface-0
+}
+
+.p-fileupload-content {
+    @apply border border-transparent relative transition-colors duration-200 pt-0 px-[1.125rem] pb-[1.125rem]
+}
+
+.p-fileupload-content .p-progressbar {
+    @apply w-full absolute top-0 left-0 h-1
+}
+
+.p-fileupload-file-list {
+    @apply flex flex-col gap-2 mt-[1.125rem]
+}
+
+.p-fileupload-file {
+    @apply flex flex-wrap items-center p-4 border-b border-surface-200 dark:border-surface-700 gap-2 last:border-b-0
+}
+
+.p-fileupload-file-info {
+    @apply flex flex-col gap-2
+}
+
+.p-fileupload-file-thumbnail {
+    @apply flex-shrink-0
+}
+
+.p-fileupload-file-actions {
+    @apply ml-auto
+}
+
+.p-fileupload-highlight {
+    @apply border border-dashed border-primary
+}
+
+.p-fileupload-advanced .p-message {
+    @apply mt-0
+}
+
+.p-fileupload-basic {
+    @apply flex flex-wrap items-center justify-center gap-2
+}

assets/styles/primevue/floatlabel.css

@@ -0,0 +1,73 @@
+.p-floatlabel {
+    @apply block relative
+}
+
+.p-floatlabel label {
+    @apply absolute pointer-events-none top-1/2 -translate-y-1/2 transition-all duration-200 ease-out leading-none font-medium
+        left-3 text-surface-500 dark:text-surface-400
+}
+
+.p-floatlabel:has(.p-textarea) label {
+    @apply top-2 translate-y-0
+}
+
+.p-floatlabel:has(.p-inputicon:first-child) label {
+    @apply left-10
+}
+
+.p-floatlabel:has(.p-invalid) label {
+    @apply text-red-400 dark:text-red-300
+}
+
+.p-floatlabel:has(input:focus) label,
+.p-floatlabel:has(input.p-filled) label,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label,
+.p-floatlabel:has(textarea.p-filled) label,
+.p-floatlabel:has(.p-inputwrapper-focus) label,
+.p-floatlabel:has(.p-inputwrapper-filled) label {
+    @apply -top-5 translate-y-0 text-xs font-normal
+}
+
+.p-floatlabel:has(input.p-filled) label,
+.p-floatlabel:has(textarea.p-filled) label,
+.p-floatlabel:has(.p-inputwrapper-filled) label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-floatlabel:has(input:focus) label,
+.p-floatlabel:has(input:-webkit-autofill) label,
+.p-floatlabel:has(textarea:focus) label ,
+.p-floatlabel:has(.p-inputwrapper-focus) label  {
+    @apply text-primary
+}
+
+.p-floatlabel-in .p-inputtext,
+.p-floatlabel-in .p-textarea,
+.p-floatlabel-in .p-select-label,
+.p-floatlabel-in .p-multiselect-label,
+.p-floatlabel-in .p-autocomplete-input-multiple,
+.p-floatlabel-in .p-cascadeselect-label,
+.p-floatlabel-in .p-treeselect-label {
+    @apply pt-6 pb-2
+}
+
+.p-floatlabel-in:has(input:focus) label,
+.p-floatlabel-in:has(input.p-filled) label,
+.p-floatlabel-in:has(input:-webkit-autofill) label,
+.p-floatlabel-in:has(textarea:focus) label,
+.p-floatlabel-in:has(textarea.p-filled) label,
+.p-floatlabel-in:has(.p-inputwrapper-focus) label,
+.p-floatlabel-in:has(.p-inputwrapper-filled) label {
+    @apply top-2
+}
+
+.p-floatlabel-on:has(input:focus) label,
+.p-floatlabel-on:has(input.p-filled) label,
+.p-floatlabel-on:has(input:-webkit-autofill) label,
+.p-floatlabel-on:has(textarea:focus) label,
+.p-floatlabel-on:has(textarea.p-filled) label,
+.p-floatlabel-on:has(.p-inputwrapper-focus) label,
+.p-floatlabel-on:has(.p-inputwrapper-filled) label {
+    @apply top-0 -translate-y-1/2 rounded-sm bg-surface-0 dark:bg-surface-950 py-0 px-[0.125rem]
+}

assets/styles/primevue/galleria.css

@@ -0,0 +1,232 @@
+.p-galleria {
+    @apply overflow-hidden border border-surface-200 dark:border-surface-700 rounded-md
+}
+
+.p-galleria-content {
+    @apply flex flex-col
+}
+
+.p-galleria-items-container {
+    @apply flex flex-col relative
+}
+
+.p-galleria-items {
+    @apply relative flex h-full
+}
+
+.p-galleria-nav-button {
+    @apply absolute top-1/2 inline-flex justify-center items-center overflow-hidden select-none border-none cursor-pointer
+        w-12 h-12 transition-colors duration-200 p-0 -mt-12 mx-2 mb-0 rounded-full
+        bg-white/10 text-surface-100 enabled:hover:bg-white/20 enabled:hover:text-surface-0 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-next-icon,
+.p-galleria-prev-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-galleria-prev-button {
+    @apply left-0
+}
+
+.p-galleria-next-button {
+    @apply right-0
+}
+
+.p-galleria-item {
+    @apply flex justify-center items-center h-full w-full
+}
+
+.p-galleria-hover-navigators .p-galleria-nav-button {
+    @apply pointer-events-none opacity-0 transition-opacity duration-200 ease-in-out
+}
+
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
+    @apply pointer-events-auto opacity-100
+}
+
+.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
+    @apply pointer-events-none
+}
+
+.p-galleria-caption {
+    @apply absolute bottom-0 left-0 w-full bg-black/5 text-surface-100 p-4
+}
+
+.p-galleria-thumbnails {
+    @apply flex flex-col overflow-auto flex-shrink-0
+}
+
+.p-galleria-thumbnail-nav-button {
+    @apply self-center flex-grow-0 flex-shrink-0 basis-auto justify-center items-center overflow-hidden relative
+        my-0 mx-2 p-0 border-none select-none cursor-pointer w-8 h-8 rounded-md transition-colors duration-200 bg-transparent 
+        text-surface-600 hover:bg-surface-100 hover:text-surface-700
+        dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-next-icon,
+.p-galleria-thumbnail-nav-button .p-galleria-thumbnail-prev-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-galleria-thumbnails-content {
+    @apply flex flex-row bg-surface-0 dark:bg-surface-900 py-4 px-1
+}
+
+.p-galleria-thumbnails-viewport {
+    @apply overflow-hidden w-full
+}
+
+.p-galleria-thumbnail-items {
+    @apply flex
+}
+
+.p-galleria-thumbnail-item {
+    @apply overflow-auto flex items-center justify-center cursor-pointer opacity-50
+}
+
+.p-galleria-thumbnail {
+    @apply outline-transparent transition-opacity duration-300 hover:opacity-100
+}
+
+.p-galleria-thumbnail-item-current {
+    @apply opacity-100
+}
+
+.p-galleria-thumbnails-left .p-galleria-content,
+.p-galleria-thumbnails-right .p-galleria-content {
+    @apply flex-row
+}
+
+.p-galleria-thumbnails-left .p-galleria-items-container,
+.p-galleria-thumbnails-right .p-galleria-items-container {
+    @apply flex-row
+}
+
+.p-galleria-thumbnails-left .p-galleria-items-container,
+.p-galleria-thumbnails-top .p-galleria-items-container {
+    @apply order-2
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnails,
+.p-galleria-thumbnails-top .p-galleria-thumbnails {
+    @apply order-1
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnails-content,
+.p-galleria-thumbnails-right .p-galleria-thumbnails-content {
+    @apply flex-col flex-grow
+}
+
+.p-galleria-thumbnails-left .p-galleria-thumbnail-items,
+.p-galleria-thumbnails-right .p-galleria-thumbnail-items {
+    @apply flex-col h-full
+}
+
+.p-galleria-indicator-list {
+    @apply flex items-center justify-center p-4 gap-2 m-0 list-none
+}
+
+.p-galleria-indicator-button {
+    @apply inline-flex items-center w-4 h-4 rounded-full m-0 p-0 border-none select-none cursor-pointer transition-colors duration-200
+        bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-galleria-indicator-active .p-galleria-indicator-button {
+    @apply bg-primary
+}
+
+.p-galleria-indicators-left .p-galleria-items-container,
+.p-galleria-indicators-right .p-galleria-items-container {
+    @apply flex-row items-center
+}
+
+.p-galleria-indicators-left .p-galleria-items,
+.p-galleria-indicators-top .p-galleria-items {
+    @apply order-2
+}
+
+.p-galleria-indicators-left .p-galleria-indicator-list,
+.p-galleria-indicators-top .p-galleria-indicator-list {
+    @apply order-1
+}
+
+.p-galleria-indicators-left .p-galleria-indicator-list,
+.p-galleria-indicators-right .p-galleria-indicator-list {
+    @apply flex-col
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-list {
+    @apply absolute flex z-10 bg-black/50
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-button {
+    @apply bg-white/40 hover:bg-white/60
+}
+
+.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
+    @apply bg-white/90
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
+    @apply top-0 left-0 w-full items-start
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicator-list {
+    @apply right-0 top-0 h-full items-end
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicator-list {
+    @apply bottom-0 left-0 w-full items-end
+}
+
+.p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicator-list {
+    @apply left-0 top-0 h-full items-start
+}
+
+.p-galleria-mask {
+    @apply fixed top-0 left-0 w-full h-full flex items-center justify-center
+}
+
+.p-galleria-close-button {
+    @apply absolute top-0 right-0 flex items-center justify-center overflow-hidden m-2 rounded-full 
+        transition-colors duration-200 select-none cursor-pointer w-12 h-12 p-0 border-none
+        bg-white/10 text-surface-50 hover:bg-white/20 hover:text-surface-0 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary 
+}
+
+.p-galleria-close-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-galleria-mask .p-galleria-nav-button {
+    @apply fixed top-1/2
+}
+
+.p-galleria-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-galleria-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-galleria-enter-from,
+.p-galleria-leave-to {
+    @apply opacity-0 scale-75
+}
+
+.p-galleria-enter-active .p-galleria-nav-button {
+    @apply opacity-0
+}
+
+.p-items-hidden .p-galleria-thumbnail-item {
+    @apply invisible
+}
+
+.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
+    @apply visible
+}

assets/styles/primevue/iconfield.css

@@ -0,0 +1,23 @@
+.p-iconfield {
+    @apply relative
+}
+
+.p-inputicon {
+    @apply absolute top-1/2 -mt-2 text-surface-400 leading-none
+}
+
+.p-iconfield .p-inputicon:first-child {
+    @apply left-3
+}
+
+.p-iconfield .p-inputicon:last-child {
+    @apply right-3
+}
+
+.p-iconfield .p-inputtext:not(:first-child) {
+    @apply pl-10
+}
+
+.p-iconfield .p-inputtext:not(:last-child) {
+    @apply pr-10
+}

assets/styles/primevue/iftalabel.css

@@ -0,0 +1,32 @@
+.p-iftalabel {
+    @apply block relative
+}
+
+.p-iftalabel label {
+    @apply absolute pointer-events-none top-2 transition-all ease-out duration-200 leading-none text-xs font-medium left-3 text-surface-500 dark:text-surface-400
+}
+
+.p-iftalabel .p-inputtext,
+.p-iftalabel .p-textarea,
+.p-iftalabel .p-select-label,
+.p-iftalabel .p-multiselect-label,
+.p-iftalabel .p-autocomplete-input-multiple,
+.p-iftalabel .p-cascadeselect-label,
+.p-iftalabel .p-treeselect-label {
+    @apply pt-6 pb-2
+}
+
+.p-iftalabel:has(.p-invalid) label {
+    @apply text-red-400 dark:text-red-300
+}
+
+.p-iftalabel:has(input:focus) label ,
+.p-iftalabel:has(input:-webkit-autofill) label,
+.p-iftalabel:has(textarea:focus) label ,
+.p-iftalabel:has(.p-inputwrapper-focus) label  {
+    @apply text-primary
+}
+
+.p-iftalabel .p-inputicon {
+    @apply top-6 translate-y-1/4 mt-0
+}

assets/styles/primevue/image.css

@@ -0,0 +1,56 @@
+.p-image-mask {
+    @apply flex items-center justify-center
+}
+
+.p-image-preview {
+    @apply relative inline-flex leading-none
+}
+
+.p-image-preview-mask {
+    @apply absolute left-0 top-0 w-full h-full flex items-center justify-center opacity-0
+        border-none p-0 cursor-pointer bg-transparent text-surface-200 transition-all duration-200
+}
+
+.p-image-preview:hover > .p-image-preview-mask {
+    @apply opacity-100 cursor-pointer bg-black/40 dark:bg-black/60
+}
+
+.p-image-preview-icon {
+    @apply text-2xl w-6 h-6
+}
+
+.p-image-toolbar {
+    @apply absolute top-4 right-4 left-auto bottom-auto flex z-10 p-2 bg-white/10 border border-white/20 rounded-3xl gap-2;
+}
+
+.p-image-action {
+    @apply inline-flex justify-center items-center text-surface-50 bg-transparent w-12 h-12 m-0 p-0 
+        border-none cursor-pointer select-none rounded-full transition-colors duration-200
+        hover:text-surface-0 hover:bg-white/10
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary    
+}
+
+.p-image-action .p-icon {
+    @apply text-2xl h-6 w-6
+}
+
+.p-image-action.p-disabled {
+    @apply pointer-events-auto
+}
+
+.p-image-original {
+    @apply transition-transform duration-150 max-w-[100vw] max-h-[100vh]
+}
+
+.p-image-original-enter-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)]
+}
+
+.p-image-original-leave-active {
+    @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]
+}
+
+.p-image-original-enter-from,
+.p-image-original-leave-to {
+    @apply opacity-0 scale-75
+}

assets/styles/primevue/imagecompare.css

@@ -0,0 +1,34 @@
+.p-imagecompare {
+    @apply relative overflow-hidden w-full aspect-video
+}
+
+.p-imagecompare img {
+    @apply w-full h-full absolute
+}
+
+.p-imagecompare img + img {
+    @apply [clip-path:polygon(0_0,50%_0,50%_100%,0_100%)]
+}
+
+.p-imagecompare-slider {
+    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ml-2 bg-transparent outline-none transition-all duration-200
+        hover:w-[calc(100%+2rem)] hover:-ml-4
+}
+
+.p-imagecompare-slider::-webkit-slider-thumb {
+    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-imagecompare-slider::-moz-range-thumb {
+    @apply appearance-none h-4 w-4 bg-white/30 rounded-full bg-contain cursor-ew-resize transition-all duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-imagecompare-slider:hover::-webkit-slider-thumb {
+    @apply bg-white/40 h-8 w-8
+}
+
+.p-imagecompare-slider:hover::-moz-range-thumb {
+    @apply bg-white/40 h-8 w-8
+}

assets/styles/primevue/inplace.css

@@ -0,0 +1,13 @@
+.p-inplace-display {
+    @apply inline cursor-pointer border border-transparent px-3 py-2 rounded-md
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-inplace-display:not(.p-disabled):hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-inplace-content {
+    @apply block
+}

assets/styles/primevue/inputgroup.css

@@ -0,0 +1,67 @@
+.p-inputgroup,
+.p-inputgroup .p-floatlabel,
+.p-inputgroup .p-iftalabel {
+    @apply flex items-stretch w-full
+}
+
+.p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper {
+    @apply flex-auto w-[1%]
+}
+
+.p-inputgroupaddon {
+    @apply flex items-center justify-center p-2 min-w-10
+        border-y border-surface-300 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-950 text-surface-400
+}
+
+.p-inputgroupaddon:first-child,
+.p-inputgroupaddon + .p-inputgroupaddon {
+    @apply border-l
+}
+
+.p-inputgroupaddon:last-child {
+    @apply border-r
+}
+
+.p-inputgroup > .p-component,
+.p-inputgroup > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-floatlabel > .p-component,
+.p-inputgroup > .p-floatlabel > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel > .p-component,
+.p-inputgroup > .p-iftalabel > .p-inputwrapper > .p-component {
+    @apply rounded-none m-0
+}
+
+.p-inputgroupaddon:first-child,
+.p-inputgroup > .p-component:first-child,
+.p-inputgroup > .p-inputwrapper:first-child > .p-component,
+.p-inputgroup > .p-floatlabel:first-child > .p-component,
+.p-inputgroup > .p-floatlabel:first-child > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel:first-child > .p-component,
+.p-inputgroup > .p-iftalabel:first-child > .p-inputwrapper > .p-component {
+    @apply rounded-l-md
+}
+
+.p-inputgroupaddon:last-child,
+.p-inputgroup > .p-component:last-child,
+.p-inputgroup > .p-inputwrapper:last-child > .p-component,
+.p-inputgroup > .p-floatlabel:last-child > .p-component,
+.p-inputgroup > .p-floatlabel:last-child > .p-inputwrapper > .p-component,
+.p-inputgroup > .p-iftalabel:last-child > .p-component,
+.p-inputgroup > .p-iftalabel:last-child > .p-inputwrapper > .p-component {
+    @apply rounded-r-md
+}
+
+.p-inputgroup .p-component:focus,
+.p-inputgroup .p-component.p-focus,
+.p-inputgroup .p-inputwrapper-focus,
+.p-inputgroup .p-component:focus ~ label,
+.p-inputgroup .p-component.p-focus ~ label,
+.p-inputgroup .p-inputwrapper-focus ~ label {
+    @apply z-10
+}
+
+.p-inputgroup > .p-button:not(.p-button-icon-only) {
+    @apply w-auto
+}

assets/styles/primevue/inputnumber.css

@@ -0,0 +1,84 @@
+@import './inputtext';
+
+.p-inputnumber {
+    @apply inline-flex relative
+}
+
+.p-inputnumber-button {
+    @apply flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
+        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
+        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
+        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
+        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
+        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
+        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
+        transition-colors duration-200
+}
+
+.p-inputnumber-stacked .p-inputnumber-button {
+    @apply relative flex-auto border-none
+}
+
+.p-inputnumber-stacked .p-inputnumber-button-group {
+    @apply flex flex-col absolute top-px right-px h-[calc(100%-2px)] z-10
+}
+
+.p-inputnumber-stacked .p-inputnumber-increment-button {
+    @apply p-0 rounded-tr-[5px]
+}
+
+.p-inputnumber-stacked .p-inputnumber-decrement-button {
+    @apply p-0 rounded-br-[5px]
+}
+
+.p-inputnumber-horizontal .p-inputnumber-increment-button {
+    @apply order-3 rounded-r-md border-l-0
+}
+
+.p-inputnumber-horizontal .p-inputnumber-input {
+    @apply order-2 rounded-none
+}
+
+.p-inputnumber-horizontal .p-inputnumber-decrement-button {
+    @apply order-1 rounded-l-md border-r-0
+}
+
+.p-floatlabel:has(.p-inputnumber-horizontal) label {
+    @apply ms-10
+}
+
+.p-inputnumber-vertical {
+    @apply flex-col
+}
+
+.p-inputnumber-vertical .p-inputnumber-button {
+    @apply py-2
+}
+
+.p-inputnumber-vertical .p-inputnumber-increment-button {
+    @apply order-1 rounded-t-md w-full border-b-0
+}
+
+.p-inputnumber-vertical .p-inputnumber-input {
+    @apply order-2 rounded-none text-center
+}
+
+.p-inputnumber-vertical .p-inputnumber-decrement-button {
+    @apply order-3 rounded-b-md w-full border-t-0
+}
+
+.p-inputnumber-input {
+    @apply flex-auto
+}
+
+.p-inputnumber-fluid {
+    @apply w-full
+}
+
+.p-inputnumber-fluid .p-inputnumber-input {
+    @apply w-[1%]
+}
+
+.p-inputnumber-fluid.p-inputnumber-vertical .p-inputnumber-input {
+    @apply w-full
+}

assets/styles/primevue/inputotp.css

@@ -0,0 +1,9 @@
+@import './inputtext';
+
+.p-inputotp {
+    @apply flex items-center gap-2
+}
+
+.p-inputotp-input {
+    @apply text-center w-10
+}

assets/styles/primevue/inputtext.css

@@ -0,0 +1,34 @@
+.p-inputtext {
+    @apply appearance-none rounded-md
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400 disabled:opacity-100
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        px-3 py-2
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        outline-none
+}
+
+.p-inputtext.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-inputtext.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-inputtext-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-inputtext-lg {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-inputtext-fluid {
+    @apply w-full
+}

assets/styles/primevue/knob.css

@@ -0,0 +1,37 @@
+.p-knob-range {
+    @apply fill-none transition-[stroke] duration-100 ease-in
+}
+
+.p-knob-text {
+    @apply text-xl text-center
+}
+
+.p-knob svg {
+    @apply rounded-full
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-knob svg path:first-child {
+    @apply stroke-surface-200 dark:stroke-surface-700
+}
+
+.p-knob svg path + path {
+    @apply stroke-primary
+}
+
+.p-knob svg text {
+    @apply fill-surface-500 dark:fill-surface-400
+}
+
+.p-knob-value {
+    animation-name: p-knob-dash-frame;
+    animation-fill-mode: forwards;
+    fill: none;
+}
+
+@keyframes p-knob-dash-frame {
+    100% {
+        stroke-dashoffset: 0;
+    }
+}

assets/styles/primevue/listbox.css

@@ -0,0 +1,79 @@
+@import './inputtext';
+@import './iconfield';
+
+.p-listbox {
+    @apply bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0
+        border border-surface-300 dark:border-surface-700 rounded-md
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-listbox.p-focus {
+    @apply border-primary
+}
+
+.p-listbox.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-listbox.p-disabled .p-listbox-option {
+    @apply text-surface-500 dark:text-surface-400 cursor-default
+}
+
+.p-listbox.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-listbox-header {
+    @apply pt-2 pb-1 px-4
+}
+
+.p-listbox-filter {
+    @apply w-full
+}
+
+.p-listbox-list-container {
+    @apply overflow-auto
+}
+
+.p-listbox-list {
+    @apply list-none m-0 p-1 outline-none flex flex-col gap-[2px]
+}
+
+.p-listbox-option {
+    @apply flex items-center cursor-pointer relative overflow-hidden px-3 py-2 border-none rounded-sm
+        text-surface-700 dark:text-surface-0
+        transition-colors duration-200
+}
+
+.p-listbox-striped li:nth-child(even of .p-listbox-option) {
+    @apply bg-surface-50 dark:bg-surface-900
+}
+
+.p-listbox .p-listbox-list .p-listbox-option.p-listbox-option-selected {
+    @apply bg-highlight
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option.p-listbox-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-listbox:not(.p-disabled) .p-listbox-option:not(.p-listbox-option-selected):not(.p-disabled):hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-listbox-option-check-icon {
+    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
+}
+
+.p-listbox-option-group {
+    @apply m-0 px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold 
+}
+
+.p-listbox-empty-message {
+    @apply px-3 py-2
+}

assets/styles/primevue/megamenu.css

@@ -0,0 +1,207 @@
+.p-megamenu {
+    @apply relative flex items-center rounded-md gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+}
+
+.p-megamenu-start,
+.p-megamenu-end {
+    @apply flex items-center
+}
+
+.p-megamenu-root-list {
+    @apply m-0 p-0 list-none outline-none flex items-center flex-wrap gap-2
+}
+
+.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
+    @apply rounded-md
+}
+
+.p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content > .p-megamenu-item-link {
+    @apply px-3 py-2
+}
+
+.p-megamenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-megamenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-megamenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-megamenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ml-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item.p-focus > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item:not(.p-disabled) > .p-megamenu-item-content:hover .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-megamenu-overlay {
+    @apply hidden absolute w-auto z-10 left-0 min-w-full rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+    @apply block
+}
+
+.p-megamenu-submenu {
+    @apply m-0 p-1 list-none min-w-52 flex flex-col gap-[2px]
+}
+
+.p-megamenu-submenu-label {
+    @apply px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold bg-transparent
+}
+
+.p-megamenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-megamenu-horizontal {
+    @apply items-center px-3 py-2
+}
+
+.p-megamenu-horizontal .p-megamenu-root-list {
+    @apply flex items-center flex-wrap gap-2
+}
+
+.p-megamenu-horizontal .p-megamenu-end {
+    @apply ml-auto self-center
+}
+
+.p-megamenu-vertical {
+    @apply inline-flex min-w-52 flex-col items-stretch p-1
+}
+
+.p-megamenu-vertical .p-megamenu-root-list {
+    @apply items-stretch flex-col gap-[2px]
+}
+
+.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-overlay {
+    @apply left-full top-0
+}
+
+.p-megamenu-vertical .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply ml-auto
+}
+
+.p-megamenu-grid {
+    @apply flex
+}
+
+.p-megamenu-col-2,
+.p-megamenu-col-3,
+.p-megamenu-col-4,
+.p-megamenu-col-6,
+.p-megamenu-col-12 {
+    @apply flex-grow-0 flex-shrink-0 basis-auto p-2
+}
+
+.p-megamenu-col-2 {
+    @apply w-1/6;
+}
+
+.p-megamenu-col-3 {
+    @apply w-1/4
+}
+
+.p-megamenu-col-4 {
+    @apply w-1/3
+}
+
+.p-megamenu-col-6 {
+    @apply w-1/2
+}
+
+.p-megamenu-col-12 {
+    @apply w-full
+}
+
+.p-megamenu-button {
+    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
+        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
+        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-megamenu-mobile {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-button {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-root-list {
+    @apply absolute hidden flex-col top-full left-0 z-10 w-full p-1 gap-[2px]
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-megamenu-mobile-active .p-megamenu-root-list {
+    @apply flex
+}
+
+.p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
+    @apply w-full static
+}
+
+.p-megamenu-mobile .p-megamenu-overlay {
+    @apply static border-none rounded-none shadow-none
+}
+
+.p-megamenu-mobile .p-megamenu-grid {
+    @apply flex-wrap overflow-auto max-h-[90%]
+}
+
+.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply ml-auto transition-transform duration-[200ms]
+}
+
+.p-megamenu-mobile .p-megamenu-root-list > .p-megamenu-item-active > .p-megamenu-item-content .p-megamenu-submenu-icon {
+    @apply -rotate-180
+}

assets/styles/primevue/menu.css

@@ -0,0 +1,51 @@
+.p-menu {
+    @apply bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52
+}
+
+.p-menu-list {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px]
+}
+
+.p-menu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-menu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-menu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-menu-item.p-focus .p-menu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0 
+}
+
+.p-menu-item.p-focus .p-menu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menu-overlay {
+    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menu-submenu-label {
+    @apply bg-transparent px-3 py-2 text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-menu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}

assets/styles/primevue/menubar.css

@@ -0,0 +1,165 @@
+.p-menubar {
+    @apply flex items-center rounded-md px-3 py-2 gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-start,
+.p-megamenu-end {
+    @apply flex items-center
+}
+
+.p-menubar-root-list,
+.p-menubar-submenu {
+    @apply flex m-0 p-0 list-none outline-none
+}
+
+.p-menubar-root-list {
+    @apply items-center flex-wrap gap-2
+}
+
+.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content {
+    @apply rounded-md
+}
+
+.p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
+    @apply px-3 py-2
+}
+
+.p-menubar-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-menubar-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-menubar-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-menubar-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ml-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item.p-focus > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item:not(.p-disabled) > .p-menubar-item-content:hover .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item-active > .p-menubar-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-menubar-item-active > .p-menubar-item-content .p-menubar-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-menubar-submenu {
+    @apply hidden absolute min-w-52 z-10 
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        flex-col p-1 gap-[2px] rounded-md
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menubar-submenu .p-menubar-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-submenu .p-menubar-item {
+    @apply relative    
+}
+
+ .p-menubar-submenu > .p-menubar-item-active > .p-menubar-submenu {
+    @apply block left-full top-0  
+}
+
+.p-menubar-end {
+    @apply ml-auto self-center
+}
+
+.p-menubar-button {
+    @apply hidden justify-center items-center cursor-pointer w-7 h-7 relative border-none rounded-full
+        text-surface-500 dark:text-surface-400 hover:text-surface-600 dark:hover:text-surface-300
+        bg-transparent hover:bg-surface-100 dark:hover:bg-surface-800
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-menubar-mobile {
+    @apply relative
+}
+
+.p-menubar-mobile .p-menubar-button {
+    @apply flex
+}
+
+.p-menubar-mobile .p-menubar-root-list {
+    @apply absolute hidden w-full flex-col top-full left-0 z-10 p-1 gap-[2px] rounded-md
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content > .p-menubar-item-link {
+    @apply px-3 py-3
+}
+
+.p-menubar-mobile-active .p-menubar-root-list {
+    @apply flex
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menubar-item {
+    @apply w-full static
+}
+
+.p-menubar-mobile .p-menubar-root-list .p-menubar-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply ml-auto transition-transform duration-[200ms]
+}
+
+.p-menubar-mobile .p-menubar-root-list > .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply -rotate-180
+}
+
+.p-menubar-mobile .p-menubar-submenu .p-menubar-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-menubar-mobile  .p-menubar-item-active > .p-menubar-item-content .p-menubar-submenu-icon {
+    @apply -rotate-90
+}
+
+.p-menubar-mobile .p-menubar-submenu {
+    @apply w-full static shadow-none border-none ps-4 pe-0
+}

assets/styles/primevue/message.css

@@ -0,0 +1,119 @@
+.p-message {
+    @apply rounded-md outline outline-1
+}
+
+.p-message-content {
+    @apply flex items-center px-3 py-2 gap-2 h-full
+}
+
+.p-message-icon {
+    @apply flex-shrink-0
+}
+
+.p-message-close-button {
+    @apply flex items-center justify-center flex-shrink-0 ms-auto overflow-hidden relative cursor-pointer select-none
+        w-7 h-7 rounded-full bg-transparent transition-colors duration-200 text-inherit p-0 border-none 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-message-close-icon {
+    @apply text-base w-4 h-4 
+}
+
+.p-message-info {
+    @apply bg-blue-50/95 outline-blue-200 text-blue-600 
+        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500 
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-message-info .p-message-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-message-success {
+    @apply bg-green-50/95 outline-green-200 text-green-600 
+        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500 
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-message-success .p-message-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-message-warn {
+    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600 
+        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500 
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-message-warn .p-message-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-message-error {
+    @apply bg-red-50/95 outline-red-200 text-red-600 
+        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500 
+        shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
+}
+
+.p-message-error .p-message-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-message-secondary {
+    @apply bg-surface-100 outline-surface-200 text-surface-600 
+        dark:bg-surface-800 dark:outline-surface-700 dark:text-surface-300 
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-message-secondary .p-message-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-message-contrast {
+    @apply bg-surface-900 outline-surface-950 text-surface-50 
+        dark:bg-surface-0 dark:outline-surface-100 dark:text-surface-950 
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-message-contrast .p-message-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-message-text {
+    @apply text-base font-medium
+}
+
+.p-message-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-message-enter-from {
+    @apply opacity-0
+}
+
+.p-message-enter-active {
+    @apply transition-opacity duration-300
+}
+
+.p-message.p-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-message.p-message-leave-to {
+    @apply max-h-0 opacity-0 m-0
+}
+
+.p-message-leave-active {
+    @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s]
+}
+
+.p-message-leave-active .p-message-close-button {
+    @apply opacity-0
+}

assets/styles/primevue/metergroup.css

@@ -0,0 +1,67 @@
+.p-metergroup {
+    @apply flex gap-4
+}
+
+.p-metergroup-meters {
+    @apply flex bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-metergroup-label-list {
+    @apply flex flex-wrap m-0 p-0 list-none
+}
+
+.p-metergroup-label {
+    @apply inline-flex items-center gap-2
+}
+
+.p-metergroup-label-marker {
+    @apply inline-flex w-2 h-2 rounded-full
+}
+
+.p-metergroup-label-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-metergroup-horizontal {
+    @apply flex-col
+}
+
+.p-metergroup-label-list-horizontal {
+    @apply gap-4
+}
+
+.p-metergroup-horizontal .p-metergroup-meters {
+    @apply h-2
+}
+
+.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
+    @apply rounded-l-md
+}
+
+.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    @apply rounded-r-md
+}
+
+.p-metergroup-vertical {
+    @apply flex-row
+}
+
+.p-metergroup-label-list-vertical {
+    @apply flex-col gap-2
+}
+
+.p-metergroup-vertical .p-metergroup-meters {
+    @apply flex-col w-2 h-full
+}
+
+.p-metergroup-vertical .p-metergroup-label-list {
+    @apply items-start
+}
+
+.p-metergroup-vertical .p-metergroup-meter:first-of-type {
+    @apply rounded-t-md
+}
+
+.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    @apply rounded-b-md
+}

assets/styles/primevue/multiselect.css

@@ -0,0 +1,123 @@
+@import './checkbox';
+@import './chip';
+@import './inputtext';
+@import './iconfield';
+
+.p-multiselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-multiselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600 
+}
+
+.p-multiselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-multiselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-multiselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-multiselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-multiselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-r-md
+}
+
+.p-multiselect-label-container {
+    @apply overflow-hidden flex-auto
+}
+
+.p-multiselect-label {
+    @apply flex items-center gap-1 whitespace-nowrap overflow-hidden text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
+}
+
+.p-multiselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-multiselect.p-disabled .p-multiselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-multiselect-label-empty {
+    @apply overflow-hidden opacity-0  
+}
+
+.p-multiselect .p-multiselect-overlay {
+    @apply min-w-full
+}
+
+.p-multiselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-multiselect-header {
+    @apply flex items-center pt-2 pb-1 px-4
+}
+
+.p-multiselect-header .p-checkbox {
+    @apply mr-2
+}
+
+.p-multiselect-filter-container {
+    @apply flex-auto
+}
+
+.p-multiselect-filter {
+    @apply w-full
+}
+
+.p-multiselect-list-container {
+    @apply overflow-auto
+}
+
+.p-multiselect-list {
+    @apply m-0 p-1 list-none gap-[2px] flex flex-col
+}
+
+.p-multiselect-option {
+    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center gap-2 px-3 py-2
+        rounded-sm text-surface-700 dark:text-surface-0 bg-transparent border-none
+        transition-colors duration-200
+}
+
+.p-multiselect-option:not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-0
+}
+
+.p-multiselect-option-group {
+    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-multiselect-empty-message {
+    @apply px-3 py-2
+}
+
+.p-multiselect-label .p-chip {
+    @apply py-1 rounded-sm
+}
+
+.p-multiselect-label:has(.p-chip) {
+    @apply py-1 px-[0.375rem]
+}
+
+.p-multiselect-fluid {
+    @apply flex
+}

assets/styles/primevue/orderlist.css

@@ -0,0 +1,10 @@
+@import './button';
+@import './listbox';
+
+.p-orderlist {
+    @apply flex gap-[1.125rem]
+}
+
+.p-orderlist-controls {
+    @apply flex flex-col justify-center gap-2
+}

assets/styles/primevue/organizationchart.css

@@ -0,0 +1,71 @@
+.p-organizationchart-table {
+    @apply border-spacing-0 border-separate my-0 mx-auto
+}
+
+.p-organizationchart-table > tbody > tr > td {
+    @apply text-center align-top py-0 px-3
+}
+
+.p-organizationchart-node {
+    @apply inline-block relative py-3 px-4 rounded-md
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900 
+        text-surface-700 dark:text-surface-0
+        transition-colors duration-200
+}
+
+.p-organizationchart-node:has(.p-organizationchart-node-toggle-button) {
+    @apply pt-3 px-4 pb-5
+}
+
+.p-organizationchart-node.p-organizationchart-node-selectable:not(.p-organizationchart-node-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-organizationchart-node-selected {
+    @apply bg-highlight
+}
+
+.p-organizationchart-node-toggle-button {
+    @apply absolute -bottom-3 -ml-3 z-20 left-1/2 select-none cursor-pointer w-6 h-6 no-underline rounded-full
+        inline-flex items-center justify-center transition-colors duration-200 
+        border border-surface-200 dark:border-surface-700
+        bg-surface-0 text-surface-500 hover:bg-surface-100 hover:text-surface-700 
+        dark:bg-surface-900 dark:text-surface-400 dark:hover:bg-surface-800 dark:hover:text-surface-0 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+.p-organizationchart-node-toggle-button-icon {
+    @apply relative top-px
+}
+
+.p-organizationchart-connector-down {
+    @apply my-0 mx-auto h-6 w-px bg-surface-200 dark:bg-surface-700
+}
+
+.p-organizationchart-connector-right {
+    @apply rounded-none
+}
+
+.p-organizationchart-connector-left {
+    @apply rounded-none border-r border-surface-200 dark:border-surface-700
+}
+
+.p-organizationchart-connector-top {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-organizationchart-node-selectable {
+    @apply cursor-pointer
+}
+
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-left) {
+    @apply border-r-0
+}
+
+.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
+    @apply rounded-tr-md
+}
+
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
+    @apply border-l border-surface-200 dark:border-surface-700 rounded-tl-md
+}

assets/styles/primevue/overlaybadge.css

@@ -0,0 +1,9 @@
+@import './badge';
+
+.p-overlaybadge {
+    @apply relative
+}
+
+.p-overlaybadge .p-badge {
+    @apply absolute top-0 right-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline outline-2 outline-surface-0 dark:outline-surface-900
+}

assets/styles/primevue/paginator.css

@@ -0,0 +1,51 @@
+.p-paginator {
+    @apply flex items-center justify-center flex-wrap py-2 px-4 rounded-md gap-1
+        bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-paginator-content {
+    @apply flex items-center justify-center flex-wrap gap-1
+}
+
+.p-paginator-content-start {
+    @apply ms-auto
+}
+
+.p-paginator-content-end {
+    @apply me-auto
+}
+
+.p-paginator-page,
+.p-paginator-next,
+.p-paginator-last,
+.p-paginator-first,
+.p-paginator-prev {
+    @apply cursor-pointer inline-flex items-center justify-center leading-none overflow-hidden relative 
+        bg-transparent border-none min-w-10 h-10 transition-colors duration-200 rounded-full p-0 m-0
+        text-surface-500 dark:text-surface-400
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-paginator-page:not(.p-disabled):not(.p-paginator-page-selected):hover,
+.p-paginator-first:not(.p-disabled):hover,
+.p-paginator-prev:not(.p-disabled):hover,
+.p-paginator-next:not(.p-disabled):hover,
+.p-paginator-last:not(.p-disabled):hover {
+    @apply bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-300
+}
+
+.p-paginator-page.p-paginator-page-selected {
+    @apply bg-highlight
+}
+
+.p-paginator-current {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-paginator-pages {
+    @apply flex items-center gap-1
+}
+
+.p-paginator-jtp-input .p-inputtext {
+    @apply max-w-10
+}

assets/styles/primevue/panel.css

@@ -0,0 +1,27 @@
+@import './button';
+
+.p-panel {
+    @apply border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-panel-header {
+    @apply flex justify-between items-center p-[1.125rem]
+}
+
+.p-panel-toggleable .p-panel-header {
+    @apply py-[0.375rem] px-[1.125rem]
+}
+
+.p-panel-title {
+    @apply leading-none font-semibold
+}
+
+.p-panel-content {
+    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
+}
+
+.p-panel-footer {
+    @apply pt-0 pb-[1.125rem] px-[1.125rem] 
+}

assets/styles/primevue/panelmenu.css

@@ -0,0 +1,90 @@
+.p-panelmenu {
+    @apply flex flex-col gap-2
+}
+
+.p-panelmenu-panel {
+    @apply bg-surface-0 dark:bg-surface-900 rounded-md p-1
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-header {
+    @apply outline-none
+}
+
+.p-panelmenu-header-content {
+    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-header-link {
+    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer relative no-underline text-inherit
+}
+
+.p-panelmenu-header-icon,
+.p-panelmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-panelmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-submenu {
+    @apply m-0 py-0 ps-4 outline-none list-none
+}
+
+.p-panelmenu-item-link {
+    @apply flex items-center gap-2 px-3 py-2 select-none cursor-pointer no-underline text-inherit relative overflow-hidden
+}
+
+.p-panelmenu-item-content {
+    @apply rounded-md transition-colors duration-200 text-surface-700 dark:text-surface-0
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item.p-focus > .p-panelmenu-item-content .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}

assets/styles/primevue/password.css

@@ -0,0 +1,61 @@
+@import './inputtext';
+
+.p-password {
+    @apply inline-flex relative
+}
+
+.p-password .p-password-overlay {
+    @apply min-w-full
+}
+
+.p-password-meter {
+    @apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-password-meter-label {
+    @apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md
+}
+
+.p-password-meter-weak {
+    @apply bg-red-500 dark:bg-red-400
+}
+
+.p-password-meter-medium {
+    @apply bg-amber-500 dark:bg-amber-400
+}
+
+.p-password-meter-strong {
+    @apply bg-green-500 dark:bg-green-400
+}
+
+.p-password-fluid {
+    @apply flex
+}
+
+.p-password-fluid .p-password-input {
+    @apply w-full
+}
+
+.p-password-input::-ms-reveal,
+.p-password-input::-ms-clear {
+    @apply hidden
+}
+
+.p-password-overlay {
+    @apply p-3 rounded-md bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-password-content {
+    @apply flex flex-col gap-2
+}
+
+.p-password-toggle-mask-icon {
+    @apply right-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4   
+}
+
+.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
+    @apply pr-10
+}

assets/styles/primevue/picklist.css

@@ -0,0 +1,18 @@
+@import './button';
+@import './listbox';
+
+.p-picklist {
+    @apply flex gap-[1.125rem]
+}
+
+.p-picklist-controls {
+    @apply flex flex-col justify-center gap-2
+}
+
+.p-picklist-list-container {
+    @apply flex-grow flex-shrink basis-1/2
+}
+
+.p-picklist .p-listbox {
+    @apply h-full
+}

assets/styles/primevue/popover.css

@@ -0,0 +1,46 @@
+.p-popover {
+    @apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
+        before:border-[10px] before:-ml-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
+        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
+        after:border-[8px] after:-ml-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
+}
+
+.p-popover-content {
+    @apply p-3
+}
+
+.p-popover-flipped {
+    @apply -mt-[10px] mb-[10px]
+}
+
+.p-popover-enter-from {
+    @apply opacity-0 scale-y-75
+}
+
+.p-popover-leave-to {
+    @apply opacity-0
+}
+
+.p-popover-enter-active {
+    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
+}
+
+.p-popover-leave-active {
+    @apply transition-opacity duration-100 ease-linear
+}
+
+.p-popover-flipped:after,
+.p-popover-flipped:before {
+    @apply bottom-auto top-full
+}
+
+.p-popover.p-popover-flipped:after {
+    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
+}
+
+.p-popover.p-popover-flipped:before {
+    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
+}

assets/styles/primevue/progressbar.css

@@ -0,0 +1,67 @@
+.p-progressbar {
+    @apply relative overflow-hidden h-5 bg-surface-200 dark:bg-surface-700 rounded-md
+}
+
+.p-progressbar-value {
+    @apply m-0 bg-primary
+}
+
+.p-progressbar-label {
+    @apply text-primary-contrast text-xs font-semibold
+}
+
+.p-progressbar-determinate .p-progressbar-value {
+    @apply h-full w-0 absolute flex items-center justify-center overflow-hidden transition-[width] duration-1000 ease-in-out
+}
+
+.p-progressbar-determinate .p-progressbar-label {
+    @apply inline-flex
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    @apply content-[''] absolute bg-inherit top-0 left-0 bottom-0 will-change-[left,right];
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::before {
+    animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    @apply content-[''] absolute bg-inherit top-0 left-0 bottom-0 will-change-[left,right];
+
+}
+
+.p-progressbar-indeterminate .p-progressbar-value::after {
+    animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation-delay: 1.15s;
+}
+
+@keyframes p-progressbar-indeterminate-anim {
+    0% {
+        left: -35%;
+        right: 100%;
+    }
+    60% {
+        left: 100%;
+        right: -90%;
+    }
+    100% {
+        left: 100%;
+        right: -90%;
+    }
+}
+
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        left: -200%;
+        right: 100%;
+    }
+    60% {
+        left: 107%;
+        right: -8%;
+    }
+    100% {
+        left: 107%;
+        right: -8%;
+    }
+}

assets/styles/primevue/progressspinner.css

@@ -0,0 +1,58 @@
+.p-progressspinner {
+    @apply relative my-0 mx-auto w-[100px] h-[100px] inline-block
+        before:block before:pt-[100%]
+}
+
+.p-progressspinner-spin {
+    @apply h-full origin-center w-full absolute top-0 bottom-0 left-0 right-0 m-auto;
+}
+
+.p-progressspinner-spin {
+    animation: p-progressspinner-rotate 2s linear infinite;
+}
+
+.p-progressspinner-circle {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: 0;
+    stroke: theme(colors.red.500);
+    stroke-linecap: round;
+    animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite;
+}
+
+@keyframes p-progressspinner-rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes p-progressspinner-dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes p-progressspinner-color {
+    100%,
+    0% {
+        stroke: theme(colors.red.500);
+    }
+    40% {
+        stroke: theme(colors.blue.500);
+    }
+    66% {
+        stroke: theme(colors.green.500);
+    }
+    80%,
+    90% {
+        stroke: theme(colors.yellow.500);
+    }
+}

assets/styles/primevue/radiobutton.css

@@ -0,0 +1,75 @@
+.p-radiobutton {
+    @apply relative inline-flex select-none w-5 h-5
+}
+
+.p-radiobutton-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute left-0 top-0 w-full h-full m-0 p-0 opacity-0 z-10
+        border border-transparent rounded-full
+}
+
+.p-radiobutton-box {
+    @apply flex justify-center items-center rounded-full
+        border border-surface-300 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-950
+        w-5 h-5
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+}
+
+.p-radiobutton-icon {
+    @apply bg-transparent text-xs w-3 h-3 rounded-full
+        transition-all duration-200 backface-hidden
+}
+
+.p-radiobutton-icon {
+    @apply scale-[0.1]
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-radiobutton-checked .p-radiobutton-box {
+    @apply border-primary bg-primary
+}
+
+.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-primary-contrast visible
+}
+
+.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply scale-100
+}
+
+.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
+    @apply border-primary-emphasis bg-primary-emphasis
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-primary-contrast
+}
+
+.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-radiobutton.p-invalid > .p-radiobutton-box {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-radiobutton.p-variant-filled .p-radiobutton-box {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-radiobutton.p-disabled {
+    @apply opacity-100
+}
+
+.p-radiobutton.p-disabled .p-radiobutton-box {
+    @apply bg-surface-200 dark:bg-surface-400
+        border-surface-300 dark:border-surface-700
+}
+
+.p-radiobutton-checked.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+    @apply bg-surface-700 dark:bg-surface-400
+}

assets/styles/primevue/rating.css

@@ -0,0 +1,23 @@
+.p-rating {
+    @apply relative flex items-center gap-1
+}
+
+.p-rating-option {
+    @apply inline-flex items-center cursor-pointer rounded-full
+}
+
+.p-rating-option.p-focus-visible {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-rating-icon {
+    @apply text-surface-500 dark:text-surface-400 text-base w-4 h-4 transition-colors duration-200
+}
+
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-option:hover .p-rating-icon {
+    @apply text-primary
+}
+
+.p-rating-option-active .p-rating-icon {
+    @apply text-primary
+}

assets/styles/primevue/ripple.css

@@ -0,0 +1,7 @@
+.p-ink {
+    @apply block absolute bg-black/10 dark:bg-white/30 scale-0 rounded-[100%] pointer-events-none
+}
+
+.p-ink-active {
+    @apply transition-[opacity,transform] duration-500 scale-[2.5] opacity-0 ease-linear
+}

assets/styles/primevue/scrollpanel.css

@@ -0,0 +1,41 @@
+.p-scrollpanel-content-container {
+    @apply overflow-hidden w-full h-full relative z-10 float-left
+}
+
+.p-scrollpanel-content {
+    @apply relative overflow-auto 
+        h-[calc(100%+18px)] w-[calc(100%+18px)]
+        pt-0 pl-0 pr-[18px] pb-[18px] [scrollbar-width:none]
+}
+
+.p-scrollpanel-content::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-scrollpanel-bar {
+    @apply relative rounded-sm z-20 cursor-pointer opacity-0 
+        bg-surface-100 dark:bg-surface-800
+        transition-opacity duration-200 border-none
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-scrollpanel-bar-y {
+    @apply w-[9px] top-0
+}
+
+.p-scrollpanel-bar-x {
+    @apply h-[9px] bottom-0
+}
+
+.p-scrollpanel-hidden {
+    @apply invisible
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    @apply opacity-100
+}
+
+.p-scrollpanel-grabbed {
+    @apply select-none
+}

assets/styles/primevue/scrolltop.css

@@ -0,0 +1,25 @@
+@import './button';
+
+.p-scrolltop.p-button {
+    @apply fixed bottom-5 right-5
+}
+
+.p-scrolltop-sticky.p-button {
+    @apply sticky flex ml-auto
+}
+
+.p-scrolltop-enter-from {
+    @apply opacity-0
+}
+
+.p-scrolltop-enter-active {
+    @apply transition-opacity duration-150
+}
+
+.p-scrolltop.p-scrolltop-leave-to {
+    @apply opacity-0
+}
+
+.p-scrolltop-leave-active {
+    @apply transition-opacity duration-150
+}

assets/styles/primevue/select.css

@@ -0,0 +1,128 @@
+@import './button';
+@import './inputtext';
+@import './iconfield';
+
+.p-select {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-select:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-select:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-select.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-select.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-select.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-select-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 right-10
+}
+
+.p-select-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-r-md
+}
+
+.p-select-label {
+    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%]
+        py-2 px-3 overflow-ellipsis
+        text-surface-700 dark:text-surface-0 bg-transparent border-none outline-none
+}
+
+.p-select-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-select:has(.p-select-clear-icon) .p-select-label {
+    @apply pr-7
+}
+
+.p-select.p-disabled .p-select-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-select-label-empty {
+    @apply overflow-hidden opacity-0  
+}
+
+input.p-select-label {
+    @apply cursor-default
+}
+
+.p-select .p-select-overlay {
+    @apply min-w-full
+}
+
+.p-select-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-select-header {
+    @apply pt-2 pb-1 px-4
+}
+
+.p-select-filter {
+    @apply w-full
+}
+
+.p-select-list-container {
+    @apply overflow-auto
+}
+
+.p-select-option-group {
+    @apply m-0 px-3 py-2 bg-transparent text-surface-500 dark:text-surface-400 font-semibold
+}
+
+.p-select-list {
+    @apply m-0 p-1 list-none gap-[2px] flex flex-col
+}
+
+.p-select-option {
+    @apply cursor-pointer font-normal whitespace-nowrap relative overflow-hidden flex items-center
+        px-3 py-2 border-none text-surface-700 dark:text-surface-0 bg-transparent rounded-sm
+        transition-colors duration-200 
+}
+
+.p-select-option:not(.p-select-option-selected):not(.p-disabled).p-focus {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-select-option.p-select-option-selected {
+    @apply bg-highlight
+}
+
+.p-select-option.p-select-option-selected.p-focus {
+    @apply bg-highlight-emphasis
+}
+
+.p-select-option-check-icon {
+    @apply relative -ms-[0.375rem] me-[0.375rem] text-surface-700 dark:text-surface-0
+}
+
+.p-select-empty-message {
+    @apply px-3 py-2
+}
+
+.p-select-fluid {
+    @apply flex
+}

assets/styles/primevue/selectbutton.css

@@ -0,0 +1,25 @@
+@import './togglebutton';
+
+.p-selectbutton {
+    @apply inline-flex select-none rounded-md
+}
+
+.p-selectbutton .p-togglebutton {
+    @apply rounded-none border-y border-r border-l-0
+}
+
+.p-selectbutton .p-togglebutton:focus-visible {
+    @apply relative z-10
+}
+
+.p-selectbutton .p-togglebutton:first-child {
+    @apply border-l rounded-l-md
+}
+
+.p-selectbutton .p-togglebutton:last-child {
+    @apply rounded-r-md
+}
+
+.p-selectbutton.p-invalid {
+    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
+}

assets/styles/primevue/skeleton.css

@@ -0,0 +1,11 @@
+.p-skeleton {
+    @apply overflow-hidden bg-surface-200 dark:bg-surface-700 animate-pulse rounded-md
+}
+
+.p-skeleton-circle {
+    @apply rounded-full
+}
+
+.p-skeleton-animation-none::after {
+    @apply animate-none
+}

assets/styles/primevue/slider.css

@@ -0,0 +1,42 @@
+.p-slider {
+    @apply relative bg-surface-200 dark:bg-surface-700 rounded-sm
+}
+
+.p-slider-handle {
+    @apply cursor-grab touch-none flex items-center justify-center h-[20px] w-[20px]
+        bg-surface-200 dark:bg-surface-700 rounded-full
+        transition-colors duration-200
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        before:w-[16px] before:h-[16px] before:block before:rounded-full
+        before:bg-surface-0 dark:before:bg-surface-950
+        before:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.08),0px_1px_1px_0px_rgba(0,0,0,0.14)]
+        before:transition-colors before:duration-200
+}
+
+.p-slider-range {
+    @apply block bg-primary rounded-sm
+}
+
+.p-slider.p-slider-horizontal {
+    @apply h-[3px]
+}
+
+.p-slider-horizontal .p-slider-range {
+    @apply top-0 left-0 h-full
+}
+
+.p-slider-horizontal .p-slider-handle {
+    @apply top-1/2 -mt-[10px] -ml-[10px]
+}
+
+.p-slider-vertical {
+    @apply min-h-[100px] w-[3px]
+}
+
+.p-slider-vertical .p-slider-handle {
+    @apply left-1/2 -mb-[10px] -ml-[10px]
+}
+
+.p-slider-vertical .p-slider-range {
+    @apply bottom-0 left-0 w-full
+}

assets/styles/primevue/speeddial.css

@@ -0,0 +1,48 @@
+@import './button';
+
+.p-speeddial {
+    @apply static flex gap-2
+}
+
+.p-speeddial-button {
+    @apply z-10
+}
+
+.p-speeddial-button.p-speeddial-rotate {
+    @apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform 
+}
+
+.p-speeddial-list {
+    @apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2
+        transition-[top] ease-linear duration-200 
+}
+
+.p-speeddial-item {
+    @apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform
+}
+
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+    @apply absolute
+}
+
+.p-speeddial-mask {
+    @apply absolute left-0 top-0 w-full h-full opacity-0 bg-white/40 dark:bg-white/60 rounded-md transition-opacity duration-150
+}
+
+.p-speeddial-mask-visible {
+    @apply pointer-events-none opacity-100 transition-opacity duration-150
+}
+
+.p-speeddial-open .p-speeddial-list {
+    @apply pointer-events-auto
+}
+
+.p-speeddial-open .p-speeddial-item {
+    @apply scale-100 opacity-100
+}
+
+.p-speeddial-open .p-speeddial-rotate {
+    @apply rotate-45
+}

assets/styles/primevue/splitbutton.css

@@ -0,0 +1,34 @@
+@import './button';
+@import './tieredmenu';
+
+.p-splitbutton {
+    @apply inline-flex relative rounded-md
+}
+
+.p-splitbutton-button {
+    @apply rounded-r-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10
+}
+
+.p-splitbutton-dropdown {
+    @apply rounded-l-none focus-visible:z-10
+}
+
+.p-splitbutton .p-menu {
+    @apply min-w-full
+}
+
+.p-splitbutton-fluid {
+    @apply w-full
+}
+
+.p-splitbutton-rounded .p-splitbutton-dropdown {
+    @apply rounded-r-[2rem]
+}
+
+.p-splitbutton-rounded .p-splitbutton-button {
+    @apply rounded-l-[2rem]
+}
+
+.p-splitbutton-raised {
+    @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)]
+}

assets/styles/primevue/splitter.css

@@ -0,0 +1,56 @@
+.p-splitter {
+    @apply flex flex-wrap
+        border border-surface-200 dark:border-surface-700 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-splitter-vertical {
+    @apply flex-col
+}
+
+.p-splitter-gutter {
+    @apply flex-grow-0 flex-shrink-0 flex items-center justify-center z-10 bg-surface-200 dark:bg-surface-700
+}
+
+.p-splitter-gutter-handle {
+    @apply rounded-md bg-transparent 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        transition-colors duration-200
+}
+
+.p-splitter-horizontal.p-splitter-resizing {
+    @apply cursor-col-resize select-none
+}
+
+.p-splitter-vertical.p-splitter-resizing {
+    @apply cursor-row-resize select-none
+}
+
+.p-splitter-horizontal > .p-splitter-gutter > .p-splitter-gutter-handle {
+    @apply h-[24px] w-full
+}
+
+.p-splitter-vertical > .p-splitter-gutter > .p-splitter-gutter-handle {
+    @apply w-[24px] h-full
+}
+
+.p-splitter-horizontal > .p-splitter-gutter {
+    @apply cursor-col-resize
+}
+
+.p-splitter-vertical > .p-splitter-gutter {
+    @apply cursor-row-resize
+}
+
+.p-splitterpanel {
+    @apply flex-grow overflow-hidden
+}
+
+.p-splitterpanel-nested {
+    @apply flex
+}
+
+.p-splitterpanel .p-splitter {
+    @apply flex-grow border-none
+}

assets/styles/primevue/stepper.css

@@ -0,0 +1,102 @@
+.p-steplist {
+    @apply relative flex justify-between items-center m-0 p-0 list-none overflow-x-auto
+}
+
+.p-step {
+    @apply relative flex flex-auto items-center gap-4 p-2 last-of-type:flex-initial
+}
+
+.p-step-header {
+    @apply border-none inline-flex items-center no-underline cursor-pointer
+        transition-colors duration-200 rounded-md bg-transparent p-0 gap-2
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+}
+
+.p-step.p-disabled .p-step-header {
+    @apply cursor-default
+}
+
+
+.p-stepper.p-stepper-readonly .p-step {
+    @apply cursor-auto
+}
+
+.p-step-title {
+    @apply block whitespace-nowrap overflow-hidden text-ellipsis max-w-full
+        text-surface-500 dark:text-surface-400 font-medium transition-colors duration-200
+}
+
+.p-step-number {
+    @apply flex items-center justify-center text-surface-500 dark:text-surface-400
+        bg-surface-0 dark:bg-surface-900 border-2 border-surface-200 dark:border-surface-700
+        min-w-8 h-8 leading-8 text-lg font-medium rounded-full z-10 relative
+        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
+}
+
+.p-step-active .p-step-header {
+    @apply cursor-default
+}
+
+.p-step-active .p-step-number {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary border-surface-200 dark:border-surface-700
+}
+
+.p-step-active .p-step-title {
+    @apply text-primary
+}
+
+.p-step:not(.p-disabled):focus-visible {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-step:has(~ .p-step-active) .p-stepper-separator {
+    @apply bg-primary
+}
+
+.p-stepper-separator {
+    @apply flex-1 bg-surface-200 dark:bg-surface-700 w-full h-[2px] transition-colors duration-200
+}
+
+.p-steppanels {
+    @apply pt-[0.875rem] pb-[1.125rem] px-2
+}
+
+.p-steppanel {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+}
+
+.p-stepper:has(.p-stepitem) {
+    @apply flex flex-col
+}
+
+.p-stepitem {
+    @apply flex flex-col flex-initial
+}
+
+.p-stepitem.p-stepitem-active {
+    @apply flex-auto
+}
+
+.p-stepitem .p-step {
+    @apply flex-initial
+}
+
+.p-stepitem .p-steppanel-content {
+    @apply w-full pl-4
+}
+
+.p-stepitem .p-steppanel {
+    @apply flex flex-auto
+}
+
+.p-stepitem .p-stepper-separator {
+    @apply flex-grow-0 flex-shrink-0 basis-auto w-[2px] h-auto ml-[1.625rem] relative left-[-2.5px]
+}
+
+.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
+    @apply bg-primary
+}
+
+.p-stepitem:last-of-type .p-steppanel {
+    @apply ps-8
+}

assets/styles/primevue/tabs.css

@@ -0,0 +1,79 @@
+.p-tabs {
+    @apply flex flex-col
+}
+
+.p-tablist {
+    @apply flex relative
+}
+
+.p-tabs-scrollable > .p-tablist {
+    @apply overflow-hidden
+}
+
+.p-tablist-viewport {
+    @apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto
+}
+
+.p-tablist-viewport::-webkit-scrollbar {
+    @apply hidden
+}
+
+.p-tablist-tab-list {
+    @apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700
+}
+
+.p-tablist-content {
+    @apply flex-grow
+}
+
+.p-tablist-nav-button {
+    @apply absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer
+        bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10
+        shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50
+        focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary
+        transition-colors duration-200 
+}
+
+.p-tablist-prev-button {
+    @apply left-0
+}
+
+.p-tablist-next-button {
+    @apply right-0
+}
+
+.p-tab {
+    @apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]
+        border-b border-surface-200 dark:border-surface-700 font-semibold
+        text-surface-500 dark:text-surface-400
+        transition-colors duration-200 -mb-px
+}
+
+.p-tab.p-disabled {
+    @apply cursor-default
+}
+
+.p-tab:not(.p-disabled):focus-visible {
+    @apply z-10 outline outline-1 outline-offset-[-1px] outline-primary
+}
+
+.p-tab:not(.p-tab-active):not(.p-disabled):hover {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-tab-active {
+    @apply border-primary text-primary
+}
+
+.p-tabpanels {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
+        pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none
+}
+
+.p-tablist-active-bar {
+    @apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]
+}
+
+.p-tablist-viewport {
+    @apply [scrollbar-behavior:smooth] [scrollbar-width:none]
+}

assets/styles/primevue/tag.css

@@ -0,0 +1,38 @@
+.p-tag {
+    @apply inline-flex items-center justify-center
+        bg-primary-100 dark:bg-primary-500/15
+        text-primary-700 dark:text-primary-300
+        text-sm font-bold py-1 px-2 rounded-md gap-1
+}
+
+.p-tag-icon {
+    @apply text-xs w-3 h-3
+}
+
+.p-tag-rounded {
+    @apply rounded-2xl
+}
+
+.p-tag-success {
+    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300
+}
+
+.p-tag-info {
+    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300
+}
+
+.p-tag-warn {
+    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300
+}
+
+.p-tag-danger {
+    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300
+}
+
+.p-tag-secondary {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-surface-300
+}
+
+.p-tag-contrast {
+    @apply bg-surface-950 dark:bg-surface-0 text-surface-0 dark:text-surface-950
+}

assets/styles/primevue/tailwind.css

@@ -0,0 +1,104 @@
+@import './common';
+
+/* Form */
+@import './autocomplete';
+@import './cascadeselect';
+@import './checkbox';
+@import './colorpicker';
+@import './datepicker';
+@import './iconfield';
+@import './iftalabel';
+@import './inputgroup';
+@import './inputnumber';
+@import './inputotp';
+@import './inputtext';
+@import './floatlabel';
+@import './knob';
+@import './listbox';
+@import './multiselect';
+@import './password';
+@import './radiobutton';
+@import './rating';
+@import './select';
+@import './selectbutton';
+@import './slider';
+@import './textarea';
+@import './togglebutton';
+@import './toggleswitch';
+@import './treeselect';
+
+/* Button */
+@import './button';
+@import './buttongroup';
+@import './speeddial';
+@import './splitbutton';
+
+/* Data */
+@import './datatable';
+@import './dataview';
+@import './paginator';
+@import './picklist';
+@import './orderlist';
+@import './organizationchart';
+@import './timeline';
+@import './tree';
+@import './treetable';
+
+/* Overlay */
+@import './confirmdialog';
+@import './confirmpopup';
+@import './dialog';
+@import './drawer';
+@import './popover';
+@import './tooltip';
+
+/* Menu */
+@import './breadcrumb';
+@import './contextmenu';
+@import './dock';
+@import './menu';
+@import './menubar';
+@import './megamenu';
+@import './panelmenu';
+@import './tieredmenu';
+
+/* Panel */
+@import './accordion';
+@import './card';
+@import './divider';
+@import './fieldset';
+@import './panel';
+@import './scrollpanel';
+@import './splitter';
+@import './stepper';
+@import './tabs';
+@import './toolbar';
+
+/* File */
+@import './fileupload';
+
+/* Message */
+@import './message';
+@import './toast';
+
+/* Media */
+@import './carousel';
+@import './galleria';
+@import './image';
+@import './imagecompare';
+
+/* Misc */
+@import './avatar';
+@import './badge';
+@import './blockui';
+@import './chip';
+@import './inplace';
+@import './metergroup';
+@import './overlaybadge';
+@import './progressbar';
+@import './progressspinner';
+@import './ripple';
+@import './scrolltop';
+@import './skeleton';
+@import './tag';
+@import './terminal';

assets/styles/primevue/terminal.css

@@ -0,0 +1,22 @@
+.p-terminal {
+    @apply h-72 overflow-auto px-3 py-2 rounded-md
+        border border-surface-300 dark:border-surface-700 
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+}
+
+.p-terminal-prompt {
+    @apply flex items-center
+}
+
+.p-terminal-prompt-value {
+    @apply flex-auto border-none bg-transparent text-inherit p-0 outline-none text-base
+}
+
+.p-terminal-prompt-label {
+    @apply mr-1
+}
+
+.p-terminal-input::-ms-clear {
+    @apply hidden
+}

assets/styles/primevue/textarea.css

@@ -0,0 +1,30 @@
+.p-textarea {
+    @apply appearance-none rounded-md
+        border border-surface-300 dark:border-surface-700 
+        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
+        enabled:focus:border-primary
+        bg-surface-0 dark:bg-surface-950
+        text-surface-700 dark:text-surface-0
+        disabled:bg-surface-200 disabled:text-surface-500 dark:disabled:bg-surface-700 dark:disabled:text-surface-400
+        placeholder:text-surface-500 dark:placeholder:text-surface-400
+        px-3 py-2
+        transition-colors duration-200
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        outline-none
+}
+
+.p-textarea.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-textarea.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-textarea-fluid {
+    @apply w-full
+}
+
+.p-textarea-resizable {
+    @apply overflow-hidden resize-none
+}

assets/styles/primevue/tieredmenu.css

@@ -0,0 +1,105 @@
+.p-tieredmenu {
+    @apply bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        rounded-md min-w-52
+}
+
+.p-tieredmenu-root-list,
+.p-tieredmenu-submenu {
+    @apply m-0 p-1 list-none outline-none flex flex-col gap-[2px] 
+}
+
+.p-tieredmenu-submenu {
+    @apply absolute min-w-full z-10 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0 
+        border border-surface-200 dark:border-surface-700
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tieredmenu-item {
+    @apply relative
+}
+
+.p-tieredmenu-item-content {
+    @apply transition-colors duration-200 rounded-sm text-surface-700 dark:text-surface-0
+}
+
+.p-tieredmenu-item-link {
+    @apply cursor-pointer flex items-center no-underline overflow-hidden relative text-inherit
+        px-3 py-2 gap-2 select-none outline-none
+}
+
+.p-tieredmenu-item-icon {
+    @apply text-surface-400 dark:text-surface-500
+}
+
+.p-tieredmenu-submenu-icon {
+    @apply text-surface-400 dark:text-surface-500 ml-auto text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item.p-focus > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item:not(.p-disabled) > .p-tieredmenu-item-content:hover .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content {
+    @apply bg-surface-100 dark:bg-surface-800 text-surface-800 dark:text-surface-0
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-item-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-tieredmenu-separator {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-tieredmenu-overlay {
+    @apply shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tieredmenu-enter-from,
+.p-tieredmenu-leave-active {
+    @apply opacity-0
+}
+
+.p-tieredmenu-enter-active {
+    @apply transition-opacity duration-[250ms]
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-submenu {
+    @apply static shadow-none border-none ps-4 pe-0
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-submenu-icon {
+    @apply transition-transform duration-200 rotate-90
+}
+
+.p-tieredmenu-mobile .p-tieredmenu-item-active > .p-tieredmenu-item-content .p-tieredmenu-submenu-icon {
+    @apply -rotate-90
+}

assets/styles/primevue/timeline.css

@@ -0,0 +1,113 @@
+.p-timeline {
+    @apply flex flex-col flex-grow 
+}
+
+.p-timeline-left .p-timeline-event-opposite {
+    @apply text-right
+}
+
+.p-timeline-left .p-timeline-event-content {
+    @apply text-left
+}
+
+.p-timeline-right .p-timeline-event {
+    @apply flex-row-reverse
+}
+
+.p-timeline-right .p-timeline-event-opposite {
+    @apply text-left
+}
+
+.p-timeline-right .p-timeline-event-content {
+    @apply text-right
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    @apply flex-row-reverse
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
+    @apply text-right
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
+    @apply text-left
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
+    @apply text-left
+}
+
+.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
+    @apply text-right
+}
+
+.p-timeline-vertical .p-timeline-event-opposite,
+.p-timeline-vertical .p-timeline-event-content {
+    @apply py-0 px-4 leading-none
+}
+
+.p-timeline-vertical .p-timeline-event-connector {
+    @apply w-[2px]
+}
+
+.p-timeline-event {
+    @apply flex relative min-h-20 last:min-h-0
+}
+
+.p-timeline-event-opposite {
+    @apply flex-1
+}
+
+.p-timeline-event-content {
+    @apply flex-1
+}
+
+.p-timeline-event-separator {
+    @apply flex-none flex flex-col items-center 
+}
+
+.p-timeline-event-marker {
+    @apply inline-flex items-center justify-center relative self-baseline
+        border-2 rounded-full border-surface-200 dark:border-surface-700 w-[1.125rem] h-[1.125rem]
+        bg-surface-0 dark:bg-surface-900
+        before:rounded-full before:w-[0.375rem] before:h-[0.375rem] before:bg-primary
+        after:absolute after:w-full after:h-full after:rounded-full after:shadow-[0px_0.5px_0px_0px_rgba(0,0,0,0.06),0px_1px_1px_0px_rgba(0,0,0,0.12)]
+}
+
+.p-timeline-event-connector {
+    @apply flex-grow bg-surface-200 dark:bg-surface-700
+}
+
+.p-timeline-horizontal {
+    @apply flex-row
+}
+
+.p-timeline-horizontal .p-timeline-event {
+    @apply flex-col flex-1
+}
+
+.p-timeline-horizontal .p-timeline-event:last-child {
+    @apply flex-none
+}
+
+.p-timeline-horizontal .p-timeline-event-separator {
+    @apply flex-row
+}
+
+.p-timeline-horizontal .p-timeline-event-connector {
+    @apply w-full h-[2px]
+}
+
+.p-timeline-horizontal .p-timeline-event-opposite,
+.p-timeline-horizontal .p-timeline-event-content {
+    @apply py-4 px-0
+}
+
+.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
+    @apply flex-col-reverse
+}
+
+.p-timeline-bottom .p-timeline-event {
+    @apply flex-col-reverse
+}

assets/styles/primevue/toast.css

@@ -0,0 +1,168 @@
+.p-toast {
+    @apply w-96 rounded-md whitespace-pre-line break-words
+}
+
+.p-toast-message {
+    @apply mb-4
+}
+
+.p-toast-message-icon {
+    @apply flex-shrink-0 text-lg w-[1.125rem] h-[1.125rem]
+}
+
+.p-toast-message-content {
+    @apply flex items-start p-3 gap-2
+}
+
+.p-toast-message-text {
+    @apply flex-auto flex flex-col gap-2
+}
+
+.p-toast-summary {
+    @apply font-medium text-base
+}
+
+.p-toast-detail {
+    @apply font-medium text-sm
+}
+
+.p-toast-close-button {
+    @apply flex items-center justify-center overflow-hidden relative cursor-pointer bg-transparent select-none
+        transition-colors duration-200 text-inherit w-7 h-7 rounded-full -mt-[25%] -right-1/4 p-0 border-none 
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
+}
+
+.p-toast-message-info,
+.p-toast-message-success,
+.p-toast-message-warn,
+.p-toast-message-error,
+.p-toast-message-secondary,
+.p-toast-message-contrast {
+    @apply border backdrop-blur-sm dark:backdrop-blur-md rounded-md
+}
+
+.p-toast-close-icon {
+    @apply text-base w-4 h-4
+}
+
+.p-toast-message-info {
+    @apply bg-blue-50/95 border-blue-200 text-blue-600
+        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-info .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-info .p-toast-close-button {
+    @apply hover:bg-blue-100 focus-visible:outline-blue-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+}
+
+.p-toast-message-success {
+    @apply bg-green-50/95 border-green-200 text-green-600
+        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
+        shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
+}
+
+.p-toast-message-success .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-success .p-toast-close-button {
+    @apply hover:bg-green-100 focus-visible:outline-green-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+}
+
+.p-toast-message-warn {
+    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600
+        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
+        shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
+}
+
+.p-toast-message-warn .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-warn .p-toast-close-button {
+    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+}
+
+.p-toast-message-error {
+    @apply bg-red-50/95 border-red-200 text-red-600
+        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
+        shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
+}
+
+.p-toast-message-error .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-error .p-toast-close-button {
+    @apply hover:bg-red-100 focus-visible:outline-red-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+}
+
+.p-toast-message-secondary {
+    @apply bg-surface-100 border-surface-200 text-surface-600
+        dark:bg-surface-800 dark:border-surface-700 dark:text-surface-300
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-toast-message-secondary .p-toast-detail {
+    @apply text-surface-700 dark:text-surface-0
+}
+
+.p-toast-message-secondary .p-toast-close-button {
+    @apply hover:bg-surface-200 focus-visible:outline-surface-600
+        dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300
+}
+
+.p-toast-message-contrast {
+    @apply bg-surface-900 border-surface-950 text-surface-50
+        dark:bg-surface-0 dark:border-surface-100 dark:text-surface-950
+        shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-toast-message-contrast .p-toast-detail {
+    @apply text-surface-0 dark:text-surface-950
+}
+
+.p-toast-message-contrast .p-toast-close-button {
+    @apply hover:bg-surface-800 focus-visible:outline-surface-50
+        dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950
+}
+
+.p-toast-top-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-bottom-center {
+    @apply -translate-x-1/2;
+}
+
+.p-toast-center {
+    @apply min-w-[20vw] -translate-x-1/2 -translate-y-1/2
+}
+
+.p-toast-message-enter-from {
+    @apply opacity-0 translate-y-1/2
+}
+
+.p-toast-message-leave-from {
+    @apply max-h-[1000px]
+}
+
+.p-toast .p-toast-message.p-toast-message-leave-to {
+    @apply max-h-0 opacity-0 mb-0 overflow-hidden
+}
+
+.p-toast-message-enter-active {
+    @apply [transition:transform_0.3s,opacity_0.3s]
+}
+
+.p-toast-message-leave-active {
+    @apply [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin-bottom_0.3s]
+}

assets/styles/primevue/togglebutton.css

@@ -0,0 +1,55 @@
+.p-togglebutton {
+    @apply inline-flex items-center justify-center overflow-hidden relative cursor-pointer select-none
+        border border-surface-100 dark:border-surface-950 rounded-md
+        bg-surface-100 dark:bg-surface-950
+        text-surface-500 dark:text-surface-400 text-base font-medium
+        px-4 py-2
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+        disabled:opacity-100 disabled:cursor-default 
+        disabled:bg-surface-200 disabled:border-surface-200 disabled:text-surface-500
+        disabled:dark:bg-surface-700 disabled:dark:border-surface-700 disabled:dark:text-surface-400
+        transition-colors duration-300
+        before:bg-transparent before:absolute before:left-1 before:top-1 before:rounded-md before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)]
+        before:transition-colors before:duration-200
+}
+
+.p-togglebutton-content {
+    @apply relative inline-flex items-center justify-center gap-2
+}
+
+.p-togglebutton-label,
+.p-togglebutton-icon {
+    @apply relative transition-none
+}
+
+.p-togglebutton.p-togglebutton-checked::before {
+    @apply bg-surface-0 dark:bg-surface-800 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.02),0px_1px_2px_0px_rgba(0,0,0,0.04)]
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
+    @apply bg-surface-100 dark:bg-surface-950 text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked {
+    @apply bg-surface-100 dark:bg-surface-950 border-surface-100 dark:border-surface-950 text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover .p-togglebutton-icon {
+    @apply text-surface-700 dark:text-surface-300
+}
+
+.p-togglebutton.p-togglebutton-checked .p-togglebutton-icon {
+    @apply text-surface-900 dark:text-surface-0
+}
+
+.p-togglebutton:disabled .p-togglebutton-icon {
+    @apply text-surface-500 dark:text-surface-400
+}

assets/styles/primevue/toggleswitch.css

@@ -0,0 +1,66 @@
+.p-toggleswitch {
+    @apply inline-block w-10 h-6
+}
+
+.p-toggleswitch-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute top-0 left-0 w-full h-full m-0 p-0 opacity-0 z-10 rounded-[30px]
+}
+
+.p-toggleswitch-slider {
+    @apply inline-block w-full h-full rounded-[30px] shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        bg-surface-300 dark:bg-surface-700
+        border border-transparent
+        transition-colors duration-200
+}
+
+.p-toggleswitch-handle {
+    @apply absolute top-1/2 flex justify-center items-center
+        bg-surface-0 dark:bg-surface-400
+        text-surface-500 dark:text-surface-900
+        w-4 h-4 left-1 -mt-2 rounded-full
+        transition-[background,color,left] duration-200
+}
+
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-slider {
+    @apply bg-primary
+}
+
+.p-toggleswitch.p-toggleswitch-checked .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary left-5
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-slider {
+    @apply bg-surface-400 dark:bg-surface-600
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-300 text-surface-700 dark:text-surface-800
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-slider {
+    @apply bg-primary-emphasis
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked .p-toggleswitch-handle {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary-emphasis
+}
+
+.p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-toggleswitch.p-disabled {
+    @apply opacity-100
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-slider {
+    @apply bg-surface-200 dark:bg-surface-600
+}
+
+.p-toggleswitch.p-disabled .p-toggleswitch-handle {
+    @apply bg-surface-700 dark:bg-surface-900
+}

assets/styles/primevue/toolbar.css

@@ -0,0 +1,12 @@
+.p-toolbar {
+    @apply flex items-center justify-between flex-wrap p-3 gap-2
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+        border border-surface-200 dark:border-surface-700 rounded-md
+}
+
+.p-toolbar-start,
+.p-toolbar-center,
+.p-toolbar-end {
+    @apply flex items-center
+}

assets/styles/primevue/tooltip.css

@@ -0,0 +1,38 @@
+.p-tooltip {
+    @apply absolute hidden max-w-48
+}
+
+.p-tooltip-right,
+.p-tooltip-left {
+    @apply py-0 px-1
+}
+
+.p-tooltip-top,
+.p-tooltip-bottom {
+    @apply py-1 px-0
+}
+
+.p-tooltip-text {
+    @apply whitespace-pre-line break-words  bg-surface-700 text-surface-0 py-2 px-3
+        rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+.p-tooltip-arrow {
+    @apply absolute w-0 h-0 border-solid border-transparent
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-l-0 border-r-surface-700
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    @apply -mt-1 border-[.25rem] border-r-0 border-l-surface-700
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    @apply -ml-1 border-[.25rem] border-b-0 border-t-surface-700
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    @apply -ml-1 border-[.25rem] border-t-0 border-b-surface-700
+}

assets/styles/primevue/tree.css

@@ -0,0 +1,103 @@
+.p-tree {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 p-4
+}
+
+.p-tree-root-children,
+.p-tree-node-children {
+    @apply flex flex-col list-none m-0 gap-[2px]
+}
+
+.p-tree-root-children {
+    @apply pt-[2px] pb-0 px-0
+}
+
+.p-tree-node-children {
+    @apply pt-[2px] pr-0 pb-0 pl-4
+}
+
+.p-tree-node {
+    @apply p-0 outline-none
+}
+
+.p-tree-node-content {
+    @apply rounded-md px-2 py-1 flex items-center text-surface-700 dark:text-surface-0 gap-1 transition-colors duration-200
+}
+
+.p-tree-node:focus-visible > .p-tree-node-content {
+    @apply outline outline-1 outline-offset-2 outline-primary
+}
+
+.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover {
+    @apply bg-surface-100 text-surface-700 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-tree-node-content.p-tree-node-selectable:not(.p-tree-node-selected):hover .p-tree-node-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-tree-node-content.p-tree-node-selected {
+    @apply bg-highlight
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button {
+    @apply text-inherit
+}
+
+.p-tree-node-toggle-button {
+    @apply cursor-pointer select-none inline-flex justify-center rounded-full items-center overflow-hidden relative flex-shrink-0
+        w-7 h-7 p-0 transition-colors duration-200 border-none 
+        bg-transparent enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-800
+        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-600 dark:enabled:hover:text-surface-300
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}
+
+.p-tree-root {
+    @apply overflow-auto
+}
+
+.p-tree-node-selectable {
+    @apply cursor-pointer select-none
+}
+
+.p-tree-node-leaf > .p-tree-node-content .p-tree-node-toggle-button {
+    @apply invisible
+}
+
+.p-tree-node-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-tree-node-content.p-tree-node-selected .p-tree-node-icon {
+    @apply text-primary
+}
+
+.p-tree-filter {
+    @apply mb-2
+}
+
+.p-tree-filter-input {
+    @apply w-full
+}
+
+.p-tree-loading {
+    @apply relative h-full
+}
+
+.p-tree-loading-icon {
+    @apply text-[2rem] h-8 w-8
+}
+
+.p-tree .p-tree-mask {
+    @apply absolute z-10 flex items-center justify-center
+}
+
+.p-tree-flex-scrollable {
+    @apply flex flex-1 h-full flex-col
+}
+
+.p-tree-flex-scrollable .p-tree-root {
+    @apply flex-1
+}

assets/styles/primevue/treeselect.css

@@ -0,0 +1,96 @@
+@import './chip';
+@import './tree';
+
+.p-treeselect {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-950
+        border border-surface-300 dark:border-surface-700
+        shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
+        transition-colors duration-200
+}
+
+.p-treeselect:not(.p-disabled):hover {
+    @apply border-surface-400 dark:border-surface-600
+}
+
+.p-treeselect:not(.p-disabled).p-focus {
+    @apply border-primary
+}
+
+.p-treeselect.p-variant-filled {
+    @apply bg-surface-50 dark:bg-surface-800
+}
+
+.p-treeselect.p-invalid {
+    @apply border-red-400 dark:border-red-300
+}
+
+.p-treeselect.p-disabled {
+    @apply bg-surface-200 text-surface-500 dark:bg-surface-700 dark:text-surface-400 opacity-100 cursor-default
+}
+
+.p-treeselect-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-r-md
+}
+
+.p-treeselect-label-container {
+    @apply overflow-hidden flex-auto
+}
+
+.p-treeselect-label {
+    @apply flex items-center gap-1 whitespace-nowrap text-ellipsis px-3 py-2 text-surface-700 dark:text-surface-0
+}
+
+.p-treeselect-label.p-placeholder {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-treeselect.p-disabled .p-treeselect-label {
+    @apply text-surface-500 dark:text-surface-400
+}
+
+.p-treeselect-label-empty {
+    @apply overflow-hidden invisible
+}
+
+.p-treeselect .p-treeselect-overlay {
+    @apply min-w-full
+}
+
+.p-treeselect-overlay {
+    @apply absolute top-0 left-0 rounded-md
+        bg-surface-0 dark:bg-surface-900
+        border border-surface-200 dark:border-surface-700
+        text-surface-700 dark:text-surface-0
+        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
+}
+
+
+.p-treeselect-tree-container {
+    @apply overflow-auto
+}
+
+.p-treeselect-empty-message {
+    @apply px-3 py-2
+}
+
+.p-treeselect-fluid {
+    @apply flex
+}
+
+.p-treeselect-overlay .p-tree {
+    @apply p-1
+}
+
+.p-treeselect-overlay .p-tree-loading {
+    @apply min-h-12
+}
+
+.p-treeselect-label .p-chip {
+    @apply pt-1 pb-1 rounded-sm
+}
+
+.p-treeselect-label:has(.p-chip) {
+    @apply py-1 px-1
+}

assets/styles/primevue/treetable.css

@@ -0,0 +1,296 @@
+@import './paginator';
+
+.p-treetable {
+    @apply relative
+}
+
+.p-treetable-table {
+    @apply border-spacing-0 w-full
+}
+
+.p-treetable-scrollable > .p-treetable-table-container {
+    @apply relative
+}
+
+.p-treetable-scrollable-table > .p-treetable-thead {
+    @apply top-0 z-10
+}
+
+.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
+    @apply sticky z-10
+}
+
+.p-treetable-scrollable-table>.p-treetable-tfoot {
+    @apply bottom-0 z-10
+}
+
+.p-treetable-scrollable .p-treetable-frozen-column {
+    @apply sticky bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable th.p-treetable-frozen-column {
+    @apply z-10
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-flex-scrollable {
+    @apply flex flex-col h-full
+}
+
+.p-treetable-flex-scrollable > .p-treetable-table-container {
+    @apply flex flex-col flex-1 h-full
+}
+
+.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
+    @apply sticky z-10
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th,
+.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
+.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
+    @apply overflow-hidden whitespace-nowrap
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
+    @apply bg-clip-padding relative
+}
+
+.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
+    @apply hidden
+}
+
+.p-treetable-column-resizer {
+    @apply block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+}
+
+.p-treetable-column-header-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-column-resize-indicator {
+    @apply w-px absolute z-10 hidden bg-primary
+}
+
+.p-treetable-mask {
+    @apply absolute flex items-center justify-center z-20
+}
+
+.p-treetable-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-footer {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-header-cell {
+    @apply py-3 px-4 font-normal text-left transition-colors duration-200
+        border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-title {
+    @apply font-semibold
+}
+
+.p-treetable-tbody > tr {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
+}
+
+.p-treetable-tbody > tr > td {
+    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800
+}
+
+.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected {
+    @apply bg-highlight
+}
+
+.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr:focus-visible,
+.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
+    @apply outline outline-1 -outline-offset-1 outline-primary
+}
+
+.p-treetable-tfoot > tr > td {
+    @apply text-left py-3 px-4 border-b border-surface-200 dark:border-surface-800 
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-footer {
+    @apply font-semibold
+}
+
+.p-treetable-sortable-column {
+    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
+}
+
+.p-treetable-column-title,
+.p-treetable-sort-icon,
+.p-treetable-sort-badge {
+    @apply align-middle
+}
+
+.p-treetable-sort-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-treetable-column-sorted {
+    @apply bg-highlight
+}
+
+.p-treetable-column-sorted .p-treetable-sort-icon {
+    @apply bg-highlight
+}
+
+.p-treetable-hoverable .p-treetable-selectable-row {
+    @apply cursor-pointer
+}
+
+.p-treetable-loading-icon {
+    @apply text-[2rem] w-8 h-8
+}
+
+.p-treetable-gridlines .p-treetable-header {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-footer {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-top {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-bottom {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-thead > tr > th {
+    @apply border-t border-x last:border
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr > td {
+    @apply border-t border-l last:border-r
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
+    @apply border-y border-l last:border
+}
+
+.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+    @apply border-y border-l last:border
+}
+
+.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
+    @apply border-b border-l last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
+    @apply border-b border-l last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
+    @apply border-x
+}
+
+.p-treetable.p-treetable-sm .p-treetable-header {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-footer {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-lg .p-treetable-header {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-footer {
+    @apply py-4 px-5
+}
+
+.p-treetable-body-cell-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
+    @apply text-inherit
+}
+
+.p-treetable-node-toggle-button {
+    @apply inline-flex items-center justify-center overflow-hidden relative select-none
+        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer 
+        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900
+        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}

assets/styles/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "./primevue/tailwind.css";
+@import "tailwindcss/utilities";

nuxt.config.ts

@@ -0,0 +1,205 @@
+import * as path from "path";
+
+export default defineNuxtConfig({
+  compatibilityDate:'2024-12-29',
+    modules: [ "@primevue/nuxt-module"],
+    css: ['@/assets/styles/tailwind.css', '@/assets/styles/base.css'],
+    primevue: {
+        options: { theme: 'none' , locale:{
+            "accept": "Igen",
+            "addRule": "Szabály hozzáadása",
+            "am": "de.",
+            "apply": "Alkalmaz",
+            "cancel": "Mégsem",
+            "choose": "Kiválaszt",
+            "chooseDate": "Válassz dátumot",
+            "chooseMonth": "Válassz hónapot",
+            "chooseYear": "Válassz évet",
+            "clear": "Törlés",
+            "completed": "Befejezve",
+            "contains": "Tartalmazza",
+            "custom": "Egyedi",
+            "dateAfter": "Dátum későbbi",
+            "dateBefore": "Dátum korábbi",
+            "dateFormat": "yy.mm.dd",
+            "dateIs": "Dátum egyenlő",
+            "dateIsNot": "Dátum nem egyenlő",
+            "dayNames": [
+              "vasárnap",
+              "hétfő",
+              "kedd",
+              "szerda",
+              "csütörtök",
+              "péntek",
+              "szombat"
+            ],
+            "dayNamesMin": [
+              "V",
+              "H",
+              "K",
+              "Sz",
+              "Cs",
+              "P",
+              "Sz"
+            ],
+            "dayNamesShort": [
+              "V",
+              "H",
+              "K",
+              "Sze",
+              "Cs",
+              "P",
+              "Szo"
+            ],
+            "emptyFilterMessage": "Nincs találat",
+            "emptyMessage": "Nincs elérhető opció",
+            "emptySearchMessage": "Nincs találat",
+            "emptySelectionMessage": "Nincs kijelölt elem",
+            "endsWith": "Ezzel végződik",
+            "equals": "Egyenlő",
+            "fileSizeTypes": [
+              "B",
+              "KB",
+              "MB",
+              "GB",
+              "TB",
+              "PB",
+              "EB",
+              "ZB",
+              "YB"
+            ],
+            "filter": "Szűrő",
+            "firstDayOfWeek": 1,
+            "gt": "Nagyobb",
+            "gte": "Nagyobb vagy egyenlő",
+            "lt": "Kisebb",
+            "lte": "Kisebb vagy egyenlő",
+            "matchAll": "Megfelel mindegyiknek",
+            "matchAny": "Megfelel bármelyiknek",
+            "medium": "Közepes",
+            "monthNames": [
+              "január",
+              "február",
+              "március",
+              "április",
+              "május",
+              "június",
+              "július",
+              "augusztus",
+              "szeptember",
+              "október",
+              "november",
+              "december"
+            ],
+            "monthNamesShort": [
+              "jan.",
+              "febr.",
+              "márc.",
+              "ápr.",
+              "máj.",
+              "jún.",
+              "júl.",
+              "aug.",
+              "szept.",
+              "okt.",
+              "nov.",
+              "dec."
+            ],
+            "nextDecade": "Következő évtized",
+            "nextHour": "Következő óra",
+            "nextMinute": "Következő perc",
+            "nextMonth": "Következő hónap",
+            "nextSecond": "Következő másodperc",
+            "nextYear": "Következő év",
+            "noFilter": "Nincs szűrő",
+            "notContains": "Nem tartalmazza",
+            "notEquals": "Nem egyenlő",
+            "now": "Most",
+            "passwordPrompt": "Jelszó megadása",
+            "pending": "Függőben",
+            "pm": "du.",
+            "prevDecade": "Előző évtized",
+            "prevHour": "Előző óra",
+            "prevMinute": "Előző perc",
+            "prevMonth": "Előző hónap",
+            "prevSecond": "Előző másodperc",
+            "prevYear": "Előző év",
+            "reject": "Nem",
+            "removeRule": "Szabály eltávolítása",
+            "searchMessage": "{0} találat érhető el",
+            "selectionMessage": "{0} elem kijelölve",
+            "showMonthAfterYear": true,
+            "startsWith": "Ezzel kezdődik",
+            "strong": "Erős",
+            "today": "Ma",
+            "upload": "Feltölt",
+            "weak": "Gyenge",
+            "weekHeader": "Hét",
+            "aria": {
+              "cancelEdit": "Szerkesztés elvetése",
+              "close": "Bezár",
+              "collapseLabel": "Összeomlás",
+              "collapseRow": "Sor összecsukva",
+              "editRow": "Sor szerkesztése",
+              "expandLabel": "Kiterjed",
+              "expandRow": "Sor lenyitva",
+              "falseLabel": "Hamis",
+              "filterConstraint": "Szűrési feltétel",
+              "filterOperator": "Szűrési logikai operátor",
+              "firstPageLabel": "Első oldal",
+              "gridView": "Rács nézet",
+              "hideFilterMenu": "Szűrő menü elrejtése",
+              "jumpToPageDropdownLabel": "Ugrás az oldal kiválasztó legördülő menühöz",
+              "jumpToPageInputLabel": "Ugrás az oldal számát megadó beviteli mezőhöz",
+              "lastPageLabel": "Utolsó oldal",
+              "listView": "Lista nézet",
+              "moveAllToSource": "Minden mozgatása a forráshoz",
+              "moveAllToTarget": "Minden mozgatása a célhoz",
+              "moveBottom": "Mozgatás az aljára",
+              "moveDown": "Mozgatás lejjebb",
+              "moveTop": "Mozgatás a tetejére",
+              "moveToSource": "Mozgatás a forráshoz",
+              "moveToTarget": "Mozgatás a célhoz",
+              "moveUp": "Mozgatás feljebb",
+              "navigation": "Navigáció",
+              "next": "Következő",
+              "nextPageLabel": "Következő oldal",
+              "nullLabel": "Nincs kijelölve",
+              "otpLabel": "Kérjük, írjon be egyszeri jelszó karaktert: {0}",
+              "pageLabel": "{page}. oldal",
+              "passwordHide": "Jelszó elrejtése",
+              "passwordShow": "Mutasd a jelszót",
+              "previous": "Előző",
+              "previousPageLabel": "Előző oldal",
+              "removeLabel": "Távolítsa el",
+              "rotateLeft": "Forgatás balra",
+              "rotateRight": "Forgatás jobbra",
+              "rowsPerPageLabel": "Sorok száma egy oldalon",
+              "saveEdit": "Szerkesztés mentése",
+              "scrollTop": "Görgetés a tetejére",
+              "selectAll": "Összes elem kijelölve",
+              "selectLabel": "Válassza ki",
+              "selectRow": "Sor kijelölve",
+              "showFilterMenu": "Szűrő menü megjelenítése",
+              "slide": "Dia",
+              "slideNumber": "{slideNumber}",
+              "star": "1 csillag",
+              "stars": "{star} csillag",
+              "trueLabel": "Igaz",
+              "unselectAll": "Nincs elem kijelölve",
+              "unselectLabel": "Törölje a kijelölést",
+              "unselectRow": "Sor nincs kijelölve",
+              "zoomImage": "Kép nagyítása",
+              "zoomIn": "Nagyítás",
+              "zoomOut": "Kicsinyítés"
+            }
+          }},
+    },
+    postcss: {
+        plugins: {
+            'postcss-import': {},
+            tailwindcss: {},
+            autoprefixer: {}
+        }
+    }
+});

package.json

@@ -0,0 +1,25 @@
+{
+    "name": "nuxt-app",
+    "type": "module",
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "devDependencies": {
+        "@primevue/nuxt-module": "^4.2.5",
+        "autoprefixer": "^10.4.20",
+        "nuxt": "3.12.1",
+        "postcss": "^8.4.49",
+        "postcss-import": "^16.1.0"
+    },
+    "dependencies": {
+        "primevue": "^4.2.5",
+        "tailwindcss": "^3.4.17",
+        "tailwindcss-primeui": "^0.3.4",
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0"
+    }
+}

pages/index.vue

@@ -0,0 +1,12 @@
+<script setup>
+</script>
+<template>
+    <div class="flex items-center justify-center min-h-dvh p-10">
+        <div class="flex items-center justify-center p-10">
+            <section class="bg-white dark:bg-surface-900 p-10 rounded-xl flex flex-col gap-8 max-w-3xl ">
+                <h1 class="text-4xl text-black dark:text-white font-bold text-center">Nuxt + Tailwind CSS + PrimeVue
+                </h1>
+            </section>
+        </div>
+    </div>
+</template>

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */
+const primeui = require("tailwindcss-primeui");
+
+module.exports = {
+    content: ["./components/**/*.{js,vue,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./nuxt.config.{js,ts}", "./app.vue", "./error.vue"],
+    plugins: [primeui],
+};

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}