@wippy-fe/theme 0.0.7

package/primevue/galleria.css

@@ -0,0 +1,244 @@
+.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 start-0
+}
+
+.p-galleria-next-button {
+    @apply end-0
+}
+
+.p-galleria-prev-button:dir(rtl) {
+    @apply start-auto end-0
+}
+.p-galleria-next-button:dir(rtl) {
+    @apply end-auto start-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:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-prev-button:dir(rtl),
+.p-galleria:not(.p-galleria-thumbnails-right):not(.p-galleria-thumbnails-left) .p-galleria-thumbnail-next-button:dir(rtl) {
+    @apply rotate-180
+}
+
+.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
+}

package/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 start-3
+}
+
+.p-iconfield .p-inputicon:last-child {
+    @apply end-3
+}
+
+.p-iconfield .p-inputtext:not(:first-child) {
+    @apply ps-10
+}
+
+.p-iconfield .p-inputtext:not(:last-child) {
+    @apply pe-10
+}

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

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

package/primevue/imagecompare.css

@@ -0,0 +1,38 @@
+.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:dir(rtl) img + img {
+    @apply [clip-path:polygon(50%_0,100%_0,100%_100%,50%_100%)]
+}
+
+.p-imagecompare-slider {
+    @apply relative appearance-none w-[calc(100%+1rem)] h-full -ms-2 bg-transparent outline-none transition-all duration-200
+        hover:w-[calc(100%+2rem)] hover:-ms-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
+}

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

package/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-s
+}
+
+.p-inputgroupaddon:last-child {
+    @apply border-e
+}
+
+.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-s-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-e-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
+}

package/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 end-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-e-md border-s-0
+}
+
+.p-inputnumber-horizontal .p-inputnumber-input {
+    @apply order-2 rounded-none
+}
+
+.p-inputnumber-horizontal .p-inputnumber-decrement-button {
+    @apply order-1 rounded-s-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-ss-md rounded-se-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-ee-md rounded-es-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
+}

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

package/primevue/inputtext.css

@@ -0,0 +1,38 @@
+.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 dark:enabled:focus:border-primary
+        bg-surface-0 dark:bg-surface-800
+        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-xs {
+    @apply text-xs px-2 py-1
+}
+
+.p-inputtext-lg {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}
+
+.p-inputtext-fluid {
+    @apply w-full
+}

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