@shuriken-ui/tailwind 1.2.1 → 1.2.2

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}`]: {}
@@ -3444,6 +3444,7 @@ const defaultDropdownItemConfig = {
     text: "primary-500"
   },
   rounded: {
+    straight: "none",
     default: "md",
     smooth: "lg",
     curved: "xl"
@@ -3461,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`]: {}
           },
@@ -3539,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",
@@ -3622,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}`]: {}
@@ -3775,7 +3776,7 @@ const defaultFullscreenDropfileConfig = {
     text: "primary-500",
     textSize: "6xl"
   },
-  labelTextSize: "2xl"
+  labelTextSize: "base"
 };
 const fullscreenDropfile = plugin__default.withOptions(
   function(options) {
@@ -4347,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`]: {}
@@ -4359,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`]: {}
             }
@@ -4385,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`]: {
@@ -4425,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`]: {
@@ -4437,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)`]: {
@@ -4446,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`]: {
@@ -4458,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)`]: {
@@ -4467,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`]: {
@@ -4479,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`]: {
@@ -4604,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`]: {
@@ -5389,6 +5408,7 @@ const defaultListboxConfig = {
     },
     activeOrHover: {
       text: "primary-600",
+      textDark: "primary-400",
       bg: "primary-500/10"
     }
   },
@@ -5498,7 +5518,7 @@ const defaultListboxConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900",
     border: "muted-300",
     borderDark: "muted-700",
@@ -5522,7 +5542,7 @@ const defaultListboxConfig = {
     }
   },
   mutedContrast: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-950",
     border: "muted-300",
     borderDark: "muted-800",
@@ -5701,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`]: {
@@ -6681,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",
@@ -7474,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",
@@ -8059,7 +8082,7 @@ const defaultSwitchBallConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8181,7 +8204,7 @@ const defaultSwitchThinConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8375,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`]: {
@@ -8386,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`]: {
@@ -8438,7 +8461,7 @@ const tabSlider = plugin__default.withOptions(
 
 const defaultTabsConfig = {
   inner: {
-    font: "alt",
+    font: "sans",
     space: "6"
   },
   item: {
@@ -9017,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}`]: {}
@@ -3433,6 +3433,7 @@ const defaultDropdownItemConfig = {
     text: "primary-500"
   },
   rounded: {
+    straight: "none",
     default: "md",
     smooth: "lg",
     curved: "xl"
@@ -3450,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`]: {}
           },
@@ -3528,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",
@@ -3611,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}`]: {}
@@ -3764,7 +3765,7 @@ const defaultFullscreenDropfileConfig = {
     text: "primary-500",
     textSize: "6xl"
   },
-  labelTextSize: "2xl"
+  labelTextSize: "base"
 };
 const fullscreenDropfile = plugin.withOptions(
   function(options) {
@@ -4336,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`]: {}
@@ -4348,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`]: {}
             }
@@ -4374,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`]: {
@@ -4414,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`]: {
@@ -4426,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)`]: {
@@ -4435,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`]: {
@@ -4447,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)`]: {
@@ -4456,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`]: {
@@ -4468,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`]: {
@@ -4593,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`]: {
@@ -5378,6 +5397,7 @@ const defaultListboxConfig = {
     },
     activeOrHover: {
       text: "primary-600",
+      textDark: "primary-400",
       bg: "primary-500/10"
     }
   },
@@ -5487,7 +5507,7 @@ const defaultListboxConfig = {
     }
   },
   muted: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-900",
     border: "muted-300",
     borderDark: "muted-700",
@@ -5511,7 +5531,7 @@ const defaultListboxConfig = {
     }
   },
   mutedContrast: {
-    bg: "muted-200",
+    bg: "muted-100",
     bgDark: "muted-950",
     border: "muted-300",
     borderDark: "muted-800",
@@ -5690,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`]: {
@@ -6670,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",
@@ -7463,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",
@@ -8048,7 +8071,7 @@ const defaultSwitchBallConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8170,7 +8193,7 @@ const defaultSwitchThinConfig = {
   },
   dualLabel: {
     label: {
-      font: "heading",
+      font: "sans",
       fontWeight: "medium",
       text: "muted-800",
       textDark: "white",
@@ -8364,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`]: {
@@ -8375,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`]: {
@@ -8427,7 +8450,7 @@ const tabSlider = plugin.withOptions(
 
 const defaultTabsConfig = {
   inner: {
-    font: "alt",
+    font: "sans",
     space: "6"
   },
   item: {
@@ -9006,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.1",
+  "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"
     ]
   }
 }