@shuriken-ui/tailwind 1.2.5 → 1.4.0

package/dist/preset.mjs

@@ -480,7 +480,7 @@ const autocomplete = plugin.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}autocomplete-icon`]: {
-            [`@apply text-${config.icon.text} absolute start-0 top-0 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
           },
           [`.${prefix}autocomplete-input`]: {
             [`@apply ${prefix}focus w-${config.input.size} font-${config.input.font} transition-all duration-${config.input.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {},
@@ -2097,7 +2097,7 @@ const buttonClose = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}button-close`]: {
-          [`@apply flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
+          [`@apply ${prefix}focus flex h-${config.size} w-${config.size} items-center justify-center transition-colors duration-${config.duration} disabled:opacity-30 cursor-pointer`]: {},
           [`.${prefix}button-icon`]: {
             [`@apply h-${config.buttonIcon.size} w-${config.buttonIcon.size} fill-current`]: {}
           },
@@ -2342,7 +2342,7 @@ const buttonIcon = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}button-icon`]: {
-          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline outline-none transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
+          [`@apply ${prefix}focus relative inline-flex items-center justify-center space-x-1 font-sans text-${config.text} font-${config.font} leading-5 no-underline transition-all duration-${config.duration} disabled:opacity-60 disabled:cursor-not-allowed hover:shadow-none`]: {},
           [`&.${prefix}button-small`]: {
             [`@apply h-${config.buttonSmall.size} w-${config.buttonSmall.size} p-${config.buttonSmall.space}`]: {}
           },
@@ -3329,16 +3329,16 @@ const checkbox = plugin.withOptions(
           [`.${prefix}checkbox-error`]: {
             [`@apply text-${config.error.text} ms-1 inline-block font-${config.error.font} text-${config.error.textSixe}`]: {}
           },
-          [`&.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-rounded .${prefix}checkbox-outer, &.${prefix}checkbox-rounded .${prefix}checkbox-inner`]: {
             [`@apply rounded`]: {}
           },
-          [`&.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-smooth .${prefix}checkbox-outer, &.${prefix}checkbox-smooth .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.smooth}`]: {}
           },
-          [`&.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-curved .${prefix}checkbox-outer, &.${prefix}checkbox-curved .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.curved}`]: {}
           },
-          [`&.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
+          [`&.${prefix}checkbox-full .${prefix}checkbox-outer, &.${prefix}checkbox-full .${prefix}checkbox-inner`]: {
             [`@apply rounded-${config.rounded.full}`]: {}
           },
           [`&.${prefix}checkbox-default`]: {
@@ -3450,7 +3450,7 @@ const dropdownItem = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}dropdown-item`]: {
-          [`@apply flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
+          [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]: {},
           [`.${prefix}item-content`]: {
             [`@apply grow`]: {}
           },
@@ -3715,10 +3715,11 @@ const dropdown = plugin.withOptions(
 
 const defaultFocusConfig = {
   offset: "2",
-  width: "1",
+  width: "2",
   style: "dashed",
   color: "muted-300",
-  colorDark: "muted-600"
+  colorDark: "muted-600",
+  mode: "always"
 };
 const focus = plugin.withOptions(
   function(options) {
@@ -3730,16 +3731,14 @@ const focus = plugin.withOptions(
       const config = theme(
         "shurikenUi.focus"
       );
+      const mode = config.mode === "focus-visible" ? "&:has(:focus-visible), &:focus-visible" : "&:focus-within";
       addComponents({
         [`.${prefix}focus`]: {
           [`@apply outline-${config.width} outline-${config.style} outline-offset-${config.offset}`]: {},
           "@apply outline-transparent": {},
-          "&:focus-within": {
+          [mode]: {
             [`@apply outline-${config.color} dark:outline-${config.colorDark}`]: {},
             [`@apply outline-${config.style} ring-0`]: {}
-          },
-          "&:focus-visible": {
-            [`@apply outline-${config.width}`]: {}
           }
         }
       });
@@ -4336,7 +4335,7 @@ const inputFileRegular = plugin.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}input-file-inner`]: {
-            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75`]: {}
+            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {}
           },
           [`.${prefix}input-file-addon`]: {
             [`@apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100`]: {}
@@ -4611,7 +4610,7 @@ const inputFile = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}input-file`]: {
-          [`@apply relative block`]: {},
+          [`@apply relative block ${prefix}focus`]: {},
           [`&.${prefix}input-file-drop`]: {
             [`@apply relative h-${config.drop.size} border-dashed border-2 border-${config.drop.border} dark:border-${config.drop.borderDark} hover:border-${config.drop.borderHover} dark:hover:border-${config.drop.borderHoverDark} bg-${config.drop.bg} dark:bg-${config.drop.bgDark} flex justify-center items-center transition-colors duration-${config.drop.duration}`]: {},
             [`.${prefix}drop-area-inner`]: {
@@ -4653,7 +4652,7 @@ const inputFile = plugin.withOptions(
               [`@apply font-${config.combo.label.font} sr-only text-${config.combo.label.text}`]: {}
             },
             [`.${prefix}combo-input`]: {
-              [`@apply block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
+              [`@apply outline-none block w-${config.combo.input.size} text-${config.combo.input.textSize} text-${config.combo.input.text} dark:text-${config.combo.input.textDark} file:me-4 file:py-2 file:px-4 file:border-0 file:cursor-pointer file:text-${config.combo.input.textFileSize} file:transition-colors file:bg-${config.combo.input.bgFile} file:text-${config.combo.input.textFile} hover:file:bg-${config.combo.input.bgFileHover}`]: {}
             }
           },
           [`&.${prefix}input-file-rounded`]: {
@@ -4935,7 +4934,7 @@ const input = plugin.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}input-icon`]: {
-            [`@apply text-${config.icon.text} absolute start-0 top-0 z-20 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
           },
           [`.${prefix}input-error-text`]: {
             [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
@@ -5212,6 +5211,557 @@ const input = plugin.withOptions(
   }
 );
 
+const defaultInputNumberConfig = {
+  label: {
+    float: {
+      text: "primary-500",
+      duration: "300",
+      size: "5"
+    }
+  },
+  icon: {
+    text: "muted-400",
+    duration: "300"
+  },
+  errorText: {
+    text: "danger-600",
+    textSize: "[0.65rem]",
+    font: "sans",
+    fontWeight: "medium"
+  },
+  input: {
+    focusSize: "full",
+    font: "sans",
+    duration: "300",
+    focusVisible: {
+      labelFloat: {
+        text: "primary-500",
+        textDark: "primary-500"
+      },
+      icon: {
+        text: "primary-500"
+      }
+    },
+    action: {
+      text: "muted-400",
+      duration: "300"
+    },
+    rounded: {
+      default: "md",
+      smooth: "lg",
+      curved: "xl",
+      full: "full"
+    },
+    sm: {
+      label: {
+        text: "xs"
+      },
+      iconOrAction: {
+        size: "8"
+      },
+      iconOrAcionInner: {
+        size: "4"
+      },
+      placeload: {
+        size: "8"
+      }
+    },
+    md: {
+      label: {
+        text: "[0.825rem]"
+      },
+      iconOrAction: {
+        size: "10"
+      },
+      iconOrAcionInner: {
+        size: "[1.15rem]"
+      },
+      placeload: {
+        size: "10"
+      }
+    },
+    lg: {
+      label: {
+        text: "sm"
+      },
+      iconOrAction: {
+        size: "12"
+      },
+      iconOrAcionInner: {
+        size: "5"
+      },
+      placeload: {
+        size: "12"
+      }
+    },
+    default: {
+      bg: "white",
+      bgDark: "muted-900",
+      border: "muted-300",
+      borderDark: "muted-700",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-500"
+    },
+    defaultContrast: {
+      bg: "white",
+      bgDark: "muted-950",
+      border: "muted-300",
+      borderDark: "muted-800",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-600"
+    },
+    muted: {
+      bg: "muted-100",
+      bgDark: "muted-900",
+      border: "muted-200",
+      borderDark: "muted-700",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-500"
+    },
+    mutedContrast: {
+      bg: "muted-100",
+      bgDark: "muted-950",
+      border: "muted-100",
+      borderDark: "muted-800",
+      text: "muted-600",
+      textDark: "muted-200",
+      textPlaceholder: "muted-300",
+      textPlaceholderDark: "muted-600"
+    },
+    notLoading: {
+      text: "muted-300",
+      textDark: "muted-600"
+    },
+    error: {
+      border: "danger-500",
+      borderDark: "danger-500",
+      icon: {
+        text: "danger-500"
+      }
+    },
+    hasNotIcon: {
+      text: {
+        sm: "xs",
+        md: "sm",
+        lg: "sm"
+      },
+      labelFloat: {
+        sm: "xs",
+        md: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        },
+        lg: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        }
+      }
+    },
+    hasIcon: {
+      text: {
+        sm: "xs",
+        md: "sm",
+        lg: "base"
+      },
+      labelFloat: {
+        sm: "xs",
+        md: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        },
+        lg: {
+          text: "xs",
+          focusVisible: {
+            text: "xs"
+          },
+          placeholderShown: {
+            text: "[0.825rem]"
+          }
+        }
+      }
+    },
+    hasAction: {
+      spaceSM: "8",
+      spaceMD: "10",
+      spaceLG: "12"
+    }
+  }
+};
+const inputNumber = plugin.withOptions(
+  function(options) {
+    let { prefix } = defu(options, defaultPluginOptions);
+    if (prefix) {
+      prefix = `${prefix}-`;
+    }
+    return function({ addComponents, theme }) {
+      const config = theme(
+        "shurikenUi.inputNumber"
+      );
+      addComponents({
+        [`.${prefix}input-number-wrapper`]: {
+          [`@apply relative`]: {},
+          [`.${prefix}input-number-label, .${prefix}label-float`]: {
+            [`@apply ${prefix}label`]: {}
+          },
+          [`.${prefix}label-float`]: {
+            [`@apply text-${config.label.float.text} pointer-events-none absolute inline-flex h-${config.label.float.size} select-none items-center leading-none transition-all duration-${config.label.float.duration}`]: {}
+          },
+          [`.${prefix}input-number-outer`]: {
+            [`@apply ${prefix}focus relative`]: {}
+          },
+          [`.${prefix}input-number-icon`]: {
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+          },
+          [`.${prefix}input-number-buttons`]: {
+            [`@apply absolute top-1 end-1 flex`]: {}
+          },
+          [`.${prefix}input-number-buttons button`]: {
+            [`@apply outline-none flex items-center justify-center`]: {},
+            [`@apply border border-muted-200 dark:border-muted-800 last:border-s-0`]: {},
+            [`@apply text-muted-400 hover:text-muted-600 dark:hover:text-muted-100`]: {},
+            [`@apply focus:text-muted-600 dark:focus:text-muted-100`]: {},
+            [`@apply transition-colors duration-300`]: {}
+          },
+          [`.${prefix}input-number-buttons svg`]: {
+            [`@apply h-4 w-4`]: {}
+          },
+          [`.${prefix}input-number-error-text`]: {
+            [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
+          },
+          [`.${prefix}input-number`]: {
+            [`@apply outline-none w-${config.input.focusSize} font-${config.input.font} transition-all duration-${config.input.duration} disabled:cursor-not-allowed disabled:opacity-75`]: {},
+            [`&:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !text-${config.input.focusVisible.labelFloat.text} dark:!text-${config.input.focusVisible.labelFloat.textDark}`]: {}
+            },
+            [`&:focus-visible ~ .${prefix}input-number-icon`]: {
+              [`@apply !text-${config.input.focusVisible.icon.text}`]: {}
+            },
+            [`&:disabled ~ .${prefix}input-number-icon`]: {
+              [`@apply cursor-not-allowed opacity-75`]: {}
+            }
+          },
+          [`.${prefix}input-number-placeload`]: {
+            [`@apply absolute start-0 top-0 flex w-full items-center px-4`]: {},
+            [`.${prefix}placeload`]: {
+              [`@apply h-3 w-full max-w-[50%] rounded`]: {}
+            }
+          },
+          [`.${prefix}input-number-action`]: {
+            [`@apply text-${config.input.action.text} absolute end-0 top-0 flex items-center justify-center transition-colors duration-${config.input.action.duration}`]: {}
+          },
+          [`&.${prefix}input-number-focus`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply focus:border-primary-500 dark:focus:border-primary-500`]: {}
+            }
+          },
+          [`&.${prefix}input-number-rounded`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.default}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.default}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.default}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-smooth`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.smooth}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.smooth}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.smooth}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-curved`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.curved}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.curved}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.curved}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-full`]: {
+            [`.${prefix}input-number, .${prefix}input-number-outer`]: {
+              [`@apply rounded-${config.input.rounded.full}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply first:rounded-s-${config.input.rounded.full}`]: {},
+              [`@apply last:rounded-e-${config.input.rounded.full}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.sm.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-1.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.sm.iconOrAction.size} w-${config.input.sm.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.sm.iconOrAcionInner.size} w-${config.input.sm.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.sm.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply h-6 w-6`]: {}
+            }
+          },
+          [`&.${prefix}input-number-md`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.md.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-2.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.md.iconOrAction.size} w-${config.input.md.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.md.iconOrAcionInner.size} w-${config.input.md.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.md.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply  h-8 w-8`]: {}
+            }
+          },
+          [`&.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number-label`]: {
+              [`@apply pb-1 text-${config.input.lg.label.text}`]: {}
+            },
+            [`.${prefix}label-float`]: {
+              [`@apply top-3.5`]: {}
+            },
+            [`.${prefix}input-number-icon, .${prefix}input-number-action`]: {
+              [`@apply h-${config.input.lg.iconOrAction.size} w-${config.input.lg.iconOrAction.size}`]: {},
+              [`.${prefix}input-number-icon-inner, .${prefix}input-number-action-inner`]: {
+                [`@apply h-${config.input.lg.iconOrAcionInner.size} w-${config.input.lg.iconOrAcionInner.size}`]: {}
+              }
+            },
+            [`.${prefix}input-number-placeload`]: {
+              [`@apply h-${config.input.lg.placeload.size}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply h-10 w-10`]: {}
+            }
+          },
+          [`&.${prefix}input-number-default`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.default.bg} border-${config.input.default.border} text-${config.input.default.text} placeholder:text-${config.input.default.textPlaceholder} dark:border-${config.input.default.borderDark} dark:bg-${config.input.default.bgDark} dark:text-${config.input.default.textDark} dark:placeholder:text-${config.input.default.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-muted-100 dark:hover:bg-muted-800`]: {},
+              [`@apply focus:bg-muted-100 dark:focus:bg-muted-800`]: {}
+            }
+          },
+          [`&.${prefix}input-number-default-contrast`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.defaultContrast.bg} border-${config.input.defaultContrast.border} text-${config.input.defaultContrast.text} placeholder:text-${config.input.defaultContrast.textPlaceholder} dark:border-${config.input.defaultContrast.borderDark} dark:bg-${config.input.defaultContrast.bgDark} dark:text-${config.input.defaultContrast.textDark} dark:placeholder:text-${config.input.defaultContrast.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-muted-100 dark:hover:bg-muted-900`]: {},
+              [`@apply focus:bg-muted-100 dark:focus:bg-muted-900`]: {}
+            }
+          },
+          [`&.${prefix}input-number-muted`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.muted.bg} border-${config.input.muted.border} text-${config.input.muted.text} placeholder:text-${config.input.muted.textPlaceholder} dark:border-${config.input.muted.borderDark} dark:bg-${config.input.muted.bgDark} dark:text-${config.input.muted.textDark} dark:placeholder:text-${config.input.muted.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-white dark:hover:bg-muted-800`]: {},
+              [`@apply focus:bg-white dark:focus:bg-muted-800`]: {}
+            }
+          },
+          [`&.${prefix}input-number-muted-contrast`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply border bg-${config.input.mutedContrast.bg} border-${config.input.mutedContrast.border} text-${config.input.mutedContrast.text} placeholder:text-${config.input.mutedContrast.textPlaceholder} dark:border-${config.input.mutedContrast.borderDark} dark:bg-${config.input.mutedContrast.bgDark} dark:text-${config.input.mutedContrast.textDark} dark:placeholder:text-${config.input.mutedContrast.textPlaceholderDark}`]: {}
+            },
+            [`.${prefix}input-number-buttons button`]: {
+              [`@apply hover:bg-white dark:hover:bg-muted-900`]: {},
+              [`@apply focus:bg-white dark:focus:bg-muted-900`]: {}
+            }
+          },
+          [`&:not(.${prefix}input-number-loading)`]: {
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply text-${config.input.notLoading.text} dark:text-${config.input.notLoading.textDark}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-loading`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply text-transparent`]: {}
+            },
+            [`.${prefix}input-number-icon`]: {
+              [`@apply opacity-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply placeholder:text-transparent dark:placeholder:text-transparent`]: {}
+            }
+          },
+          [`&.${prefix}input-number-error`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply !border-${config.input.error.border} dark:!border-${config.input.error.borderDark}`]: {}
+            },
+            [`.${prefix}input-number-icon`]: {
+              [`@apply !text-${config.input.error.icon.text}`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-8 py-1 text-${config.input.hasNotIcon.text.sm} leading-4 ps-2 pe-14`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-8 py-1 text-${config.input.hasIcon.text.sm} leading-4 pe-14 ps-8`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-10 py-2 text-${config.input.hasNotIcon.text.md} leading-5 ps-3 pe-20`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-10 py-2 text-${config.input.hasIcon.text.md} leading-5 pe-20 ps-10`]: {}
+            }
+          },
+          [`&:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-12 py-2 text-${config.input.hasNotIcon.text.lg} leading-5 ps-4 pe-24`]: {}
+            }
+          },
+          [`&.${prefix}has-icon.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply h-12 py-2 text-${config.input.hasIcon.text.lg} leading-5 pe-24 ps-11`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-sm`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceSM}`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-md`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceMD}`]: {}
+            }
+          },
+          [`&.${prefix}has-action.${prefix}input-number-lg`]: {
+            [`.${prefix}input-number`]: {
+              [`@apply pe-${config.input.hasAction.spaceLG}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-sm`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-7 text-${config.input.hasNotIcon.labelFloat.sm}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-7`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-sm`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-8 -ms-8 -mt-7 text-${config.input.hasIcon.labelFloat.sm}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-8 !-mt-7`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-md`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.md.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-8 !text-${config.input.hasNotIcon.labelFloat.md.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.md.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-md`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-10 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.md.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-10 !-mt-8 !text-${config.input.hasIcon.labelFloat.md.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.md.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float:not(.${prefix}has-icon).${prefix}input-number-lg`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-3 -ms-3 -mt-8 text-${config.input.hasNotIcon.labelFloat.lg.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-3 !-mt-9 !text-${config.input.hasNotIcon.labelFloat.lg.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasNotIcon.labelFloat.lg.placeholderShown.text}`]: {}
+            }
+          },
+          [`&.${prefix}input-number-label-float.${prefix}has-icon.${prefix}input-number-lg`]: {
+            [`.${prefix}label-float`]: {
+              [`@apply start-11 -ms-10 -mt-8 text-${config.input.hasIcon.labelFloat.lg.text}`]: {}
+            },
+            [`.${prefix}input-number:focus-visible ~ .${prefix}label-float`]: {
+              [`@apply !-ms-10 !-mt-9 !text-${config.input.hasIcon.labelFloat.lg.focusVisible.text}`]: {}
+            },
+            [`.${prefix}input-number:placeholder-shown ~ .${prefix}label-float`]: {
+              [`@apply ms-0 mt-0 text-${config.input.hasIcon.labelFloat.lg.placeholderShown.text}`]: {}
+            }
+          }
+        }
+      });
+    };
+  },
+  function() {
+    return {
+      theme: {
+        shurikenUi: {
+          inputNumber: defaultInputNumberConfig
+        }
+      }
+    };
+  }
+);
+
 const defaultLabelConfig = {
   font: "sans",
   text: "muted-400",
@@ -5676,7 +6226,7 @@ const listbox = plugin.withOptions(
             }
           },
           [`.${prefix}listbox-icon`]: {
-            [`@apply text-${config.icon.text} absolute start-0 top-0 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
           },
           [`.${prefix}listbox-chevron`]: {
             [`@apply pointer-events-none absolute inset-y-0 end-0 flex items-center justify-center border-s`]: {},
@@ -6430,7 +6980,7 @@ const message = plugin.withOptions(
             [`@apply text-${config.messageInnerText.textColor} px-3 block font-${config.messageInnerText.font} text-${config.messageInnerText.text}`]: {}
           },
           [`.${prefix}message-close`]: {
-            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} outline-none rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
+            [`@apply ${prefix}focus text-${config.messageClose.text} me-2 ms-auto flex cursor-pointer items-center justify-center p-${config.messageClose.space} rounded-${config.messageClose.rounded} transition-colors duration-${config.messageClose.duration}`]: {},
             [`.${prefix}close-icon`]: {
               [`@apply h-${config.messageClose.iconSize} w-${config.messageClose.iconSize}`]: {}
             }
@@ -7592,7 +8142,7 @@ const select = plugin.withOptions(
             [`@apply relative`]: {}
           },
           [`.${prefix}select-icon`]: {
-            [`@apply text-${config.icon.text} absolute start-0 top-0 z-20 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
+            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]: {}
           },
           [`.${prefix}select-error-text`]: {
             [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]: {}
@@ -7620,7 +8170,7 @@ const select = plugin.withOptions(
           },
           [`.${prefix}select-chevron`]: {
             "@apply pointer-events-none": {},
-            [`@apply text-${config.select.chevron.text} absolute end-0 top-0 z-20 flex items-center justify-center transition-transform duration-${config.select.chevron.duration}`]: {}
+            [`@apply text-${config.select.chevron.text} absolute end-0 top-0 z-10 flex items-center justify-center transition-transform duration-${config.select.chevron.duration}`]: {}
           },
           [`&.${prefix}select-multiple`]: {
             [`.${prefix}select`]: {
@@ -7979,7 +8529,7 @@ const snack = plugin.withOptions(
       );
       addComponents({
         [`.${prefix}snack`]: {
-          [`@apply ${prefix}focus inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent overflow-hidden`]: {},
+          [`@apply inline-flex items-center gap-1 rounded-${config.rounded} outline-transparent`]: {},
           [`.${prefix}snack-icon`]: {
             [`@apply border-${config.icon.border} -ms-0.5 flex items-center justify-center rounded-${config.icon.rounded} border bg-${config.icon.bg}`]: {}
           },
@@ -8105,13 +8655,13 @@ const switchBall = plugin.withOptions(
         [`.${prefix}switch-ball`]: {
           [`@apply flex cursor-pointer items-center`]: {},
           [`.${prefix}switch-ball-outer`]: {
-            [`@apply relative block`]: {}
+            [`@apply ${prefix}focus relative block rounded-${config.handle.rounded}`]: {}
           },
           [`.${prefix}switch-ball-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute start-0.5 top-1/2 z-10 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition focus:w-6`]: {}
           },
           [`.${prefix}switch-ball-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-6 w-11 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
           },
           [`.${prefix}switch-ball-icon`]: {
             [`@apply pointer-events-none absolute start-2 top-1/2 z-10 h-${config.icon.size} w-${config.icon.size} translate-y-0 fill-current text-${config.icon.text} opacity-0 transition duration-${config.icon.duration}`]: {}
@@ -8133,9 +8683,6 @@ const switchBall = plugin.withOptions(
             [`&:checked ~ .${prefix}switch-ball-handle`]: {
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
             },
-            [`&:checked ~ .${prefix}switch-ball-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
-            },
             [`&:checked ~ .${prefix}switch-ball-icon`]: {
               [`@apply -translate-y-1/2 opacity-100`]: {}
             }
@@ -8227,13 +8774,13 @@ const switchThin = plugin.withOptions(
         [`.${prefix}switch-thin`]: {
           [`@apply flex cursor-pointer items-center`]: {},
           [`.${prefix}switch-thin-outer`]: {
-            [`@apply relative block h-4`]: {}
+            [`@apply ${prefix}focus relative block h-4 rounded-${config.handle.rounded}`]: {}
           },
           [`.${prefix}switch-thin-handle`]: {
             [`@apply border-${config.handle.border} dark:border-${config.handle.borderDark} dark:bg-${config.handle.bgDark} absolute -start-1 top-1/2 flex h-${config.handle.size} w-${config.handle.size} -translate-y-1/2 items-center justify-center rounded-${config.handle.rounded} border bg-${config.handle.bg} shadow transition`]: {}
           },
           [`.${prefix}switch-thin-track`]: {
-            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner outline-1 outline-transparent transition-all duration-${config.track.duration}`]: {}
+            [`@apply bg-${config.track.bg} dark:bg-${config.track.bgDark} block h-4 w-10 rounded-${config.track.rounded} shadow-inner transition-all duration-${config.track.duration}`]: {}
           },
           [`.${prefix}switch-thin-single-label`]: {
             [`@apply text-${config.singleLabel.text} relative ms-3 cursor-pointer select-none font-${config.singleLabel.font} text-${config.singleLabel.textSize}`]: {}
@@ -8251,9 +8798,6 @@ const switchThin = plugin.withOptions(
             [`@apply absolute z-20 h-${config.input.size} w-${config.input.size} cursor-pointer opacity-0`]: {},
             [`&:checked ~ .${prefix}switch-thin-handle`]: {
               [`@apply -translate-y-1/2 translate-x-full rtl:-translate-x-full`]: {}
-            },
-            [`&:checked ~ .${prefix}switch-thin-track`]: {
-              [`@apply outline-dashed outline-offset-2 ring-0 dark:outline-muted-600 outline-muted-300`]: {}
             }
           },
           [`&.${prefix}switch-thin-primary .${prefix}switch-thin-input:checked ~ .${prefix}switch-thin-track`]: {
@@ -9948,6 +10492,7 @@ const components = [
   inputFileRegular,
   inputFile,
   input,
+  inputNumber,
   label,
   link,
   list,