@fewangsit/wangsvue-presets 1.0.107 → 1.0.108-alpha.1

package/fixedasset/datatable/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var definePreset = {
     root: {
         'data-wv-name': 'datatable',
         'data-wv-section': 'root',
@@ -20,7 +20,7 @@ exports.default = {
     table: {
         'class': [
             'min-w-max w-full h-1',
-            '!border-separate !border-spacing-0 border !border-solid !border-general-100 !border-t-0 !border-l-0 !border-r-0 !rounded-lg',
+            '!border-separate !border-spacing-0 border !border-solid !border-general-100 dark:!border-general-500 !border-t-0 !border-l-0 !border-r-0 !rounded-lg',
         ],
         'data-wv-section': 'table',
     },
@@ -35,28 +35,29 @@ exports.default = {
         class: ['sticky top-0 z-50'],
     },
     headerrow: {
-        class: ['border-b border-general-100'],
+        class: ['border-b border-general-100 dark:border-general-500'],
     },
     bodyrow: function (_a) {
         var context = _a.context, props = _a.props;
         return ({
             class: [
-                'border-b border-general-100 group',
+                'border-b border-general-100 dark:border-general-500 group',
                 {
                     '!h-[28px]': props.rowHeight === 'fixed', // Style(DXJCiX2e): set table row height to fixed 35px
                 },
                 // Color
-                'text-general-800 text-xs font-medium',
+                'text-general-800 dark:text-general-50 text-xs font-medium',
                 {
                     'bg-transparent': !context.selected,
-                    'bg-primary-50 [&>td]:border-primary-200': context.selected,
+                    'bg-primary-50 [&>td]:border-primary-200 [&_[data-wv-section="multi-row"]]:border-primary-200': context.selected,
+                    'dark:bg-primary-100 dark:[&>td]:border-primary-300 dark:[&_[data-wv-section="multi-row"]]:border-primary-300 dark:text-primary-800 dark:[&_button>i]:!text-primary-800': context.selected,
                 },
                 // State
                 {
                     'focus:outline-none focus:outline-offset-0': props.selectionType,
                     // To sets the bg to single action td
-                    'hover:!bg-grayscale-50': !context.highlighted && !context.selected,
-                    'hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+                    'hover:!bg-grayscale-50 dark:hover:!bg-grayscale-800': !context.highlighted && !context.selected,
+                    'hover:!bg-warning-300 !bg-warning-200 dark:hover:!bg-warning-300 dark:!bg-warning-200 dark:text-primary-800': context.highlighted,
                 },
                 // Transition
                 {
@@ -74,19 +75,21 @@ exports.default = {
         var context = _a.context;
         return {
             'class': [
-                'text-xs font-bold text-general-800 p-2 cursor-pointer tracking-[0.02em]',
+                'text-xs font-bold text-general-800 dark:text-general-800 p-2 cursor-pointer tracking-[0.02em]',
                 {
                     'text-center': context.isParentHeader,
                     'text-left': !context.isParentHeader,
                 },
-                { 'bg-primary-200': !context.sorted || !context.sortable },
-                { 'bg-primary-300': context.sorted },
                 {
-                    'sticky right-0 hover:bg-primary-300': context.customColumn,
+                    'bg-primary-200 dark:bg-primary-300': !context.sorted || !context.sortable,
+                },
+                { 'bg-primary-300 dark:bg-primary-400': context.sorted },
+                {
+                    'sticky right-0 hover:bg-primary-300 hover:dark:bg-primary-400': context.customColumn,
                     '!cursor-default': !context.customColumn && !context.sortable,
                 },
                 'border-0 !border-b border-solid',
-                'border-general-100',
+                'border-general-100 dark:border-general-500',
             ],
             'data-wv-section': 'headercell',
         };
@@ -107,7 +110,7 @@ exports.default = {
         return ({
             'class': [
                 {
-                    '[&_[data-pc-section=box]]:!border-general-100 [&_[data-pc-section=box]]:!bg-white': !context.isSelectedAll,
+                    '[&_[data-pc-section=box]]:!border-general-100 dark:[&_[data-pc-section=box]]:!border-general-500 [&_[data-pc-section=box]]:!bg-white dark:[&_[data-pc-section=box]]:!bg-grayscale-800': !context.isSelectedAll,
                 },
             ],
             'data-wv-section': 'headercheckbox',
@@ -133,7 +136,7 @@ exports.default = {
                 { 'rotate-180': context.isExpandedAll },
                 { 'rotate-0': !context.isExpandedAll },
             ],
-            'icon-class': 'w-6 h-6 text-general-800',
+            'icon-class': 'w-6 h-6 text-general-800 dark:text-general-800',
             'data-wv-section': 'headertogglerbutton',
         });
     },
@@ -144,7 +147,7 @@ exports.default = {
     bodycell: {
         'class': [
             'text-xs px-2 py-[4.5px]',
-            'border-0 !border-b !border-solid border-general-100',
+            'border-0 !border-b !border-solid border-general-100 dark:border-general-500',
             'justify-items-start',
             '[&:has([data-wv-section=rowcheckbox])]:text-center',
             '[&:has([data-wv-section=rowcheckbox])]:text-center',
@@ -165,7 +168,9 @@ exports.default = {
         return ({
             class: [
                 'min-h-[35px] h-full flex items-center px-2',
-                { 'border-t border-general-100 border-solid': !context.firstIndex },
+                {
+                    'border-t border-general-100 dark:border-general-500 border-solid': !context.firstIndex,
+                },
             ],
         });
     },
@@ -177,7 +182,7 @@ exports.default = {
                 { 'rotate-180': context.isRowExpanded },
                 { 'rotate-0': !context.isRowExpanded },
             ],
-            'icon-class': 'w-6 h-6 text-general-800',
+            'icon-class': 'w-6 h-6 text-general-800 dark:text-general-50',
             'data-wv-section': 'rowtogglerbutton',
         });
     },
@@ -188,7 +193,7 @@ exports.default = {
     celleditableelement: {
         'class': [
             'focus:px-2',
-            'w-full inline-block py-2 focus:outline-grayscale-600 focus:outline-1',
+            'w-full inline-block py-2 focus:outline-grayscale-600 dark:focus:outline-grayscale-600 focus:outline-1',
         ],
         'data-wv-section': 'celleditableelement',
     },
@@ -198,10 +203,10 @@ exports.default = {
             'class': [
                 'w-[35px]',
                 {
-                    'sticky right-0 bg-white': props.useOption,
-                    '!bg-primary-50': context.selected,
-                    'group-hover:!bg-grayscale-50': !context.highlighted && !context.selected,
-                    'group-hover:!bg-warning-300 !bg-warning-200': context.highlighted,
+                    'sticky right-0 bg-white dark:bg-grayscale-900': props.useOption,
+                    '!bg-primary-50 dark:!bg-primary-100': context.selected,
+                    'group-hover:!bg-grayscale-50 dark:group-hover:!bg-grayscale-800': !context.highlighted && !context.selected,
+                    'group-hover:!bg-warning-300 !bg-warning-200 dark:group-hover:!bg-warning-300 dark:!bg-warning-200': context.highlighted,
                 },
             ],
             'data-wv-section': 'rowsingleactioncell',
@@ -216,7 +221,7 @@ exports.default = {
         return ({
             'class': [
                 {
-                    'pointer-events-none !border-general-100 [&>i]:text-general-200': props.disableAllRows,
+                    'pointer-events-none !border-general-100 dark:!border-general-500 [&>i]:text-general-200 dark:[&>i]:text-general-400': props.disableAllRows,
                 },
                 { 'pointer-events-auto': !props.disableAllRows },
                 '!rounded-full',
@@ -230,7 +235,7 @@ exports.default = {
         class: 'p-4 invisible',
     },
     nodatalottiewrapper: {
-        'class': 'w-full p-4 absolute top-[37.5px] inset-x-0 pointer-events-none',
+        'class': 'w-full p-4 absolute inset-x-0 pointer-events-none',
         'data-wv-section': 'nodatalottiewrapper',
     },
     nodatalottie: {
@@ -241,7 +246,7 @@ exports.default = {
         class: 'text-general-body',
     },
     loadingtablewrapper: {
-        'class': 'w-full p-4 flex items-center justify-center absolute top-[37.5px] inset-x-0 pointer-events-none',
+        'class': 'w-full p-4 flex items-center justify-center absolute inset-x-0 pointer-events-none',
         'data-wv-section': 'loadingtablewrapper',
     },
     loadingtablelottie: {
@@ -251,11 +256,9 @@ exports.default = {
     paginator: function (_a) {
         var context = _a.context;
         return ({
-            'current-page-report-template': context.totalRecords
-                ? 'Showing {first} to {last} of {totalRecords}'
-                : 'No Data Found',
-            'class': '',
-            'template': 'FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
+            class: '',
+            template: 'FirstPageLink PrevPageLink PageLinks JumpToPageInput NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown',
         });
     },
 };
+exports.default = definePreset;

package/fixedasset/dialog/index.d.ts

@@ -1,4 +1,5 @@
-declare namespace _default {
+export default definePreset;
+declare namespace definePreset {
     function root({ state }: {
         state: any;
     }): {
@@ -67,10 +68,10 @@ declare namespace _default {
     }): {
         class: (string | {
             'p-5': boolean;
-            'has-[.mask-active]:bg-transparent bg-dialog-mask'?: undefined;
+            'has-[.mask-active]:bg-transparent bg-dialog-mask dark:bg-grayscale-950/80'?: undefined;
             'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm'?: undefined;
         } | {
-            'has-[.mask-active]:bg-transparent bg-dialog-mask': any;
+            'has-[.mask-active]:bg-transparent bg-dialog-mask dark:bg-grayscale-950/80': any;
             'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': any;
             'p-5'?: undefined;
         })[];
@@ -84,4 +85,3 @@ declare namespace _default {
         leaveToClass: string;
     };
 }
-export default _default;

package/fixedasset/dialog/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var definePreset = {
     root: function (_a) {
         var state = _a.state;
         return ({
@@ -17,7 +17,7 @@ exports.default = {
                 'p-6',
                 'gap-3',
                 // Background
-                'bg-white',
+                'bg-white dark:bg-grayscale-900',
                 // Size
                 'max-h-[90vh]',
                 { 'sm:max-w-[90vw]': !state.maximized },
@@ -47,12 +47,12 @@ exports.default = {
             'rounded-tl-lg',
             'rounded-tr-lg',
             // Colors
-            'text-general-800',
+            'text-general-800 dark:text-general-50',
         ],
     },
     title: {
         class: [
-            'text-general-800 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
+            'text-general-800 dark:text-general-50 text-sm font-bold leading-[19.12px] tracking-[0.24px]',
         ],
     },
     icons: {
@@ -69,12 +69,12 @@ exports.default = {
             'border-0',
             'rounded-full',
             // Colors
-            'text-general-200',
+            'text-general-200 dark:text-general-400',
             'bg-transparent',
             // Transitions
             'transition duration-200 ease-in-out',
             // States
-            'hover:bg-general-50 hover:text-general-300',
+            'hover:bg-general-50 hover:text-general-300 dark:hover:bg-grayscale-700 dark:hover:text-general-200',
             // Misc
             'overflow-hidden',
         ],
@@ -92,15 +92,14 @@ exports.default = {
             'border-0',
             'rounded-full',
             // Colors
-            'text-surface-500',
+            'text-surface-500 dark:text-general-300',
             'bg-transparent',
             // Transitions
             'transition duration-200 ease-in-out',
             // States
-            'hover:text-surface-700',
-            'hover:bg-surface-100',
+            'hover:bg-general-50 hover:text-general-300 dark:hover:bg-grayscale-700 dark:hover:text-general-200',
             'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
-            'focus:ring-primary-500',
+            'focus:ring-primary-500 dark:focus:ring-primary-800',
             // Misc
             'overflow-hidden',
         ],
@@ -110,7 +109,7 @@ exports.default = {
             // Display
             'inline-block',
             // Color
-            'text-general-200',
+            'text-general-200 dark:text-general-200',
             // Size
             'w-3.5',
             'h-3.5',
@@ -130,13 +129,13 @@ exports.default = {
         return ({
             class: [
                 // Font
-                '!text-general-800 text-xs font-medium tracking-[0.02em]',
+                '!text-general-800 dark:!text-general-100 text-xs font-medium tracking-[0.02em]',
                 'pr-1.5 -mr-1.5 pl-1.5 -ml-1.5 pt-1.5 -mt-1.5 !pb-1.5 -mb-1.5',
                 // Layout
                 'flex flex-col gap-3',
                 // Shape
                 // Colors
-                'text-surface-600',
+                'text-surface-600 dark:text-surface-200',
                 // Misc
                 'overflow-y-auto scrollbar-w-none',
                 {
@@ -159,7 +158,7 @@ exports.default = {
             'empty:hidden',
             // Colors
             'bg-inherit',
-            'text-surface-700/80',
+            'text-surface-700/80 dark:text-surface-200/80',
         ],
     },
     mask: function (_a) {
@@ -172,7 +171,7 @@ exports.default = {
                 { 'p-5': !props.position == 'full' },
                 // Background and Effects
                 {
-                    'has-[.mask-active]:bg-transparent bg-dialog-mask': props.modal,
+                    'has-[.mask-active]:bg-transparent bg-dialog-mask dark:bg-grayscale-950/80': props.modal,
                     'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal,
                 },
             ],
@@ -210,7 +209,7 @@ exports.default = {
                             enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
                             enterActiveClass: 'transition-all duration-200 ease-out',
                             leaveActiveClass: 'transition-all duration-200 ease-out',
-                            leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
+                            leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
                         }
                         : {
                             enterFromClass: 'opacity-0 scale-75 mask-active',
@@ -220,3 +219,4 @@ exports.default = {
                         };
     },
 };
+exports.default = definePreset;

package/fixedasset/dialogconfirm/index.d.ts

@@ -1,4 +1,5 @@
-declare namespace _default {
+export default definePreset;
+declare namespace definePreset {
     let root: {
         class: string[];
         'data-wv-name': (attrsDataName: any) => any;
@@ -39,4 +40,3 @@ declare namespace _default {
         'data-wv-section': string;
     };
 }
-export default _default;

package/fixedasset/dialogconfirm/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var definePreset = {
     root: {
         'class': ['!w-[clamp(360px,75vw,400px)]'],
         'data-wv-name': function (attrsDataName) { return attrsDataName !== null && attrsDataName !== void 0 ? attrsDataName : 'root'; },
@@ -23,7 +23,7 @@ exports.default = {
     headertitle: function (severity) { return ({
         'class': [
             '!text-[14px] leading-6 !font-bold tracking-[0.02em]',
-            'text-general-800',
+            'text-general-800 dark:text-general-50',
         ],
         'data-wv-section': 'dialog-confirm-title',
     }); },
@@ -48,3 +48,4 @@ exports.default = {
         'data-wv-section': 'dialog-confirm-footer',
     },
 };
+exports.default = definePreset;

package/fixedasset/dialogform/index.d.ts

@@ -1,4 +1,5 @@
-declare namespace _default {
+export default definePreset;
+declare namespace definePreset {
     let root: {
         class: string[];
         style: (computedWidth: any) => string;
@@ -68,4 +69,3 @@ declare namespace _default {
         'data-wv-section': string;
     };
 }
-export default _default;

package/fixedasset/dialogform/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
+var definePreset = {
     root: {
         'class': ['max-w-[90vw]'],
         'style': function (computedWidth) { return "width: ".concat(computedWidth); },
@@ -12,7 +12,7 @@ exports.default = {
     },
     headericon: { 'class': 'text-2xl', 'data-wv-section': 'headericon' },
     headertitle: {
-        'class': 'mr-auto text-general-800 text-center !text-[0.9rem] leading-[1.125rem] !font-bold tracking-[0.28px]',
+        'class': 'mr-auto text-general-800 dark:text-general-50 text-center !text-[0.9rem] leading-[1.125rem] !font-bold tracking-[0.28px]',
         'data-wv-section': 'dialog-form-title',
     },
     expandasidebutton: {
@@ -20,7 +20,7 @@ exports.default = {
         'data-wv-section': 'expand-aside-button',
     },
     closedialog: {
-        'class': '!p-0.5 !text-general-200',
+        'class': '!p-0.5 !text-general-200 dark:!text-general-500',
         'data-wv-section': 'closebutton',
     },
     container: function (expanded) { return ({
@@ -66,3 +66,4 @@ exports.default = {
         'data-wv-section': 'save-submit-button',
     },
 };
+exports.default = definePreset;

package/fixedasset/dropdown/index.d.ts

@@ -1,4 +1,5 @@
-declare namespace _default {
+export default definePreset;
+declare namespace definePreset {
     function root({ props, state }: {
         props: any;
         state: any;
@@ -12,13 +13,13 @@ declare namespace _default {
         props: any;
     }): {
         class: (string | {
-            '!text-general-200 font-light': boolean;
-            'text-general-800 font-medium': boolean;
+            '!text-general-200 dark:text-general-600 font-light': boolean;
+            'text-general-800 font-medium dark:text-general-50': boolean;
             'pr-7'?: undefined;
         } | {
             'pr-7': any;
-            '!text-general-200 font-light'?: undefined;
-            'text-general-800 font-medium'?: undefined;
+            '!text-general-200 dark:text-general-600 font-light'?: undefined;
+            'text-general-800 font-medium dark:text-general-50'?: undefined;
         })[];
     };
     namespace trigger {
@@ -60,60 +61,60 @@ declare namespace _default {
         context: any;
     }): {
         class: (string | {
-            'text-general-800': boolean;
-            'text-general-400'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-primary-500'?: undefined;
-            'text-general-900'?: undefined;
+            'text-general-800 dark:text-general-50': boolean;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
-            'text-general-400': any;
-            'text-general-800'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-primary-500'?: undefined;
-            'text-general-900'?: undefined;
+            'text-general-400 dark:text-general-100': any;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
-            'bg-primary-50': any;
-            'text-general-800'?: undefined;
-            'text-general-400'?: undefined;
-            'text-primary-500'?: undefined;
-            'text-general-900'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800': any;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
-            'text-primary-500': any;
-            'text-general-800'?: undefined;
-            'text-general-400'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-general-900'?: undefined;
+            'text-primary-500 dark:text-primary-300': any;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
-            'text-general-900': any;
-            'text-general-800'?: undefined;
-            'text-general-400'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-primary-500'?: undefined;
+            'text-general-900 dark:text-general-100': any;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
             'pointer-events-none cursor-default': any;
-            'text-general-800'?: undefined;
-            'text-general-400'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-primary-500'?: undefined;
-            'text-general-900'?: undefined;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'cursor-pointer'?: undefined;
         } | {
             'cursor-pointer': boolean;
-            'text-general-800'?: undefined;
-            'text-general-400'?: undefined;
-            'bg-primary-50'?: undefined;
-            'text-primary-500'?: undefined;
-            'text-general-900'?: undefined;
+            'text-general-800 dark:text-general-50'?: undefined;
+            'text-general-400 dark:text-general-100'?: undefined;
+            'bg-primary-50 dark:bg-grayscale-800'?: undefined;
+            'text-primary-500 dark:text-primary-300'?: undefined;
+            'text-general-900 dark:text-general-100'?: undefined;
             'pointer-events-none cursor-default'?: undefined;
         })[];
     };
@@ -165,4 +166,3 @@ declare namespace _default {
         export { _class_4 as class };
     }
 }
-export default _default;

package/fixedasset/dropdown/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var index_js_1 = require("../multiselect/index.js");
-exports.default = {
+var definePreset = {
     root: function (_a) {
         var props = _a.props, state = _a.state;
         return ({
@@ -26,14 +26,14 @@ exports.default = {
                 //Font
                 'text-xs tracking-[0.02em]',
                 {
-                    '!text-general-200 font-light': props.modelValue == null,
-                    'text-general-800 font-medium': props.modelValue != null,
+                    '!text-general-200 dark:text-general-600 font-light': props.modelValue == null,
+                    'text-general-800 font-medium dark:text-general-50': props.modelValue != null,
                 },
                 // Display
                 'flex items-center',
                 // Color and Background
-                'bg-transparent',
-                'placeholder:text-general-200',
+                'bg-transparent dark:bg-transparent',
+                'placeholder:text-general-200 dark:placeholder:text-grayscale-600',
                 // Sizing and Spacing
                 'h-[26px] w-full',
                 'px-3 pr-0',
@@ -64,8 +64,8 @@ exports.default = {
             'flex items-center justify-center',
             'shrink-0',
             // Color and Background
-            'bg-transparent',
-            'text-general-200',
+            'bg-transparent dark:bg-transparent',
+            'text-general-200 dark:text-grayscale-900',
             // Size
             'w-6 h-6',
             // Shape
@@ -89,7 +89,7 @@ exports.default = {
                 'shadow-panel',
                 'overflow-clip',
                 // Color
-                'bg-grayscale-100',
+                'bg-grayscale-100 dark:bg-general-600',
             ],
         });
     },
@@ -100,7 +100,8 @@ exports.default = {
                 // Sizing
                 'max-h-[15rem]',
                 // Color
-                'bg-white',
+                'bg-white dark:bg-grayscale-900',
+                'text-general-800 dark:text-general-100',
                 // Misc
                 'overflow-auto',
                 {
@@ -139,20 +140,20 @@ exports.default = {
                 'py-1.5 px-4',
                 // Color
                 {
-                    'text-general-800': !context.focused && !context.selected && !context.disabled,
+                    'text-general-800 dark:text-general-50': !context.focused && !context.selected && !context.disabled,
                 },
                 {
-                    'text-general-400': !context.focused && !context.selected && context.disabled,
+                    'text-general-400 dark:text-general-100': !context.focused && !context.selected && context.disabled,
                 },
-                { 'bg-primary-50': context.focused },
+                { 'bg-primary-50 dark:bg-grayscale-800': context.focused },
                 {
-                    'text-primary-500': context.focused || context.selected,
+                    'text-primary-500 dark:text-primary-300': context.focused || context.selected,
                 },
                 {
-                    'text-general-900': !context.focused && context.selected,
+                    'text-general-900 dark:text-general-100': !context.focused && context.selected,
                 },
                 //States
-                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500',
+                'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-300',
                 // Misc
                 { 'pointer-events-none cursor-default': context.disabled },
                 { 'cursor-pointer': !context.disabled },
@@ -170,8 +171,6 @@ exports.default = {
             'm-0',
             'py-2 px-4',
             // Color
-            'text-surface-800',
-            'bg-surface-0',
             // Misc
             'cursor-auto',
         ],
@@ -183,8 +182,7 @@ exports.default = {
             // Spacing
             'py-2 px-4',
             // Color
-            'text-surface-800',
-            'bg-transparent',
+            'bg-transparent dark:bg-transparent',
         ],
     },
     header: index_js_1.default === null || index_js_1.default === void 0 ? void 0 : index_js_1.default.header,
@@ -199,7 +197,7 @@ exports.default = {
     clearicon: {
         class: [
             // Color
-            'text-general-200',
+            'text-general-200 dark:text-grayscale-800',
             // Position
             'absolute',
             'top-1/2',
@@ -215,6 +213,7 @@ exports.default = {
         leaveToClass: 'opacity-0',
     },
     loadingplaceholder: {
-        class: 'text-general-200 font-light',
+        class: 'text-general-200 dark:text-grayscale-500 font-light',
     },
 };
+exports.default = definePreset;