@shuriken-ui/tailwind 3.0.0-next.0 → 3.0.0-next.2

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.f78a9037.cjs';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.cjs';
+import { S as ShurikenUIConfig } from './shared/tailwind.a9f50d73.cjs';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.cjs';
 import 'tailwindcss/types/config';
 import 'tailwindcss';
 

package/dist/index.d.mts

@@ -1,5 +1,5 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.f78a9037.mjs';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.mjs';
+import { S as ShurikenUIConfig } from './shared/tailwind.a9f50d73.mjs';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.mjs';
 import 'tailwindcss/types/config';
 import 'tailwindcss';
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { S as ShurikenUIConfig } from './shared/tailwind.f78a9037.js';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.js';
+import { S as ShurikenUIConfig } from './shared/tailwind.a9f50d73.js';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.js';
 import 'tailwindcss/types/config';
 import 'tailwindcss';
 

package/dist/plugins/index.cjs

@@ -3895,7 +3895,7 @@ const config$L = {
 };
 const buttonGroup = plugin__default(
   ({ addComponents }) => addComponents({
-    ".nui-button-group": {
+    '.nui-button-group, [role="group"]': {
       "@apply flex": {},
       ".nui-button, .nui-button-action, .nui-button-icon": {
         "@apply !border-e-0": {},
@@ -6775,30 +6775,76 @@ const defaultConfig$E = {
     md: "lg",
     lg: "xl"
   },
-  color: {
+  contrast: {
     default: {
       background: {
         light: "muted-100",
         dark: "muted-700"
-      },
-      font: {
-        color: {
-          light: "primary-500",
-          dark: "primary-500"
-        }
       }
     },
     contrast: {
       background: {
         light: "muted-100",
         dark: "muted-900"
-      },
+      }
+    }
+  },
+  color: {
+    primary: {
       font: {
         color: {
           light: "primary-500",
           dark: "primary-500"
         }
       }
+    },
+    info: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    success: {
+      font: {
+        color: {
+          light: "success-500",
+          dark: "success-500"
+        }
+      }
+    },
+    warning: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    danger: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    dark: {
+      font: {
+        color: {
+          light: "muted-900",
+          dark: "muted-100"
+        }
+      }
+    },
+    black: {
+      font: {
+        color: {
+          light: "black",
+          dark: "white"
+        }
+      }
     }
   },
   transition: {
@@ -6832,32 +6878,59 @@ const dropdownItem = plugin__default(({ addComponents, theme }) => {
       "&:not(.nui-active)": {
         [`@apply text-${config2.font.color.inactive.light} dark:text-${config2.font.color.inactive.dark}`]: {}
       },
-      //Color:default
+      //Contrast:default
       "&.nui-item-default": {
         //Background:hover
-        [`@apply hover:bg-${config2.color.default.background.light} dark:hover:bg-${config2.color.default.background.dark}`]: {},
-        //Font:hover
-        [`@apply hover:text-${config2.color.default.font.color.light} dark:hover:text-${config2.color.default.font.color.dark}`]: {},
+        [`@apply hover:bg-${config2.contrast.default.background.light} dark:hover:bg-${config2.contrast.default.background.dark}`]: {},
         "&.nui-active": {
           //Background:hover
-          [`@apply bg-${config2.color.default.background.light} dark:bg-${config2.color.default.background.dark}`]: {},
-          //Font:hover
-          [`@apply text-${config2.color.default.font.color.light} dark:text-${config2.color.default.font.color.dark}`]: {}
+          [`@apply bg-${config2.contrast.default.background.light} dark:bg-${config2.contrast.default.background.dark}`]: {}
         }
       },
-      //Color:contrast
+      //Contrast:contrast
       "&.nui-item-contrast": {
         //Background:hover
-        [`@apply hover:bg-${config2.color.contrast.background.light} dark:hover:bg-${config2.color.contrast.background.dark}`]: {},
-        //Font:hover
-        [`@apply hover:text-${config2.color.contrast.font.color.light} dark:hover:text-${config2.color.contrast.font.color.dark}`]: {},
+        [`@apply hover:bg-${config2.contrast.contrast.background.light} dark:hover:bg-${config2.contrast.contrast.background.dark}`]: {},
         "&.nui-active": {
           //Background:hover
-          [`@apply bg-${config2.color.contrast.background.light} dark:bg-${config2.color.contrast.background.dark}`]: {},
-          //Font:hover
-          [`@apply text-${config2.color.contrast.font.color.light} dark:text-${config2.color.contrast.font.color.dark}`]: {}
+          [`@apply bg-${config2.contrast.contrast.background.light} dark:bg-${config2.contrast.contrast.background.dark}`]: {}
         }
       },
+      //Color:primary
+      "&.nui-item-primary": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.primary.font.color.light} dark:hover:text-${config2.color.primary.font.color.dark}`]: {}
+      },
+      //Color:info
+      "&.nui-item-info": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.info.font.color.light} dark:hover:text-${config2.color.info.font.color.dark}`]: {}
+      },
+      //Color:success
+      "&.nui-item-success": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.success.font.color.light} dark:hover:text-${config2.color.success.font.color.dark}`]: {}
+      },
+      //Color:warning
+      "&.nui-item-warning": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.warning.font.color.light} dark:hover:text-${config2.color.warning.font.color.dark}`]: {}
+      },
+      //Color:danger
+      "&.nui-item-danger": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.danger.font.color.light} dark:hover:text-${config2.color.danger.font.color.dark}`]: {}
+      },
+      //Color:dark
+      "&.nui-item-dark": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.dark.font.color.light} dark:hover:text-${config2.color.dark.font.color.dark}`]: {}
+      },
+      //Color:black
+      "&.nui-item-black": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.black.font.color.light} dark:hover:text-${config2.color.black.font.color.dark}`]: {}
+      },
       //Rounded:sm
       "&.nui-item-rounded-sm": {
         [`@apply rounded-${config2.rounded.sm}`]: {}
@@ -6912,8 +6985,8 @@ const defaultConfig$D = {
         },
         color: {
           hover: {
-            light: "primary-500",
-            dark: "primary-500"
+            light: "muted-200",
+            dark: "muted-700"
           }
         }
       },
@@ -7542,10 +7615,10 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "white",
-            dark: "muted-950"
+            dark: "muted-700"
           },
           font: {
             color: {
@@ -7664,7 +7737,7 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "white/10",
             dark: "white/10"
@@ -7672,7 +7745,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-800"
+              dark: "muted-300"
             }
           }
         },
@@ -7684,7 +7757,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-900"
+              dark: "muted-100"
             }
           }
         },
@@ -7794,7 +7867,7 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "transparent",
             dark: "transparent"
@@ -7806,7 +7879,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-800"
+              dark: "muted-400"
             }
           }
         },
@@ -8063,12 +8136,12 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.solid.invert.font.color.light} dark:text-${config2.color.variant.solid.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.solid.light.font.color.light} dark:text-${config2.color.variant.solid.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.solid.invert.background.light} dark:bg-${config2.color.variant.solid.invert.background.dark}`]: {}
+          [`@apply bg-${config2.color.variant.solid.light.background.light} dark:bg-${config2.color.variant.solid.light.background.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {
@@ -8136,12 +8209,12 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.pastel.invert.font.color.light} dark:text-${config2.color.variant.pastel.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.pastel.light.font.color.light} dark:text-${config2.color.variant.pastel.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.pastel.invert.background.light} dark:bg-${config2.color.variant.pastel.invert.background.dark}`]: {}
+          [`@apply bg-${config2.color.variant.pastel.light.background.light} dark:bg-${config2.color.variant.pastel.light.background.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {
@@ -8213,14 +8286,14 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.outline.invert.font.color.light} dark:text-${config2.color.variant.outline.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.outline.light.font.color.light} dark:text-${config2.color.variant.outline.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.outline.invert.background.light}  bg-${config2.color.variant.outline.invert.background.dark}`]: {},
+          [`@apply bg-${config2.color.variant.outline.light.background.light}  bg-${config2.color.variant.outline.light.background.dark}`]: {},
           //Border
-          [`@apply border-2 border-${config2.color.variant.outline.invert.border.light} dark:border-${config2.color.variant.outline.invert.border.dark}`]: {}
+          [`@apply border-2 border-${config2.color.variant.outline.light.border.light} dark:border-${config2.color.variant.outline.light.border.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {

package/dist/plugins/index.mjs

@@ -3889,7 +3889,7 @@ const config$L = {
 };
 const buttonGroup = plugin(
   ({ addComponents }) => addComponents({
-    ".nui-button-group": {
+    '.nui-button-group, [role="group"]': {
       "@apply flex": {},
       ".nui-button, .nui-button-action, .nui-button-icon": {
         "@apply !border-e-0": {},
@@ -6769,30 +6769,76 @@ const defaultConfig$E = {
     md: "lg",
     lg: "xl"
   },
-  color: {
+  contrast: {
     default: {
       background: {
         light: "muted-100",
         dark: "muted-700"
-      },
-      font: {
-        color: {
-          light: "primary-500",
-          dark: "primary-500"
-        }
       }
     },
     contrast: {
       background: {
         light: "muted-100",
         dark: "muted-900"
-      },
+      }
+    }
+  },
+  color: {
+    primary: {
       font: {
         color: {
           light: "primary-500",
           dark: "primary-500"
         }
       }
+    },
+    info: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    success: {
+      font: {
+        color: {
+          light: "success-500",
+          dark: "success-500"
+        }
+      }
+    },
+    warning: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    danger: {
+      font: {
+        color: {
+          light: "info-500",
+          dark: "info-500"
+        }
+      }
+    },
+    dark: {
+      font: {
+        color: {
+          light: "muted-900",
+          dark: "muted-100"
+        }
+      }
+    },
+    black: {
+      font: {
+        color: {
+          light: "black",
+          dark: "white"
+        }
+      }
     }
   },
   transition: {
@@ -6826,32 +6872,59 @@ const dropdownItem = plugin(({ addComponents, theme }) => {
       "&:not(.nui-active)": {
         [`@apply text-${config2.font.color.inactive.light} dark:text-${config2.font.color.inactive.dark}`]: {}
       },
-      //Color:default
+      //Contrast:default
       "&.nui-item-default": {
         //Background:hover
-        [`@apply hover:bg-${config2.color.default.background.light} dark:hover:bg-${config2.color.default.background.dark}`]: {},
-        //Font:hover
-        [`@apply hover:text-${config2.color.default.font.color.light} dark:hover:text-${config2.color.default.font.color.dark}`]: {},
+        [`@apply hover:bg-${config2.contrast.default.background.light} dark:hover:bg-${config2.contrast.default.background.dark}`]: {},
         "&.nui-active": {
           //Background:hover
-          [`@apply bg-${config2.color.default.background.light} dark:bg-${config2.color.default.background.dark}`]: {},
-          //Font:hover
-          [`@apply text-${config2.color.default.font.color.light} dark:text-${config2.color.default.font.color.dark}`]: {}
+          [`@apply bg-${config2.contrast.default.background.light} dark:bg-${config2.contrast.default.background.dark}`]: {}
         }
       },
-      //Color:contrast
+      //Contrast:contrast
       "&.nui-item-contrast": {
         //Background:hover
-        [`@apply hover:bg-${config2.color.contrast.background.light} dark:hover:bg-${config2.color.contrast.background.dark}`]: {},
-        //Font:hover
-        [`@apply hover:text-${config2.color.contrast.font.color.light} dark:hover:text-${config2.color.contrast.font.color.dark}`]: {},
+        [`@apply hover:bg-${config2.contrast.contrast.background.light} dark:hover:bg-${config2.contrast.contrast.background.dark}`]: {},
         "&.nui-active": {
           //Background:hover
-          [`@apply bg-${config2.color.contrast.background.light} dark:bg-${config2.color.contrast.background.dark}`]: {},
-          //Font:hover
-          [`@apply text-${config2.color.contrast.font.color.light} dark:text-${config2.color.contrast.font.color.dark}`]: {}
+          [`@apply bg-${config2.contrast.contrast.background.light} dark:bg-${config2.contrast.contrast.background.dark}`]: {}
         }
       },
+      //Color:primary
+      "&.nui-item-primary": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.primary.font.color.light} dark:hover:text-${config2.color.primary.font.color.dark}`]: {}
+      },
+      //Color:info
+      "&.nui-item-info": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.info.font.color.light} dark:hover:text-${config2.color.info.font.color.dark}`]: {}
+      },
+      //Color:success
+      "&.nui-item-success": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.success.font.color.light} dark:hover:text-${config2.color.success.font.color.dark}`]: {}
+      },
+      //Color:warning
+      "&.nui-item-warning": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.warning.font.color.light} dark:hover:text-${config2.color.warning.font.color.dark}`]: {}
+      },
+      //Color:danger
+      "&.nui-item-danger": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.danger.font.color.light} dark:hover:text-${config2.color.danger.font.color.dark}`]: {}
+      },
+      //Color:dark
+      "&.nui-item-dark": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.dark.font.color.light} dark:hover:text-${config2.color.dark.font.color.dark}`]: {}
+      },
+      //Color:black
+      "&.nui-item-black": {
+        //Font:hover
+        [`@apply hover:text-${config2.color.black.font.color.light} dark:hover:text-${config2.color.black.font.color.dark}`]: {}
+      },
       //Rounded:sm
       "&.nui-item-rounded-sm": {
         [`@apply rounded-${config2.rounded.sm}`]: {}
@@ -6906,8 +6979,8 @@ const defaultConfig$D = {
         },
         color: {
           hover: {
-            light: "primary-500",
-            dark: "primary-500"
+            light: "muted-200",
+            dark: "muted-700"
           }
         }
       },
@@ -7536,10 +7609,10 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "white",
-            dark: "muted-950"
+            dark: "muted-700"
           },
           font: {
             color: {
@@ -7658,7 +7731,7 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "white/10",
             dark: "white/10"
@@ -7666,7 +7739,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-800"
+              dark: "muted-300"
             }
           }
         },
@@ -7678,7 +7751,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-900"
+              dark: "muted-100"
             }
           }
         },
@@ -7788,7 +7861,7 @@ const defaultConfig$z = {
             }
           }
         },
-        invert: {
+        light: {
           background: {
             light: "transparent",
             dark: "transparent"
@@ -7800,7 +7873,7 @@ const defaultConfig$z = {
           font: {
             color: {
               light: "muted-800",
-              dark: "muted-800"
+              dark: "muted-400"
             }
           }
         },
@@ -8057,12 +8130,12 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.solid.invert.font.color.light} dark:text-${config2.color.variant.solid.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.solid.light.font.color.light} dark:text-${config2.color.variant.solid.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.solid.invert.background.light} dark:bg-${config2.color.variant.solid.invert.background.dark}`]: {}
+          [`@apply bg-${config2.color.variant.solid.light.background.light} dark:bg-${config2.color.variant.solid.light.background.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {
@@ -8130,12 +8203,12 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.pastel.invert.font.color.light} dark:text-${config2.color.variant.pastel.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.pastel.light.font.color.light} dark:text-${config2.color.variant.pastel.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.pastel.invert.background.light} dark:bg-${config2.color.variant.pastel.invert.background.dark}`]: {}
+          [`@apply bg-${config2.color.variant.pastel.light.background.light} dark:bg-${config2.color.variant.pastel.light.background.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {
@@ -8207,14 +8280,14 @@ 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:invert
-        "&.nui-box-invert": {
+        //Color:light
+        "&.nui-box-light": {
           //Font
-          [`@apply text-${config2.color.variant.outline.invert.font.color.light} dark:text-${config2.color.variant.outline.invert.font.color.dark}`]: {},
+          [`@apply text-${config2.color.variant.outline.light.font.color.light} dark:text-${config2.color.variant.outline.light.font.color.dark}`]: {},
           //Background
-          [`@apply bg-${config2.color.variant.outline.invert.background.light}  bg-${config2.color.variant.outline.invert.background.dark}`]: {},
+          [`@apply bg-${config2.color.variant.outline.light.background.light}  bg-${config2.color.variant.outline.light.background.dark}`]: {},
           //Border
-          [`@apply border-2 border-${config2.color.variant.outline.invert.border.light} dark:border-${config2.color.variant.outline.invert.border.dark}`]: {}
+          [`@apply border-2 border-${config2.color.variant.outline.light.border.light} dark:border-${config2.color.variant.outline.light.border.dark}`]: {}
         },
         //Color:dark
         "&.nui-box-dark": {

package/dist/preset.d.cts

@@ -1,3 +1,3 @@
 import 'tailwindcss/types/config';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.cjs';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.cjs';
 import 'tailwindcss';

package/dist/preset.d.mts

@@ -1,3 +1,3 @@
 import 'tailwindcss/types/config';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.mjs';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.mjs';
 import 'tailwindcss';

package/dist/preset.d.ts

@@ -1,3 +1,3 @@
 import 'tailwindcss/types/config';
-export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.f78a9037.js';
+export { c as createPreset, h as hasPreset, p as preset } from './shared/tailwind.a9f50d73.js';
 import 'tailwindcss';