@wippy-fe/theme 0.0.7

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

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

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

package/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 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
+}
+
+.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 start-0 bottom-0 will-change-[inset-inline-start,inset-inline-end];
+
+}
+
+.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% {
+        inset-inline-start: -35%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+    100% {
+        inset-inline-start: 100%;
+        inset-inline-end: -90%;
+    }
+}
+
+@keyframes p-progressbar-indeterminate-anim-short {
+    0% {
+        inset-inline-start: -200%;
+        inset-inline-end: 100%;
+    }
+    60% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+    100% {
+        inset-inline-start: 107%;
+        inset-inline-end: -8%;
+    }
+}

package/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 start-0 end-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);
+    }
+}

package/primevue/radiobutton.css

@@ -0,0 +1,93 @@
+.p-radiobutton {
+    @apply relative inline-flex select-none w-5 h-5
+}
+
+.p-radiobutton-input {
+    @apply cursor-pointer disabled:cursor-default appearance-none absolute start-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
+}
+
+.p-radiobutton-sm,
+.p-radiobutton-sm .p-radiobutton-box {
+    @apply w-4 h-4
+}
+
+.p-radiobutton-sm .p-radiobutton-icon {
+    @apply w-2 h-2
+}
+
+.p-radiobutton-lg,
+.p-radiobutton-lg .p-radiobutton-box {
+    @apply w-6 h-6
+}
+
+.p-radiobutton-lg .p-radiobutton-icon {
+    @apply w-4 h-4
+}

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

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

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

package/primevue/scrolltop.css

@@ -0,0 +1,25 @@
+@import './button';
+
+.p-scrolltop.p-button {
+    @apply fixed bottom-5 end-5
+}
+
+.p-scrolltop-sticky.p-button {
+    @apply sticky flex ms-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
+}

package/primevue/select.css

@@ -0,0 +1,144 @@
+@import './button';
+@import './inputtext';
+@import './iconfield';
+
+.p-select {
+    @apply inline-flex cursor-pointer relative select-none rounded-md
+        bg-surface-0 dark:bg-surface-800
+        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 end-10
+}
+
+.p-select-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent
+        text-surface-500 dark:text-surface-400 w-10 rounded-e-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 pe-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
+}
+
+.p-select-sm .p-select-label {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-select-sm .p-select-dropdown .p-icon {
+    @apply text-sm w-[0.875rem] h-[0.875rem]
+}
+
+.p-select-lg .p-select-label {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-select-lg .p-select-dropdown .p-icon {
+    @apply text-lg w-[1.125rem] h-[1.125rem]
+}

package/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-s-0
+}
+
+.p-selectbutton .p-togglebutton:focus-visible {
+    @apply relative z-10
+}
+
+.p-selectbutton .p-togglebutton:first-child {
+    @apply border-s rounded-s-md
+}
+
+.p-selectbutton .p-togglebutton:last-child {
+    @apply rounded-e-md
+}
+
+.p-selectbutton.p-invalid {
+    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
+}

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

package/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 start-0 h-full
+}
+
+.p-slider-horizontal .p-slider-handle {
+    @apply top-1/2 -mt-[10px] -ms-[10px]
+}
+
+.p-slider-vertical {
+    @apply min-h-[100px] w-[3px]
+}
+
+.p-slider-vertical .p-slider-handle {
+    @apply start-1/2 -mb-[10px] -ms-[10px]
+}
+
+.p-slider-vertical .p-slider-range {
+    @apply bottom-0 start-0 w-full
+}