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

package/dist/components/index.js

@@ -22,6 +22,7 @@ var components_exports = {};
 __export(components_exports, {
   accordion: () => accordion,
   accordionItem: () => accordionItem,
+  alert: () => alert,
   autocomplete: () => autocomplete,
   avatar: () => avatar,
   avatarGroup: () => avatarGroup,
@@ -41,6 +42,7 @@ __export(components_exports, {
   datePicker: () => datePicker,
   dateRangePicker: () => dateRangePicker,
   divider: () => divider,
+  drawer: () => drawer,
   drip: () => drip,
   dropdown: () => dropdown,
   dropdownItem: () => dropdownItem,
@@ -93,7 +95,14 @@ var twMergeConfig = {
   classGroups: {
     shadow: [{ shadow: COMMON_UNITS }],
     "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-    "bg-image": ["bg-stripe-gradient"]
+    "bg-image": [
+      "bg-stripe-gradient-default",
+      "bg-stripe-gradient-primary",
+      "bg-stripe-gradient-secondary",
+      "bg-stripe-gradient-success",
+      "bg-stripe-gradient-warning",
+      "bg-stripe-gradient-danger"
+    ]
   }
 };
 
@@ -186,11 +195,11 @@ var bordered = {
 };
 var flat = {
   default: "bg-default/40 text-default-700",
-  primary: "bg-primary/20 text-primary-700",
-  secondary: "bg-secondary/20 text-secondary-700",
-  success: "bg-success/20 text-success-800 dark:text-success",
-  warning: "bg-warning/20 text-warning-800 dark:text-warning",
-  danger: "bg-danger/20 text-danger-800 dark:text-danger-500",
+  primary: "bg-primary/20 text-primary-600",
+  secondary: "bg-secondary/20 text-secondary-600",
+  success: "bg-success/20 text-success-700 dark:text-success",
+  warning: "bg-warning/20 text-warning-700 dark:text-warning",
+  danger: "bg-danger/20 text-danger-600 dark:text-danger-500",
   foreground: "bg-foreground/10 text-foreground"
 };
 var faded = {
@@ -963,7 +972,10 @@ var button = tv({
     {
       variant: "ghost",
       color: "danger",
-      class: [colorVariants.ghost.danger, "data-[hover=true]:!bg-danger !text-danger-foreground"]
+      class: [
+        colorVariants.ghost.danger,
+        "data-[hover=true]:!bg-danger data-[hover=true]:!text-danger-foreground"
+      ]
     },
     {
       isInGroup: true,
@@ -2591,7 +2603,7 @@ var checkbox = tv({
     size: {
       sm: {
         wrapper: [
-          "w-4 h-4 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-4 h-4 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.5)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.5)]"
@@ -2601,7 +2613,7 @@ var checkbox = tv({
       },
       md: {
         wrapper: [
-          "w-5 h-5 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-5 h-5 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.6)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.6)]"
@@ -2611,7 +2623,7 @@ var checkbox = tv({
       },
       lg: {
         wrapper: [
-          "w-6 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+          "w-6 h-6 me-2",
           "rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "before:rounded-[calc(theme(borderRadius.medium)*0.7)]",
           "after:rounded-[calc(theme(borderRadius.medium)*0.7)]"
@@ -2808,14 +2820,14 @@ var radio = tv({
       md: {
         wrapper: "w-5 h-5",
         control: "w-2 h-2",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-medium",
         description: "text-small"
       },
       lg: {
         wrapper: "w-6 h-6",
         control: "w-2.5 h-2.5",
-        labelWrapper: "ml-2 rtl:mr-2 rtl:ml-[unset]",
+        labelWrapper: "ms-2",
         label: "text-large",
         description: "text-medium"
       }
@@ -3309,10 +3321,10 @@ var toggle = tv({
       "rounded-full",
       "origin-right"
     ],
-    startContent: "z-0 absolute left-1.5 rtl:right-1.5 rtl:left-[unset] text-current",
-    endContent: "z-0 absolute right-1.5 rtl:left-1.5 rtl:right-[unset] text-default-600",
+    startContent: "z-0 absolute start-1.5 text-current",
+    endContent: "z-0 absolute end-1.5 text-default-600",
     thumbIcon: "text-black",
-    label: "relative text-foreground select-none"
+    label: "relative text-foreground select-none ms-2"
   },
   variants: {
     color: {
@@ -3355,30 +3367,30 @@ var toggle = tv({
     },
     size: {
       sm: {
-        wrapper: "w-10 h-6 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-10 h-6",
         thumb: [
           "w-4 h-4 text-tiny",
-          "group-data-[selected=true]:ml-4 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-4"
+          "group-data-[selected=true]:ms-4"
         ],
         endContent: "text-tiny",
         startContent: "text-tiny",
         label: "text-small"
       },
       md: {
-        wrapper: "w-12 h-7 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-12 h-7",
         thumb: [
           "w-5 h-5 text-small",
-          "group-data-[selected=true]:ml-5 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-5"
+          "group-data-[selected=true]:ms-5"
         ],
         endContent: "text-small",
         startContent: "text-small",
         label: "text-medium"
       },
       lg: {
-        wrapper: "w-14 h-8 mr-2 rtl:ml-2 rtl:mr-[unset]",
+        wrapper: "w-14 h-8",
         thumb: [
           "w-6 h-6 text-medium",
-          "group-data-[selected=true]:ml-6 rtl:group-data-[selected=true]:ml-0 rtl:group-data-[selected=true]:mr-6"
+          "group-data-[selected=true]:ms-6"
         ],
         endContent: "text-medium",
         startContent: "text-medium",
@@ -3603,7 +3615,7 @@ var progress = tv(
       },
       isStriped: {
         true: {
-          indicator: "bg-stripe-gradient bg-[length:1.25rem_1.25rem]"
+          indicator: "bg-stripe-gradient-default bg-stripe-size"
         }
       },
       isIndeterminate: {
@@ -3638,6 +3650,41 @@ var progress = tv(
         class: {
           indicator: "!transition-none motion-reduce:transition-none"
         }
+      },
+      {
+        color: "primary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-primary bg-stripe-size"
+        }
+      },
+      {
+        color: "secondary",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-secondary bg-stripe-size"
+        }
+      },
+      {
+        color: "success",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-success bg-stripe-size"
+        }
+      },
+      {
+        color: "warning",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-warning bg-stripe-size"
+        }
+      },
+      {
+        color: "danger",
+        isStriped: true,
+        class: {
+          indicator: "bg-stripe-gradient-danger bg-stripe-size"
+        }
       }
     ]
   },
@@ -3890,11 +3937,12 @@ var input = tv({
     fullWidth: {
       true: {
         base: "w-full"
-      }
+      },
+      false: {}
     },
     isClearable: {
       true: {
-        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
+        input: "peer pe-6 input-search-cancel-button-none",
         clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block"
       }
     },
@@ -3913,7 +3961,7 @@ var input = tv({
     },
     isRequired: {
       true: {
-        label: "after:content-['*'] after:text-danger after:ml-0.5 rtl:after:ml-[unset] rtl:after:mr-0.5"
+        label: "after:content-['*'] after:text-danger after:ms-0.5"
       }
     },
     isMultiline: {
@@ -5062,9 +5110,7 @@ var modal = tv({
       "outline-none",
       "select-none",
       "top-1",
-      "right-1",
-      "rtl:left-1",
-      "rtl:right-[unset]",
+      "end-1",
       "p-2",
       "text-foreground-500",
       "rounded-full",
@@ -5415,9 +5461,9 @@ var table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "",
-    tr: ["group", "outline-none", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-none", ...dataFocusVisibleClasses],
     th: [
-      "group",
+      "group/th",
       "px-3",
       "h-10",
       "text-start",
@@ -5452,8 +5498,8 @@ var table = tv({
       "before:inset-0",
       "before:opacity-0",
       "data-[selected=true]:before:opacity-100",
-      "group-data-[disabled=true]:text-foreground-300",
-      "group-data-[disabled=true]:cursor-not-allowed"
+      "group-data-[disabled=true]/tr:text-foreground-300",
+      "group-data-[disabled=true]/tr:cursor-not-allowed"
     ],
     tfoot: "",
     sortIcon: [
@@ -5464,7 +5510,7 @@ var table = tv({
       "inline-block",
       "transition-transform-opacity",
       "data-[visible=true]:opacity-100",
-      "group-data-[hover=true]:opacity-100",
+      "group-data-[hover=true]/th:opacity-100",
       "data-[direction=ascending]:rotate-180"
     ],
     emptyWrapper: "text-foreground-400 align-middle text-center h-40",
@@ -5535,9 +5581,9 @@ var table = tv({
     isStriped: {
       true: {
         td: [
-          "group-data-[odd=true]:before:bg-default-100",
-          "group-data-[odd=true]:before:opacity-100",
-          "group-data-[odd=true]:before:-z-10"
+          "group-data-[odd=true]/tr:before:bg-default-100",
+          "group-data-[odd=true]/tr:before:opacity-100",
+          "group-data-[odd=true]/tr:before:-z-10"
         ]
       }
     },
@@ -5556,19 +5602,19 @@ var table = tv({
       true: {
         tr: "cursor-default",
         td: [
-          "group-aria-[selected=false]:group-data-[hover=true]:before:bg-default-100",
-          "group-aria-[selected=false]:group-data-[hover=true]:before:opacity-70"
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:bg-default-100",
+          "group-aria-[selected=false]/tr:group-data-[hover=true]/tr:before:opacity-70"
         ]
       }
     },
     isMultiSelectable: {
       true: {
         td: [
-          "group-data-[first=true]:first:before:rounded-ts-lg",
-          "group-data-[first=true]:last:before:rounded-te-lg",
-          "group-data-[middle=true]:before:rounded-none",
-          "group-data-[last=true]:first:before:rounded-bs-lg",
-          "group-data-[last=true]:last:before:rounded-be-lg"
+          "group-data-[first=true]/tr:first:before:rounded-ts-lg",
+          "group-data-[first=true]/tr:last:before:rounded-te-lg",
+          "group-data-[middle=true]/tr:before:rounded-none",
+          "group-data-[last=true]/tr:first:before:rounded-bs-lg",
+          "group-data-[last=true]/tr:last:before:rounded-be-lg"
         ]
       },
       false: {
@@ -5613,42 +5659,42 @@ var table = tv({
       isStriped: true,
       color: "default",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-default/60"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-default/60"
       }
     },
     {
       isStriped: true,
       color: "primary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-primary/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-primary/20"
       }
     },
     {
       isStriped: true,
       color: "secondary",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-secondary/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-secondary/20"
       }
     },
     {
       isStriped: true,
       color: "success",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-success/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-success/20"
       }
     },
     {
       isStriped: true,
       color: "warning",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-warning/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-warning/20"
       }
     },
     {
       isStriped: true,
       color: "danger",
       class: {
-        td: "group-data-[odd=true]:data-[selected=true]:before:bg-danger/20"
+        td: "group-data-[odd=true]/tr:data-[selected=true]/tr:before:bg-danger/20"
       }
     }
   ]
@@ -6144,7 +6190,7 @@ var skeleton = tv({
 // src/components/select.ts
 var select = tv({
   slots: {
-    base: ["group inline-flex flex-col relative w-full"],
+    base: ["group inline-flex flex-col relative"],
     label: [
       "block",
       "absolute",
@@ -6161,7 +6207,7 @@ var select = tv({
     innerWrapper: "inline-flex h-full w-[calc(100%_-_theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute end-3 w-4 h-4",
     spinner: "absolute end-3",
-    value: ["text-foreground-500", "font-normal", "w-full", "text-left", "rtl:text-right"],
+    value: ["text-foreground-500", "font-normal", "w-full", "text-start"],
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
@@ -6282,6 +6328,9 @@ var select = tv({
     fullWidth: {
       true: {
         base: "w-full"
+      },
+      false: {
+        base: "min-w-40"
       }
     },
     isDisabled: {
@@ -7720,7 +7769,7 @@ var breadcrumbItem = tv({
       "tap-highlight-transparent",
       ...dataFocusVisibleClasses
     ],
-    separator: "text-default-400 px-1"
+    separator: "text-default-400 px-1 rtl:rotate-180"
   },
   variants: {
     color: {
@@ -8531,13 +8580,13 @@ var dateInput = tv({
       outside: {
         base: "flex flex-col data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+8px)] gap-y-1.5",
         label: "w-full text-foreground",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0"
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0"
       },
       "outside-left": {
         base: "flex-row items-center data-[has-helper=true]:pb-[calc(theme(fontSize.tiny)_+_8px)] gap-x-2 flex-nowrap",
         label: "relative text-foreground",
         inputWrapper: "relative flex-1",
-        helperWrapper: "absolute top-[calc(100%_+_2px)] left-0 rtl:right-0"
+        helperWrapper: "absolute top-[calc(100%_+_2px)] start-0"
       },
       inside: {
         label: "w-full text-tiny cursor-text",
@@ -8768,7 +8817,7 @@ var dateInput = tv({
 var datePicker = tv({
   slots: {
     base: "group w-full",
-    selectorButton: "-mr-2 text-inherit",
+    selectorButton: "-mx-2 text-inherit",
     selectorIcon: "text-lg text-inherit pointer-events-none flex-shrink-0",
     popoverContent: "p-0 w-full",
     calendar: "w-[calc(var(--visible-months)_*_var(--calendar-width))] shadow-none",
@@ -8786,10 +8835,272 @@ var dateRangePicker = tv({
     separator: "-mx-1 text-inherit"
   }
 });
+
+// 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"
+  },
+  variants: {
+    color: {
+      default: {},
+      primary: {},
+      secondary: {},
+      success: {},
+      warning: {},
+      danger: {}
+    },
+    variant: {
+      solid: {},
+      flat: {},
+      bordered: {
+        base: "border-medium bg-transparent"
+      }
+    },
+    radius: {
+      none: {
+        base: "rounded-none"
+      },
+      sm: {
+        base: "rounded-small"
+      },
+      md: {
+        base: "rounded-medium"
+      },
+      lg: {
+        base: "rounded-large"
+      },
+      full: {
+        base: "rounded-full"
+      }
+    },
+    hasDescription: {
+      true: {
+        alertIcon: "mt-0.5"
+      },
+      false: {
+        base: "items-center",
+        mainWrapper: "justify-center"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default",
+    variant: "flat",
+    radius: "md"
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "default",
+      class: {
+        base: colorVariants.solid.default,
+        closeButton: "data-[hover]:bg-default-100",
+        alertIcon: "text-default-foreground"
+      }
+    },
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        base: colorVariants.solid.primary
+      }
+    },
+    {
+      variant: "solid",
+      color: "secondary",
+      class: {
+        base: colorVariants.solid.secondary
+      }
+    },
+    {
+      variant: "solid",
+      color: "success",
+      class: {
+        base: colorVariants.solid.success
+      }
+    },
+    {
+      variant: "solid",
+      color: "warning",
+      class: {
+        base: colorVariants.solid.warning
+      }
+    },
+    {
+      variant: "solid",
+      color: "danger",
+      class: {
+        base: colorVariants.solid.danger
+      }
+    },
+    {
+      variant: "flat",
+      color: "default",
+      class: {
+        base: [colorVariants.flat.default, "text-default-foreground"],
+        description: "text-default-600",
+        closeButton: "text-default-400"
+      }
+    },
+    {
+      variant: "flat",
+      color: "primary",
+      class: {
+        base: colorVariants.flat.primary,
+        closeButton: "text-primary-400 data-[hover]:bg-primary-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "secondary",
+      class: {
+        base: colorVariants.flat.secondary,
+        closeButton: "text-secondary-400 data-[hover]:bg-secondary-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "success",
+      class: {
+        base: colorVariants.flat.success,
+        closeButton: "text-success-400 data-[hover]:bg-success-100"
+      }
+    },
+    {
+      variant: "flat",
+      color: "warning",
+      class: {
+        base: colorVariants.flat.warning,
+        closeButton: "text-warning-500 data-[hover]:bg-warning-200"
+      }
+    },
+    {
+      variant: "flat",
+      color: "danger",
+      class: {
+        base: colorVariants.flat.danger,
+        closeButton: "text-danger-400 data-[hover]:bg-danger-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "default",
+      class: {
+        base: [colorVariants.bordered.default],
+        description: "text-default-600",
+        closeButton: "text-default-400"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "primary",
+      class: {
+        base: [colorVariants.bordered.primary],
+        closeButton: "data-[hover]:bg-primary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "secondary",
+      class: {
+        base: [colorVariants.bordered.secondary],
+        closeButton: "data-[hover]:bg-secondary-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "success",
+      class: {
+        base: [colorVariants.bordered.success],
+        closeButton: "data-[hover]:bg-success-50"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "warning",
+      class: {
+        base: [colorVariants.bordered.warning],
+        closeButton: "data-[hover]:bg-warning-100"
+      }
+    },
+    {
+      variant: "bordered",
+      color: "danger",
+      class: {
+        base: [colorVariants.bordered.danger],
+        closeButton: "data-[hover]:bg-danger-50"
+      }
+    }
+  ]
+});
+
+// src/components/drawer.ts
+var drawer = tv({
+  slots: {
+    base: ["absolute", "m-0", "sm:m-0", "overflow-y-auto"]
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "max-w-xs max-h-[20rem]"
+      },
+      sm: {
+        base: "max-w-sm max-h-[24rem]"
+      },
+      md: {
+        base: "max-w-md max-h-[28rem]"
+      },
+      lg: {
+        base: "max-w-lg max-h-[32rem]"
+      },
+      xl: {
+        base: "max-w-xl max-h-[36rem]"
+      },
+      "2xl": {
+        base: "max-w-2xl max-h-[42rem]"
+      },
+      "3xl": {
+        base: "max-w-3xl max-h-[48rem]"
+      },
+      "4xl": {
+        base: "max-w-4xl max-h-[56rem]"
+      },
+      "5xl": {
+        base: "max-w-5xl max-h-[64rem]"
+      },
+      full: {
+        base: "max-w-full max-h-full h-[100dvh] !rounded-none"
+      }
+    },
+    placement: {
+      top: {
+        base: "inset-x-0 top-0 max-w-[none] rounded-t-none"
+      },
+      right: {
+        base: "inset-y-0 right-0 max-h-[none] rounded-r-none"
+      },
+      bottom: {
+        base: "inset-x-0 bottom-0 max-w-[none] rounded-b-none"
+      },
+      left: {
+        base: "inset-y-0 left-0 max-h-[none] rounded-l-none"
+      }
+    }
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   accordion,
   accordionItem,
+  alert,
   autocomplete,
   avatar,
   avatarGroup,
@@ -8809,6 +9120,7 @@ var dateRangePicker = tv({
   datePicker,
   dateRangePicker,
   divider,
+  drawer,
   drip,
   dropdown,
   dropdownItem,