@shuriken-ui/tailwind 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/preset.cjs

@@ -2090,10 +2090,14 @@ const defaultButtonIconConfig = {
     full: "full"
   },
   default: {
+    bg: "white",
+    bgDark: "muted-700",
     bgHover: "muted-50",
     bgHoverDark: "muted-600",
     text: "muted-700",
-    textDark: "white"
+    textDark: "white",
+    border: "muted-300",
+    borderDark: "muted-600"
   },
   muted: {
     bg: "muted-200",
@@ -2164,7 +2168,7 @@ const buttonIcon = plugin__default.withOptions(
             [`@apply !text-transparent`]: {}
           },
           [`&.${prefix}-button-default`]: {
-            [`@apply text-${config.default.text} dark:text-${config.default.textDark} dark:hover:bg-${config.default.bgHoverDark} hover:bg-${config.default.bgHover}`]: {}
+            [`@apply text-${config.default.text} bg-${config.default.bg} dark:bg-${config.default.bgDark} dark:text-${config.default.textDark} dark:hover:bg-${config.default.bgHoverDark} hover:bg-${config.default.bgHover} border border-${config.default.border} dark:border-${config.default.borderDark}`]: {}
           },
           [`&.${prefix}-button-muted`]: {
             [`@apply text-${config.muted.text} bg-${config.muted.bg} dark:text-${config.muted.textDark} dark:bg-${config.muted.bgDark} dark:hover:bg-${config.muted.bgHoverDark} hover:bg-${config.muted.bgHover}`]: {}
@@ -2640,7 +2644,7 @@ const button = plugin__default.withOptions(
         [`.${prefix}-button`]: {
           [`@apply relative font-sans font-${config.font} leading-5 no-underline inline-flex justify-center items-center space-x-1 ${prefix}-focus transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
           [`.${prefix}-button-badge`]: {
-            [`@apply flex absolute h-${config.badge.space} w-${config.badge.space} top-0 -end-1 -mt-1 -me-8`]: {},
+            [`@apply flex absolute h-${config.badge.space} w-${config.badge.space} top-0 -end-1 -mt-1`]: {},
             [`.${prefix}-button-badge-pulse`]: {
               [`@apply absolute inline-flex h-full w-full rounded-full opacity-75`]: {}
             },
@@ -3599,6 +3603,9 @@ const dropdown = plugin__default.withOptions(
           [`.${prefix}-menu`]: {
             [`@apply relative`]: {}
           },
+          [`.${prefix}-menu-content`]: {
+            [`@apply p-2`]: {}
+          },
           [`.${prefix}-context-button`]: {
             [`@apply dark:ring-offset-${config.contextButton.ringOffsetDark} inline-flex h-${config.contextButton.size} w-${config.contextButton.size} items-center justify-center rounded-${config.contextButton.rounded} ring-1 ring-transparent transition-all duration-${config.contextButton.duration} group-hover:ring-${config.contextButton.ringGroupHover}`]: {},
             [`.${prefix}-context-button-inner`]: {
@@ -3758,25 +3765,25 @@ const fullscreenDropfile = plugin__default.withOptions(
   function(options) {
     const { prefix } = defu.defu(options, defaultPluginOptions);
     return function({ addComponents, theme }) {
-      theme(
+      const config = theme(
         "shurikenUi.fullscreenDropfile"
       );
       addComponents({
         [`.${prefix}-fullscreen-dropfile`]: {
           [`.${prefix}-fullscreen-dropfile-outer`]: {
-            [`@apply ${prefix}-bg-400/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]: {}
+            [`@apply bg-muted-200/20 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]: {}
           },
           [`.${prefix}-fullscreen-dropfile-inner`]: {
             [`@apply fixed inset-0 z-50`]: {},
             [`.${prefix}-fullscreen-dropfile-container`]: {
               [`@apply flex h-full flex-1 items-center justify-center`]: {},
               [`.${prefix}-fullscreen-dropfile-content`]: {
-                [`@apply border-primary-500 ${prefix}-bg-200 mx-auto flex h-[230px] w-[500px] flex-col items-center justify-center gap-6 rounded border drop-shadow-sm`]: {},
+                [`@apply border-${config.border} bg-muted-200 dark:bg-muted-800 mx-auto flex h-${config.height} w-${config.width} flex-col items-center justify-center gap-6 rounded border drop-shadow-sm`]: {},
                 [`.${prefix}-fullscreen-dropfile-icon`]: {
-                  [`@apply text-primary-500 text-6xl`]: {}
+                  [`@apply text-${config.icon.text} text-${config.icon.textSize}`]: {}
                 },
                 [`.${prefix}-fullscreen-dropfile-label`]: {
-                  [`@apply text-2xl`]: {}
+                  [`@apply text-${config.labelTextSize}`]: {}
                 }
               }
             }
@@ -5584,7 +5591,7 @@ const listbox = plugin__default.withOptions(
                   [`@apply h-${config.button.iconBox.innerSize} w-${config.button.iconBox.innerSize}`]: {}
                 }
               },
-              [`.${prefix}-nui-listbox-placehoolder`]: {
+              [`.${prefix}-listbox-placeholder`]: {
                 [`@apply text-${config.button.placeholder.text} dark:text-${config.button.placeholder.textDark} truncate text-${config.button.placeholder.textPosition}`]: {}
               }
             },
@@ -7159,7 +7166,7 @@ const defaultRadioConfig = {
     size: "5"
   },
   labelText: {
-    text: "danger-400",
+    text: "muted-400",
     textSize: "sm",
     font: "sans"
   },
@@ -7256,6 +7263,50 @@ const radio = plugin__default.withOptions(
   }
 );
 
+const defaultRadioHeadlessConfig = {
+  label: {
+    text: "muted-400",
+    textSize: "sm",
+    font: "sans"
+  },
+  input: {
+    size: "full"
+  }
+};
+const radioHeadless = plugin__default.withOptions(
+  function(options) {
+    const { prefix } = defu.defu(options, defaultPluginOptions);
+    return function({ addComponents, theme }) {
+      const config = theme(
+        "shurikenUi.radioHeadless"
+      );
+      addComponents({
+        [`.${prefix}-radio-headless`]: {
+          [`@apply relative`]: {},
+          [`.${prefix}-radio-headless-label`]: {
+            [`@apply text-${config.label.text} mb-1 inline-block cursor-pointer select-none font-${config.label.font} text-${config.label.textSize}`]: {}
+          },
+          [`.${prefix}-radio-headless-inner`]: {
+            [`@apply relative`]: {},
+            [`.${prefix}-radio-headless-input`]: {
+              [`@apply absolute inset-0 z-20 h-${config.input.size} w-${config.input.size} cursor-pointer disabled:cursor-not-allowed opacity-0`]: {}
+            }
+          }
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          radioHeadless: defaultRadioHeadlessConfig
+        }
+      }
+    };
+  }
+);
+
 const defaultSelectConfig = {
   labelFloat: {
     text: "primary-500",
@@ -7962,12 +8013,12 @@ const switchBall = plugin__default.withOptions(
           [`.${prefix}-switch-ball-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
           },
-          [`.${prefix}-switch-dual-label`]: {
+          [`.${prefix}-switch-ball-dual-label`]: {
             [`@apply ms-3`]: {},
-            [`.${prefix}-switch-label`]: {
+            [`.${prefix}-switch-ball-label`]: {
               [`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]: {}
             },
-            [`.${prefix}-switch-sublabel`]: {
+            [`.${prefix}-switch-ball-sublabel`]: {
               [`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]: {}
             }
           },
@@ -8078,12 +8129,12 @@ const switchThin = plugin__default.withOptions(
           [`.${prefix}-switch-thin-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
           },
-          [`.${prefix}-switch-dual-label`]: {
+          [`.${prefix}-switch-thin-dual-label`]: {
             [`@apply ms-3`]: {},
-            [`.${prefix}-switch-label`]: {
+            [`.${prefix}-switch-thin-label`]: {
               [`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]: {}
             },
-            [`.${prefix}-switch-sublabel`]: {
+            [`.${prefix}-switch-thin-sublabel`]: {
               [`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]: {}
             }
           },
@@ -8943,6 +8994,9 @@ const textarea = plugin__default.withOptions(
             [`@apply ${prefix}-focus w-${config.textarea.size}`]: {},
             [`&:focus-visible ~ .${prefix}-label-float`]: {
               [`@apply !text-${config.textarea.focusVisible.labelFloat.text} dark:!text-${config.textarea.focusVisible.labelFloat.textDark}`]: {}
+            },
+            [`&.${prefix}-textarea-focus`]: {
+              [`@apply focus:!border-${config.textarea.focus.border} transition-colors duration-${config.textarea.focus.duration}`]: {}
             }
           },
           [`.${prefix}-textarea-error-text`]: {
@@ -9030,9 +9084,6 @@ const textarea = plugin__default.withOptions(
               [`@apply !border-${config.textarea.error.border} dark:!border-${config.textarea.error.borderDark}`]: {}
             }
           },
-          [`&.${prefix}-textarea-focus`]: {
-            [`@apply focus-visible:!border-${config.textarea.focus.border} transition-colors duration-${config.textarea.focus.duration}`]: {}
-          },
           [`&.${prefix}-textarea-no-resize`]: {
             [`.${prefix}-textarea`]: {
               [`@apply resize-none`]: {}
@@ -9774,6 +9825,7 @@ const components = [
   progress,
   prose,
   radio,
+  radioHeadless,
   select,
   slimscroll,
   snack,

package/dist/preset.mjs

@@ -2079,10 +2079,14 @@ const defaultButtonIconConfig = {
     full: "full"
   },
   default: {
+    bg: "white",
+    bgDark: "muted-700",
     bgHover: "muted-50",
     bgHoverDark: "muted-600",
     text: "muted-700",
-    textDark: "white"
+    textDark: "white",
+    border: "muted-300",
+    borderDark: "muted-600"
   },
   muted: {
     bg: "muted-200",
@@ -2153,7 +2157,7 @@ const buttonIcon = plugin.withOptions(
             [`@apply !text-transparent`]: {}
           },
           [`&.${prefix}-button-default`]: {
-            [`@apply text-${config.default.text} dark:text-${config.default.textDark} dark:hover:bg-${config.default.bgHoverDark} hover:bg-${config.default.bgHover}`]: {}
+            [`@apply text-${config.default.text} bg-${config.default.bg} dark:bg-${config.default.bgDark} dark:text-${config.default.textDark} dark:hover:bg-${config.default.bgHoverDark} hover:bg-${config.default.bgHover} border border-${config.default.border} dark:border-${config.default.borderDark}`]: {}
           },
           [`&.${prefix}-button-muted`]: {
             [`@apply text-${config.muted.text} bg-${config.muted.bg} dark:text-${config.muted.textDark} dark:bg-${config.muted.bgDark} dark:hover:bg-${config.muted.bgHoverDark} hover:bg-${config.muted.bgHover}`]: {}
@@ -2629,7 +2633,7 @@ const button = plugin.withOptions(
         [`.${prefix}-button`]: {
           [`@apply relative font-sans font-${config.font} leading-5 no-underline inline-flex justify-center items-center space-x-1 ${prefix}-focus transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
           [`.${prefix}-button-badge`]: {
-            [`@apply flex absolute h-${config.badge.space} w-${config.badge.space} top-0 -end-1 -mt-1 -me-8`]: {},
+            [`@apply flex absolute h-${config.badge.space} w-${config.badge.space} top-0 -end-1 -mt-1`]: {},
             [`.${prefix}-button-badge-pulse`]: {
               [`@apply absolute inline-flex h-full w-full rounded-full opacity-75`]: {}
             },
@@ -3588,6 +3592,9 @@ const dropdown = plugin.withOptions(
           [`.${prefix}-menu`]: {
             [`@apply relative`]: {}
           },
+          [`.${prefix}-menu-content`]: {
+            [`@apply p-2`]: {}
+          },
           [`.${prefix}-context-button`]: {
             [`@apply dark:ring-offset-${config.contextButton.ringOffsetDark} inline-flex h-${config.contextButton.size} w-${config.contextButton.size} items-center justify-center rounded-${config.contextButton.rounded} ring-1 ring-transparent transition-all duration-${config.contextButton.duration} group-hover:ring-${config.contextButton.ringGroupHover}`]: {},
             [`.${prefix}-context-button-inner`]: {
@@ -3747,25 +3754,25 @@ const fullscreenDropfile = plugin.withOptions(
   function(options) {
     const { prefix } = defu(options, defaultPluginOptions);
     return function({ addComponents, theme }) {
-      theme(
+      const config = theme(
         "shurikenUi.fullscreenDropfile"
       );
       addComponents({
         [`.${prefix}-fullscreen-dropfile`]: {
           [`.${prefix}-fullscreen-dropfile-outer`]: {
-            [`@apply ${prefix}-bg-400/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]: {}
+            [`@apply bg-muted-200/20 dark:bg-muted-800/20 fixed inset-0 z-40 backdrop-blur-sm transition-all hover:backdrop-blur-none`]: {}
           },
           [`.${prefix}-fullscreen-dropfile-inner`]: {
             [`@apply fixed inset-0 z-50`]: {},
             [`.${prefix}-fullscreen-dropfile-container`]: {
               [`@apply flex h-full flex-1 items-center justify-center`]: {},
               [`.${prefix}-fullscreen-dropfile-content`]: {
-                [`@apply border-primary-500 ${prefix}-bg-200 mx-auto flex h-[230px] w-[500px] flex-col items-center justify-center gap-6 rounded border drop-shadow-sm`]: {},
+                [`@apply border-${config.border} bg-muted-200 dark:bg-muted-800 mx-auto flex h-${config.height} w-${config.width} flex-col items-center justify-center gap-6 rounded border drop-shadow-sm`]: {},
                 [`.${prefix}-fullscreen-dropfile-icon`]: {
-                  [`@apply text-primary-500 text-6xl`]: {}
+                  [`@apply text-${config.icon.text} text-${config.icon.textSize}`]: {}
                 },
                 [`.${prefix}-fullscreen-dropfile-label`]: {
-                  [`@apply text-2xl`]: {}
+                  [`@apply text-${config.labelTextSize}`]: {}
                 }
               }
             }
@@ -5573,7 +5580,7 @@ const listbox = plugin.withOptions(
                   [`@apply h-${config.button.iconBox.innerSize} w-${config.button.iconBox.innerSize}`]: {}
                 }
               },
-              [`.${prefix}-nui-listbox-placehoolder`]: {
+              [`.${prefix}-listbox-placeholder`]: {
                 [`@apply text-${config.button.placeholder.text} dark:text-${config.button.placeholder.textDark} truncate text-${config.button.placeholder.textPosition}`]: {}
               }
             },
@@ -7148,7 +7155,7 @@ const defaultRadioConfig = {
     size: "5"
   },
   labelText: {
-    text: "danger-400",
+    text: "muted-400",
     textSize: "sm",
     font: "sans"
   },
@@ -7245,6 +7252,50 @@ const radio = plugin.withOptions(
   }
 );
 
+const defaultRadioHeadlessConfig = {
+  label: {
+    text: "muted-400",
+    textSize: "sm",
+    font: "sans"
+  },
+  input: {
+    size: "full"
+  }
+};
+const radioHeadless = plugin.withOptions(
+  function(options) {
+    const { prefix } = defu(options, defaultPluginOptions);
+    return function({ addComponents, theme }) {
+      const config = theme(
+        "shurikenUi.radioHeadless"
+      );
+      addComponents({
+        [`.${prefix}-radio-headless`]: {
+          [`@apply relative`]: {},
+          [`.${prefix}-radio-headless-label`]: {
+            [`@apply text-${config.label.text} mb-1 inline-block cursor-pointer select-none font-${config.label.font} text-${config.label.textSize}`]: {}
+          },
+          [`.${prefix}-radio-headless-inner`]: {
+            [`@apply relative`]: {},
+            [`.${prefix}-radio-headless-input`]: {
+              [`@apply absolute inset-0 z-20 h-${config.input.size} w-${config.input.size} cursor-pointer disabled:cursor-not-allowed opacity-0`]: {}
+            }
+          }
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          radioHeadless: defaultRadioHeadlessConfig
+        }
+      }
+    };
+  }
+);
+
 const defaultSelectConfig = {
   labelFloat: {
     text: "primary-500",
@@ -7951,12 +8002,12 @@ const switchBall = plugin.withOptions(
           [`.${prefix}-switch-ball-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
           },
-          [`.${prefix}-switch-dual-label`]: {
+          [`.${prefix}-switch-ball-dual-label`]: {
             [`@apply ms-3`]: {},
-            [`.${prefix}-switch-label`]: {
+            [`.${prefix}-switch-ball-label`]: {
               [`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]: {}
             },
-            [`.${prefix}-switch-sublabel`]: {
+            [`.${prefix}-switch-ball-sublabel`]: {
               [`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]: {}
             }
           },
@@ -8067,12 +8118,12 @@ const switchThin = plugin.withOptions(
           [`.${prefix}-switch-thin-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
           },
-          [`.${prefix}-switch-dual-label`]: {
+          [`.${prefix}-switch-thin-dual-label`]: {
             [`@apply ms-3`]: {},
-            [`.${prefix}-switch-label`]: {
+            [`.${prefix}-switch-thin-label`]: {
               [`@apply font-${config.dualLabel.label.font} text-${config.dualLabel.label.text} block text-${config.dualLabel.label.textSize} font-${config.dualLabel.label.fontWeight} dark:text-${config.dualLabel.label.textDark}`]: {}
             },
-            [`.${prefix}-switch-sublabel`]: {
+            [`.${prefix}-switch-thin-sublabel`]: {
               [`@apply text-${config.dualLabel.sublabel.text} block font-${config.dualLabel.sublabel.font} text-${config.dualLabel.sublabel.textSize}`]: {}
             }
           },
@@ -8932,6 +8983,9 @@ const textarea = plugin.withOptions(
             [`@apply ${prefix}-focus w-${config.textarea.size}`]: {},
             [`&:focus-visible ~ .${prefix}-label-float`]: {
               [`@apply !text-${config.textarea.focusVisible.labelFloat.text} dark:!text-${config.textarea.focusVisible.labelFloat.textDark}`]: {}
+            },
+            [`&.${prefix}-textarea-focus`]: {
+              [`@apply focus:!border-${config.textarea.focus.border} transition-colors duration-${config.textarea.focus.duration}`]: {}
             }
           },
           [`.${prefix}-textarea-error-text`]: {
@@ -9019,9 +9073,6 @@ const textarea = plugin.withOptions(
               [`@apply !border-${config.textarea.error.border} dark:!border-${config.textarea.error.borderDark}`]: {}
             }
           },
-          [`&.${prefix}-textarea-focus`]: {
-            [`@apply focus-visible:!border-${config.textarea.focus.border} transition-colors duration-${config.textarea.focus.duration}`]: {}
-          },
           [`&.${prefix}-textarea-no-resize`]: {
             [`.${prefix}-textarea`]: {
               [`@apply resize-none`]: {}
@@ -9763,6 +9814,7 @@ const components = [
   progress,
   prose,
   radio,
+  radioHeadless,
   select,
   slimscroll,
   snack,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuriken-ui/tailwind",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "license": "MIT",
   "author": "Css Ninja <hello@cssninja.io> (https://cssninja.io)",
   "repository": "shuriken-ui/tailwind",