@wippy-fe/theme 0.0.7

package/primevue/message.css

@@ -0,0 +1,228 @@
+.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-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-info.p-message-outlined {
+    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600
+}
+
+.p-message-info.p-message-simple {
+    @apply text-blue-500 dark:text-blue-600
+}
+
+.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-success.p-message-outlined {
+    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600
+}
+
+.p-message-success.p-message-simple {
+    @apply text-green-500 dark:text-green-600
+}
+
+.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-warn.p-message-outlined {
+    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600
+}
+
+.p-message-warn.p-message-simple {
+    @apply text-yellow-500 dark:text-yellow-600
+}
+
+.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-error.p-message-outlined {
+    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600
+}
+
+.p-message-error.p-message-simple {
+    @apply text-red-500 dark:text-red-600
+}
+
+.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-secondary.p-message-outlined {
+    @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600
+}
+
+.p-message-secondary.p-message-simple {
+    @apply text-surface-500 dark:text-surface-600
+}
+
+.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-contrast.p-message-outlined {
+    @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0
+}
+
+.p-message-contrast.p-message-simple {
+    @apply text-surface-950 dark:text-surface-0
+}
+
+.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
+}
+
+.p-message-sm .p-message-content {
+    @apply px-2.5 py-[0.375rem]
+}
+
+.p-message-sm .p-message-text {
+    @apply text-sm
+}
+
+.p-message-sm .p-message-icon {
+    @apply w-4 h-4 text-sm
+}
+
+.p-message-sm .p-message-close-icon {
+    @apply w-3.5 h-3.5 text-sm
+}
+
+.p-message-xs .p-message-content {
+    @apply px-2.5 py-[0.375rem]
+}
+
+.p-message-sm .p-message-text {
+    @apply text-xs
+}
+
+.p-message-sm .p-message-icon {
+    @apply w-4 h-4 text-xs
+}
+
+.p-message-sm .p-message-close-icon {
+    @apply w-3.5 h-3.5 text-xs
+}
+
+.p-message-lg .p-message-content {
+    @apply px-3.5 py-2.5
+}
+
+.p-message-lg .p-message-text {
+    @apply text-xl
+}
+
+.p-message-lg .p-message-icon {
+    @apply w-5 h-5 text-xl
+}
+
+.p-message-lg .p-message-close-icon {
+    @apply w-[1.125rem] h-[1.125rem] text-xl
+}
+
+.p-message-outlined {
+    @apply bg-transparent outline outline-1
+}
+
+.p-message-simple {
+    @apply bg-transparent outline-none shadow-none
+}
+
+.p-message-simple .p-message-content {
+    @apply p-0
+}
+
+.p-message-outlined .p-message-close-button:hover,
+.p-message-simple .p-message-close-button:hover {
+    @apply bg-transparent
+}

package/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-s-md
+}
+
+.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
+    @apply rounded-e-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-ss-md rounded-se-md
+}
+
+.p-metergroup-vertical .p-metergroup-meter:last-of-type {
+    @apply rounded-ee-md rounded-es-md
+}

package/primevue/multiselect.css

@@ -0,0 +1,143 @@
+@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-e-md
+}
+
+.p-multiselect-clear-icon {
+    @apply absolute top-1/2 -mt-2 text-surface-500 dark:text-surface-400 end-10
+}
+
+.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 me-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
+}
+
+.p-multiselect-sm .p-multiselect-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-multiselect-sm .p-multiselect-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-multiselect-lg .p-multiselect-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-multiselect-lg .p-multiselect-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}

package/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
+}

package/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 -ms-3 z-20 start-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-e 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-e-0
+}
+
+.p-organizationchart-connectors :nth-last-child(1 of .p-organizationchart-connector-left) {
+    @apply rounded-se-md
+}
+
+.p-organizationchart-connectors :nth-child(1 of .p-organizationchart-connector-right) {
+    @apply border-s border-surface-200 dark:border-surface-700 rounded-ss-md
+}

package/primevue/overlaybadge.css

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

package/primevue/paginator.css

@@ -0,0 +1,58 @@
+.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
+}
+
+.p-paginator-first:dir(rtl),
+.p-paginator-prev:dir(rtl),
+.p-paginator-next:dir(rtl),
+.p-paginator-last:dir(rtl) {
+    @apply rotate-180
+}

package/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] 
+}

package/primevue/panelmenu.css

@@ -0,0 +1,94 @@
+.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-panelmenu-header-active) .p-panelmenu-submenu-icon:dir(rtl) {
+    @apply rotate-180;
+}
+
+.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
+}