@wippy-fe/theme 0.0.7

package/primevue/dialog.css

@@ -0,0 +1,125 @@
+@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-left:dir(rtl) .p-dialog-enter-from,
+.p-dialog-left:dir(rtl) .p-dialog-leave-to,
+.p-dialog-topleft:dir(rtl) .p-dialog-enter-from,
+.p-dialog-topleft:dir(rtl) .p-dialog-leave-to,
+.p-dialog-bottomleft:dir(rtl) .p-dialog-enter-from,
+.p-dialog-bottomleft:dir(rtl) .p-dialog-leave-to {
+    @apply [transform:translate3d(100%,0,0)]
+}
+.p-dialog-right:dir(rtl) .p-dialog-enter-from,
+.p-dialog-right:dir(rtl) .p-dialog-leave-to,
+.p-dialog-topright:dir(rtl) .p-dialog-enter-from,
+.p-dialog-topright:dir(rtl) .p-dialog-leave-to,
+.p-dialog-bottomright:dir(rtl) .p-dialog-enter-from,
+.p-dialog-bottomright:dir(rtl) .p-dialog-leave-to {
+    @apply [transform:translate3d(-100%,0,0)]
+}
+
+.p-dialog-maximized {
+    @apply !w-screen !h-screen top-0 start-0 max-h-full rounded-none
+}
+
+.p-dialog-maximized .p-dialog-content {
+    @apply flex-grow
+}

package/primevue/divider.css

@@ -0,0 +1,52 @@
+.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:start-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:start-1/2 before:h-full
+        before:border-s 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
+}
+
+.p-divider-left:dir(rtl),
+.p-divider-right:dir(rtl) {
+    @apply flex-row-reverse
+}

package/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 start-0 top-0 w-full
+}
+
+.p-dock-top .p-dock-item {
+    @apply origin-[center_top]
+}
+
+.p-dock-bottom {
+    @apply start-0 bottom-0 w-full
+}
+
+.p-dock-bottom .p-dock-item {
+    @apply origin-[center_bottom]
+}
+
+.p-dock-right {
+    @apply end-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 start-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
+}

package/primevue/drawer.css

@@ -0,0 +1,94 @@
+@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 p-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-s
+}
+
+.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
+}
+
+.p-overlay-mask:dir(rtl) {
+    @apply flex-row-reverse;
+}

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

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

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