@wippy-fe/theme 0.0.7

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

package/primevue/splitbutton.css

@@ -0,0 +1,34 @@
+@import './button';
+@import './tieredmenu';
+
+.p-splitbutton {
+    @apply inline-flex relative rounded-md
+}
+
+.p-splitbutton-button {
+    @apply rounded-e-none border-r-0 enabled:hover:border-r-0 enabled:active:border-r-0 focus-visible:z-10
+}
+
+.p-splitbutton-dropdown {
+    @apply rounded-s-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-e-[2rem]
+}
+
+.p-splitbutton-rounded .p-splitbutton-button {
+    @apply rounded-s-[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)]
+}

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

package/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 ps-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 ms-[1.625rem] relative start-[-2.5px]
+}
+
+.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {
+    @apply bg-primary
+}
+
+.p-stepitem:last-of-type .p-steppanel {
+    @apply ps-8
+}

package/primevue/tabs.css

@@ -0,0 +1,84 @@
+.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 start-0
+}
+
+.p-tablist-next-button {
+    @apply end-0
+}
+
+.p-tablist-prev-button:dir(rtl),
+.p-tablist-next-button:dir(rtl) {
+    @apply rotate-180
+}
+
+.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]
+}

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

package/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';

package/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 me-1
+}
+
+.p-terminal-input::-ms-clear {
+    @apply hidden
+}

package/primevue/textarea.css

@@ -0,0 +1,42 @@
+.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 disabled:opacity-100 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
+}
+
+.p-textarea-sm {
+    @apply text-sm px-[0.625rem] py-[0.375rem]
+}
+
+.p-textarea-sm {
+    @apply text-xs px-2 py-1
+}
+
+.p-textarea-lg {
+    @apply text-lg px-[0.875rem] py-[0.625rem]
+}

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