@shuriken-ui/tailwind 1.2.0 → 1.2.2

package/dist/config.d.cts

@@ -1,5 +1,5 @@
-import * as typography from '@tailwindcss/typography';
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import * as typography from '@tailwindcss/typography';
 import { Config } from 'tailwindcss';
 
 declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
     presets: {
         darkMode: "class";
         content: never[];
-        plugins: ({
+        plugins: (typeof typography | {
+            handler: () => void;
+        } | {
             handler: tailwindcss_types_config.PluginCreator;
             config?: Partial<Config> | undefined;
-        } | typeof typography | {
-            handler: () => void;
         })[];
         theme: {
             fontFamily: {

package/dist/config.d.mts

@@ -1,5 +1,5 @@
-import * as typography from '@tailwindcss/typography';
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import * as typography from '@tailwindcss/typography';
 import { Config } from 'tailwindcss';
 
 declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
     presets: {
         darkMode: "class";
         content: never[];
-        plugins: ({
+        plugins: (typeof typography | {
+            handler: () => void;
+        } | {
             handler: tailwindcss_types_config.PluginCreator;
             config?: Partial<Config> | undefined;
-        } | typeof typography | {
-            handler: () => void;
         })[];
         theme: {
             fontFamily: {

package/dist/config.d.ts

@@ -1,5 +1,5 @@
-import * as typography from '@tailwindcss/typography';
 import * as tailwindcss_types_config from 'tailwindcss/types/config';
+import * as typography from '@tailwindcss/typography';
 import { Config } from 'tailwindcss';
 
 declare const _default: {
@@ -7,11 +7,11 @@ declare const _default: {
     presets: {
         darkMode: "class";
         content: never[];
-        plugins: ({
+        plugins: (typeof typography | {
+            handler: () => void;
+        } | {
             handler: tailwindcss_types_config.PluginCreator;
             config?: Partial<Config> | undefined;
-        } | typeof typography | {
-            handler: () => void;
         })[];
         theme: {
             fontFamily: {

package/dist/index.cjs

@@ -10,7 +10,6 @@ require('tailwindcss/plugin');
 require('defu');
 
 function withShurikenUI(config) {
-  console.log("withShurikenUI", config);
   if (preset.hasPreset(config)) {
     return config;
   }

package/dist/index.mjs

@@ -9,7 +9,6 @@ import 'tailwindcss/plugin';
 import 'defu';
 
 function withShurikenUI(config) {
-  console.log("withShurikenUI", config);
   if (hasPreset(config)) {
     return config;
   }

package/dist/preset.cjs

@@ -120,10 +120,10 @@ const accordion = plugin__default.withOptions(
             [`@apply border-${config.outer.border} dark:border-${config.outer.borderDark} dark:bg-${config.outer.bgDark} ms-2 flex h-${config.outer.size} w-${config.outer.size} items-center justify-center rounded-${config.outer.rounded} border bg-${config.outer.bg} transition-all duration-${config.outer.duration}`]: {}
           },
           [`.${prefix}chevron-icon`]: {
-            [`@apply h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]: {}
+            [`@apply text-muted-400 h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]: {}
           },
           [`.${prefix}plus-icon`]: {
-            [`@apply h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]: {}
+            [`@apply text-muted-400 h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]: {}
           },
           [`.${prefix}accordion-content`]: {
             [`@apply px-${config.content.space} pb-${config.content.space} font-${config.content.font} text-${config.content.text} dark:text-${config.content.textDark}`]: {}
@@ -350,7 +350,7 @@ const defaultAutocompleteConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900/75",
     border: "muted-200",
     borderDark: "muted-700",
@@ -365,7 +365,7 @@ const defaultAutocompleteConfig = {
       bgDark: "muted-800"
     },
     resultsInner: {
-      bg: "muted-200",
+      bg: "white",
       bgDark: "muted-700"
     }
   },
@@ -385,7 +385,7 @@ const defaultAutocompleteConfig = {
       bgDark: "muted-950/75"
     },
     resultsInner: {
-      bg: "muted-100",
+      bg: "white",
       bgDark: "muted-700"
     }
   },
@@ -531,7 +531,7 @@ const autocomplete = plugin__default.withOptions(
             [`@apply px-2 py-1`]: {}
           },
           [`.${prefix}autocomplete-results-item-inner`]: {
-            [`@apply flex gap-2 cursor-pointer items-center p-${config.itemInner.space} transition-colors duration-${config.itemInner.duration}`]: {},
+            [`@apply text-muted-800 dark:text-muted-100 flex gap-2 cursor-pointer items-center p-${config.itemInner.space} transition-colors duration-${config.itemInner.duration}`]: {},
             [`.${prefix}autocomplete-results-item-selected`]: {
               [`@apply ms-auto flex items-center justify-center`]: {}
             },
@@ -647,7 +647,7 @@ const autocomplete = plugin__default.withOptions(
               [`@apply border bg-${config.default.bg} border-${config.default.border} text-${config.default.text} placeholder:text-${config.default.textPlaceholder} dark:border-${config.default.borderDark} dark:bg-${config.default.bgDark} dark:text-${config.default.textDark} dark:placeholder:text-${config.default.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.default.results.border} dark:border-${config.default.results.borderDark} dark:bg-${config.default.results.bgDark} border bg-${config.default.bg}`]: {}
+              [`@apply border-${config.default.results.border} dark:border-${config.default.results.borderDark} dark:bg-${config.default.results.bgDark} border bg-${config.default.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.default.resultsInner.bg} dark:bg-${config.default.resultsInner.bgDark}`]: {}
@@ -658,7 +658,7 @@ const autocomplete = plugin__default.withOptions(
               [`@apply border bg-${config.defaultContrast.bg} border-${config.defaultContrast.border} text-${config.defaultContrast.text} placeholder:text-${config.defaultContrast.textPlaceholder} dark:border-${config.defaultContrast.borderDark} dark:bg-${config.defaultContrast.bgDark} dark:text-${config.defaultContrast.textDark} dark:placeholder:text-${config.defaultContrast.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.defaultContrast.results.border} dark:border-${config.defaultContrast.results.borderDark} dark:bg-${config.defaultContrast.results.bgDark} border bg-${config.defaultContrast.bg}`]: {}
+              [`@apply border-${config.defaultContrast.results.border} dark:border-${config.defaultContrast.results.borderDark} dark:bg-${config.defaultContrast.results.bgDark} border bg-${config.defaultContrast.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.defaultContrast.resultsInner.bg} dark:bg-${config.defaultContrast.resultsInner.bgDark}`]: {}
@@ -669,7 +669,7 @@ const autocomplete = plugin__default.withOptions(
               [`@apply border bg-${config.muted.bg} border-${config.muted.border} text-${config.muted.text} placeholder:text-${config.muted.textPlaceholder} dark:border-${config.muted.borderDark} dark:bg-${config.muted.bgDark} dark:text-${config.muted.textDark} dark:placeholder:text-${config.muted.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.muted.results.border} dark:border-${config.muted.results.borderDark} dark:bg-${config.muted.results.bgDark} border bg-${config.muted.bg}`]: {}
+              [`@apply border-${config.muted.results.border} dark:border-${config.muted.results.borderDark} dark:bg-${config.muted.results.bgDark} border bg-${config.muted.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.muted.resultsInner.bg} dark:bg-${config.muted.resultsInner.bgDark}`]: {}
@@ -680,7 +680,7 @@ const autocomplete = plugin__default.withOptions(
               [`@apply border bg-${config.mutedContrast.bg} border-${config.mutedContrast.border} text-${config.mutedContrast.text} placeholder:text-${config.mutedContrast.textPlaceholder} dark:border-${config.mutedContrast.borderDark} dark:bg-${config.mutedContrast.bgDark} dark:text-${config.mutedContrast.textDark} dark:placeholder:text-${config.mutedContrast.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.mutedContrast.results.border} dark:border-${config.mutedContrast.results.borderDark} dark:bg-${config.mutedContrast.results.bgDark} border bg-${config.mutedContrast.bg}`]: {}
+              [`@apply border-${config.mutedContrast.results.border} dark:border-${config.mutedContrast.results.borderDark} dark:bg-${config.mutedContrast.results.bgDark} border bg-${config.mutedContrast.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.mutedContrast.resultsInner.bg} dark:bg-${config.mutedContrast.resultsInner.bgDark}`]: {}
@@ -2847,7 +2847,6 @@ const defaultButtonConfig = {
 };
 const button = plugin__default.withOptions(
   function(options) {
-    console.log("register button plugin");
     let { prefix } = defu.defu(options, defaultPluginOptions);
     if (prefix) {
       prefix = `${prefix}-`;
@@ -3445,6 +3444,7 @@ const defaultDropdownItemConfig = {
     text: "primary-500"
   },
   rounded: {
+    straight: "none",
     default: "md",
     smooth: "lg",
     curved: "xl"
@@ -3462,7 +3462,7 @@ const dropdownItem = plugin__default.withOptions(
       );
       addComponents({
         [`.${prefix}dropdown-item`]: {
-          [`@apply flex w-full items-center justify-start gap-2 rounded-${config.itemRounded} px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
+          [`@apply flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
           [`.${prefix}item-content`]: {
             [`@apply grow`]: {}
           },
@@ -3540,7 +3540,7 @@ const defaultDropdownConfig = {
     shadowColor: "muted-500/10",
     shadowColorDark: "muted-800/10",
     headerTitle: {
-      font: "heading",
+      font: "sans",
       fontSize: "medium",
       text: "muted-500",
       textDark: "muted-200",
@@ -3623,7 +3623,7 @@ const dropdown = plugin__default.withOptions(
           [`.${prefix}context-button`]: {
             [`@apply dark:ring-offset-${config.contextButton.ringOffsetDark} inline-flex h-${config.contextButton.size} w-${config.contextButton.size} items-center justify-center rounded-${config.contextButton.rounded} ring-1 ring-transparent transition-all duration-${config.contextButton.duration} group-hover:ring-${config.contextButton.ringGroupHover}`]: {},
             [`.${prefix}context-button-inner`]: {
-              [`@apply border-${config.contextButton.inner.border} dark:border-${config.contextButton.inner.borderDark} dark:bg-${config.contextButton.inner.bg} flex h-${config.contextButton.inner.size} w-${config.contextButton.inner.size} items-center justify-center rounded-${config.contextButton.inner.rounded} border bg-${config.contextButton.inner.bg}`]: {}
+              [`@apply border-${config.contextButton.inner.border} dark:border-${config.contextButton.inner.borderDark} dark:bg-${config.contextButton.inner.bgDark} flex h-${config.contextButton.inner.size} w-${config.contextButton.inner.size} items-center justify-center rounded-${config.contextButton.inner.rounded} border bg-${config.contextButton.inner.bg}`]: {}
             },
             [`.${prefix}context-icon`]: {
               [`@apply text-${config.contextButton.icon.text} h-${config.contextButton.icon.size} w-${config.contextButton.icon.size} transition-transform duration-${config.contextButton.icon.duration}`]: {}
@@ -3776,7 +3776,7 @@ const defaultFullscreenDropfileConfig = {
     text: "primary-500",
     textSize: "6xl"
   },
-  labelTextSize: "2xl"
+  labelTextSize: "base"
 };
 const fullscreenDropfile = plugin__default.withOptions(
   function(options) {
@@ -4348,7 +4348,7 @@ const inputFileRegular = plugin__default.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}input-file-inner`]: {
-            [`@apply ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
+            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
           },
           [`.${prefix}input-file-addon`]: {
             [`@apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100`]: {}
@@ -4360,7 +4360,7 @@ const inputFileRegular = plugin__default.withOptions(
             [`@apply ms-2 inline-flex truncate text-${config.text.text}`]: {}
           },
           [`.${prefix}input-file-placeload`]: {
-            [`@apply absolute start-0 flex h-10 w-full items-center`]: {},
+            [`@apply absolute -end-8 flex w-[70%] items-center`]: {},
             [`.${prefix}placeload`]: {
               [`@apply h-3 w-full max-w-[75%] rounded`]: {}
             }
@@ -4386,7 +4386,7 @@ const inputFileRegular = plugin__default.withOptions(
           },
           [`&.${prefix}input-color-focus`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply focus:border-${config.colorFocus}`]: {}
+              [`@apply focus-within:!border-${config.colorFocus}`]: {}
             }
           },
           [`&.${prefix}input-file-loading`]: {
@@ -4426,6 +4426,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-8 px-2`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-2.5`]: {}
             }
           },
           [`&.${prefix}input-sm.${prefix}has-icon`]: {
@@ -4438,6 +4441,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.sm.iconSize} h-${config.hasIcon.sm.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-2.5`]: {}
             }
           },
           [`&.${prefix}input-md:not(.${prefix}has-icon)`]: {
@@ -4447,6 +4453,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-10 px-3`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-3.5`]: {}
             }
           },
           [`&.${prefix}input-md.${prefix}has-icon`]: {
@@ -4459,6 +4468,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.md.iconSize} h-${config.hasIcon.md.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-3.5`]: {}
             }
           },
           [`&.${prefix}input-lg:not(.${prefix}has-icon)`]: {
@@ -4468,6 +4480,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-12 px-4`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-[1.2rem]`]: {}
             }
           },
           [`&.${prefix}input-lg.${prefix}has-icon`]: {
@@ -4480,6 +4495,9 @@ const inputFileRegular = plugin__default.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.lg.iconSize} h-${config.hasIcon.lg.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-[1.2rem]`]: {}
             }
           },
           [`&:hover`]: {
@@ -4605,7 +4623,7 @@ const inputFile = plugin__default.withOptions(
       );
       addComponents({
         [`.${prefix}input-file`]: {
-          [`@apply relative`]: {},
+          [`@apply relative block`]: {},
           [`&.${prefix}input-file-drop`]: {
             [`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]: {},
             [`.${prefix}drop-area-inner`]: {
@@ -5390,6 +5408,7 @@ const defaultListboxConfig = {
     },
     activeOrHover: {
       text: "primary-600",
+      textDark: "primary-400",
       bg: "primary-500/10"
     }
   },
@@ -5499,7 +5518,7 @@ const defaultListboxConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900",
     border: "muted-300",
     borderDark: "muted-700",
@@ -5523,7 +5542,7 @@ const defaultListboxConfig = {
     }
   },
   mutedContrast: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-950",
     border: "muted-300",
     borderDark: "muted-800",
@@ -5702,8 +5721,11 @@ const listbox = plugin__default.withOptions(
                 [`@apply text-${config.option.inner.text}`]: {}
               }
             },
+            [`&:not(.${prefix}active), &:not(:hover)`]: {
+              [`@apply text-muted-600 dark:text-muted-200`]: {}
+            },
             [`&.${prefix}active, &:hover`]: {
-              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text}`]: {}
+              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text} dark:text-${config.option.activeOrHover.textDark}`]: {}
             }
           },
           [`.${prefix}listbox-error-text`]: {
@@ -6682,7 +6704,7 @@ const defaultPaginationConfig = {
     space: "1",
     notActive: {
       bg: "white",
-      bgDark: "primary-500",
+      bgDark: "muted-800",
       bgHover: "muted-100",
       bgHoverDark: "muted-900",
       text: "muted-500",
@@ -7475,7 +7497,7 @@ const defaultSelectConfig = {
       textPlaceholderDark: "muted-600"
     },
     muted: {
-      bg: "muted-200",
+      bg: "muted-100",
       bgDark: "muted-900/75",
       border: "muted-200",
       borderDark: "muted-700",
@@ -8060,7 +8082,7 @@ const defaultSwitchBallConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8182,7 +8204,7 @@ const defaultSwitchThinConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8376,10 +8398,10 @@ const tabSlider = plugin__default.withOptions(
             }
           },
           [`&.${prefix}tabs-sm`]: {
-            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsSM.twoSlotsW}`]: {}
             },
-            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsSM.threeSlotsW}`]: {}
             },
             [`.${prefix}tab-slider-track`]: {
@@ -8387,10 +8409,10 @@ const tabSlider = plugin__default.withOptions(
             }
           },
           [`&.${prefix}tabs-md`]: {
-            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsMD.twoSlotsW}`]: {}
             },
-            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsMD.threeSlotsW}`]: {}
             },
             [`.${prefix}tab-slider-track`]: {
@@ -8439,7 +8461,7 @@ const tabSlider = plugin__default.withOptions(
 
 const defaultTabsConfig = {
   inner: {
-    font: "alt",
+    font: "sans",
     space: "6"
   },
   item: {
@@ -9018,7 +9040,7 @@ const defaultTextareaConfig = {
       textPlaceholderDark: "muted-600"
     },
     muted: {
-      bg: "muted-200",
+      bg: "muted-100",
       bgDark: "muted-900/75",
       border: "muted-200",
       borderDark: "muted-700",

package/dist/preset.mjs

@@ -109,10 +109,10 @@ const accordion = plugin.withOptions(
             [`@apply border-${config.outer.border} dark:border-${config.outer.borderDark} dark:bg-${config.outer.bgDark} ms-2 flex h-${config.outer.size} w-${config.outer.size} items-center justify-center rounded-${config.outer.rounded} border bg-${config.outer.bg} transition-all duration-${config.outer.duration}`]: {}
           },
           [`.${prefix}chevron-icon`]: {
-            [`@apply h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]: {}
+            [`@apply text-muted-400 h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]: {}
           },
           [`.${prefix}plus-icon`]: {
-            [`@apply h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]: {}
+            [`@apply text-muted-400 h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]: {}
           },
           [`.${prefix}accordion-content`]: {
             [`@apply px-${config.content.space} pb-${config.content.space} font-${config.content.font} text-${config.content.text} dark:text-${config.content.textDark}`]: {}
@@ -339,7 +339,7 @@ const defaultAutocompleteConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900/75",
     border: "muted-200",
     borderDark: "muted-700",
@@ -354,7 +354,7 @@ const defaultAutocompleteConfig = {
       bgDark: "muted-800"
     },
     resultsInner: {
-      bg: "muted-200",
+      bg: "white",
       bgDark: "muted-700"
     }
   },
@@ -374,7 +374,7 @@ const defaultAutocompleteConfig = {
       bgDark: "muted-950/75"
     },
     resultsInner: {
-      bg: "muted-100",
+      bg: "white",
       bgDark: "muted-700"
     }
   },
@@ -520,7 +520,7 @@ const autocomplete = plugin.withOptions(
             [`@apply px-2 py-1`]: {}
           },
           [`.${prefix}autocomplete-results-item-inner`]: {
-            [`@apply flex gap-2 cursor-pointer items-center p-${config.itemInner.space} transition-colors duration-${config.itemInner.duration}`]: {},
+            [`@apply text-muted-800 dark:text-muted-100 flex gap-2 cursor-pointer items-center p-${config.itemInner.space} transition-colors duration-${config.itemInner.duration}`]: {},
             [`.${prefix}autocomplete-results-item-selected`]: {
               [`@apply ms-auto flex items-center justify-center`]: {}
             },
@@ -636,7 +636,7 @@ const autocomplete = plugin.withOptions(
               [`@apply border bg-${config.default.bg} border-${config.default.border} text-${config.default.text} placeholder:text-${config.default.textPlaceholder} dark:border-${config.default.borderDark} dark:bg-${config.default.bgDark} dark:text-${config.default.textDark} dark:placeholder:text-${config.default.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.default.results.border} dark:border-${config.default.results.borderDark} dark:bg-${config.default.results.bgDark} border bg-${config.default.bg}`]: {}
+              [`@apply border-${config.default.results.border} dark:border-${config.default.results.borderDark} dark:bg-${config.default.results.bgDark} border bg-${config.default.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.default.resultsInner.bg} dark:bg-${config.default.resultsInner.bgDark}`]: {}
@@ -647,7 +647,7 @@ const autocomplete = plugin.withOptions(
               [`@apply border bg-${config.defaultContrast.bg} border-${config.defaultContrast.border} text-${config.defaultContrast.text} placeholder:text-${config.defaultContrast.textPlaceholder} dark:border-${config.defaultContrast.borderDark} dark:bg-${config.defaultContrast.bgDark} dark:text-${config.defaultContrast.textDark} dark:placeholder:text-${config.defaultContrast.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.defaultContrast.results.border} dark:border-${config.defaultContrast.results.borderDark} dark:bg-${config.defaultContrast.results.bgDark} border bg-${config.defaultContrast.bg}`]: {}
+              [`@apply border-${config.defaultContrast.results.border} dark:border-${config.defaultContrast.results.borderDark} dark:bg-${config.defaultContrast.results.bgDark} border bg-${config.defaultContrast.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.defaultContrast.resultsInner.bg} dark:bg-${config.defaultContrast.resultsInner.bgDark}`]: {}
@@ -658,7 +658,7 @@ const autocomplete = plugin.withOptions(
               [`@apply border bg-${config.muted.bg} border-${config.muted.border} text-${config.muted.text} placeholder:text-${config.muted.textPlaceholder} dark:border-${config.muted.borderDark} dark:bg-${config.muted.bgDark} dark:text-${config.muted.textDark} dark:placeholder:text-${config.muted.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.muted.results.border} dark:border-${config.muted.results.borderDark} dark:bg-${config.muted.results.bgDark} border bg-${config.muted.bg}`]: {}
+              [`@apply border-${config.muted.results.border} dark:border-${config.muted.results.borderDark} dark:bg-${config.muted.results.bgDark} border bg-${config.muted.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.muted.resultsInner.bg} dark:bg-${config.muted.resultsInner.bgDark}`]: {}
@@ -669,7 +669,7 @@ const autocomplete = plugin.withOptions(
               [`@apply border bg-${config.mutedContrast.bg} border-${config.mutedContrast.border} text-${config.mutedContrast.text} placeholder:text-${config.mutedContrast.textPlaceholder} dark:border-${config.mutedContrast.borderDark} dark:bg-${config.mutedContrast.bgDark} dark:text-${config.mutedContrast.textDark} dark:placeholder:text-${config.mutedContrast.textPlaceholderDark}`]: {}
             },
             [`.${prefix}autocomplete-results`]: {
-              [`@apply border-${config.mutedContrast.results.border} dark:border-${config.mutedContrast.results.borderDark} dark:bg-${config.mutedContrast.results.bgDark} border bg-${config.mutedContrast.bg}`]: {}
+              [`@apply border-${config.mutedContrast.results.border} dark:border-${config.mutedContrast.results.borderDark} dark:bg-${config.mutedContrast.results.bgDark} border bg-${config.mutedContrast.results.bg}`]: {}
             },
             [`.${prefix}autocomplete-results-item-inner.${prefix}active`]: {
               [`@apply bg-${config.mutedContrast.resultsInner.bg} dark:bg-${config.mutedContrast.resultsInner.bgDark}`]: {}
@@ -2836,7 +2836,6 @@ const defaultButtonConfig = {
 };
 const button = plugin.withOptions(
   function(options) {
-    console.log("register button plugin");
     let { prefix } = defu(options, defaultPluginOptions);
     if (prefix) {
       prefix = `${prefix}-`;
@@ -3434,6 +3433,7 @@ const defaultDropdownItemConfig = {
     text: "primary-500"
   },
   rounded: {
+    straight: "none",
     default: "md",
     smooth: "lg",
     curved: "xl"
@@ -3451,7 +3451,7 @@ const dropdownItem = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}dropdown-item`]: {
-          [`@apply flex w-full items-center justify-start gap-2 rounded-${config.itemRounded} px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
+          [`@apply flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
           [`.${prefix}item-content`]: {
             [`@apply grow`]: {}
           },
@@ -3529,7 +3529,7 @@ const defaultDropdownConfig = {
     shadowColor: "muted-500/10",
     shadowColorDark: "muted-800/10",
     headerTitle: {
-      font: "heading",
+      font: "sans",
       fontSize: "medium",
       text: "muted-500",
       textDark: "muted-200",
@@ -3612,7 +3612,7 @@ const dropdown = plugin.withOptions(
           [`.${prefix}context-button`]: {
             [`@apply dark:ring-offset-${config.contextButton.ringOffsetDark} inline-flex h-${config.contextButton.size} w-${config.contextButton.size} items-center justify-center rounded-${config.contextButton.rounded} ring-1 ring-transparent transition-all duration-${config.contextButton.duration} group-hover:ring-${config.contextButton.ringGroupHover}`]: {},
             [`.${prefix}context-button-inner`]: {
-              [`@apply border-${config.contextButton.inner.border} dark:border-${config.contextButton.inner.borderDark} dark:bg-${config.contextButton.inner.bg} flex h-${config.contextButton.inner.size} w-${config.contextButton.inner.size} items-center justify-center rounded-${config.contextButton.inner.rounded} border bg-${config.contextButton.inner.bg}`]: {}
+              [`@apply border-${config.contextButton.inner.border} dark:border-${config.contextButton.inner.borderDark} dark:bg-${config.contextButton.inner.bgDark} flex h-${config.contextButton.inner.size} w-${config.contextButton.inner.size} items-center justify-center rounded-${config.contextButton.inner.rounded} border bg-${config.contextButton.inner.bg}`]: {}
             },
             [`.${prefix}context-icon`]: {
               [`@apply text-${config.contextButton.icon.text} h-${config.contextButton.icon.size} w-${config.contextButton.icon.size} transition-transform duration-${config.contextButton.icon.duration}`]: {}
@@ -3765,7 +3765,7 @@ const defaultFullscreenDropfileConfig = {
     text: "primary-500",
     textSize: "6xl"
   },
-  labelTextSize: "2xl"
+  labelTextSize: "base"
 };
 const fullscreenDropfile = plugin.withOptions(
   function(options) {
@@ -4337,7 +4337,7 @@ const inputFileRegular = plugin.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}input-file-inner`]: {
-            [`@apply ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
+            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
           },
           [`.${prefix}input-file-addon`]: {
             [`@apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100`]: {}
@@ -4349,7 +4349,7 @@ const inputFileRegular = plugin.withOptions(
             [`@apply ms-2 inline-flex truncate text-${config.text.text}`]: {}
           },
           [`.${prefix}input-file-placeload`]: {
-            [`@apply absolute start-0 flex h-10 w-full items-center`]: {},
+            [`@apply absolute -end-8 flex w-[70%] items-center`]: {},
             [`.${prefix}placeload`]: {
               [`@apply h-3 w-full max-w-[75%] rounded`]: {}
             }
@@ -4375,7 +4375,7 @@ const inputFileRegular = plugin.withOptions(
           },
           [`&.${prefix}input-color-focus`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply focus:border-${config.colorFocus}`]: {}
+              [`@apply focus-within:!border-${config.colorFocus}`]: {}
             }
           },
           [`&.${prefix}input-file-loading`]: {
@@ -4415,6 +4415,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-8 px-2`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-2.5`]: {}
             }
           },
           [`&.${prefix}input-sm.${prefix}has-icon`]: {
@@ -4427,6 +4430,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.sm.iconSize} h-${config.hasIcon.sm.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-2.5`]: {}
             }
           },
           [`&.${prefix}input-md:not(.${prefix}has-icon)`]: {
@@ -4436,6 +4442,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-10 px-3`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-3.5`]: {}
             }
           },
           [`&.${prefix}input-md.${prefix}has-icon`]: {
@@ -4448,6 +4457,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.md.iconSize} h-${config.hasIcon.md.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-3.5`]: {}
             }
           },
           [`&.${prefix}input-lg:not(.${prefix}has-icon)`]: {
@@ -4457,6 +4469,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-addon`]: {
               [`@apply h-12 px-4`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-[1.2rem]`]: {}
             }
           },
           [`&.${prefix}input-lg.${prefix}has-icon`]: {
@@ -4469,6 +4484,9 @@ const inputFileRegular = plugin.withOptions(
             },
             [`.${prefix}input-file-icon`]: {
               [`@apply w-${config.hasIcon.lg.iconSize} h-${config.hasIcon.lg.iconSize}`]: {}
+            },
+            [`.${prefix}input-file-placeload`]: {
+              [`@apply top-[1.2rem]`]: {}
             }
           },
           [`&:hover`]: {
@@ -4594,7 +4612,7 @@ const inputFile = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}input-file`]: {
-          [`@apply relative`]: {},
+          [`@apply relative block`]: {},
           [`&.${prefix}input-file-drop`]: {
             [`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]: {},
             [`.${prefix}drop-area-inner`]: {
@@ -5379,6 +5397,7 @@ const defaultListboxConfig = {
     },
     activeOrHover: {
       text: "primary-600",
+      textDark: "primary-400",
       bg: "primary-500/10"
     }
   },
@@ -5488,7 +5507,7 @@ const defaultListboxConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900",
     border: "muted-300",
     borderDark: "muted-700",
@@ -5512,7 +5531,7 @@ const defaultListboxConfig = {
     }
   },
   mutedContrast: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-950",
     border: "muted-300",
     borderDark: "muted-800",
@@ -5691,8 +5710,11 @@ const listbox = plugin.withOptions(
                 [`@apply text-${config.option.inner.text}`]: {}
               }
             },
+            [`&:not(.${prefix}active), &:not(:hover)`]: {
+              [`@apply text-muted-600 dark:text-muted-200`]: {}
+            },
             [`&.${prefix}active, &:hover`]: {
-              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text}`]: {}
+              [`@apply bg-${config.option.activeOrHover.bg} text-${config.option.activeOrHover.text} dark:text-${config.option.activeOrHover.textDark}`]: {}
             }
           },
           [`.${prefix}listbox-error-text`]: {
@@ -6671,7 +6693,7 @@ const defaultPaginationConfig = {
     space: "1",
     notActive: {
       bg: "white",
-      bgDark: "primary-500",
+      bgDark: "muted-800",
       bgHover: "muted-100",
       bgHoverDark: "muted-900",
       text: "muted-500",
@@ -7464,7 +7486,7 @@ const defaultSelectConfig = {
       textPlaceholderDark: "muted-600"
     },
     muted: {
-      bg: "muted-200",
+      bg: "muted-100",
       bgDark: "muted-900/75",
       border: "muted-200",
       borderDark: "muted-700",
@@ -8049,7 +8071,7 @@ const defaultSwitchBallConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8171,7 +8193,7 @@ const defaultSwitchThinConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8365,10 +8387,10 @@ const tabSlider = plugin.withOptions(
             }
           },
           [`&.${prefix}tabs-sm`]: {
-            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsSM.twoSlotsW}`]: {}
             },
-            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsSM.threeSlotsW}`]: {}
             },
             [`.${prefix}tab-slider-track`]: {
@@ -8376,10 +8398,10 @@ const tabSlider = plugin.withOptions(
             }
           },
           [`&.${prefix}tabs-md`]: {
-            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-two-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsMD.twoSlotsW}`]: {}
             },
-            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-inner`]: {
+            [`&.${prefix}tabs-three-slots .${prefix}tab-slider-track`]: {
               [`@apply max-w-${config.tabsMD.threeSlotsW}`]: {}
             },
             [`.${prefix}tab-slider-track`]: {
@@ -8428,7 +8450,7 @@ const tabSlider = plugin.withOptions(
 
 const defaultTabsConfig = {
   inner: {
-    font: "alt",
+    font: "sans",
     space: "6"
   },
   item: {
@@ -9007,7 +9029,7 @@ const defaultTextareaConfig = {
       textPlaceholderDark: "muted-600"
     },
     muted: {
-      bg: "muted-200",
+      bg: "muted-100",
       bgDark: "muted-900/75",
       border: "muted-200",
       borderDark: "muted-700",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": "shuriken-ui/tailwind",
@@ -51,12 +51,11 @@
     "build": "unbuild",
     "build:storybook": "storybook build",
     "lint": "run-s lint:eslint:fix lint:prettier:fix",
-    "lint:prettier": "prettier --check \"./**/*.(ts|vue|css|scss|md)\"",
-    "lint:prettier:fix": "prettier --write \"./**/*.(ts|vue|css|scss|md)\"",
-    "lint:eslint": "eslint -c .eslintrc.cjs --ext .vue,.ts .",
-    "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix  --ext .vue,.ts .",
-    "test": "run-p test:*",
-    "test:lint": "run-s lint:eslint lint:prettier",
+    "lint:prettier": "prettier --check \"./**/*.(ts|css|scss|md)\"",
+    "lint:prettier:fix": "prettier --write \"./**/*.(ts|css|scss|md)\"",
+    "lint:eslint": "eslint -c .eslintrc.cjs --ext .ts .",
+    "lint:eslint:fix": "eslint -c .eslintrc.cjs --fix  --ext .ts .",
+    "test": "run-s lint:eslint lint:prettier test:vitest",
     "test:vitest": "vitest",
     "coverage": "vitest run --coverage",
     "prepack": "pnpm run build",
@@ -116,7 +115,7 @@
   "lint-staged": {
     "*.ts?(x)": [
       "prettier --parser=typescript --write",
-      "eslint --fix"
+      "eslint -c .eslintrc.cjs --fix --ext .ts"
     ]
   }
 }