@shuriken-ui/tailwind 1.2.6 → 1.5.0

package/dist/preset.cjs

@@ -25,7 +25,8 @@ const defaultPluginOptions = {
   prefix: "nui"
 };
 
-const defaultAccordionConfig = {
+const key$R = "accordion";
+const defaultConfig$Q = {
   size: "full",
   border: "muted-200",
   borderDark: "muted-700",
@@ -80,6 +81,7 @@ const defaultAccordionConfig = {
     curved: "xl"
   }
 };
+
 const accordion = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -87,9 +89,7 @@ const accordion = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.accordion"
-      );
+      const config = theme(`shurikenUi.${key$R}`);
       addComponents({
         [`.${prefix}accordion`]: {
           [`@apply w-${config.size} border-${config.border} dark:border-${config.borderDark} dark:bg-${config.bgDark} block overflow-hidden border bg-${config.bg}`]: {},
@@ -178,14 +178,15 @@ const accordion = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          accordion: defaultAccordionConfig
+          [key$R]: defaultConfig$Q
         }
       }
     };
   }
 );
 
-const defaultAutocompleteConfig = {
+const key$Q = "autocomplete";
+const defaultConfig$P = {
   labelFloat: {
     text: "primary-500",
     size: "5",
@@ -455,6 +456,7 @@ const defaultAutocompleteConfig = {
     }
   }
 };
+
 const autocomplete = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -462,9 +464,7 @@ const autocomplete = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.autocomplete"
-      );
+      const config = theme(`shurikenUi.${key$Q}`);
       addComponents({
         [`.${prefix}autocomplete`]: {
           [`@apply w-full relative`]: {},
@@ -820,14 +820,15 @@ const autocomplete = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          autocomplete: defaultAutocompleteConfig
+          [key$Q]: defaultConfig$P
         }
       }
     };
   }
 );
 
-const defaultAvatarConfig = {
+const key$P = "avatar";
+const defaultConfig$O = {
   avatarInner: {
     size: "full",
     duration: "300"
@@ -1066,6 +1067,7 @@ const defaultAvatarConfig = {
     avatarBadgePosition: "0"
   }
 };
+
 const avatar = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -1073,9 +1075,7 @@ const avatar = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.avatar"
-      );
+      const config = theme(`shurikenUi.${key$P}`);
       addComponents({
         [`.${prefix}avatar`]: {
           [`@apply relative inline-flex shrink-0 items-center justify-center outline-none`]: {},
@@ -1566,14 +1566,15 @@ const avatar = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          avatar: defaultAvatarConfig
+          [key$P]: defaultConfig$O
         }
       }
     };
   }
 );
 
-const defaultAvatarGroupConfig = {
+const key$O = "avatarGroup";
+const defaultConfig$N = {
   avatarOuter: {
     bg: "white",
     bgDark: "muted-800",
@@ -1649,6 +1650,7 @@ const defaultAvatarGroupConfig = {
     }
   }
 };
+
 const avatarGroup = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -1656,9 +1658,7 @@ const avatarGroup = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.avatarGroup"
-      );
+      const config = theme(`shurikenUi.${key$O}`);
       addComponents({
         [`.${prefix}avatar-group`]: {
           [`@apply flex`]: {},
@@ -1770,14 +1770,15 @@ const avatarGroup = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          avatarGroup: defaultAvatarGroupConfig
+          [key$O]: defaultConfig$N
         }
       }
     };
   }
 );
 
-const defaultBreadcrumbConfig = {
+const key$N = "breadcrumb";
+const defaultConfig$M = {
   list: {
     font: "sans",
     text: "[0.85rem]",
@@ -1801,6 +1802,7 @@ const defaultBreadcrumbConfig = {
     }
   }
 };
+
 const breadcrumb = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -1808,9 +1810,7 @@ const breadcrumb = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.breadcrumb"
-      );
+      const config = theme(`shurikenUi.${key$N}`);
       addComponents({
         [`.${prefix}breadcrumb`]: {
           [`.${prefix}breadcrumb-list`]: {
@@ -1848,14 +1848,15 @@ const breadcrumb = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          breadcrumb: defaultBreadcrumbConfig
+          [key$N]: defaultConfig$M
         }
       }
     };
   }
 );
 
-const defaultButtonActionConfig = {
+const key$M = "buttonAction";
+const defaultConfig$L = {
   font: "normal",
   text: "sm",
   duration: "300",
@@ -1980,6 +1981,7 @@ const defaultButtonActionConfig = {
     focusWithinDark: "danger-400"
   }
 };
+
 const buttonAction = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -1987,9 +1989,7 @@ const buttonAction = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.buttonAction"
-      );
+      const config = theme(`shurikenUi.${key$M}`);
       addComponents({
         [`.${prefix}button-action`]: {
           [`@apply relative font-sans font-${config.font} text-${config.text} inline-flex items-center justify-center leading-5 no-underline h-8 px-3 py-2 space-x-1 border ${prefix}focus transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:enabled:shadow-none`]: {},
@@ -2037,14 +2037,15 @@ const buttonAction = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          buttonAction: defaultButtonActionConfig
+          [key$M]: defaultConfig$L
         }
       }
     };
   }
 );
 
-const defaultButtonCloseConfig = {
+const key$L = "buttonClose";
+const defaultConfig$K = {
   size: "9",
   duration: "300",
   buttonIcon: {
@@ -2095,6 +2096,7 @@ const defaultButtonCloseConfig = {
     text: "danger-500"
   }
 };
+
 const buttonClose = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -2102,12 +2104,10 @@ const buttonClose = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.buttonClose"
-      );
+      const config = theme(`shurikenUi.${key$L}`);
       addComponents({
         [`.${prefix}button-close`]: {
-          [`@apply flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
+          [`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
           [`.${prefix}button-icon`]: {
             [`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]: {}
           },
@@ -2152,14 +2152,16 @@ const buttonClose = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          buttonClose: defaultButtonCloseConfig
+          [key$L]: defaultConfig$K
         }
       }
     };
   }
 );
 
-const defaultButtonGroupConfig = {};
+const key$K = "buttonAction";
+const defaultConfig$J = {};
+
 const buttonGroup = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -2167,9 +2169,7 @@ const buttonGroup = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      theme(
-        "shurikenUi.buttonGroup"
-      );
+      theme(`shurikenUi.${key$K}`);
       addComponents({
         [`.${prefix}button-group`]: {
           [`@apply flex`]: {},
@@ -2268,14 +2268,15 @@ const buttonGroup = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          buttonGroup: defaultButtonGroupConfig
+          [key$K]: defaultConfig$J
         }
       }
     };
   }
 );
 
-const defaultButtonIconConfig = {
+const key$J = "buttonIcon";
+const defaultConfig$I = {
   text: "sm",
   font: "normal",
   duration: "300",
@@ -2340,6 +2341,7 @@ const defaultButtonIconConfig = {
     text: "danger-500"
   }
 };
+
 const buttonIcon = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -2347,12 +2349,10 @@ const buttonIcon = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.buttonIcon"
-      );
+      const config = theme(`shurikenUi.${key$J}`);
       addComponents({
         [`.${prefix}button-icon`]: {
-          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline outline-none transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
+          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
           [`&.${prefix}button-small`]: {
             [`@apply h-${config.buttonSmall.size} w-${config.buttonSmall.size} p-${config.buttonSmall.space}`]: {}
           },
@@ -2406,14 +2406,15 @@ const buttonIcon = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          buttonIcon: defaultButtonIconConfig
+          [key$J]: defaultConfig$I
         }
       }
     };
   }
 );
 
-const defaultButtonConfig = {
+const key$I = "button";
+const defaultConfig$H = {
   duration: "300",
   font: "normal",
   badge: {
@@ -2843,6 +2844,7 @@ const defaultButtonConfig = {
     }
   }
 };
+
 const button = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -2850,9 +2852,7 @@ const button = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.button"
-      );
+      const config = theme(`shurikenUi.${key$I}`);
       addComponents({
         [`.${prefix}button`]: {
           [`@apply relative font-sans font-${config.font} leading-5 no-underline inline-flex justify-center items-center space-x-1 ${prefix}focus transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
@@ -3101,14 +3101,15 @@ const button = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          button: defaultButtonConfig
+          [key$I]: defaultConfig$H
         }
       }
     };
   }
 );
 
-const defaultCardConfig = {
+const key$H = "card";
+const defaultConfig$G = {
   size: "full",
   duration: "300",
   cardWhite: {
@@ -3171,6 +3172,7 @@ const defaultCardConfig = {
     size: "xl"
   }
 };
+
 const card = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3178,7 +3180,7 @@ const card = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.card");
+      const config = theme(`shurikenUi.${key$H}`);
       addComponents({
         [`.${prefix}card`]: {
           [`@apply relative w-${config.size} transition-all duration-${config.duration}`]: {},
@@ -3234,14 +3236,15 @@ const card = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          card: defaultCardConfig
+          [key$H]: defaultConfig$G
         }
       }
     };
   }
 );
 
-const defaultCheckboxConfig = {
+const key$G = "checkbox";
+const defaultConfig$F = {
   outer: {
     size: "5"
   },
@@ -3290,6 +3293,7 @@ const defaultCheckboxConfig = {
   warning: "warning-500",
   danger: "danger-500"
 };
+
 const checkbox = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3297,9 +3301,7 @@ const checkbox = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.checkbox"
-      );
+      const config = theme(`shurikenUi.${key$G}`);
       addComponents({
         [`.${prefix}checkbox`]: {
           [`@apply relative inline-flex items-start gap-1`]: {},
@@ -3339,16 +3341,16 @@ const checkbox = plugin__default.withOptions(
           [`.${prefix}checkbox-error`]: {
             [`@apply text-${config.error.text} ms-1 inline-block font-${config.error.font} text-${config.error.textSixe}`]: {}
           },
-          [`&.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-rounded .${prefix}checkbox-outer, &.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
             [`@apply rounded`]: {}
           },
-          [`&.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-smooth .${prefix}checkbox-outer, &.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.smooth}`]: {}
           },
-          [`&.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-curved .${prefix}checkbox-outer, &.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.curved}`]: {}
           },
-          [`&.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-full .${prefix}checkbox-outer, &.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.full}`]: {}
           },
           [`&.${prefix}checkbox-default`]: {
@@ -3383,18 +3385,20 @@ const checkbox = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          checkbox: defaultCheckboxConfig
+          [key$G]: defaultConfig$F
         }
       }
     };
   }
 );
 
-const defaultDropdownDividerConfig = {
+const key$F = "drodownDivider";
+const defaultConfig$E = {
   space: "2",
   border: "muted-200",
   borderDark: "muted-600"
 };
+
 const dropdownDivider = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3402,9 +3406,7 @@ const dropdownDivider = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.dropdownDivider"
-      );
+      const config = theme(`shurikenUi.${key$F}`);
       addComponents({
         [`.${prefix}dropdown-divider`]: {
           [`@apply my-${config.space} block h-px w-full border-t border-${config.border} dark:border-${config.borderDark}`]: {}
@@ -3416,14 +3418,15 @@ const dropdownDivider = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          dropdownDivider: defaultDropdownDividerConfig
+          [key$F]: defaultConfig$E
         }
       }
     };
   }
 );
 
-const defaultDropdownItemConfig = {
+const key$E = "dropdownItem";
+const defaultConfig$D = {
   itemRounded: "md",
   textPosition: "left",
   textSize: "sm",
@@ -3448,6 +3451,7 @@ const defaultDropdownItemConfig = {
     curved: "xl"
   }
 };
+
 const dropdownItem = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3455,12 +3459,10 @@ const dropdownItem = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.dropdownItem"
-      );
+      const config = theme(`shurikenUi.${key$E}`);
       addComponents({
         [`.${prefix}dropdown-item`]: {
-          [`@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}`]: {},
+          [`@apply ${prefix}focus 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`]: {}
           },
@@ -3494,14 +3496,15 @@ const dropdownItem = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          dropdownItem: defaultDropdownItemConfig
+          [key$E]: defaultConfig$D
         }
       }
     };
   }
 );
 
-const defaultDropdownConfig = {
+const key$D = "dropdown";
+const defaultConfig$C = {
   textPosition: "start",
   contextButton: {
     ringOffsetDark: "muted-900",
@@ -3599,6 +3602,7 @@ const defaultDropdownConfig = {
     ringDark: "muted-700/70"
   }
 };
+
 const dropdown = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3606,9 +3610,7 @@ const dropdown = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.dropdown"
-      );
+      const config = theme(`shurikenUi.${key$D}`);
       addComponents({
         [`.${prefix}dropdown`]: {
           [`@apply text-${config.textPosition}`]: {},
@@ -3716,20 +3718,23 @@ const dropdown = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          dropdown: defaultDropdownConfig
+          [key$D]: defaultConfig$C
         }
       }
     };
   }
 );
 
-const defaultFocusConfig = {
+const key$C = "focus";
+const defaultConfig$B = {
   offset: "2",
-  width: "1",
+  width: "2",
   style: "dashed",
   color: "muted-300",
-  colorDark: "muted-600"
+  colorDark: "muted-600",
+  mode: "always"
 };
+
 const focus = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3737,19 +3742,15 @@ const focus = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.focus"
-      );
+      const config = theme(`shurikenUi.${key$C}`);
+      const mode = config.mode === "focus-visible" ? "&:has(:focus-visible), &:focus-visible" : "&:focus-within";
       addComponents({
         [`.${prefix}focus`]: {
           [`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]: {},
           "@apply outline-transparent": {},
-          "&:focus-within": {
+          [mode]: {
             [`@apply outline-${config.color} dark:outline-${config.colorDark}`]: {},
             [`@apply outline-${config.style} ring-0`]: {}
-          },
-          "&:focus-visible": {
-            [`@apply outline-${config.width}`]: {}
           }
         }
       });
@@ -3759,14 +3760,15 @@ const focus = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          focus: defaultFocusConfig
+          [key$C]: defaultConfig$B
         }
       }
     };
   }
 );
 
-const defaultFullscreenDropfileConfig = {
+const key$B = "fullscreenDropfile";
+const defaultConfig$A = {
   border: "primary-500",
   height: "[230px]",
   width: "[500px]",
@@ -3776,6 +3778,7 @@ const defaultFullscreenDropfileConfig = {
   },
   labelTextSize: "base"
 };
+
 const fullscreenDropfile = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3784,7 +3787,7 @@ const fullscreenDropfile = plugin__default.withOptions(
     }
     return function({ addComponents, theme }) {
       const config = theme(
-        "shurikenUi.fullscreenDropfile"
+        `shurikenUi.${key$B}`
       );
       addComponents({
         [`.${prefix}fullscreen-dropfile`]: {
@@ -3814,14 +3817,15 @@ const fullscreenDropfile = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          fullscreenDropfile: defaultFullscreenDropfileConfig
+          [key$B]: defaultConfig$A
         }
       }
     };
   }
 );
 
-const defaultHeadingConfig = {
+const key$A = "heading";
+const defaultConfig$z = {
   textXS: "xs",
   textSM: "sm",
   textMD: "base",
@@ -3847,6 +3851,7 @@ const defaultHeadingConfig = {
   textLeadSnug: "snug",
   textLeadLoose: "loose"
 };
+
 const heading = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -3854,9 +3859,7 @@ const heading = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.heading"
-      );
+      const config = theme(`shurikenUi.${key$A}`);
       addComponents({
         [`.${prefix}heading`]: {
           [`@apply font-sans`]: {},
@@ -3940,14 +3943,15 @@ const heading = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          heading: defaultHeadingConfig
+          [key$A]: defaultConfig$z
         }
       }
     };
   }
 );
 
-const defaultIconBoxConfig = {
+const key$z = "iconBox";
+const defaultConfig$y = {
   boxXS: {
     size: "8",
     rounded: {
@@ -4084,6 +4088,7 @@ const defaultIconBoxConfig = {
     borderColor: "current"
   }
 };
+
 const iconBox = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -4091,9 +4096,7 @@ const iconBox = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.iconBox"
-      );
+      const config = theme(`shurikenUi.${key$z}`);
       addComponents({
         [`.${prefix}icon-box`]: {
           [`@apply relative inline-flex shrink-0 items-center justify-center`]: {},
@@ -4231,14 +4234,15 @@ const iconBox = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          iconBox: defaultIconBoxConfig
+          [key$z]: defaultConfig$y
         }
       }
     };
   }
 );
 
-const defaultInputFileRegularConfig = {
+const key$y = "inputFileRegular";
+const defaultConfig$x = {
   inner: {
     size: "full",
     font: "sans",
@@ -4326,6 +4330,7 @@ const defaultInputFileRegularConfig = {
   hover: "primary-500",
   focusWhitin: "primary-500"
 };
+
 const inputFileRegular = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -4333,9 +4338,7 @@ const inputFileRegular = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.inputFileRegular"
-      );
+      const config = theme(`shurikenUi.${key$y}`);
       addComponents({
         [`.${prefix}input-file-regular`]: {
           [`@apply relative w-full`]: {},
@@ -4346,7 +4349,7 @@ const inputFileRegular = plugin__default.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}input-file-inner`]: {
-            [`@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`]: {}
+            [`@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} 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`]: {}
@@ -4521,14 +4524,15 @@ const inputFileRegular = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          inputFileRegular: defaultInputFileRegularConfig
+          [key$y]: defaultConfig$x
         }
       }
     };
   }
 );
 
-const defaultInputFileConfig = {
+const key$x = "inputFile";
+const defaultConfig$w = {
   drop: {
     size: "64",
     border: "muted-200",
@@ -4609,6 +4613,7 @@ const defaultInputFileConfig = {
     full: "full"
   }
 };
+
 const inputFile = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -4616,12 +4621,10 @@ const inputFile = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.inputFile"
-      );
+      const config = theme(`shurikenUi.${key$x}`);
       addComponents({
         [`.${prefix}input-file`]: {
-          [`@apply relative block`]: {},
+          [`@apply relative block ${prefix}focus`]: {},
           [`&.${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`]: {
@@ -4663,7 +4666,7 @@ const inputFile = plugin__default.withOptions(
               [`@apply font-${config.combo.label.font} sr-only text-${config.combo.label.text}`]: {}
             },
             [`.${prefix}combo-input`]: {
-              [`@apply block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
+              [`@apply outline-none block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
             }
           },
           [`&.${prefix}input-file-rounded`]: {
@@ -4718,14 +4721,15 @@ const inputFile = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          inputFile: defaultInputFileConfig
+          [key$x]: defaultConfig$w
         }
       }
     };
   }
 );
 
-const defaultInputConfig = {
+const key$w = "input";
+const defaultConfig$v = {
   label: {
     float: {
       text: "primary-500",
@@ -4922,6 +4926,7 @@ const defaultInputConfig = {
     }
   }
 };
+
 const input = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -4929,9 +4934,7 @@ const input = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.input"
-      );
+      const config = theme(`shurikenUi.${key$w}`);
       addComponents({
         [`.${prefix}input-wrapper`]: {
           [`@apply relative`]: {},
@@ -5215,212 +5218,768 @@ const input = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          input: defaultInputConfig
-        }
-      }
-    };
-  }
-);
-
-const defaultLabelConfig = {
-  font: "sans",
-  text: "muted-400",
-  textDark: "muted-400/80"
-};
-const label = plugin__default.withOptions(
-  function(options) {
-    let { prefix } = defu.defu(options, defaultPluginOptions);
-    if (prefix) {
-      prefix = `${prefix}-`;
-    }
-    return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.label"
-      );
-      addComponents({
-        [`.${prefix}label`]: {
-          [`@apply inline-block font-${config.font} leading-none text-${config.text} dark:text-${config.textDark}`]: {}
-        }
-      });
-    };
-  },
-  function() {
-    return {
-      theme: {
-        shurikenUi: {
-          label: defaultLabelConfig
-        }
-      }
-    };
-  }
-);
-
-const defaultLinkConfig = {
-  font: "sans",
-  textHover: "primary-500",
-  textHoverDark: "primary-400",
-  textFocus: "primary-500",
-  textFocusDark: "primary-400"
-};
-const link = plugin__default.withOptions(
-  function(options) {
-    let { prefix } = defu.defu(options, defaultPluginOptions);
-    if (prefix) {
-      prefix = `${prefix}-`;
-    }
-    return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.link");
-      addComponents({
-        [`.${prefix}link`]: {
-          [`@apply font-${config.font} hover:text-${config.textHover} dark:hover:text-${config.textHoverDark} underline-offset-4 hover:underline focus:text-${config.textFocus} dark:focus:text-${config.textFocusDark} focus:underline`]: {}
-        }
-      });
-    };
-  },
-  function() {
-    return {
-      theme: {
-        shurikenUi: {
-          link: defaultLinkConfig
-        }
-      }
-    };
-  }
-);
-
-const defaultListConfig = {
-  ul: "disc",
-  ol: "decimal",
-  base: {
-    textMarker: "muted-500",
-    textMarkerDark: "muted-400",
-    text: "slate-700",
-    textDark: "slate-300",
-    font: "sans"
-  },
-  media: {
-    textMarker: "slate-500",
-    textMarkerDark: "slate-400"
-  }
-};
-const list = plugin__default.withOptions(
-  function(options) {
-    let { prefix } = defu.defu(options, defaultPluginOptions);
-    if (prefix) {
-      prefix = `${prefix}-`;
-    }
-    return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.list");
-      addComponents({
-        [`.${prefix}list`]: {
-          [`&.${prefix}list-ul`]: {
-            [`@apply list-${config.ul}`]: {}
-          },
-          [`&.${prefix}list-ol`]: {
-            [`@apply list-${config.ol}`]: {}
-          },
-          [`&.${prefix}list-base`]: {
-            [`@apply space-y-1 marker:text-${config.base.textMarker} dark:marker:text-${config.base.textMarkerDark} font-${config.base.font} text-${config.base.text} dark:text-${config.base.textDark}`]: {}
-          },
-          [`&.${prefix}list-media`]: {
-            [`@apply space-y-4 marker:text-${config.media.textMarker} dark:marker:text-${config.media.textMarkerDark}`]: {},
-            [`.${prefix}list-item`]: {
-              [`@apply flex gap-2`]: {}
-            }
-          }
-        }
-      });
-    };
-  },
-  function() {
-    return {
-      theme: {
-        shurikenUi: {
-          list: defaultListConfig
+          [key$w]: defaultConfig$v
         }
       }
     };
   }
 );
 
-const defaultListboxConfig = {
-  labelFloat: {
-    text: "primary-500",
-    size: "5",
-    duration: "300"
-  },
-  button: {
-    size: "full",
-    text: "sm",
-    textPosition: "start",
-    font: "sans",
-    iconBox: {
-      space: "2",
-      size: "6",
-      innerSize: "4"
-    },
-    placeholder: {
-      text: "muted-300",
-      textDark: "muted-500",
-      textPosition: "left"
+const key$v = "inputNumber";
+const defaultConfig$u = {
+  label: {
+    float: {
+      text: "primary-500",
+      duration: "300",
+      size: "5"
     }
   },
   icon: {
     text: "muted-400",
     duration: "300"
   },
-  chevron: {
-    inner: {
-      size: "4",
-      text: "muted-400",
-      duration: "300"
-    }
-  },
-  options: {
-    ringFocus: "primary-500/50",
-    space: "2",
-    text: "base",
-    shadowSize: "lg",
-    shadow: "muted-500/10",
-    shadowDark: "muted-800/10"
-  },
-  option: {
-    duration: "300",
-    iconBox: {
-      text: "muted-200",
-      textDark: "muted-400",
-      innerSize: "5"
-    },
-    inner: {
-      heading: {
-        text: "muted-800",
-        textDark: "white"
-      },
-      text: "muted-400"
-    },
-    icon: {
-      text: "primary-600"
-    },
-    iconInner: {
-      size: "4"
-    },
-    activeOrHover: {
-      text: "primary-600",
-      textDark: "primary-400",
-      bg: "primary-500/10"
-    }
-  },
   errorText: {
     text: "danger-600",
     textSize: "[0.65rem]",
     font: "sans",
     fontWeight: "medium"
   },
-  sm: {
-    text: "xs",
-    icon: {
-      size: "8",
-      innerSize: "4"
+  input: {
+    focusSize: "full",
+    font: "sans",
+    duration: "300",
+    focusVisible: {
+      labelFloat: {
+        text: "primary-500",
+        textDark: "primary-500"
+      },
+      icon: {
+        text: "primary-500"
+      }
+    },
+    action: {
+      text: "muted-400",
+      duration: "300"
+    },
+    rounded: {
+      default: "md",
+      smooth: "lg",
+      curved: "xl",
+      full: "full"
+    },
+    sm: {
+      label: {
+        text: "xs"
+      },
+      iconOrAction: {
+        size: "8"
+      },
+      iconOrAcionInner: {
+        size: "4"
+      },
+      placeload: {
+        size: "8"
+      }
+    },
+    md: {
+      label: {
+        text: "[0.825rem]"
+      },
+      iconOrAction: {
+        size: "10"
+      },
+      iconOrAcionInner: {
+        size: "[1.15rem]"
+      },
+      placeload: {
+        size: "10"
+      }
+    },
+    lg: {
+      label: {
+        text: "sm"
+      },
+      iconOrAction: {
+        size: "12"
+      },
+      iconOrAcionInner: {
+        size: "5"
+      },
+      placeload: {
+        size: "12"
+      }
+    },
+    default: {
+      bg: "white",
+      bgDark: "muted-900",
+      border: "muted-300",
+      borderDark: "muted-700",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-500"
+    },
+    defaultContrast: {
+      bg: "white",
+      bgDark: "muted-950",
+      border: "muted-300",
+      borderDark: "muted-800",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-600"
+    },
+    muted: {
+      bg: "muted-100",
+      bgDark: "muted-900",
+      border: "muted-200",
+      borderDark: "muted-700",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-500"
+    },
+    mutedContrast: {
+      bg: "muted-100",
+      bgDark: "muted-950",
+      border: "muted-100",
+      borderDark: "muted-800",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-600"
+    },
+    notLoading: {
+      text: "muted-300",
+      textDark: "muted-600"
+    },
+    error: {
+      border: "danger-500",
+      borderDark: "danger-500",
+      icon: {
+        text: "danger-500"
+      }
+    },
+    hasNotIcon: {
+      text: {
+        sm: "xs",
+        md: "sm",
+        lg: "sm"
+      },
+      labelFloat: {
+        sm: "xs",
+        md: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        },
+        lg: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        }
+      }
+    },
+    hasIcon: {
+      text: {
+        sm: "xs",
+        md: "sm",
+        lg: "base"
+      },
+      labelFloat: {
+        sm: "xs",
+        md: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        },
+        lg: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        }
+      }
+    },
+    hasAction: {
+      spaceSM: "8",
+      spaceMD: "10",
+      spaceLG: "12"
+    }
+  }
+};
+
+const inputNumber = plugin__default.withOptions(
+  function(options) {
+    let { prefix } = defu.defu(options, defaultPluginOptions);
+    if (prefix) {
+      prefix = `${prefix}-`;
+    }
+    return function({ addComponents, theme }) {
+      const config = theme(`shurikenUi.${key$v}`);
+      addComponents({
+        [`.${prefix}input-number-wrapper`]: {
+          [`@apply relative`]: {},
+          [`.${prefix}input-number-label, .${prefix}label-float`]: {
+            [`@apply ${prefix}label`]: {}
+          },
+          [`.${prefix}label-float`]: {
+            [`@apply text-${config.label.float.text} pointer-events-none absolute inline-flex h-${config.label.float.size} select-none items-center leading-none transition-all duration-${config.label.float.duration}`]: {}
+          },
+          [`.${prefix}input-number-outer`]: {
+            [`@apply ${prefix}focus relative`]: {}
+          },
+          [`.${prefix}input-number-icon`]: {
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+          },
+          [`.${prefix}input-number-buttons`]: {
+            [`@apply absolute top-1 end-1 flex`]: {}
+          },
+          [`.${prefix}input-number-buttons button`]: {
+            [`@apply outline-none flex items-center justify-center`]: {},
+            [`@apply border border-muted-200 dark:border-muted-800 last:border-s-0`]: {},
+            [`@apply text-muted-400 hover:text-muted-600 dark:hover:text-muted-100`]: {},
+            [`@apply focus:text-muted-600 dark:focus:text-muted-100`]: {},
+            [`@apply transition-colors duration-300`]: {}
+          },
+          [`.${prefix}input-number-buttons svg`]: {
+            [`@apply h-4 w-4`]: {}
+          },
+          [`.${prefix}input-number-error-text`]: {
+            [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
+          },
+          [`.${prefix}input-number`]: {
+            [`@apply outline-none w-${config.input.focusSize} font-${config.input.font} transition-all duration-${config.input.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {},
+            [`&:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !text-${config.input.focusVisible.labelFloat.text} dark:!text-${config.input.focusVisible.labelFloat.textDark}`]: {}
+            },
+            [`&:focus-visible ~ .${prefix}input-number-icon`]: {
+              [`@apply !text-${config.input.focusVisible.icon.text}`]: {}
+            },
+            [`&:disabled ~ .${prefix}input-number-icon`]: {
+              [`@apply cursor-not-allowed opacity-75`]: {}
+            }
+          },
+          [`.${prefix}input-number-placeload`]: {
+            [`@apply absolute start-0 top-0 flex w-full items-center px-4`]: {},
+            [`.${prefix}placeload`]: {
+              [`@apply h-3 w-full max-w-[50%] rounded`]: {}
+            }
+          },
+          [`.${prefix}input-number-action`]: {
+            [`@apply text-${config.input.action.text} absolute end-0 top-0 flex items-center justify-center transition-colors duration-${config.input.action.duration}`]: {}
+          },
+          [`&.${prefix}input-number-focus`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply focus:border-primary-500 dark:focus:border-primary-500`]: {}
+            }
+          },
+          [`&.${prefix}input-number-rounded`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.default}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.default}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.default}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-smooth`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.smooth}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.smooth}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.smooth}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-curved`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.curved}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.curved}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.curved}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-full`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.full}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.full}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.full}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.sm.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-1.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.sm.iconOrAction.size} w-${config.input.sm.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.sm.iconOrAcionInner.size} w-${config.input.sm.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.sm.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply h-6 w-6`]: {}
+            }
+          },
+          [`&.${prefix}input-number-md`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.md.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-2.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.md.iconOrAction.size} w-${config.input.md.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.md.iconOrAcionInner.size} w-${config.input.md.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.md.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply  h-8 w-8`]: {}
+            }
+          },
+          [`&.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.lg.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-3.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.lg.iconOrAction.size} w-${config.input.lg.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.lg.iconOrAcionInner.size} w-${config.input.lg.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.lg.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply h-10 w-10`]: {}
+            }
+          },
+          [`&.${prefix}input-number-default`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.default.bg} border-${config.input.default.border} text-${config.input.default.text} placeholder:text-${config.input.default.textPlaceholder} dark:border-${config.input.default.borderDark} dark:bg-${config.input.default.bgDark} dark:text-${config.input.default.textDark} dark:placeholder:text-${config.input.default.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-muted-100 dark:hover:bg-muted-800`]: {},
+              [`@apply focus:bg-muted-100 dark:focus:bg-muted-800`]: {}
+            }
+          },
+          [`&.${prefix}input-number-default-contrast`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.defaultContrast.bg} border-${config.input.defaultContrast.border} text-${config.input.defaultContrast.text} placeholder:text-${config.input.defaultContrast.textPlaceholder} dark:border-${config.input.defaultContrast.borderDark} dark:bg-${config.input.defaultContrast.bgDark} dark:text-${config.input.defaultContrast.textDark} dark:placeholder:text-${config.input.defaultContrast.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-muted-100 dark:hover:bg-muted-900`]: {},
+              [`@apply focus:bg-muted-100 dark:focus:bg-muted-900`]: {}
+            }
+          },
+          [`&.${prefix}input-number-muted`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.muted.bg} border-${config.input.muted.border} text-${config.input.muted.text} placeholder:text-${config.input.muted.textPlaceholder} dark:border-${config.input.muted.borderDark} dark:bg-${config.input.muted.bgDark} dark:text-${config.input.muted.textDark} dark:placeholder:text-${config.input.muted.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-white dark:hover:bg-muted-800`]: {},
+              [`@apply focus:bg-white dark:focus:bg-muted-800`]: {}
+            }
+          },
+          [`&.${prefix}input-number-muted-contrast`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.mutedContrast.bg} border-${config.input.mutedContrast.border} text-${config.input.mutedContrast.text} placeholder:text-${config.input.mutedContrast.textPlaceholder} dark:border-${config.input.mutedContrast.borderDark} dark:bg-${config.input.mutedContrast.bgDark} dark:text-${config.input.mutedContrast.textDark} dark:placeholder:text-${config.input.mutedContrast.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-white dark:hover:bg-muted-900`]: {},
+              [`@apply focus:bg-white dark:focus:bg-muted-900`]: {}
+            }
+          },
+          [`&:not(.${prefix}input-number-loading)`]: {
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply text-${config.input.notLoading.text} dark:text-${config.input.notLoading.textDark}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-loading`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply text-transparent`]: {}
+            },
+            [`.${prefix}input-number-icon`]: {
+              [`@apply opacity-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply placeholder:text-transparent dark:placeholder:text-transparent`]: {}
+            }
+          },
+          [`&.${prefix}input-number-error`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply !border-${config.input.error.border} dark:!border-${config.input.error.borderDark}`]: {}
+            },
+            [`.${prefix}input-number-icon`]: {
+              [`@apply !text-${config.input.error.icon.text}`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-8 py-1 text-${config.input.hasNotIcon.text.sm} leading-4 ps-2 pe-14`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-8 py-1 text-${config.input.hasIcon.text.sm} leading-4 pe-14 ps-8`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-10 py-2 text-${config.input.hasNotIcon.text.md} leading-5 ps-3 pe-20`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-10 py-2 text-${config.input.hasIcon.text.md} leading-5 pe-20 ps-10`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-12 py-2 text-${config.input.hasNotIcon.text.lg} leading-5 ps-4 pe-24`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-12 py-2 text-${config.input.hasIcon.text.lg} leading-5 pe-24 ps-11`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceSM}`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceMD}`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceLG}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-7 text-${config.input.hasNotIcon.labelFloat.sm}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-7`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-sm`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-8 -ms-8 -mt-7 text-${config.input.hasIcon.labelFloat.sm}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-8 !-mt-7`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-md`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.md.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-8 !text-${config.input.hasNotIcon.labelFloat.md.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.md.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-md`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-10 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.md.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-10 !-mt-8 !text-${config.input.hasIcon.labelFloat.md.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.md.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.lg.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-9 !text-${config.input.hasNotIcon.labelFloat.lg.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.lg.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-lg`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-11 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.lg.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-10 !-mt-9 !text-${config.input.hasIcon.labelFloat.lg.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.lg.placeholderShown.text}`]: {}
+            }
+          }
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          [key$v]: defaultConfig$u
+        }
+      }
+    };
+  }
+);
+
+const key$u = "label";
+const defaultConfig$t = {
+  font: "sans",
+  text: "muted-400",
+  textDark: "muted-400/80"
+};
+
+const label = plugin__default.withOptions(
+  function(options) {
+    let { prefix } = defu.defu(options, defaultPluginOptions);
+    if (prefix) {
+      prefix = `${prefix}-`;
+    }
+    return function({ addComponents, theme }) {
+      const config = theme(`shurikenUi.${key$u}`);
+      addComponents({
+        [`.${prefix}label`]: {
+          [`@apply inline-block font-${config.font} leading-none text-${config.text} dark:text-${config.textDark}`]: {}
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          [key$u]: defaultConfig$t
+        }
+      }
+    };
+  }
+);
+
+const key$t = "link";
+const defaultConfig$s = {
+  font: "sans",
+  textHover: "primary-500",
+  textHoverDark: "primary-400",
+  textFocus: "primary-500",
+  textFocusDark: "primary-400"
+};
+
+const link = plugin__default.withOptions(
+  function(options) {
+    let { prefix } = defu.defu(options, defaultPluginOptions);
+    if (prefix) {
+      prefix = `${prefix}-`;
+    }
+    return function({ addComponents, theme }) {
+      const config = theme(`shurikenUi.${key$t}`);
+      addComponents({
+        [`.${prefix}link`]: {
+          [`@apply font-${config.font} hover:text-${config.textHover} dark:hover:text-${config.textHoverDark} underline-offset-4 hover:underline focus:text-${config.textFocus} dark:focus:text-${config.textFocusDark} focus:underline`]: {}
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          [key$t]: defaultConfig$s
+        }
+      }
+    };
+  }
+);
+
+const key$s = "list";
+const defaultConfig$r = {
+  ul: "disc",
+  ol: "decimal",
+  base: {
+    textMarker: "muted-500",
+    textMarkerDark: "muted-400",
+    text: "slate-700",
+    textDark: "slate-300",
+    font: "sans"
+  },
+  media: {
+    textMarker: "slate-500",
+    textMarkerDark: "slate-400"
+  }
+};
+
+const list = plugin__default.withOptions(
+  function(options) {
+    let { prefix } = defu.defu(options, defaultPluginOptions);
+    if (prefix) {
+      prefix = `${prefix}-`;
+    }
+    return function({ addComponents, theme }) {
+      const config = theme(`shurikenUi.${key$s}`);
+      addComponents({
+        [`.${prefix}list`]: {
+          [`&.${prefix}list-ul`]: {
+            [`@apply list-${config.ul}`]: {}
+          },
+          [`&.${prefix}list-ol`]: {
+            [`@apply list-${config.ol}`]: {}
+          },
+          [`&.${prefix}list-base`]: {
+            [`@apply space-y-1 marker:text-${config.base.textMarker} dark:marker:text-${config.base.textMarkerDark} font-${config.base.font} text-${config.base.text} dark:text-${config.base.textDark}`]: {}
+          },
+          [`&.${prefix}list-media`]: {
+            [`@apply space-y-4 marker:text-${config.media.textMarker} dark:marker:text-${config.media.textMarkerDark}`]: {},
+            [`.${prefix}list-item`]: {
+              [`@apply flex gap-2`]: {}
+            }
+          }
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          [key$s]: defaultConfig$r
+        }
+      }
+    };
+  }
+);
+
+const key$r = "listbox";
+const defaultConfig$q = {
+  labelFloat: {
+    text: "primary-500",
+    size: "5",
+    duration: "300"
+  },
+  button: {
+    size: "full",
+    text: "sm",
+    textPosition: "start",
+    font: "sans",
+    iconBox: {
+      space: "2",
+      size: "6",
+      innerSize: "4"
+    },
+    placeholder: {
+      text: "muted-300",
+      textDark: "muted-500",
+      textPosition: "left"
+    }
+  },
+  icon: {
+    text: "muted-400",
+    duration: "300"
+  },
+  chevron: {
+    inner: {
+      size: "4",
+      text: "muted-400",
+      duration: "300"
+    }
+  },
+  options: {
+    ringFocus: "primary-500/50",
+    space: "2",
+    text: "base",
+    shadowSize: "lg",
+    shadow: "muted-500/10",
+    shadowDark: "muted-800/10"
+  },
+  option: {
+    duration: "300",
+    iconBox: {
+      text: "muted-200",
+      textDark: "muted-400",
+      innerSize: "5"
+    },
+    inner: {
+      heading: {
+        text: "muted-800",
+        textDark: "white"
+      },
+      text: "muted-400"
+    },
+    icon: {
+      text: "primary-600"
+    },
+    iconInner: {
+      size: "4"
+    },
+    activeOrHover: {
+      text: "primary-600",
+      textDark: "primary-400",
+      bg: "primary-500/10"
+    }
+  },
+  errorText: {
+    text: "danger-600",
+    textSize: "[0.65rem]",
+    font: "sans",
+    fontWeight: "medium"
+  },
+  sm: {
+    text: "xs",
+    icon: {
+      size: "8",
+      innerSize: "4"
     },
     placeload: {
       size: "8"
@@ -5645,6 +6204,7 @@ const defaultListboxConfig = {
     }
   }
 };
+
 const listbox = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -5652,9 +6212,7 @@ const listbox = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.listbox"
-      );
+      const config = theme(`shurikenUi.${key$r}`);
       addComponents({
         [`.${prefix}listbox`]: {
           [`@apply relative w-full`]: {},
@@ -6004,19 +6562,21 @@ const listbox = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          listbox: defaultListboxConfig
+          [key$r]: defaultConfig$q
         }
       }
     };
   }
 );
 
-const defaultMarkConfig = {
+const key$q = "mark";
+const defaultConfig$p = {
   bg: "primary-100",
   bgDark: "primary-800",
   text: "primary-800",
   textDark: "primary-200"
 };
+
 const mark = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6024,7 +6584,7 @@ const mark = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.mark");
+      const config = theme(`shurikenUi.${key$q}`);
       addComponents({
         [`.${prefix}mark`]: {
           [`@apply bg-${config.bg} dark:bg-${config.bgDark}`]: {},
@@ -6037,20 +6597,24 @@ const mark = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          mark: defaultMarkConfig
+          [key$q]: defaultConfig$p
         }
       }
     };
   }
 );
 
+const key$p = "mask";
+const defaultConfig$o = {};
+
 const mask = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
     if (prefix) {
       prefix = `${prefix}-`;
     }
-    return function({ addComponents }) {
+    return function({ addComponents, theme }) {
+      theme(`shurikenUi.${key$p}`);
       addComponents({
         [`.${prefix}mask`]: {
           "mask-size": "contain",
@@ -6076,11 +6640,18 @@ const mask = plugin__default.withOptions(
     };
   },
   function() {
-    return {};
+    return {
+      theme: {
+        shurikenUi: {
+          [key$p]: defaultConfig$o
+        }
+      }
+    };
   }
 );
 
-const defaultMessageTextConfig = {
+const key$o = "messageText";
+const defaultConfig$n = {
   space: "6",
   head: {
     space: "2"
@@ -6154,6 +6725,7 @@ const defaultMessageTextConfig = {
     curved: "xl"
   }
 };
+
 const messageText = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6161,9 +6733,7 @@ const messageText = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.messageText"
-      );
+      const config = theme(`shurikenUi.${key$o}`);
       addComponents({
         [`.${prefix}message-text`]: {
           [`@apply relative p-${config.space}`]: {},
@@ -6241,14 +6811,15 @@ const messageText = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          messageText: defaultMessageTextConfig
+          [key$o]: defaultConfig$n
         }
       }
     };
   }
 );
 
-const defaultMessageConfig = {
+const key$n = "message";
+const defaultConfig$m = {
   messageIconOuter: {
     size: "10",
     icon: {
@@ -6417,6 +6988,7 @@ const defaultMessageConfig = {
     }
   }
 };
+
 const message = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6424,9 +6996,7 @@ const message = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.message"
-      );
+      const config = theme(`shurikenUi.${key$n}`);
       addComponents({
         [`.${prefix}message`]: {
           [`@apply flex min-h-[3rem] items-center border p-1 pe-2`]: {},
@@ -6440,7 +7010,7 @@ const message = plugin__default.withOptions(
             [`@apply text-${config.messageInnerText.textColor} px-3 block font-${config.messageInnerText.font} text-${config.messageInnerText.text}`]: {}
           },
           [`.${prefix}message-close`]: {
-            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
+            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
             [`.${prefix}close-icon`]: {
               [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]: {}
             }
@@ -6561,14 +7131,15 @@ const message = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          message: defaultMessageConfig
+          [key$n]: defaultConfig$m
         }
       }
     };
   }
 );
 
-const defaultModalConfig = {
+const key$m = "modal";
+const defaultConfig$l = {
   backdrop: {
     bg: "muted-800/70",
     bgDark: "muted-900/80"
@@ -6587,6 +7158,7 @@ const defaultModalConfig = {
   modal2XL: "3xl",
   modal3XL: "5xl"
 };
+
 const modal = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6594,9 +7166,7 @@ const modal = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.modal"
-      );
+      const config = theme(`shurikenUi.${key$m}`);
       addComponents({
         [`.${prefix}modal`]: {
           [`@apply fixed inset-0 z-[9999] flex items-center justify-center`]: {},
@@ -6653,14 +7223,15 @@ const modal = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          modal: defaultModalConfig
+          [key$m]: defaultConfig$l
         }
       }
     };
   }
 );
 
-const defaultPaginationConfig = {
+const key$l = "pagination";
+const defaultConfig$k = {
   size: "full",
   list: {
     border: "muted-200",
@@ -6737,6 +7308,7 @@ const defaultPaginationConfig = {
     full: "full"
   }
 };
+
 const pagination = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6744,9 +7316,7 @@ const pagination = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.pagination"
-      );
+      const config = theme(`shurikenUi.${key$l}`);
       addComponents({
         [`.${prefix}pagination`]: {
           [`@apply inline-flex w-${config.size} flex-col md:flex-row md:justify-between`]: {},
@@ -6794,14 +7364,15 @@ const pagination = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          pagination: defaultPaginationConfig
+          [key$l]: defaultConfig$k
         }
       }
     };
   }
 );
 
-const defaultParagraphConfig = {
+const key$k = "paragraph";
+const defaultConfig$j = {
   textXS: "xs",
   textSM: "sm",
   textMD: "base",
@@ -6827,6 +7398,7 @@ const defaultParagraphConfig = {
   textLeadSnug: "snug",
   textLeadLoose: "loose"
 };
+
 const paragraph = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6834,9 +7406,7 @@ const paragraph = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.paragraph"
-      );
+      const config = theme(`shurikenUi.${key$k}`);
       addComponents({
         [`.${prefix}paragraph`]: {
           [`@apply font-sans`]: {},
@@ -6920,14 +7490,15 @@ const paragraph = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          paragraph: defaultParagraphConfig
+          [key$k]: defaultConfig$j
         }
       }
     };
   }
 );
 
-const defaultPlaceholderPageConfig = {
+const key$j = "placeholderPage";
+const defaultConfig$i = {
   minSize: "[400px]",
   innerSize: "full",
   maxContentSize: "sm",
@@ -6944,6 +7515,7 @@ const defaultPlaceholderPageConfig = {
     text: "muted-400"
   }
 };
+
 const placeholderPage = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -6951,9 +7523,7 @@ const placeholderPage = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.placeholderPage"
-      );
+      const config = theme(`shurikenUi.${key$j}`);
       addComponents({
         [`.${prefix}placeholder-page`]: {
           [`@apply flex min-h-${config.minSize} items-center justify-center`]: {},
@@ -6998,20 +7568,24 @@ const placeholderPage = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          placeholderPage: defaultPlaceholderPageConfig
+          [key$j]: defaultConfig$i
         }
       }
     };
   }
 );
 
+const key$i = "placeload";
+const defaultConfig$h = {};
+
 const placeload = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
     if (prefix) {
       prefix = `${prefix}-`;
     }
-    return function({ addComponents }) {
+    return function({ addComponents, theme }) {
+      theme(`shurikenUi.${key$i}`);
       addComponents({
         [`.${prefix}placeload`]: {
           position: "relative",
@@ -7033,6 +7607,9 @@ const placeload = plugin__default.withOptions(
     }
     return {
       theme: {
+        shurikenUi: {
+          [key$i]: defaultConfig$h
+        },
         extend: {
           keyframes: {
             [`${prefix}placeload`]: {
@@ -7049,7 +7626,8 @@ const placeload = plugin__default.withOptions(
   }
 );
 
-const defaultProgressCircleConfig = {
+const key$h = "progressCircle";
+const defaultConfig$g = {
   circleDuration: "500",
   default: {
     text: "muted-200",
@@ -7062,6 +7640,7 @@ const defaultProgressCircleConfig = {
     stroke: "current"
   }
 };
+
 const progressCircle = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7069,9 +7648,7 @@ const progressCircle = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.progressCircle"
-      );
+      const config = theme(`shurikenUi.${key$h}`);
       addComponents({
         [`.${prefix}progress-circle`]: {
           [`@apply relative inline-flex items-center justify-center`]: {},
@@ -7092,14 +7669,15 @@ const progressCircle = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          progressCircle: defaultProgressCircleConfig
+          [key$h]: defaultConfig$g
         }
       }
     };
   }
 );
 
-const defaultProgressConfig = {
+const key$g = "progress";
+const defaultConfig$f = {
   size: "full",
   bar: {
     duration: "300"
@@ -7127,6 +7705,7 @@ const defaultProgressConfig = {
   warning: "warning-500",
   danger: "danger-500"
 };
+
 const progress = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7134,9 +7713,7 @@ const progress = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.progress"
-      );
+      const config = theme(`shurikenUi.${key$g}`);
       addComponents({
         [`.${prefix}progress`]: {
           [`@apply relative w-${config.size} overflow-hidden`]: {},
@@ -7213,7 +7790,7 @@ const progress = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          progress: defaultProgressConfig
+          [key$g]: defaultConfig$f
         },
         extend: {
           keyframes: {
@@ -7232,7 +7809,8 @@ const progress = plugin__default.withOptions(
   }
 );
 
-const defaultProseConfig = {
+const key$f = "prose";
+const defaultConfig$e = {
   color: "muted",
   dark: "invert",
   space: "4",
@@ -7251,6 +7829,7 @@ const defaultProseConfig = {
     tdBorderDark: "muted-700"
   }
 };
+
 const prose = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7258,9 +7837,7 @@ const prose = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.prose"
-      );
+      const config = theme(`shurikenUi.${key$f}`);
       addComponents({
         [`.${prefix}prose`]: {
           [`@apply prose prose-primary prose-${config.color} dark:prose-${config.dark} prose-th:p-${config.space} prose-td:p-${config.space} prose-table:bg-${config.bgTable} dark:prose-table:bg-${config.bgTableDark} prose-table:border prose-table:border-${config.borderTable} dark:prose-table:border-${config.borderTableDark}`]: {},
@@ -7281,14 +7858,15 @@ const prose = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          prose: defaultProseConfig
+          [key$f]: defaultConfig$e
         }
       }
     };
   }
 );
 
-const defaultRadioConfig = {
+const key$e = "radio";
+const defaultConfig$d = {
   outer: {
     size: "5"
   },
@@ -7331,6 +7909,7 @@ const defaultRadioConfig = {
   warning: "warning-500",
   danger: "danger-500"
 };
+
 const radio = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7338,9 +7917,7 @@ const radio = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.radio"
-      );
+      const config = theme(`shurikenUi.${key$e}`);
       addComponents({
         [`.${prefix}radio`]: {
           [`@apply relative inline-flex items-start gap-1`]: {},
@@ -7403,14 +7980,15 @@ const radio = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          radio: defaultRadioConfig
+          [key$e]: defaultConfig$d
         }
       }
     };
   }
 );
 
-const defaultSelectConfig = {
+const key$d = "select";
+const defaultConfig$c = {
   labelFloat: {
     text: "primary-500",
     size: "5",
@@ -7579,6 +8157,7 @@ const defaultSelectConfig = {
     }
   }
 };
+
 const select = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7586,9 +8165,7 @@ const select = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.select"
-      );
+      const config = theme(`shurikenUi.${key$d}`);
       addComponents({
         [`.${prefix}select-wrapper`]: {
           [`@apply relative`]: {},
@@ -7870,20 +8447,22 @@ const select = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          select: defaultSelectConfig
+          [key$d]: defaultConfig$c
         }
       }
     };
   }
 );
 
-const defaultSlimscrollConfig = {
+const key$c = "slimscroll";
+const defaultConfig$b = {
   width: "[6px]",
   bg: "black/5",
   bgDark: "white/5",
   bgHover: "black/20",
   bgHoverDark: "white/20"
 };
+
 const slimscroll = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7891,9 +8470,7 @@ const slimscroll = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.slimscroll"
-      );
+      const config = theme(`shurikenUi.${key$c}`);
       addComponents({
         [`.${prefix}slimscroll::-webkit-scrollbar, .${prefix}slimscroll-opaque::-webkit-scrollbar`]: {
           scrollBehavior: "smooth",
@@ -7916,14 +8493,15 @@ const slimscroll = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          slimscroll: defaultSlimscrollConfig
+          [key$c]: defaultConfig$b
         }
       }
     };
   }
 );
 
-const defaultSnackConfig = {
+const key$b = "snack";
+const defaultConfig$a = {
   rounded: "full",
   icon: {
     border: "muted-200",
@@ -7977,6 +8555,7 @@ const defaultSnackConfig = {
     bgDark: "muted-700"
   }
 };
+
 const snack = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -7984,12 +8563,10 @@ const snack = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.snack"
-      );
+      const config = theme(`shurikenUi.${key$b}`);
       addComponents({
         [`.${prefix}snack`]: {
-          [`@apply ${prefix}focus inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent overflow-hidden`]: {},
+          [`@apply inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent`]: {},
           [`.${prefix}snack-icon`]: {
             [`@apply border-${config.icon.border} -ms-0.5 flex items-center justify-center rounded-${config.icon.rounded} border bg-${config.icon.bg}`]: {}
           },
@@ -8046,14 +8623,15 @@ const snack = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          snack: defaultSnackConfig
+          [key$b]: defaultConfig$a
         }
       }
     };
   }
 );
 
-const defaultSwitchBallConfig = {
+const key$a = "switchBall";
+const defaulConfig = {
   handle: {
     border: "muted-300",
     borderDark: "muted-600",
@@ -8101,6 +8679,7 @@ const defaultSwitchBallConfig = {
   warning: "warning-400",
   danger: "danger-400"
 };
+
 const switchBall = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8108,20 +8687,18 @@ const switchBall = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.switchBall"
-      );
+      const config = theme(`shurikenUi.${key$a}`);
       addComponents({
         [`.${prefix}switch-ball`]: {
           [`@apply flex cursor-pointer items-center`]: {},
           [`.${prefix}switch-ball-outer`]: {
-            [`@apply relative block`]: {}
+            [`@apply ${prefix}focus relative block rounded-${config.handle.rounded}`]: {}
           },
           [`.${prefix}switch-ball-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute start-0.5 top-1/2 z-10 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition focus:w-6`]: {}
           },
           [`.${prefix}switch-ball-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
           },
           [`.${prefix}switch-ball-icon`]: {
             [`@apply pointer-events-none absolute start-2 top-1/2 z-10 h-${config.icon.size} w-${config.icon.size} translate-y-0 fill-current text-${config.icon.text} opacity-0 transition duration-${config.icon.duration}`]: {}
@@ -8143,9 +8720,6 @@ const switchBall = plugin__default.withOptions(
             [`&:checked ~ .${prefix}switch-ball-handle`]: {
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
             },
-            [`&:checked ~ .${prefix}switch-ball-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
-            },
             [`&:checked ~ .${prefix}switch-ball-icon`]: {
               [`@apply -translate-y-1/2 opacity-100`]: {}
             }
@@ -8173,14 +8747,15 @@ const switchBall = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          switchBall: defaultSwitchBallConfig
+          [key$a]: defaulConfig
         }
       }
     };
   }
 );
 
-const defaultSwitchThinConfig = {
+const key$9 = "switchThin";
+const defaultConfig$9 = {
   handle: {
     border: "muted-300",
     borderDark: "muted-600",
@@ -8223,6 +8798,7 @@ const defaultSwitchThinConfig = {
   warning: "warning-400",
   danger: "danger-400"
 };
+
 const switchThin = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8230,20 +8806,18 @@ const switchThin = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.switchThin"
-      );
+      const config = theme(`shurikenUi.switchThin`);
       addComponents({
         [`.${prefix}switch-thin`]: {
           [`@apply flex cursor-pointer items-center`]: {},
           [`.${prefix}switch-thin-outer`]: {
-            [`@apply relative block h-4`]: {}
+            [`@apply ${prefix}focus relative block h-4 rounded-${config.handle.rounded}`]: {}
           },
           [`.${prefix}switch-thin-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute -start-1 top-1/2 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition`]: {}
           },
           [`.${prefix}switch-thin-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
           },
           [`.${prefix}switch-thin-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
@@ -8261,9 +8835,6 @@ const switchThin = plugin__default.withOptions(
             [`@apply absolute z-20 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]: {},
             [`&:checked ~ .${prefix}switch-thin-handle`]: {
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
-            },
-            [`&:checked ~ .${prefix}switch-thin-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
             }
           },
           [`&.${prefix}switch-thin-primary .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]: {
@@ -8289,14 +8860,15 @@ const switchThin = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          switchThin: defaultSwitchThinConfig
+          [key$9]: defaultConfig$9
         }
       }
     };
   }
 );
 
-const defaultTabSliderConfig = {
+const key$8 = "tabSlider";
+const defaultConfig$8 = {
   track: {
     bg: "muted-100",
     bgDark: "muted-700",
@@ -8330,6 +8902,7 @@ const defaultTabSliderConfig = {
     track: "10"
   }
 };
+
 const tabSlider = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8337,9 +8910,7 @@ const tabSlider = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.tabSlider"
-      );
+      const config = theme(`shurikenUi.${key$8}`);
       addComponents({
         [`.${prefix}tab-slider`]: {
           [`@apply relative`]: {},
@@ -8450,14 +9021,15 @@ const tabSlider = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          tabSlider: defaultTabSliderConfig
+          [key$8]: defaultConfig$8
         }
       }
     };
   }
 );
 
-const defaultTabsConfig = {
+const key$7 = "tabs";
+const defaultConfig$7 = {
   inner: {
     font: "sans",
     space: "6"
@@ -8490,6 +9062,7 @@ const defaultTabsConfig = {
     }
   }
 };
+
 const tabs = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8497,7 +9070,7 @@ const tabs = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.tabs");
+      const config = theme(`shurikenUi.${key$7}`);
       addComponents({
         [`.${prefix}tabs`]: {
           [`@apply relative`]: {},
@@ -8552,14 +9125,15 @@ const tabs = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          tabs: defaultTabsConfig
+          [key$7]: defaultConfig$7
         }
       }
     };
   }
 );
 
-const defaultTagConfig = {
+const key$6 = "tag";
+const defaultConfig$6 = {
   space: "3",
   font: "sans",
   duration: "300",
@@ -8721,6 +9295,7 @@ const defaultTagConfig = {
     }
   }
 };
+
 const tag = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8728,7 +9303,7 @@ const tag = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.tag");
+      const config = theme(`shurikenUi.${key$6}`);
       addComponents({
         [`.${prefix}tag`]: {
           [`@apply inline-block px-${config.space} font-${config.font} transition-shadow duration-${config.duration}`]: {},
@@ -8857,14 +9432,15 @@ const tag = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          tag: defaultTagConfig
+          [key$6]: defaultConfig$6
         }
       }
     };
   }
 );
 
-const defaultTextConfig = {
+const key$5 = "text";
+const defaultConfig$5 = {
   textXS: "xs",
   textSM: "sm",
   textMD: "base",
@@ -8890,6 +9466,7 @@ const defaultTextConfig = {
   textLeadSnug: "snug",
   textLeadLoose: "loose"
 };
+
 const text$1 = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -8897,7 +9474,7 @@ const text$1 = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme("shurikenUi.text");
+      const config = theme(`shurikenUi.${key$5}`);
       addComponents({
         [`.${prefix}text`]: {
           [`@apply font-sans`]: {},
@@ -8981,14 +9558,15 @@ const text$1 = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          text: defaultTextConfig
+          [key$5]: defaultConfig$5
         }
       }
     };
   }
 );
 
-const defaultTextareaConfig = {
+const key$4 = "textarea";
+const defaultConfig$4 = {
   labelFloat: {
     text: "primary-500",
     size: "5",
@@ -9105,6 +9683,7 @@ const defaultTextareaConfig = {
     }
   }
 };
+
 const textarea = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -9112,9 +9691,7 @@ const textarea = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.textarea"
-      );
+      const config = theme(`shurikenUi.${key$4}`);
       addComponents({
         [`.${prefix}textarea-wrapper`]: {
           [`@apply relative`]: {},
@@ -9304,14 +9881,15 @@ const textarea = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          textarea: defaultTextareaConfig
+          [key$4]: defaultConfig$4
         }
       }
     };
   }
 );
 
-const defaultThemeSwitchConfig = {
+const key$3 = "themeSwitch";
+const defaultConfig$3 = {
   bg: "muted-200",
   bgDark: "muted-700",
   rounded: "full",
@@ -9338,6 +9916,7 @@ const defaultThemeSwitchConfig = {
     duration: "300"
   }
 };
+
 const themeSwitch = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -9345,9 +9924,7 @@ const themeSwitch = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.themeSwitch"
-      );
+      const config = theme(`shurikenUi.${key$3}`);
       addComponents({
         [`.${prefix}theme-switch`]: {
           [`@apply bg-${config.bg} dark:bg-${config.bgDark} relative block h-6 w-14 scale-[0.8] rounded-${config.rounded}`]: {},
@@ -9386,14 +9963,15 @@ const themeSwitch = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          themeSwitch: defaultThemeSwitchConfig
+          [key$3]: defaultConfig$3
         }
       }
     };
   }
 );
 
-const defaultThemeToggleConfig = {
+const key$2 = "themeToggle";
+const defaultConfig$2 = {
   size: "9",
   rounded: "full",
   duration: "300",
@@ -9436,6 +10014,7 @@ const defaultThemeToggleConfig = {
     }
   }
 };
+
 const themeToggle = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -9443,9 +10022,7 @@ const themeToggle = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.themeToggle"
-      );
+      const config = theme(`shurikenUi.${key$2}`);
       addComponents({
         [`.${prefix}theme-toggle`]: {
           [`@apply ${prefix}focus relative block h-${config.size} w-${config.size} shrink-0 overflow-hidden rounded-${config.rounded} transition-all duration-${config.duration} focus-visible:outline-2 dark:ring-offset-${config.ringDark}`]: {},
@@ -9493,14 +10070,15 @@ const themeToggle = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          themeToggle: defaultThemeToggleConfig
+          [key$2]: defaultConfig$2
         }
       }
     };
   }
 );
 
-const defaultToastConfig = {
+const key$1 = "toast";
+const defaultConfig$1 = {
   font: "sans",
   title: {
     heading: "sm",
@@ -9600,6 +10178,7 @@ const defaultToastConfig = {
     shadowSize: "xl"
   }
 };
+
 const toast = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -9607,9 +10186,7 @@ const toast = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.toast"
-      );
+      const config = theme(`shurikenUi.${key$1}`);
       addComponents({
         [`.${prefix}toast`]: {
           [`@apply relative flex font-${config.font} overflow-hidden`]: {},
@@ -9720,14 +10297,15 @@ const toast = plugin__default.withOptions(
     return {
       theme: {
         shurikenUi: {
-          toast: defaultToastConfig
+          [key$1]: defaultConfig$1
         }
       }
     };
   }
 );
 
-const defaultTooltipConfig = {
+const key = "tooltip";
+const defaultConfig = {
   font: "sans",
   bg: "[#1e293b]",
   bgDark: "[#ec4899]",
@@ -9736,6 +10314,7 @@ const defaultTooltipConfig = {
   minWidth: "3rem",
   maxWidth: "21rem"
 };
+
 const tooltip = plugin__default.withOptions(
   function(options) {
     let { prefix } = defu.defu(options, defaultPluginOptions);
@@ -9743,9 +10322,7 @@ const tooltip = plugin__default.withOptions(
       prefix = `${prefix}-`;
     }
     return function({ addComponents, theme }) {
-      const config = theme(
-        "shurikenUi.tooltip"
-      );
+      const config = theme(`shurikenUi.${key}`);
       const tooltip = `data-${prefix}tooltip`;
       const position = `data-${prefix}tooltip-position`;
       addComponents({
@@ -9907,6 +10484,9 @@ const tooltip = plugin__default.withOptions(
     }
     return {
       theme: {
+        shurikenUi: {
+          [key]: defaultConfig
+        },
         extend: {
           keyframes: {
             [`${prefix}tooltip-x`]: {
@@ -9926,9 +10506,6 @@ const tooltip = plugin__default.withOptions(
             [`${prefix}tooltip-x`]: `${prefix}tooltip-x 300ms ease-out forwards`,
             [`${prefix}tooltip-y`]: `${prefix}tooltip-y 300ms ease-out forwards`
           }
-        },
-        shurikenUi: {
-          tooltip: defaultTooltipConfig
         }
       }
     };
@@ -9958,6 +10535,7 @@ const components = [
   inputFileRegular,
   inputFile,
   input,
+  inputNumber,
   label,
   link,
   list,