@nextui-org/theme 2.3.0-beta.1 → 2.3.0-beta.10

package/dist/components/index.js

@@ -3827,7 +3827,7 @@ var input = tv({
       flat: {
         inputWrapper: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
+          "data-[hover=true]:bg-default-50",
           "group-data-[focus=true]:bg-default-100"
         ]
       },
@@ -3836,7 +3836,7 @@ var input = tv({
           "bg-default-100",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400"
+          "data-[hover=true]:border-default-400 focus-within:border-default-400"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
       },
@@ -4013,8 +4013,8 @@ var input = tv({
       color: "primary",
       class: {
         inputWrapper: [
-          "bg-primary-50",
-          "data-[hover=true]:bg-primary-100",
+          "bg-primary-100",
+          "data-[hover=true]:bg-primary-50",
           "text-primary",
           "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary"
@@ -4028,9 +4028,9 @@ var input = tv({
       color: "secondary",
       class: {
         inputWrapper: [
-          "bg-secondary-50",
+          "bg-secondary-100",
           "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
+          "data-[hover=true]:bg-secondary-50",
           "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary"
         ],
@@ -4043,12 +4043,12 @@ var input = tv({
       color: "success",
       class: {
         inputWrapper: [
-          "bg-success-50",
+          "bg-success-100",
           "text-success-600",
           "dark:text-success",
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
-          "data-[hover=true]:bg-success-100",
+          "data-[hover=true]:bg-success-50",
           "group-data-[focus=true]:bg-success-50"
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
@@ -4060,12 +4060,12 @@ var input = tv({
       color: "warning",
       class: {
         inputWrapper: [
-          "bg-warning-50",
+          "bg-warning-100",
           "text-warning-600",
           "dark:text-warning",
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
-          "data-[hover=true]:bg-warning-100",
+          "data-[hover=true]:bg-warning-50",
           "group-data-[focus=true]:bg-warning-50"
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
@@ -4077,12 +4077,12 @@ var input = tv({
       color: "danger",
       class: {
         inputWrapper: [
-          "bg-danger-50",
+          "bg-danger-100",
           "text-danger",
           "dark:text-danger-500",
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
+          "data-[hover=true]:bg-danger-50",
           "group-data-[focus=true]:bg-danger-50"
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",
@@ -6220,17 +6220,16 @@ var select = tv({
       flat: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "data-[hover=true]:bg-default-50",
+          "group-data-[focus=true]:bg-default-50"
         ]
       },
       faded: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400"
+          "data-[hover=true]:border-default-400 data-[focus=true]:border-default-400 data-[open=true]:border-default-400"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
       },
@@ -6240,7 +6239,6 @@ var select = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
           "data-[open=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
@@ -6484,7 +6482,7 @@ var select = tv({
       variant: "faded",
       color: "primary",
       class: {
-        trigger: "data-[hover=true]:border-primary",
+        trigger: "data-[hover=true]:border-primary data-[focus=true]:border-primary data-[open=true]:border-primary",
         label: "text-primary"
       }
     },
@@ -6492,7 +6490,7 @@ var select = tv({
       variant: "faded",
       color: "secondary",
       class: {
-        trigger: "data-[hover=true]:border-secondary",
+        trigger: "data-[hover=true]:border-secondary data-[focus=true]:border-secondary data-[open=true]:border-secondary",
         label: "text-secondary"
       }
     },
@@ -6500,7 +6498,7 @@ var select = tv({
       variant: "faded",
       color: "success",
       class: {
-        trigger: "data-[hover=true]:border-success",
+        trigger: "data-[hover=true]:border-success data-[focus=true]:border-success data-[open=true]:border-success",
         label: "text-success"
       }
     },
@@ -6508,7 +6506,7 @@ var select = tv({
       variant: "faded",
       color: "warning",
       class: {
-        trigger: "data-[hover=true]:border-warning",
+        trigger: "data-[hover=true]:border-warning data-[focus=true]:border-warning data-[open=true]:border-warning",
         label: "text-warning"
       }
     },
@@ -6516,7 +6514,7 @@ var select = tv({
       variant: "faded",
       color: "danger",
       class: {
-        trigger: "data-[hover=true]:border-danger",
+        trigger: "data-[hover=true]:border-danger data-[focus=true]:border-danger data-[open=true]:border-danger",
         label: "text-danger"
       }
     },
@@ -8839,14 +8837,13 @@ var dateRangePicker = tv({
 // src/components/alert.ts
 var alert = tv({
   slots: {
-    base: "flex flex-row w-full flex-grow min-h-17 max-h-full py-3 px-4",
-    mainWrapper: [
-      "flex-grow min-h-11 max-h-full ms-2 flex flex-col box-border items-start text-inherit"
-    ],
-    title: "w-full text-medium font-normal block min-h-6 max-h-full text-inherit",
-    description: "text-small font-normal min-h-5 max-h-full text-inherit",
-    closeButton: "relative text-inherit",
-    alertIcon: "fill-current w-6"
+    base: "flex flex-grow flex-row w-full items-start py-3 px-4 gap-x-1",
+    mainWrapper: "h-full flex-grow min-h-10 ms-2 flex flex-col box-border items-start text-inherit",
+    title: "text-small w-full font-medium block text-inherit leading-5",
+    description: "pl-[1px] text-small font-normal text-inherit",
+    closeButton: "relative text-inherit translate-x-1 -translate-y-1",
+    iconWrapper: "flex-none relative w-9 h-9 rounded-full",
+    alertIcon: "fill-current w-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
   },
   variants: {
     color: {
@@ -8860,8 +8857,11 @@ var alert = tv({
     variant: {
       solid: {},
       flat: {},
+      faded: {
+        base: "border-small"
+      },
       bordered: {
-        base: "border-medium bg-transparent"
+        base: "border-small bg-transparent"
       }
     },
     radius: {
@@ -8881,12 +8881,20 @@ var alert = tv({
         base: "rounded-full"
       }
     },
-    hasDescription: {
+    hideIcon: {
       true: {
-        alertIcon: "mt-0.5"
-      },
+        iconWrapper: "hidden"
+      }
+    },
+    hideIconWrapper: {
+      true: {
+        base: "gap-x-0",
+        iconWrapper: "!bg-transparent !shadow-none"
+      }
+    },
+    hasDescription: {
       false: {
-        base: "items-center",
+        base: "items-start",
         mainWrapper: "justify-center"
       }
     }
@@ -8894,7 +8902,9 @@ var alert = tv({
   defaultVariants: {
     color: "default",
     variant: "flat",
-    radius: "md"
+    radius: "md",
+    hideIcon: false,
+    hideIconWrapper: false
   },
   compoundVariants: [
     {
@@ -8942,52 +8952,104 @@ var alert = tv({
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "default",
       class: {
-        base: [colorVariants.flat.default, "text-default-foreground"],
+        base: [
+          colorVariants.flat.default,
+          "bg-default-100 dark:bg-default-50/50",
+          "text-default-foreground"
+        ],
         description: "text-default-600",
-        closeButton: "text-default-400"
+        closeButton: "text-default-400",
+        iconWrapper: "bg-default-50 dark:bg-default-100 border-default-200"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "primary",
       class: {
-        base: colorVariants.flat.primary,
-        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+        base: [colorVariants.flat.primary, "bg-primary-50 dark:bg-primary-50/50"],
+        closeButton: "text-primary-500 data-[hover]:bg-primary-200",
+        iconWrapper: "bg-primary-50 dark:bg-primary-100 border-primary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "secondary",
       class: {
-        base: colorVariants.flat.secondary,
-        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+        base: [colorVariants.flat.secondary, "bg-secondary-50 dark:bg-secondary-50/50"],
+        closeButton: "text-secondary-500 data-[hover]:bg-secondary-200",
+        iconWrapper: "bg-secondary-50 dark:bg-secondary-100 border-secondary-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "success",
       class: {
-        base: colorVariants.flat.success,
-        closeButton: "text-success-400 data-[hover]:bg-success-100"
+        base: [colorVariants.flat.success, "bg-success-50 dark:bg-success-50/50"],
+        closeButton: "text-success-500 data-[hover]:bg-success-200",
+        iconWrapper: "bg-success-50 dark:bg-success-100 border-success-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
       color: "warning",
       class: {
-        base: colorVariants.flat.warning,
-        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+        base: [colorVariants.flat.warning, "bg-warning-50 dark:bg-warning-50/50"],
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200",
+        iconWrapper: "bg-warning-50 dark:bg-warning-100 border-warning-100"
       }
     },
     {
-      variant: "flat",
+      variant: ["flat", "faded"],
+      color: "danger",
+      class: {
+        base: [colorVariants.flat.danger, "bg-danger-50 dark:bg-danger-50/50"],
+        closeButton: "text-danger-500 data-[hover]:bg-danger-200",
+        iconWrapper: "bg-danger-50 dark:bg-danger-100 border-danger-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "default",
+      class: {
+        base: "border-default-300 dark:border-default-200"
+      }
+    },
+    {
+      variant: "faded",
+      color: "primary",
+      class: {
+        base: "border-primary-200 dark:border-primary-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "secondary",
+      class: {
+        base: "border-secondary-200"
+      }
+    },
+    {
+      variant: "faded",
+      color: "success",
+      class: {
+        base: "border-success-300 dark:border-success-100"
+      }
+    },
+    {
+      variant: "faded",
+      color: "warning",
+      class: {
+        base: "border-warning-300 dark:border-warning-100"
+      }
+    },
+    {
+      variant: "faded",
       color: "danger",
       class: {
-        base: colorVariants.flat.danger,
-        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+        base: "border-danger-200 dark:border-danger-100"
       }
     },
     {
@@ -9038,6 +9100,60 @@ var alert = tv({
         base: [colorVariants.bordered.danger],
         closeButton: "data-[hover]:bg-danger-50"
       }
+    },
+    {
+      variant: ["flat", "bordered", "faded"],
+      class: {
+        iconWrapper: "shadow-small"
+      }
+    },
+    {
+      variant: ["flat", "faded"],
+      class: {
+        iconWrapper: "shadow-small border-1"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        iconWrapper: "bg-default-200 dark:bg-default-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        iconWrapper: "bg-primary-100 dark:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        iconWrapper: "bg-secondary-100 dark:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        iconWrapper: "bg-success-100 dark:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        iconWrapper: "bg-warning-100 dark:bg-warning-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        iconWrapper: "bg-danger-100 dark:bg-danger-50"
+      }
     }
   ]
 });

package/dist/components/index.mjs

@@ -26,7 +26,7 @@ import {
 } from "../chunk-AN5I7NTT.mjs";
 import {
   select
-} from "../chunk-HZ7J23VD.mjs";
+} from "../chunk-3ANIDDEW.mjs";
 import {
   skeleton
 } from "../chunk-OAHW4NON.mjs";
@@ -88,7 +88,7 @@ import {
 } from "../chunk-TOQXZATI.mjs";
 import {
   input
-} from "../chunk-TNFNBUPA.mjs";
+} from "../chunk-MXL6JCUG.mjs";
 import {
   button,
   buttonGroup
@@ -121,7 +121,7 @@ import {
 } from "../chunk-HIFLYEAM.mjs";
 import {
   alert
-} from "../chunk-3XDFZGUJ.mjs";
+} from "../chunk-MO6TCUI5.mjs";
 import {
   autocomplete
 } from "../chunk-2TAKWWRG.mjs";

package/dist/components/input.js

@@ -139,7 +139,7 @@ var input = tv({
       flat: {
         inputWrapper: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
+          "data-[hover=true]:bg-default-50",
           "group-data-[focus=true]:bg-default-100"
         ]
       },
@@ -148,7 +148,7 @@ var input = tv({
           "bg-default-100",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400"
+          "data-[hover=true]:border-default-400 focus-within:border-default-400"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
       },
@@ -325,8 +325,8 @@ var input = tv({
       color: "primary",
       class: {
         inputWrapper: [
-          "bg-primary-50",
-          "data-[hover=true]:bg-primary-100",
+          "bg-primary-100",
+          "data-[hover=true]:bg-primary-50",
           "text-primary",
           "group-data-[focus=true]:bg-primary-50",
           "placeholder:text-primary"
@@ -340,9 +340,9 @@ var input = tv({
       color: "secondary",
       class: {
         inputWrapper: [
-          "bg-secondary-50",
+          "bg-secondary-100",
           "text-secondary",
-          "data-[hover=true]:bg-secondary-100",
+          "data-[hover=true]:bg-secondary-50",
           "group-data-[focus=true]:bg-secondary-50",
           "placeholder:text-secondary"
         ],
@@ -355,12 +355,12 @@ var input = tv({
       color: "success",
       class: {
         inputWrapper: [
-          "bg-success-50",
+          "bg-success-100",
           "text-success-600",
           "dark:text-success",
           "placeholder:text-success-600",
           "dark:placeholder:text-success",
-          "data-[hover=true]:bg-success-100",
+          "data-[hover=true]:bg-success-50",
           "group-data-[focus=true]:bg-success-50"
         ],
         input: "placeholder:text-success-600 dark:placeholder:text-success",
@@ -372,12 +372,12 @@ var input = tv({
       color: "warning",
       class: {
         inputWrapper: [
-          "bg-warning-50",
+          "bg-warning-100",
           "text-warning-600",
           "dark:text-warning",
           "placeholder:text-warning-600",
           "dark:placeholder:text-warning",
-          "data-[hover=true]:bg-warning-100",
+          "data-[hover=true]:bg-warning-50",
           "group-data-[focus=true]:bg-warning-50"
         ],
         input: "placeholder:text-warning-600 dark:placeholder:text-warning",
@@ -389,12 +389,12 @@ var input = tv({
       color: "danger",
       class: {
         inputWrapper: [
-          "bg-danger-50",
+          "bg-danger-100",
           "text-danger",
           "dark:text-danger-500",
           "placeholder:text-danger",
           "dark:placeholder:text-danger-500",
-          "data-[hover=true]:bg-danger-100",
+          "data-[hover=true]:bg-danger-50",
           "group-data-[focus=true]:bg-danger-50"
         ],
         input: "placeholder:text-danger dark:placeholder:text-danger-500",

package/dist/components/input.mjs

@@ -1,6 +1,6 @@
 import {
   input
-} from "../chunk-TNFNBUPA.mjs";
+} from "../chunk-MXL6JCUG.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-GQT3YUX3.mjs";
 import "../chunk-46U6G7UJ.mjs";

package/dist/components/select.js

@@ -110,17 +110,16 @@ var select = tv({
       flat: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
-          "group-data-[focus=true]:bg-default-100"
+          "data-[hover=true]:bg-default-50",
+          "group-data-[focus=true]:bg-default-50"
         ]
       },
       faded: {
         trigger: [
           "bg-default-100",
-          "data-[hover=true]:bg-default-200",
           "border-medium",
           "border-default-200",
-          "data-[hover=true]:border-default-400"
+          "data-[hover=true]:border-default-400 data-[focus=true]:border-default-400 data-[open=true]:border-default-400"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
       },
@@ -130,7 +129,6 @@ var select = tv({
           "border-default-200",
           "data-[hover=true]:border-default-400",
           "data-[open=true]:border-default-foreground",
-          "data-[focus=true]:border-default-foreground",
           "data-[focus=true]:border-default-foreground"
         ],
         value: "group-data-[has-value=true]:text-default-foreground"
@@ -374,7 +372,7 @@ var select = tv({
       variant: "faded",
       color: "primary",
       class: {
-        trigger: "data-[hover=true]:border-primary",
+        trigger: "data-[hover=true]:border-primary data-[focus=true]:border-primary data-[open=true]:border-primary",
         label: "text-primary"
       }
     },
@@ -382,7 +380,7 @@ var select = tv({
       variant: "faded",
       color: "secondary",
       class: {
-        trigger: "data-[hover=true]:border-secondary",
+        trigger: "data-[hover=true]:border-secondary data-[focus=true]:border-secondary data-[open=true]:border-secondary",
         label: "text-secondary"
       }
     },
@@ -390,7 +388,7 @@ var select = tv({
       variant: "faded",
       color: "success",
       class: {
-        trigger: "data-[hover=true]:border-success",
+        trigger: "data-[hover=true]:border-success data-[focus=true]:border-success data-[open=true]:border-success",
         label: "text-success"
       }
     },
@@ -398,7 +396,7 @@ var select = tv({
       variant: "faded",
       color: "warning",
       class: {
-        trigger: "data-[hover=true]:border-warning",
+        trigger: "data-[hover=true]:border-warning data-[focus=true]:border-warning data-[open=true]:border-warning",
         label: "text-warning"
       }
     },
@@ -406,7 +404,7 @@ var select = tv({
       variant: "faded",
       color: "danger",
       class: {
-        trigger: "data-[hover=true]:border-danger",
+        trigger: "data-[hover=true]:border-danger data-[focus=true]:border-danger data-[open=true]:border-danger",
         label: "text-danger"
       }
     },

package/dist/components/select.mjs

@@ -1,6 +1,6 @@
 import {
   select
-} from "../chunk-HZ7J23VD.mjs";
+} from "../chunk-3ANIDDEW.mjs";
 import "../chunk-IV3K5WDK.mjs";
 import "../chunk-GQT3YUX3.mjs";
 import "../chunk-46U6G7UJ.mjs";