@shuriken-ui/tailwind 3.0.0-next.6 → 3.0.1

package/dist/plugins/index.mjs

@@ -15,8 +15,8 @@ function mergePlugins(plugins) {
   return plugin((api) => plugins.map((plugin2) => plugin2.handler(api)), config);
 }
 
-const key$S = "accordion";
-const defaultConfig$R = {
+const key$T = "accordion";
+const defaultConfig$S = {
   wrapper: {
     width: "full",
     rounded: {
@@ -233,15 +233,15 @@ const defaultConfig$R = {
   }
 };
 
-const config$S = {
+const config$T = {
   theme: {
     nui: {
-      [key$S]: defaultConfig$R
+      [key$T]: defaultConfig$S
     }
   }
 };
 const accordion = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$S}`);
+  const config2 = theme(`nui.${key$T}`);
   addComponents({
     //Accordion:wrapper
     ".nui-accordion": {
@@ -458,10 +458,10 @@ const accordion = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$S);
+}, config$T);
 
-const key$R = "autocomplete";
-const defaultConfig$Q = {
+const key$S = "autocomplete";
+const defaultConfig$R = {
   rounded: {
     none: "none",
     sm: "md",
@@ -949,15 +949,15 @@ const defaultConfig$Q = {
   }
 };
 
-const config$R = {
+const config$S = {
   theme: {
     nui: {
-      [key$R]: defaultConfig$Q
+      [key$S]: defaultConfig$R
     }
   }
 };
 const autocomplete = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$R}`);
+  const config2 = theme(`nui.${key$S}`);
   addComponents({
     ".nui-autocomplete": {
       "@apply w-full relative": {},
@@ -1051,15 +1051,6 @@ const autocomplete = plugin(({ addComponents, theme }) => {
           "@apply h-3 w-full max-w-[75%] rounded": {}
         }
       },
-      //Autocomplete:error
-      ".nui-autocomplete-error-text": {
-        //Base
-        "@apply mt-1 block leading-none": {},
-        //Error text font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight}`]: {},
-        //Error text color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Autocomplete:results
       ".nui-autocomplete-results": {
         "@apply nui-slimscroll absolute z-20 mt-1 max-h-[265px] w-full overflow-auto py-1 outline-none sm:text-sm": {},
@@ -1463,10 +1454,10 @@ const autocomplete = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$R);
+}, config$S);
 
-const key$Q = "avatar";
-const defaultConfig$P = {
+const key$R = "avatar";
+const defaultConfig$Q = {
   inner: {
     size: "full",
     transition: {
@@ -1815,15 +1806,15 @@ const defaultConfig$P = {
   }
 };
 
-const config$Q = {
+const config$R = {
   theme: {
     nui: {
-      [key$Q]: defaultConfig$P
+      [key$R]: defaultConfig$Q
     }
   }
 };
 const avatar = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$Q}`);
+  const config2 = theme(`nui.${key$R}`);
   addComponents({
     ".nui-avatar": {
       //Avatar:wrapper
@@ -2588,10 +2579,10 @@ const avatar = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$Q);
+}, config$R);
 
-const key$P = "avatarGroup";
-const defaultConfig$O = {
+const key$Q = "avatarGroup";
+const defaultConfig$P = {
   avatar: {
     rounded: "full",
     outer: {
@@ -2711,15 +2702,15 @@ const defaultConfig$O = {
   }
 };
 
-const config$P = {
+const config$Q = {
   theme: {
     nui: {
-      [key$P]: defaultConfig$O
+      [key$Q]: defaultConfig$P
     }
   }
 };
 const avatarGroup = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$P}`);
+  const config2 = theme(`nui.${key$Q}`);
   addComponents({
     ".nui-avatar-group": {
       "@apply flex": {},
@@ -2863,10 +2854,10 @@ const avatarGroup = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$P);
+}, config$Q);
 
-const key$O = "breadcrumb";
-const defaultConfig$N = {
+const key$P = "breadcrumb";
+const defaultConfig$O = {
   item: {
     text: {
       font: {
@@ -2932,15 +2923,15 @@ const defaultConfig$N = {
   }
 };
 
-const config$O = {
+const config$P = {
   theme: {
     nui: {
-      [key$O]: defaultConfig$N
+      [key$P]: defaultConfig$O
     }
   }
 };
 const breadcrumb = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$O}`);
+  const config2 = theme(`nui.${key$P}`);
   addComponents({
     ".nui-breadcrumb": {
       ".nui-breadcrumb-list": {
@@ -3005,10 +2996,10 @@ const breadcrumb = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$O);
+}, config$P);
 
-const key$N = "buttonAction";
-const defaultConfig$M = {
+const key$O = "buttonAction";
+const defaultConfig$N = {
   rounded: {
     none: "none",
     sm: "md",
@@ -3343,15 +3334,15 @@ const defaultConfig$M = {
   }
 };
 
-const config$N = {
+const config$O = {
   theme: {
     nui: {
-      [key$N]: defaultConfig$M
+      [key$O]: defaultConfig$N
     }
   }
 };
 const buttonAction = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$N}`);
+  const config2 = theme(`nui.${key$O}`);
   addComponents({
     ".nui-button-action": {
       //Wrapper
@@ -3540,10 +3531,10 @@ const buttonAction = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$N);
+}, config$O);
 
-const key$M = "buttonClose";
-const defaultConfig$L = {
+const key$N = "buttonClose";
+const defaultConfig$M = {
   size: {
     xs: {
       outer: "6",
@@ -3579,6 +3570,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-100",
           dark: "muted-700"
+        },
+        focus: {
+          light: "muted-100",
+          dark: "muted-700"
+        },
+        active: {
+          light: "transparent",
+          dark: "transparent"
         }
       },
       font: {
@@ -3597,6 +3596,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-100",
           dark: "muted-900"
+        },
+        focus: {
+          light: "muted-100",
+          dark: "muted-900"
+        },
+        active: {
+          light: "transparent",
+          dark: "transparent"
         }
       },
       font: {
@@ -3615,6 +3622,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-50",
           dark: "muted-600"
+        },
+        focus: {
+          light: "muted-50",
+          dark: "muted-600"
+        },
+        active: {
+          light: "muted-100",
+          dark: "muted-700"
         }
       },
       font: {
@@ -3633,6 +3648,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-50",
           dark: "muted-900"
+        },
+        focus: {
+          light: "muted-50",
+          dark: "muted-900"
+        },
+        active: {
+          light: "muted-100",
+          dark: "muted-950"
         }
       },
       font: {
@@ -3651,6 +3674,14 @@ const defaultConfig$L = {
         hover: {
           light: "primary-500/20",
           dark: "primary-500/20"
+        },
+        focus: {
+          light: "primary-500/20",
+          dark: "primary-500/20"
+        },
+        active: {
+          light: "primary-500/10",
+          dark: "primary-500/10"
         }
       },
       font: {
@@ -3669,6 +3700,14 @@ const defaultConfig$L = {
         hover: {
           light: "info-500/20",
           dark: "info-500/20"
+        },
+        focus: {
+          light: "info-500/20",
+          dark: "info-500/20"
+        },
+        active: {
+          light: "info-500/10",
+          dark: "info-500/10"
         }
       },
       font: {
@@ -3687,6 +3726,14 @@ const defaultConfig$L = {
         hover: {
           light: "success-500/20",
           dark: "success-500/20"
+        },
+        focus: {
+          light: "success-500/20",
+          dark: "success-500/20"
+        },
+        active: {
+          light: "success-500/10",
+          dark: "success-500/10"
         }
       },
       font: {
@@ -3705,6 +3752,14 @@ const defaultConfig$L = {
         hover: {
           light: "warning-500/20",
           dark: "warning-500/20"
+        },
+        focus: {
+          light: "warning-500/20",
+          dark: "warning-500/20"
+        },
+        active: {
+          light: "warning-500/10",
+          dark: "warning-500/10"
         }
       },
       font: {
@@ -3723,6 +3778,14 @@ const defaultConfig$L = {
         hover: {
           light: "danger-500/20",
           dark: "danger-500/20"
+        },
+        focus: {
+          light: "danger-500/20",
+          dark: "danger-500/20"
+        },
+        active: {
+          light: "danger-500/10",
+          dark: "danger-500/10"
         }
       },
       font: {
@@ -3739,15 +3802,15 @@ const defaultConfig$L = {
   }
 };
 
-const config$M = {
+const config$N = {
   theme: {
     nui: {
-      [key$M]: defaultConfig$L
+      [key$N]: defaultConfig$M
     }
   }
 };
 const buttonClose = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$M}`);
+  const config2 = theme(`nui.${key$N}`);
   addComponents({
     ".nui-button-close": {
       "@apply nui-focus flex items-center justify-center disabled:opacity-30 cursor-pointer": {},
@@ -3807,7 +3870,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.default.background.base.light} dark:bg-${config2.color.default.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.default.background.hover.light} dark:hover:bg-${config2.color.default.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.default.background.hover.light} dark:hover:bg-${config2.color.default.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.default.background.focus.light} dark:focus-visible:bg-${config2.color.default.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.default.background.active.light} dark:active:enabled:bg-${config2.color.default.background.active.dark}`]: {}
       },
       //Color:default-contrast
       "&.nui-button-default-contrast": {
@@ -3815,7 +3882,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.defaultContrast.background.base.light} dark:bg-${config2.color.defaultContrast.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.defaultContrast.background.hover.light} dark:hover:bg-${config2.color.defaultContrast.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.defaultContrast.background.hover.light} dark:hover:bg-${config2.color.defaultContrast.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.defaultContrast.background.focus.light} dark:focus-visible:bg-${config2.color.defaultContrast.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.defaultContrast.background.active.light} dark:active:enabled:bg-${config2.color.defaultContrast.background.active.dark}`]: {}
       },
       //Color:muted
       "&.nui-button-muted": {
@@ -3823,7 +3894,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.muted.background.base.light} dark:bg-${config2.color.muted.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.muted.background.hover.light} dark:hover:bg-${config2.color.muted.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.muted.background.hover.light} dark:hover:bg-${config2.color.muted.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.muted.background.focus.light} dark:focus-visible:bg-${config2.color.muted.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.muted.background.active.light} dark:active:enabled:bg-${config2.color.muted.background.active.dark}`]: {}
       },
       //Color:muted-contrast
       "&.nui-button-muted-contrast": {
@@ -3831,7 +3906,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.mutedContrast.background.base.light} dark:bg-${config2.color.mutedContrast.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.mutedContrast.background.hover.light} dark:hover:bg-${config2.color.mutedContrast.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.mutedContrast.background.hover.light} dark:hover:bg-${config2.color.mutedContrast.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.mutedContrast.background.focus.light} dark:focus-visible:bg-${config2.color.mutedContrast.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.mutedContrast.background.active.light} dark:active:enabled:bg-${config2.color.mutedContrast.background.active.dark}`]: {}
       },
       //Color:primary
       "&.nui-button-primary": {
@@ -3839,7 +3918,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.primary.background.base.light} dark:bg-${config2.color.primary.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.primary.background.hover.light} dark:hover:bg-${config2.color.primary.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.primary.background.hover.light} dark:hover:bg-${config2.color.primary.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.primary.background.focus.light} dark:focus-visible:bg-${config2.color.primary.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.primary.background.active.light} dark:active:enabled:bg-${config2.color.primary.background.active.dark}`]: {}
       },
       //Color:info
       "&.nui-button-info": {
@@ -3847,7 +3930,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.info.background.base.light} dark:bg-${config2.color.info.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.info.background.hover.light} dark:hover:bg-${config2.color.info.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.info.background.hover.light} dark:hover:bg-${config2.color.info.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.info.background.focus.light} dark:focus-visible:bg-${config2.color.info.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.info.background.active.light} dark:active:enabled:bg-${config2.color.info.background.active.dark}`]: {}
       },
       //Color:success
       "&.nui-button-success": {
@@ -3855,7 +3942,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.success.background.base.light} dark:bg-${config2.color.success.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.success.background.hover.light} dark:hover:bg-${config2.color.success.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.success.background.hover.light} dark:hover:bg-${config2.color.success.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.success.background.focus.light} dark:focus-visible:bg-${config2.color.success.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.success.background.active.light} dark:active:enabled:bg-${config2.color.success.background.active.dark}`]: {}
       },
       //Color:warning
       "&.nui-button-warning": {
@@ -3863,7 +3954,11 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.warning.background.base.light} dark:bg-${config2.color.warning.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.warning.background.hover.light} dark:hover:bg-${config2.color.warning.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.warning.background.hover.light} dark:hover:bg-${config2.color.warning.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.warning.background.focus.light} dark:focus-visible:bg-${config2.color.warning.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.warning.background.active.light} dark:active:enabled:bg-${config2.color.warning.background.active.dark}`]: {}
       },
       //Color:danger
       "&.nui-button-danger": {
@@ -3871,19 +3966,23 @@ const buttonClose = plugin(({ addComponents, theme }) => {
         //Background
         [`@apply bg-${config2.color.danger.background.base.light} dark:bg-${config2.color.danger.background.base.dark}`]: {},
         //Background hover
-        [`@apply hover:bg-${config2.color.danger.background.hover.light} dark:hover:bg-${config2.color.danger.background.hover.dark}`]: {}
+        [`@apply hover:bg-${config2.color.danger.background.hover.light} dark:hover:bg-${config2.color.danger.background.hover.dark}`]: {},
+        //Background focus
+        [`@apply focus-visible:bg-${config2.color.danger.background.focus.light} dark:focus-visible:bg-${config2.color.danger.background.focus.dark}`]: {},
+        //Background active
+        [`@apply active:enabled:bg-${config2.color.danger.background.active.light} dark:active:enabled:bg-${config2.color.danger.background.active.dark}`]: {}
       }
     }
   });
-}, config$M);
+}, config$N);
 
-const key$L = "buttonAction";
-const defaultConfig$K = {};
+const key$M = "buttonAction";
+const defaultConfig$L = {};
 
-const config$L = {
+const config$M = {
   theme: {
     nui: {
-      [key$L]: defaultConfig$K
+      [key$M]: defaultConfig$L
     }
   }
 };
@@ -3891,7 +3990,8 @@ const buttonGroup = plugin(
   ({ addComponents }) => addComponents({
     '.nui-button-group, [role="group"]': {
       "@apply flex": {},
-      ".nui-button, .nui-button-action, .nui-button-icon": {
+      // Button
+      "> .nui-button:not(:only-child), > .nui-button-action:not(:only-child), > .nui-button-icon:not(:only-child)": {
         "@apply !border-e-0": {},
         "&:focus": {
           "@apply !z-10 relative": {}
@@ -3906,6 +4006,7 @@ const buttonGroup = plugin(
           "@apply !border-e !rounded-s-none": {}
         }
       },
+      // Input
       ".nui-input-wrapper:not(:first-child):not(:last-child)": {
         ".nui-input": {
           "@apply !border-e-0 !rounded-none": {},
@@ -3914,15 +4015,15 @@ const buttonGroup = plugin(
           }
         }
       },
-      ".nui-input-wrapper:first-child": {
+      ".nui-input-wrapper:first-child:not(:last-child)": {
         ".nui-input": {
-          "@apply !rounded-e-none": {},
+          "@apply !border-e-0 !rounded-e-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
           }
         }
       },
-      ".nui-input-wrapper:last-child": {
+      ".nui-input-wrapper:last-child:not(:first-child)": {
         ".nui-input": {
           "@apply !border-e !rounded-s-none": {},
           "&:focus": {
@@ -3930,6 +4031,57 @@ const buttonGroup = plugin(
           }
         }
       },
+      // InputNumber
+      ".nui-input-number-wrapper:not(:first-child):not(:last-child)": {
+        ".nui-input-number": {
+          "@apply !border-e-0 !rounded-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-input-number-wrapper:first-child:not(:last-child)": {
+        ".nui-input-number": {
+          "@apply !border-e-0 !rounded-e-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-input-number-wrapper:last-child:not(:first-child)": {
+        ".nui-input-number": {
+          "@apply !border-e !rounded-s-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      // InputFileRegular
+      ".nui-input-file-regular:not(:first-child):not(:last-child)": {
+        ".nui-input-file-inner": {
+          "@apply !border-e-0 !rounded-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-input-file-regular:first-child:not(:last-child)": {
+        ".nui-input-file-inner": {
+          "@apply !border-e-0 !rounded-e-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-input-file-regular:last-child:not(:first-child)": {
+        ".nui-input-file-inner": {
+          "@apply !border-e !rounded-s-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      // Select
       ".nui-select-wrapper:not(:first-child):not(:last-child)": {
         ".nui-select": {
           "@apply !border-e-0 !rounded-none": {},
@@ -3938,40 +4090,83 @@ const buttonGroup = plugin(
           }
         }
       },
-      ".nui-select-wrapper:first-child": {
+      ".nui-select-wrapper:first-child:not(:last-child)": {
         ".nui-select": {
-          "@apply !rounded-e-none": {},
+          "@apply !border-e-0 !rounded-e-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
           }
         }
       },
-      ".nui-select-wrapper:last-child": {
-        ".nui-select": {
+      // Autocomplete
+      ".nui-autocomplete:not(:first-child):not(:last-child)": {
+        ".nui-autocomplete-input": {
+          "@apply !border-e-0 !rounded-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-autocomplete:first-child:not(:last-child)": {
+        ".nui-autocomplete-input": {
+          "@apply !border-e-0 !rounded-e-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-autocomplete:last-child:not(:first-child)": {
+        ".nui-autocomplete-input": {
           "@apply !border-e !rounded-s-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
           }
         }
       },
+      // Dropdown
       ".nui-dropdown:not(:first-child):not(:last-child)": {
-        ".nui-nui-button": {
+        ".nui-button": {
           "@apply !border-e-0 !rounded-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
           }
         }
       },
-      ".nui-dropdown:first-child": {
-        ".nui-nui-button": {
-          "@apply !rounded-e-none": {},
+      ".nui-dropdown:first-child:not(:last-child)": {
+        ".nui-button": {
+          "@apply !border-e-0 !rounded-e-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
           }
         }
       },
-      ".nui-dropdown:last-child": {
-        ".nui-nui-button": {
+      ".nui-dropdown:last-child:not(:first-child)": {
+        ".nui-button": {
+          "@apply !border-e !rounded-s-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      // Listbox
+      ".nui-listbox:not(:first-child):not(:last-child)": {
+        ".nui-listbox-button": {
+          "@apply !border-e-0 !rounded-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-listbox:first-child:not(:last-child)": {
+        ".nui-listbox-button": {
+          "@apply !border-e-0 !rounded-e-none": {},
+          "&:focus": {
+            "@apply !z-10 relative": {}
+          }
+        }
+      },
+      ".nui-listbox:last-child:not(:first-child)": {
+        ".nui-listbox-button": {
           "@apply !border-e !rounded-s-none": {},
           "&:focus": {
             "@apply !z-10 relative": {}
@@ -3980,11 +4175,11 @@ const buttonGroup = plugin(
       }
     }
   }),
-  config$L
+  config$M
 );
 
-const key$K = "buttonIcon";
-const defaultConfig$J = {
+const key$L = "buttonIcon";
+const defaultConfig$K = {
   font: {
     family: "sans",
     size: "sm",
@@ -4242,15 +4437,15 @@ const defaultConfig$J = {
   }
 };
 
-const config$K = {
+const config$L = {
   theme: {
     nui: {
-      [key$K]: defaultConfig$J
+      [key$L]: defaultConfig$K
     }
   }
 };
 const buttonIcon = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$K}`);
+  const config2 = theme(`nui.${key$L}`);
   addComponents({
     ".nui-button-icon": {
       //Base
@@ -4405,10 +4600,10 @@ const buttonIcon = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$K);
+}, config$L);
 
-const key$J = "button";
-const defaultConfig$I = {
+const key$K = "button";
+const defaultConfig$J = {
   font: {
     family: "sans",
     weight: "normal"
@@ -4501,8 +4696,8 @@ const defaultConfig$I = {
         },
         border: {
           light: {
-            base: "muted-200",
-            hover: "muted-300"
+            base: "muted-300",
+            hover: "muted-200"
           },
           dark: {
             base: "muted-600",
@@ -5459,15 +5654,15 @@ const defaultConfig$I = {
   }
 };
 
-const config$J = {
+const config$K = {
   theme: {
     nui: {
-      button: defaultConfig$I
+      button: defaultConfig$J
     }
   }
 };
 const button = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$J}`);
+  const config2 = theme(`nui.${key$K}`);
   addComponents({
     ".nui-button": {
       // #region Base
@@ -6235,10 +6430,10 @@ const button = plugin(({ addComponents, theme }) => {
       // #endregion
     }
   });
-}, config$J);
+}, config$K);
 
-const key$I = "card";
-const defaultConfig$H = {
+const key$J = "card";
+const defaultConfig$I = {
   width: "full",
   rounded: {
     none: "none",
@@ -6369,15 +6564,15 @@ const defaultConfig$H = {
   }
 };
 
-const config$I = {
+const config$J = {
   theme: {
     nui: {
-      [key$I]: defaultConfig$H
+      [key$J]: defaultConfig$I
     }
   }
 };
 const card = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$I}`);
+  const config2 = theme(`nui.${key$J}`);
   addComponents({
     ".nui-card": {
       //Base
@@ -6482,10 +6677,10 @@ const card = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$I);
+}, config$J);
 
-const key$H = "checkbox";
-const defaultConfig$G = {
+const key$I = "checkbox";
+const defaultConfig$H = {
   rounded: {
     sm: "rounded",
     md: "rounded-md",
@@ -6587,15 +6782,15 @@ const defaultConfig$G = {
   }
 };
 
-const config$H = {
+const config$I = {
   theme: {
     nui: {
-      [key$H]: defaultConfig$G
+      [key$I]: defaultConfig$H
     }
   }
 };
 const checkbox = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$H}`);
+  const config2 = theme(`nui.${key$I}`);
   addComponents({
     //Wrapper
     ".nui-checkbox": {
@@ -6659,9 +6854,7 @@ const checkbox = plugin(({ addComponents, theme }) => {
       },
       //Error
       ".nui-checkbox-error": {
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} ms-1 inline-block`]: {},
-        //Color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
+        [`@apply ms-1 inline-block`]: {}
       },
       //Rounded:sm
       "&.nui-checkbox-rounded-sm .nui-checkbox-outer, &.nui-checkbox-rounded-sm .nui-checkbox-inner": {
@@ -6721,10 +6914,10 @@ const checkbox = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$H);
+}, config$I);
 
-const key$G = "drodownDivider";
-const defaultConfig$F = {
+const key$H = "drodownDivider";
+const defaultConfig$G = {
   margin: {
     y: "2"
   },
@@ -6734,24 +6927,24 @@ const defaultConfig$F = {
   }
 };
 
-const config$G = {
+const config$H = {
   theme: {
     nui: {
-      [key$G]: defaultConfig$F
+      [key$H]: defaultConfig$G
     }
   }
 };
 const dropdownDivider = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$G}`);
+  const config2 = theme(`nui.${key$H}`);
   addComponents({
     ".nui-dropdown-divider": {
       [`@apply my-${config2.margin.y} block h-px w-full border-t border-${config2.border.light} dark:border-${config2.border.dark}`]: {}
     }
   });
-}, config$G);
+}, config$H);
 
-const key$F = "dropdownItem";
-const defaultConfig$E = {
+const key$G = "dropdownItem";
+const defaultConfig$F = {
   align: "start",
   font: {
     family: "sans",
@@ -6847,15 +7040,15 @@ const defaultConfig$E = {
   }
 };
 
-const config$F = {
+const config$G = {
   theme: {
     nui: {
-      [key$F]: defaultConfig$E
+      [key$G]: defaultConfig$F
     }
   }
 };
 const dropdownItem = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$F}`);
+  const config2 = theme(`nui.${key$G}`);
   addComponents({
     //Wrapper
     ".nui-dropdown-item": {
@@ -6872,6 +7065,10 @@ const dropdownItem = plugin(({ addComponents, theme }) => {
       "&:not(.nui-active)": {
         [`@apply text-${config2.font.color.inactive.light} dark:text-${config2.font.color.inactive.dark}`]: {}
       },
+      //Item:disabled
+      "&.nui-item-disabled": {
+        [`@apply opacity-50 pointer-events-none`]: {}
+      },
       //Contrast:default
       "&.nui-item-default": {
         //Background:hover
@@ -6939,10 +7136,10 @@ const dropdownItem = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$F);
+}, config$G);
 
-const key$E = "dropdown";
-const defaultConfig$D = {
+const key$F = "dropdown";
+const defaultConfig$E = {
   align: "start",
   button: {
     context: {
@@ -6989,15 +7186,6 @@ const defaultConfig$D = {
         duration: "300"
       }
     },
-    text: {
-      font: {
-        family: "sans",
-        color: {
-          light: "muted-400",
-          dark: "muted-400"
-        }
-      }
-    },
     chevron: {
       size: "4",
       transition: {
@@ -7075,15 +7263,15 @@ const defaultConfig$D = {
   }
 };
 
-const config$E = {
+const config$F = {
   theme: {
     nui: {
-      [key$E]: defaultConfig$D
+      [key$F]: defaultConfig$E
     }
   }
 };
 const dropdown = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$E}`);
+  const config2 = theme(`nui.${key$F}`);
   addComponents({
     //Wrapper
     ".nui-dropdown": {
@@ -7130,13 +7318,7 @@ const dropdown = plugin(({ addComponents, theme }) => {
       //Button:text
       ".nui-text-button": {
         //Base
-        "@apply flex items-center space-x-1": {},
-        //Font
-        [`@apply font-${config2.button.text.font.family} text-${config2.button.text.font.color.light} dark:text-${config2.button.text.font.color.dark}`]: {},
-        //Text:inner
-        ".nui-text-button-inner": {
-          [`@apply font-${config2.button.text.font.family}`]: {}
-        }
+        "@apply flex items-center space-x-1": {}
       },
       //Button:chevron
       ".nui-chevron": {
@@ -7238,10 +7420,10 @@ const dropdown = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$E);
+}, config$F);
 
-const key$D = "focus";
-const defaultConfig$C = {
+const key$E = "focus";
+const defaultConfig$D = {
   offset: "2",
   width: "2",
   style: "dashed",
@@ -7252,15 +7434,15 @@ const defaultConfig$C = {
   mode: "always"
 };
 
-const config$D = {
+const config$E = {
   theme: {
     nui: {
-      [key$D]: defaultConfig$C
+      [key$E]: defaultConfig$D
     }
   }
 };
 const focus = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$D}`);
+  const config2 = theme(`nui.${key$E}`);
   const mode = config2.mode === "focus-visible" ? "&:has(:focus-visible), &:focus-visible" : "&:focus-within";
   addComponents({
     ".nui-focus": {
@@ -7272,10 +7454,10 @@ const focus = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$D);
+}, config$E);
 
-const key$C = "fullscreenDropfile";
-const defaultConfig$B = {
+const key$D = "fullscreenDropfile";
+const defaultConfig$C = {
   height: "[230px]",
   width: "[500px]",
   rounded: "rounded-md",
@@ -7310,15 +7492,15 @@ const defaultConfig$B = {
   }
 };
 
-const config$C = {
+const config$D = {
   theme: {
     nui: {
-      [key$C]: defaultConfig$B
+      [key$D]: defaultConfig$C
     }
   }
 };
 const fullscreenDropfile = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$C}`);
+  const config2 = theme(`nui.${key$D}`);
   addComponents({
     //Wrapper
     ".nui-fullscreen-dropfile": {
@@ -7391,10 +7573,10 @@ const fullscreenDropfile = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$C);
+}, config$D);
 
-const key$B = "heading";
-const defaultConfig$A = {
+const key$C = "heading";
+const defaultConfig$B = {
   size: {
     xs: "xs",
     sm: "sm",
@@ -7427,15 +7609,15 @@ const defaultConfig$A = {
   }
 };
 
-const config$B = {
+const config$C = {
   theme: {
     nui: {
-      [key$B]: defaultConfig$A
+      [key$C]: defaultConfig$B
     }
   }
 };
 const heading = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$B}`);
+  const config2 = theme(`nui.${key$C}`);
   addComponents({
     ".nui-heading": {
       "@apply font-sans": {},
@@ -7516,10 +7698,10 @@ const heading = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$B);
+}, config$C);
 
-const key$A = "iconBox";
-const defaultConfig$z = {
+const key$B = "iconBox";
+const defaultConfig$A = {
   bordered: {
     border: {
       size: "2",
@@ -7609,6 +7791,30 @@ const defaultConfig$z = {
             }
           }
         },
+        muted: {
+          background: {
+            light: "muted-200",
+            dark: "muted-700"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-200"
+            }
+          }
+        },
+        mutedContrast: {
+          background: {
+            light: "muted-200",
+            dark: "muted-950"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-100"
+            }
+          }
+        },
         light: {
           background: {
             light: "white",
@@ -7731,6 +7937,30 @@ const defaultConfig$z = {
             }
           }
         },
+        muted: {
+          background: {
+            light: "muted-600/10",
+            dark: "muted-700/10"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-200"
+            }
+          }
+        },
+        mutedContrast: {
+          background: {
+            light: "muted-600/10",
+            dark: "muted-950/10"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-100"
+            }
+          }
+        },
         light: {
           background: {
             light: "white/10",
@@ -7861,6 +8091,38 @@ const defaultConfig$z = {
             }
           }
         },
+        muted: {
+          background: {
+            light: "transparent",
+            dark: "transparent"
+          },
+          border: {
+            light: "current",
+            dark: "current"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-200"
+            }
+          }
+        },
+        mutedContrast: {
+          background: {
+            light: "transparent",
+            dark: "transparent"
+          },
+          border: {
+            light: "current",
+            dark: "current"
+          },
+          font: {
+            color: {
+              light: "muted-700",
+              dark: "muted-100"
+            }
+          }
+        },
         light: {
           background: {
             light: "transparent",
@@ -7994,15 +8256,15 @@ const defaultConfig$z = {
   }
 };
 
-const config$A = {
+const config$B = {
   theme: {
     nui: {
-      [key$A]: defaultConfig$z
+      [key$B]: defaultConfig$A
     }
   }
 };
 const iconBox = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$A}`);
+  const config2 = theme(`nui.${key$B}`);
   addComponents({
     //Wrapper
     ".nui-icon-box": {
@@ -8130,6 +8392,20 @@ const iconBox = plugin(({ addComponents, theme }) => {
           //Background
           [`@apply bg-${config2.color.variant.solid.defaultContrast.background.light} dark:bg-${config2.color.variant.solid.defaultContrast.background.dark}`]: {}
         },
+        //Color:muted
+        "&.nui-box-muted": {
+          //Font
+          [`@apply text-${config2.color.variant.solid.muted.font.color.light} dark:text-${config2.color.variant.solid.muted.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.solid.muted.background.light} dark:bg-${config2.color.variant.solid.muted.background.dark}`]: {}
+        },
+        //Color:muted-contrast
+        "&.nui-box-muted-contrast": {
+          //Font
+          [`@apply text-${config2.color.variant.solid.mutedContrast.font.color.light} dark:text-${config2.color.variant.solid.mutedContrast.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.solid.mutedContrast.background.light} dark:bg-${config2.color.variant.solid.mutedContrast.background.dark}`]: {}
+        },
         //Color:light
         "&.nui-box-light": {
           //Font
@@ -8203,6 +8479,20 @@ const iconBox = plugin(({ addComponents, theme }) => {
           //Background
           [`@apply bg-${config2.color.variant.pastel.defaultContrast.background.light} dark:bg-${config2.color.variant.pastel.defaultContrast.background.dark}`]: {}
         },
+        //Color:muted
+        "&.nui-box-muted": {
+          //Font
+          [`@apply text-${config2.color.variant.pastel.muted.font.color.light} dark:text-${config2.color.variant.pastel.muted.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.pastel.muted.background.light} dark:bg-${config2.color.variant.pastel.muted.background.dark}`]: {}
+        },
+        //Color:muted-contrast
+        "&.nui-box-muted-contrast": {
+          //Font
+          [`@apply text-${config2.color.variant.pastel.mutedContrast.font.color.light} dark:text-${config2.color.variant.pastel.mutedContrast.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.pastel.mutedContrast.background.light} dark:bg-${config2.color.variant.pastel.mutedContrast.background.dark}`]: {}
+        },
         //Color:light
         "&.nui-box-light": {
           //Font
@@ -8280,6 +8570,24 @@ const iconBox = plugin(({ addComponents, theme }) => {
           //Border
           [`@apply border-2 border-${config2.color.variant.outline.defaultContrast.border.light} dark:border-${config2.color.variant.outline.defaultContrast.border.dark}`]: {}
         },
+        //Color:muted
+        "&.nui-box-muted": {
+          //Font
+          [`@apply text-${config2.color.variant.outline.muted.font.color.light} dark:text-${config2.color.variant.outline.muted.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.outline.muted.background.light}  bg-${config2.color.variant.outline.muted.background.dark}`]: {},
+          //Border
+          [`@apply border-2 border-${config2.color.variant.outline.muted.border.light} dark:border-${config2.color.variant.outline.muted.border.dark}`]: {}
+        },
+        //Color:muted-contrast
+        "&.nui-box-muted-contrast": {
+          //Font
+          [`@apply text-${config2.color.variant.outline.mutedContrast.font.color.light} dark:text-${config2.color.variant.outline.mutedContrast.font.color.dark}`]: {},
+          //Background
+          [`@apply bg-${config2.color.variant.outline.mutedContrast.background.light}  bg-${config2.color.variant.outline.mutedContrast.background.dark}`]: {},
+          //Border
+          [`@apply border-2 border-${config2.color.variant.outline.mutedContrast.border.light} dark:border-${config2.color.variant.outline.mutedContrast.border.dark}`]: {}
+        },
         //Color:light
         "&.nui-box-light": {
           //Font
@@ -8363,10 +8671,10 @@ const iconBox = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$A);
+}, config$B);
 
-const key$z = "inputFileRegular";
-const defaultConfig$y = {
+const key$A = "inputFileRegular";
+const defaultConfig$z = {
   font: {
     color: {
       light: "muted-400",
@@ -8563,15 +8871,15 @@ const defaultConfig$y = {
   }
 };
 
-const config$z = {
+const config$A = {
   theme: {
     nui: {
-      [key$z]: defaultConfig$y
+      [key$A]: defaultConfig$z
     }
   }
 };
 const inputFileRegular = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$z}`);
+  const config2 = theme(`nui.${key$A}`);
   addComponents({
     //Wrapper
     ".nui-input-file-regular": {
@@ -8614,13 +8922,6 @@ const inputFileRegular = plugin(({ addComponents, theme }) => {
           "@apply h-3 w-full max-w-[75%] rounded": {}
         }
       },
-      //Input:error
-      ".nui-input-file-error-text": {
-        //Base
-        [`@apply mt-1 block font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Color:default
       "&.nui-input-default": {
         //Input:inner
@@ -8815,10 +9116,10 @@ const inputFileRegular = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$z);
+}, config$A);
 
-const key$y = "inputFile";
-const defaultConfig$x = {
+const key$z = "inputFile";
+const defaultConfig$y = {
   drop: {
     height: "64",
     border: {
@@ -9070,15 +9371,15 @@ const defaultConfig$x = {
   }
 };
 
-const config$y = {
+const config$z = {
   theme: {
     nui: {
-      [key$y]: defaultConfig$x
+      [key$z]: defaultConfig$y
     }
   }
 };
 const inputFile = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$y}`);
+  const config2 = theme(`nui.${key$z}`);
   addComponents({
     //Wrapper
     ".nui-input-file": {
@@ -9353,10 +9654,10 @@ const inputFile = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$y);
+}, config$z);
 
-const key$x = "input";
-const defaultConfig$w = {
+const key$y = "input";
+const defaultConfig$x = {
   rounded: {
     none: "rounded-none",
     sm: "rounded-md",
@@ -9718,15 +10019,15 @@ const defaultConfig$w = {
   }
 };
 
-const config$x = {
+const config$y = {
   theme: {
     nui: {
-      [key$x]: defaultConfig$w
+      [key$y]: defaultConfig$x
     }
   }
 };
 const input = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$x}`);
+  const config2 = theme(`nui.${key$y}`);
   addComponents({
     //Wrapper
     ".nui-input-wrapper": {
@@ -9755,15 +10056,6 @@ const input = plugin(({ addComponents, theme }) => {
         //Transition
         [`@apply transition-${config2.input.icon.transition.property} duration-${config2.input.icon.transition.duration}`]: {}
       },
-      //Error:text
-      ".nui-input-error-text": {
-        //Base
-        "@apply mt-1 block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Font color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Input
       ".nui-input": {
         //Base
@@ -10122,10 +10414,10 @@ const input = plugin(({ addComponents, theme }) => {
       }
     }
   });
-}, config$x);
+}, config$y);
 
-const key$w = "inputNumber";
-const defaultConfig$v = {
+const key$x = "inputNumber";
+const defaultConfig$w = {
   rounded: {
     none: "rounded-none",
     sm: "rounded-md",
@@ -10496,15 +10788,15 @@ const defaultConfig$v = {
   }
 };
 
-const config$w = {
+const config$x = {
   theme: {
     nui: {
-      [key$w]: defaultConfig$v
+      [key$x]: defaultConfig$w
     }
   }
 };
 const inputNumber = plugin(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$w}`);
+  const config2 = theme(`nui.${key$x}`);
   addComponents({
     //Wrapper
     ".nui-input-number-wrapper": {
@@ -10550,15 +10842,6 @@ const inputNumber = plugin(({ addComponents, theme }) => {
       ".nui-input-number-buttons svg": {
         "@apply h-4 w-4": {}
       },
-      //Error:text
-      ".nui-input-number-error-text": {
-        //Base
-        "@apply mt-1 block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Font color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Input
       ".nui-input-number": {
         //Base
@@ -10840,37 +11123,37 @@ const inputNumber = plugin(({ addComponents, theme }) => {
       //Without icon && Size:sm
       "&:not(.nui-has-icon).nui-input-number-sm": {
         ".nui-input-number": {
-          [`@apply h-8 py-1 text-${config2.icon.disabled.input.sm.font.size} leading-4 px-2`]: {}
+          [`@apply h-8 py-1 text-${config2.icon.disabled.input.sm.font.size} leading-4 ps-2 pe-[3.75rem]`]: {}
         }
       },
       //With icon && Size:sm
       "&.nui-has-icon.nui-input-number-sm": {
         ".nui-input-number": {
-          [`@apply h-8 py-1 text-${config2.icon.enabled.input.sm.font.size} leading-4 pe-3 ps-8`]: {}
+          [`@apply h-8 py-1 text-${config2.icon.enabled.input.sm.font.size} leading-4 ps-8 pe-[3.75rem]`]: {}
         }
       },
       //Without icon && Size:md
       "&:not(.nui-has-icon).nui-input-number-md": {
         ".nui-input-number": {
-          [`@apply h-10 py-2 text-${config2.icon.disabled.input.md.font.size} leading-5 px-3`]: {}
+          [`@apply h-10 py-2 text-${config2.icon.disabled.input.md.font.size} leading-5 ps-3 pe-[4.75rem]`]: {}
         }
       },
       //With icon && Size:md
       "&.nui-has-icon.nui-input-number-md": {
         ".nui-input-number": {
-          [`@apply h-10 py-2 text-${config2.icon.enabled.input.md.font.size} leading-5 pe-4 ps-10`]: {}
+          [`@apply h-10 py-2 text-${config2.icon.enabled.input.md.font.size} leading-5 ps-10 pe-[4.75rem]`]: {}
         }
       },
       //Without icon && Size:lg
       "&:not(.nui-has-icon).nui-input-number-lg": {
         ".nui-input-number": {
-          [`@apply h-12 py-2 text-${config2.icon.disabled.input.lg.font.size} leading-5 px-4`]: {}
+          [`@apply h-12 py-2 text-${config2.icon.disabled.input.lg.font.size} leading-5 ps-4 pe-24`]: {}
         }
       },
       //With icon && Size:lg
       "&.nui-has-icon.nui-input-number-lg": {
         ".nui-input-number": {
-          [`@apply h-12 py-2 text-${config2.icon.enabled.input.lg.font.size} leading-5 pe-4 ps-11`]: {}
+          [`@apply h-12 py-2 text-${config2.icon.enabled.input.lg.font.size} leading-5 ps-11 pe-24`]: {}
         }
       },
       //With action && Size:sm
@@ -10965,6 +11248,34 @@ const inputNumber = plugin(({ addComponents, theme }) => {
       }
     }
   });
+}, config$x);
+
+const key$w = "inputHelpText";
+const defaultConfig$v = {
+  font: {
+    family: "sans",
+    size: "[0.65rem]",
+    weight: "medium"
+  }
+};
+
+const config$w = {
+  theme: {
+    nui: {
+      [key$w]: defaultConfig$v
+    }
+  }
+};
+const inputHelpText = plugin(({ addComponents, theme }) => {
+  const config2 = theme(`nui.${key$w}`);
+  addComponents({
+    ".nui-input-help-text": {
+      //Base
+      "@apply mt-1 block": {},
+      //Font
+      [`@apply font-${config2.font.family} text-${config2.font.size} font-${config2.font.weight} leading-none`]: {}
+    }
+  });
 }, config$w);
 
 const key$v = "kbd";
@@ -12041,15 +12352,6 @@ const listbox = plugin(({ addComponents, theme }) => {
           [`@apply bg-${config2.option.activeHover.background.light} dark:bg-${config2.option.activeHover.background.dark}`]: {}
         }
       },
-      //Listbox:error
-      ".nui-listbox-error-text": {
-        //Base
-        "@apply mt-1 block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Listbox:placeload
       ".nui-listbox-placeload.nui-loading-placeload": {
         "@apply absolute start-0 top-0 flex w-full items-center px-4": {},
@@ -12719,6 +13021,9 @@ const messageText = plugin(({ addComponents, theme }) => {
 
 const key$n = "message";
 const defaultConfig$m = {
+  safeArea: {
+    end: "6"
+  },
   icon: {
     outer: {
       size: "10"
@@ -12749,8 +13054,21 @@ const defaultConfig$m = {
     icon: {
       size: "4"
     },
+    position: {
+      top: "[-0.5rem]",
+      end: "[-0.5rem]"
+    },
+    size: {
+      outer: {
+        width: "8",
+        height: "8"
+      },
+      inner: {
+        width: "6",
+        height: "6"
+      }
+    },
     rounded: "rounded-full",
-    padding: "1",
     transition: {
       property: "colors",
       duration: "200"
@@ -13313,7 +13631,7 @@ const message = plugin(({ addComponents, theme }) => {
   addComponents({
     //Wrapper
     ".nui-message": {
-      "@apply flex min-h-[3rem] items-center border p-1 pe-2": {},
+      "@apply relative flex gap-2 border": {},
       //Icon:outer
       ".nui-message-icon-outer": {
         [`@apply flex h-${config2.icon.outer.size} w-${config2.icon.outer.size} shrink-0 items-center justify-center`]: {},
@@ -13328,15 +13646,19 @@ const message = plugin(({ addComponents, theme }) => {
       //Inner:text
       ".nui-message-inner-text": {
         //Base
-        "@apply px-3 block": {},
+        "@apply inline-flex items-center leading-normal": {},
         //Font
         [`@apply font-${config2.inner.font.family} text-${config2.inner.font.size}`]: {},
         //Color
         [`@apply text-${config2.inner.font.color.light} dark:text-${config2.inner.font.color.dark}`]: {}
       },
-      //Meesage:close
+      //Message:close
+      ".nui-message-close-wrapper": {
+        [`@apply absolute top-${config2.close.position.top} end-${config2.close.position.end} flex items-center justify-center bg-white dark:bg-muted-950 border border-muted-200 dark:border-muted-800 ${config2.close.rounded} h-${config2.close.size.outer.height} w-${config2.close.size.outer.width}`]: {}
+      },
+      //Message:close
       ".nui-message-close": {
-        [`@apply nui-focus me-2 ms-auto flex cursor-pointer items-center justify-center p-${config2.close.padding} ${config2.close.rounded}`]: {},
+        [`@apply nui-focus flex cursor-pointer items-center justify-center shrink-0 h-${config2.close.size.inner.height} w-${config2.close.size.inner.width} ${config2.close.rounded}`]: {},
         //Color
         [`@apply text-${config2.close.color.light} dark:text-${config2.close.color.dark}`]: {},
         //Transition
@@ -13346,6 +13668,14 @@ const message = plugin(({ addComponents, theme }) => {
           [`@apply h-${config2.close.icon.size} w-${config2.close.icon.size}`]: {}
         }
       },
+      //Message:text
+      "&.nui-has-text": {
+        [`@apply py-2 ps-2 pe-${config2.safeArea.end}`]: {}
+      },
+      //Message:icon
+      "&.nui-has-icon": {
+        [`@apply py-1 ps-1 pe-${config2.safeArea.end}`]: {}
+      },
       //Rounded:sm
       "&.nui-message-rounded-sm": {
         [`@apply ${config2.rounded.sm}`]: {},
@@ -14772,9 +15102,7 @@ const radio = plugin(({ addComponents, theme }) => {
       },
       //Radio:error
       ".nui-radio-error": {
-        "@apply ms-1 inline-block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
+        "@apply ms-1 inline-block": {}
       },
       //Color:default
       "&.nui-radio-default": {
@@ -15238,15 +15566,6 @@ const select = plugin(({ addComponents, theme }) => {
         //Transition
         [`@apply transition-${config2.select.icon.transition.property} duration-${config2.select.icon.transition.duration}`]: {}
       },
-      //Error:text
-      ".nui-select-error-text": {
-        //Base
-        "@apply mt-1 block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Font color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Select
       ".nui-select": {
         //Base
@@ -15604,6 +15923,7 @@ const select = plugin(({ addComponents, theme }) => {
 const key$c = "slimscroll";
 const defaultConfig$b = {
   width: "[6px]",
+  height: "[6px]",
   background: {
     base: {
       light: "black/5",
@@ -15629,7 +15949,7 @@ const slimscroll = plugin(({ addComponents, theme }) => {
     ".nui-slimscroll::-webkit-scrollbar, .nui-slimscroll-opaque::-webkit-scrollbar": {
       scrollBehavior: "smooth",
       scrollbarGutter: "stable",
-      [`@apply w-${config2.width}`]: {}
+      [`@apply w-${config2.width} h-${config2.height}`]: {}
     },
     ".nui-slimscroll::-webkit-scrollbar-thumb": {
       [`@apply rounded-lg bg-${config2.background.base.light} dark:bg-${config2.background.base.dark} duration-300 transition-all`]: {}
@@ -15813,10 +16133,6 @@ const snack = plugin(({ addComponents, theme }) => {
         //Color
         [`@apply text-${config2.font.color.light} dark:text-${config2.font.color.dark}`]: {}
       },
-      //Snack:button
-      ".nui-snack-button": {
-        "@apply hover:!bg-transparent": {}
-      },
       //Size:xs
       "&.nui-snack-xs": {
         //Snack:media:xs
@@ -18759,15 +19075,6 @@ const textarea = plugin(({ addComponents, theme }) => {
           [`@apply transition-${config2.textarea.transition.property} duration-${config2.textarea.transition.duration}`]: {}
         }
       },
-      //Error:text
-      ".nui-textarea-error-text": {
-        //Base
-        "@apply mt-1 block": {},
-        //Font
-        [`@apply font-${config2.error.font.family} text-${config2.error.font.size} font-${config2.error.font.weight} leading-none`]: {},
-        //Font color
-        [`@apply text-${config2.error.font.color.light} dark:text-${config2.error.font.color.dark}`]: {}
-      },
       //Textrea:placeload
       ".nui-textarea-placeload": {
         [`@apply absolute start-0 top-4 flex h-${config2.textarea.placeload.size} w-${config2.textarea.placeload.size} flex-col space-y-${config2.textarea.placeload.space} px-3`]: {},
@@ -19820,7 +20127,7 @@ const tooltip = plugin(({ addComponents, theme }) => {
       borderRadius: "0.5ch",
       zIndex: "1000",
       [`@apply font-${config2.font.family} text-xs shadow-lg`]: {},
-      [`@apply text-${config2.font.color.light} dark:text-${config2.font.color.light}`]: {},
+      [`@apply text-${config2.font.color.light} dark:text-${config2.font.color.dark}`]: {},
       [`@apply !bg-${config2.background.light} dark:!bg-${config2.background.dark}`]: {}
     },
     [`[${tooltip}]:hover::before, [${tooltip}]:hover::after, [${tooltip}]:focus-visible::before, [${tooltip}]:focus-visible::after`]: {
@@ -19834,7 +20141,7 @@ const tooltip = plugin(({ addComponents, theme }) => {
       bottom: "calc(100% + 8px)",
       borderBottomWidth: "0",
       borderTopColor: "currentColor",
-      [`@apply !text-${config2.background.light} dark:!text-${config2.background.light}`]: {}
+      [`@apply !text-${config2.background.light} dark:!text-${config2.background.dark}`]: {}
     },
     [`[${tooltip}]:not([${position}])::after, [${tooltip}][${position}^='up']::after`]: {
       bottom: "calc(100% + 13px)"
@@ -19950,6 +20257,7 @@ const components = mergePlugins([
   inputFile,
   input,
   inputNumber,
+  inputHelpText,
   kbd,
   label,
   link,
@@ -20074,4 +20382,4 @@ const textShades = plugin(
 
 const utilities = mergePlugins([bgShades, textShades]);
 
-export { accordion, autocomplete, avatar, avatarGroup, base, bgShades, breadcrumb, button, buttonAction, buttonClose, buttonGroup, buttonIcon, card, checkbox, components, dropdown, dropdownDivider, dropdownItem, focus, fullscreenDropfile, heading, iconBox, input, inputFile, inputFileRegular, inputNumber, kbd, label, link, list, listbox, mark, mask, message, messageText, modal, pagination, paragraph, placeholderPage, placeload, progress, progressCircle, prose, radio, select, slimscroll, snack, switchBall, switchThin, tabSlider, tabs, tag, text, textShades, textarea, themeSwitch, themeToggle, toast, tooltip, utilities };
+export { accordion, autocomplete, avatar, avatarGroup, base, bgShades, breadcrumb, button, buttonAction, buttonClose, buttonGroup, buttonIcon, card, checkbox, components, dropdown, dropdownDivider, dropdownItem, focus, fullscreenDropfile, heading, iconBox, input, inputFile, inputFileRegular, inputHelpText, inputNumber, kbd, label, link, list, listbox, mark, mask, message, messageText, modal, pagination, paragraph, placeholderPage, placeload, progress, progressCircle, prose, radio, select, slimscroll, snack, switchBall, switchThin, tabSlider, tabs, tag, text, textShades, textarea, themeSwitch, themeToggle, toast, tooltip, utilities };