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

package/dist/plugins/index.cjs

@@ -21,8 +21,8 @@ function mergePlugins(plugins) {
   return plugin__default((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: {
@@ -239,15 +239,15 @@ const defaultConfig$R = {
   }
 };
 
-const config$S = {
+const config$T = {
   theme: {
     nui: {
-      [key$S]: defaultConfig$R
+      [key$T]: defaultConfig$S
     }
   }
 };
 const accordion = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$S}`);
+  const config2 = theme(`nui.${key$T}`);
   addComponents({
     //Accordion:wrapper
     ".nui-accordion": {
@@ -464,10 +464,10 @@ const accordion = plugin__default(({ 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",
@@ -955,15 +955,15 @@ const defaultConfig$Q = {
   }
 };
 
-const config$R = {
+const config$S = {
   theme: {
     nui: {
-      [key$R]: defaultConfig$Q
+      [key$S]: defaultConfig$R
     }
   }
 };
 const autocomplete = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$R}`);
+  const config2 = theme(`nui.${key$S}`);
   addComponents({
     ".nui-autocomplete": {
       "@apply w-full relative": {},
@@ -1057,15 +1057,6 @@ const autocomplete = plugin__default(({ 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": {},
@@ -1469,10 +1460,10 @@ const autocomplete = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$R);
+}, config$S);
 
-const key$Q = "avatar";
-const defaultConfig$P = {
+const key$R = "avatar";
+const defaultConfig$Q = {
   inner: {
     size: "full",
     transition: {
@@ -1821,15 +1812,15 @@ const defaultConfig$P = {
   }
 };
 
-const config$Q = {
+const config$R = {
   theme: {
     nui: {
-      [key$Q]: defaultConfig$P
+      [key$R]: defaultConfig$Q
     }
   }
 };
 const avatar = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$Q}`);
+  const config2 = theme(`nui.${key$R}`);
   addComponents({
     ".nui-avatar": {
       //Avatar:wrapper
@@ -2594,10 +2585,10 @@ const avatar = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$Q);
+}, config$R);
 
-const key$P = "avatarGroup";
-const defaultConfig$O = {
+const key$Q = "avatarGroup";
+const defaultConfig$P = {
   avatar: {
     rounded: "full",
     outer: {
@@ -2717,15 +2708,15 @@ const defaultConfig$O = {
   }
 };
 
-const config$P = {
+const config$Q = {
   theme: {
     nui: {
-      [key$P]: defaultConfig$O
+      [key$Q]: defaultConfig$P
     }
   }
 };
 const avatarGroup = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$P}`);
+  const config2 = theme(`nui.${key$Q}`);
   addComponents({
     ".nui-avatar-group": {
       "@apply flex": {},
@@ -2869,10 +2860,10 @@ const avatarGroup = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$P);
+}, config$Q);
 
-const key$O = "breadcrumb";
-const defaultConfig$N = {
+const key$P = "breadcrumb";
+const defaultConfig$O = {
   item: {
     text: {
       font: {
@@ -2938,15 +2929,15 @@ const defaultConfig$N = {
   }
 };
 
-const config$O = {
+const config$P = {
   theme: {
     nui: {
-      [key$O]: defaultConfig$N
+      [key$P]: defaultConfig$O
     }
   }
 };
 const breadcrumb = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$O}`);
+  const config2 = theme(`nui.${key$P}`);
   addComponents({
     ".nui-breadcrumb": {
       ".nui-breadcrumb-list": {
@@ -3011,10 +3002,10 @@ const breadcrumb = plugin__default(({ 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",
@@ -3349,15 +3340,15 @@ const defaultConfig$M = {
   }
 };
 
-const config$N = {
+const config$O = {
   theme: {
     nui: {
-      [key$N]: defaultConfig$M
+      [key$O]: defaultConfig$N
     }
   }
 };
 const buttonAction = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$N}`);
+  const config2 = theme(`nui.${key$O}`);
   addComponents({
     ".nui-button-action": {
       //Wrapper
@@ -3546,10 +3537,10 @@ const buttonAction = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$N);
+}, config$O);
 
-const key$M = "buttonClose";
-const defaultConfig$L = {
+const key$N = "buttonClose";
+const defaultConfig$M = {
   size: {
     xs: {
       outer: "6",
@@ -3585,6 +3576,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-100",
           dark: "muted-700"
+        },
+        focus: {
+          light: "muted-100",
+          dark: "muted-700"
+        },
+        active: {
+          light: "transparent",
+          dark: "transparent"
         }
       },
       font: {
@@ -3603,6 +3602,14 @@ const defaultConfig$L = {
         hover: {
           light: "muted-100",
           dark: "muted-900"
+        },
+        focus: {
+          light: "muted-100",
+          dark: "muted-900"
+        },
+        active: {
+          light: "transparent",
+          dark: "transparent"
         }
       },
       font: {
@@ -3621,6 +3628,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: {
@@ -3639,6 +3654,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: {
@@ -3657,6 +3680,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: {
@@ -3675,6 +3706,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: {
@@ -3693,6 +3732,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: {
@@ -3711,6 +3758,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: {
@@ -3729,6 +3784,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: {
@@ -3745,15 +3808,15 @@ const defaultConfig$L = {
   }
 };
 
-const config$M = {
+const config$N = {
   theme: {
     nui: {
-      [key$M]: defaultConfig$L
+      [key$N]: defaultConfig$M
     }
   }
 };
 const buttonClose = plugin__default(({ 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": {},
@@ -3813,7 +3876,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3821,7 +3888,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3829,7 +3900,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3837,7 +3912,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3845,7 +3924,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3853,7 +3936,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3861,7 +3948,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3869,7 +3960,11 @@ const buttonClose = plugin__default(({ 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": {
@@ -3877,19 +3972,23 @@ const buttonClose = plugin__default(({ 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
     }
   }
 };
@@ -3897,7 +3996,8 @@ const buttonGroup = plugin__default(
   ({ 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": {}
@@ -3912,6 +4012,7 @@ const buttonGroup = plugin__default(
           "@apply !border-e !rounded-s-none": {}
         }
       },
+      // Input
       ".nui-input-wrapper:not(:first-child):not(:last-child)": {
         ".nui-input": {
           "@apply !border-e-0 !rounded-none": {},
@@ -3920,15 +4021,15 @@ const buttonGroup = plugin__default(
           }
         }
       },
-      ".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": {
@@ -3936,6 +4037,57 @@ const buttonGroup = plugin__default(
           }
         }
       },
+      // 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": {},
@@ -3944,40 +4096,83 @@ const buttonGroup = plugin__default(
           }
         }
       },
-      ".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": {}
@@ -3986,11 +4181,11 @@ const buttonGroup = plugin__default(
       }
     }
   }),
-  config$L
+  config$M
 );
 
-const key$K = "buttonIcon";
-const defaultConfig$J = {
+const key$L = "buttonIcon";
+const defaultConfig$K = {
   font: {
     family: "sans",
     size: "sm",
@@ -4248,15 +4443,15 @@ const defaultConfig$J = {
   }
 };
 
-const config$K = {
+const config$L = {
   theme: {
     nui: {
-      [key$K]: defaultConfig$J
+      [key$L]: defaultConfig$K
     }
   }
 };
 const buttonIcon = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$K}`);
+  const config2 = theme(`nui.${key$L}`);
   addComponents({
     ".nui-button-icon": {
       //Base
@@ -4411,10 +4606,10 @@ const buttonIcon = plugin__default(({ 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"
@@ -4507,8 +4702,8 @@ const defaultConfig$I = {
         },
         border: {
           light: {
-            base: "muted-200",
-            hover: "muted-300"
+            base: "muted-300",
+            hover: "muted-200"
           },
           dark: {
             base: "muted-600",
@@ -5465,15 +5660,15 @@ const defaultConfig$I = {
   }
 };
 
-const config$J = {
+const config$K = {
   theme: {
     nui: {
-      button: defaultConfig$I
+      button: defaultConfig$J
     }
   }
 };
 const button = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$J}`);
+  const config2 = theme(`nui.${key$K}`);
   addComponents({
     ".nui-button": {
       // #region Base
@@ -6241,10 +6436,10 @@ const button = plugin__default(({ 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",
@@ -6375,15 +6570,15 @@ const defaultConfig$H = {
   }
 };
 
-const config$I = {
+const config$J = {
   theme: {
     nui: {
-      [key$I]: defaultConfig$H
+      [key$J]: defaultConfig$I
     }
   }
 };
 const card = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$I}`);
+  const config2 = theme(`nui.${key$J}`);
   addComponents({
     ".nui-card": {
       //Base
@@ -6488,10 +6683,10 @@ const card = plugin__default(({ 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",
@@ -6593,15 +6788,15 @@ const defaultConfig$G = {
   }
 };
 
-const config$H = {
+const config$I = {
   theme: {
     nui: {
-      [key$H]: defaultConfig$G
+      [key$I]: defaultConfig$H
     }
   }
 };
 const checkbox = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$H}`);
+  const config2 = theme(`nui.${key$I}`);
   addComponents({
     //Wrapper
     ".nui-checkbox": {
@@ -6665,9 +6860,7 @@ const checkbox = plugin__default(({ 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": {
@@ -6727,10 +6920,10 @@ const checkbox = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$H);
+}, config$I);
 
-const key$G = "drodownDivider";
-const defaultConfig$F = {
+const key$H = "drodownDivider";
+const defaultConfig$G = {
   margin: {
     y: "2"
   },
@@ -6740,24 +6933,24 @@ const defaultConfig$F = {
   }
 };
 
-const config$G = {
+const config$H = {
   theme: {
     nui: {
-      [key$G]: defaultConfig$F
+      [key$H]: defaultConfig$G
     }
   }
 };
 const dropdownDivider = plugin__default(({ 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",
@@ -6853,15 +7046,15 @@ const defaultConfig$E = {
   }
 };
 
-const config$F = {
+const config$G = {
   theme: {
     nui: {
-      [key$F]: defaultConfig$E
+      [key$G]: defaultConfig$F
     }
   }
 };
 const dropdownItem = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$F}`);
+  const config2 = theme(`nui.${key$G}`);
   addComponents({
     //Wrapper
     ".nui-dropdown-item": {
@@ -6878,6 +7071,10 @@ const dropdownItem = plugin__default(({ 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
@@ -6945,10 +7142,10 @@ const dropdownItem = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$F);
+}, config$G);
 
-const key$E = "dropdown";
-const defaultConfig$D = {
+const key$F = "dropdown";
+const defaultConfig$E = {
   align: "start",
   button: {
     context: {
@@ -6995,15 +7192,6 @@ const defaultConfig$D = {
         duration: "300"
       }
     },
-    text: {
-      font: {
-        family: "sans",
-        color: {
-          light: "muted-400",
-          dark: "muted-400"
-        }
-      }
-    },
     chevron: {
       size: "4",
       transition: {
@@ -7081,15 +7269,15 @@ const defaultConfig$D = {
   }
 };
 
-const config$E = {
+const config$F = {
   theme: {
     nui: {
-      [key$E]: defaultConfig$D
+      [key$F]: defaultConfig$E
     }
   }
 };
 const dropdown = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$E}`);
+  const config2 = theme(`nui.${key$F}`);
   addComponents({
     //Wrapper
     ".nui-dropdown": {
@@ -7136,13 +7324,7 @@ const dropdown = plugin__default(({ 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": {
@@ -7244,10 +7426,10 @@ const dropdown = plugin__default(({ 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",
@@ -7258,15 +7440,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__default(({ 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": {
@@ -7278,10 +7460,10 @@ const focus = plugin__default(({ 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",
@@ -7316,15 +7498,15 @@ const defaultConfig$B = {
   }
 };
 
-const config$C = {
+const config$D = {
   theme: {
     nui: {
-      [key$C]: defaultConfig$B
+      [key$D]: defaultConfig$C
     }
   }
 };
 const fullscreenDropfile = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$C}`);
+  const config2 = theme(`nui.${key$D}`);
   addComponents({
     //Wrapper
     ".nui-fullscreen-dropfile": {
@@ -7397,10 +7579,10 @@ const fullscreenDropfile = plugin__default(({ 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",
@@ -7433,15 +7615,15 @@ const defaultConfig$A = {
   }
 };
 
-const config$B = {
+const config$C = {
   theme: {
     nui: {
-      [key$B]: defaultConfig$A
+      [key$C]: defaultConfig$B
     }
   }
 };
 const heading = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$B}`);
+  const config2 = theme(`nui.${key$C}`);
   addComponents({
     ".nui-heading": {
       "@apply font-sans": {},
@@ -7522,10 +7704,10 @@ const heading = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$B);
+}, config$C);
 
-const key$A = "iconBox";
-const defaultConfig$z = {
+const key$B = "iconBox";
+const defaultConfig$A = {
   bordered: {
     border: {
       size: "2",
@@ -7615,6 +7797,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",
@@ -7737,6 +7943,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",
@@ -7867,6 +8097,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",
@@ -8000,15 +8262,15 @@ const defaultConfig$z = {
   }
 };
 
-const config$A = {
+const config$B = {
   theme: {
     nui: {
-      [key$A]: defaultConfig$z
+      [key$B]: defaultConfig$A
     }
   }
 };
 const iconBox = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$A}`);
+  const config2 = theme(`nui.${key$B}`);
   addComponents({
     //Wrapper
     ".nui-icon-box": {
@@ -8136,6 +8398,20 @@ const iconBox = plugin__default(({ 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
@@ -8209,6 +8485,20 @@ const iconBox = plugin__default(({ 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
@@ -8286,6 +8576,24 @@ const iconBox = plugin__default(({ 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
@@ -8369,10 +8677,10 @@ const iconBox = plugin__default(({ 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",
@@ -8569,15 +8877,15 @@ const defaultConfig$y = {
   }
 };
 
-const config$z = {
+const config$A = {
   theme: {
     nui: {
-      [key$z]: defaultConfig$y
+      [key$A]: defaultConfig$z
     }
   }
 };
 const inputFileRegular = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$z}`);
+  const config2 = theme(`nui.${key$A}`);
   addComponents({
     //Wrapper
     ".nui-input-file-regular": {
@@ -8620,13 +8928,6 @@ const inputFileRegular = plugin__default(({ 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
@@ -8821,10 +9122,10 @@ const inputFileRegular = plugin__default(({ addComponents, theme }) => {
       }
     }
   });
-}, config$z);
+}, config$A);
 
-const key$y = "inputFile";
-const defaultConfig$x = {
+const key$z = "inputFile";
+const defaultConfig$y = {
   drop: {
     height: "64",
     border: {
@@ -9076,15 +9377,15 @@ const defaultConfig$x = {
   }
 };
 
-const config$y = {
+const config$z = {
   theme: {
     nui: {
-      [key$y]: defaultConfig$x
+      [key$z]: defaultConfig$y
     }
   }
 };
 const inputFile = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$y}`);
+  const config2 = theme(`nui.${key$z}`);
   addComponents({
     //Wrapper
     ".nui-input-file": {
@@ -9359,10 +9660,10 @@ const inputFile = plugin__default(({ 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",
@@ -9724,15 +10025,15 @@ const defaultConfig$w = {
   }
 };
 
-const config$x = {
+const config$y = {
   theme: {
     nui: {
-      [key$x]: defaultConfig$w
+      [key$y]: defaultConfig$x
     }
   }
 };
 const input = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$x}`);
+  const config2 = theme(`nui.${key$y}`);
   addComponents({
     //Wrapper
     ".nui-input-wrapper": {
@@ -9761,15 +10062,6 @@ const input = plugin__default(({ 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
@@ -10128,10 +10420,10 @@ const input = plugin__default(({ 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",
@@ -10502,15 +10794,15 @@ const defaultConfig$v = {
   }
 };
 
-const config$w = {
+const config$x = {
   theme: {
     nui: {
-      [key$w]: defaultConfig$v
+      [key$x]: defaultConfig$w
     }
   }
 };
 const inputNumber = plugin__default(({ addComponents, theme }) => {
-  const config2 = theme(`nui.${key$w}`);
+  const config2 = theme(`nui.${key$x}`);
   addComponents({
     //Wrapper
     ".nui-input-number-wrapper": {
@@ -10556,15 +10848,6 @@ const inputNumber = plugin__default(({ 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
@@ -10846,37 +11129,37 @@ const inputNumber = plugin__default(({ 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
@@ -10971,6 +11254,34 @@ const inputNumber = plugin__default(({ 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__default(({ 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";
@@ -12047,15 +12358,6 @@ const listbox = plugin__default(({ 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": {},
@@ -12725,6 +13027,9 @@ const messageText = plugin__default(({ addComponents, theme }) => {
 
 const key$n = "message";
 const defaultConfig$m = {
+  safeArea: {
+    end: "6"
+  },
   icon: {
     outer: {
       size: "10"
@@ -12755,8 +13060,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"
@@ -13319,7 +13637,7 @@ const message = plugin__default(({ 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`]: {},
@@ -13334,15 +13652,19 @@ const message = plugin__default(({ 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
@@ -13352,6 +13674,14 @@ const message = plugin__default(({ 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}`]: {},
@@ -14778,9 +15108,7 @@ const radio = plugin__default(({ 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": {
@@ -15244,15 +15572,6 @@ const select = plugin__default(({ 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
@@ -15610,6 +15929,7 @@ const select = plugin__default(({ addComponents, theme }) => {
 const key$c = "slimscroll";
 const defaultConfig$b = {
   width: "[6px]",
+  height: "[6px]",
   background: {
     base: {
       light: "black/5",
@@ -15635,7 +15955,7 @@ const slimscroll = plugin__default(({ 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`]: {}
@@ -15819,10 +16139,6 @@ const snack = plugin__default(({ 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
@@ -18765,15 +19081,6 @@ const textarea = plugin__default(({ 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`]: {},
@@ -19826,7 +20133,7 @@ const tooltip = plugin__default(({ 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`]: {
@@ -19840,7 +20147,7 @@ const tooltip = plugin__default(({ 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)"
@@ -19956,6 +20263,7 @@ const components = mergePlugins([
   inputFile,
   input,
   inputNumber,
+  inputHelpText,
   kbd,
   label,
   link,
@@ -20105,6 +20413,7 @@ exports.iconBox = iconBox;
 exports.input = input;
 exports.inputFile = inputFile;
 exports.inputFileRegular = inputFileRegular;
+exports.inputHelpText = inputHelpText;
 exports.inputNumber = inputNumber;
 exports.kbd = kbd;
 exports.label = label;