@bitrix24/b24ui-nuxt 0.1.7 → 0.2.2

package/dist/shared/{b24ui-nuxt.ZUYaG6CJ.cjs → b24ui-nuxt.DgnM0VWe.cjs}

@@ -69,14 +69,14 @@ const advice = {
 const alert = {
   slots: {
     root: "relative overflow-hidden w-full rounded-3xs flex",
-    wrapper: "min-w-0 flex-1 flex flex-col gap-1 font-b24-primary font-normal",
+    wrapper: "min-w-0 flex-1 flex flex-col font-b24-primary font-normal",
     title: "font-bold",
     description: "",
     icon: "shrink-0 size-6",
     avatar: "shrink-0",
     avatarSize: "",
     actions: "flex flex-wrap gap-1.5 shrink-0",
-    close: "p-0.5"
+    close: "p-0"
   },
   variants: {
     color: {
@@ -151,14 +151,19 @@ const alert = {
         avatarSize: "xl"
       }
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-2"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-2"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -343,7 +348,7 @@ const badge = {
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    trailingIcon: "shrink-0 cursor-pointer  hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
+    trailingIcon: "shrink-0 cursor-pointer hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
   },
   variants: {
     ...buttonGroupVariant,
@@ -1594,6 +1599,359 @@ const countdown = {
   }
 };
 
+const dropdownMenu = {
+  slots: {
+    content: [
+      "min-w-32",
+      "bg-white dark:bg-base-dark",
+      "shadow-lg rounded-2xs ring ring-base-300 dark:ring-base-800",
+      "overflow-y-auto",
+      "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
+      "pointer-events-auto"
+    ].join(" "),
+    arrow: "fill-base-master/10 dark:fill-base-100/20",
+    group: "p-1 isolate",
+    label: [
+      "w-full flex items-center",
+      "font-semibold text-base-900 dark:text-base-200"
+    ].join(" "),
+    separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
+    item: [
+      "group relative w-full flex items-center select-none outline-none",
+      "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
+      "cursor-pointer",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-75",
+      "text-base-master dark:text-base-150",
+      "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+      // 'data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900',
+      "transition-colors before:transition-colors"
+    ].join(" "),
+    itemLeadingIcon: [
+      "shrink-0 text-base-500 dark:text-base-700",
+      "group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+      "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
+      "transition-colors"
+    ].join(" "),
+    itemLeadingAvatar: "shrink-0",
+    itemLeadingAvatarSize: "",
+    itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+    itemTrailingIcon: "shrink-0",
+    itemTrailingKbds: "hidden lg:inline-flex items-center shrink-0",
+    itemTrailingKbdsSize: "",
+    itemLabel: "truncate",
+    itemLabelExternalIcon: "inline-block size-3 align-top text-base-500 dark:text-base-700"
+  },
+  variants: {
+    color: {
+      default: "",
+      danger: "",
+      success: "",
+      warning: "",
+      primary: "",
+      secondary: "",
+      collab: "",
+      ai: ""
+    },
+    active: {
+      false: {
+        item: [
+          "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
+          "dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900",
+          "transition-colors before:transition-colors"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150",
+          "transition-colors"
+        ].join(" ")
+      },
+      true: {
+        item: [
+          "text-base-900 before:bg-base-100/50",
+          "dark:text-base-200 dark:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700"
+        ].join(" ")
+      }
+    },
+    loading: {
+      true: {
+        itemLeadingIcon: "animate-spin"
+      }
+    },
+    size: {
+      xs: {
+        label: "p-1 text-xs gap-1",
+        item: "p-1 text-xs gap-1",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      sm: {
+        label: "p-1.5 text-xs gap-1.5",
+        item: "p-1.5 text-xs gap-1.5",
+        itemLeadingIcon: "size-4",
+        itemLeadingAvatarSize: "3xs",
+        itemTrailingIcon: "size-4",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "sm"
+      },
+      md: {
+        label: "h-9 ps-2 pe-3 text-sm gap-2",
+        item: "h-9 ps-3 pe-3 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-3",
+        itemTrailingKbds: "gap-0.5",
+        itemTrailingKbdsSize: "md"
+      },
+      lg: {
+        label: "p-2 text-sm gap-2",
+        item: "p-2 text-sm gap-2",
+        itemLeadingIcon: "size-5",
+        itemLeadingAvatarSize: "2xs",
+        itemTrailingIcon: "size-5",
+        itemTrailingKbds: "gap-1",
+        itemTrailingKbdsSize: "md"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      color: "default",
+      active: false,
+      class: {
+        item: [
+          "text-base-master data-highlighted:text-base-900 data-highlighted:before:bg-base-100/50 data-[state=open]:text-base-900 data-[state=open]:before:bg-base-100/50",
+          "dark:text-base-150 dark:data-highlighted:text-base-200 dark:data-highlighted:before:bg-base-900 dark:data-[state=open]:text-base-200 dark:data-[state=open]:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-500 group-data-highlighted:text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700 dark:group-data-highlighted:text-base-150 dark:group-data-[state=open]:text-base-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "default",
+      active: true,
+      class: {
+        item: [
+          "text-base-900 before:bg-base-100/50",
+          "dark:text-base-200 dark:before:bg-base-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-base-master group-data-[state=open]:text-base-master",
+          "dark:text-base-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      active: false,
+      class: {
+        item: [
+          "text-red-950 data-highlighted:text-red-900 data-highlighted:before:bg-red-100 data-[state=open]:text-red-900 data-[state=open]:before:bg-red-100",
+          "dark:text-red-150 dark:data-highlighted:text-red-200 dark:data-highlighted:before:bg-red-900 dark:data-[state=open]:text-red-200 dark:data-[state=open]:before:bg-red-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-red-500 group-data-highlighted:text-red-950 group-data-[state=open]:text-red-950",
+          "dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "danger",
+      active: true,
+      class: {
+        item: [
+          "text-red-900 before:bg-red-100",
+          "dark:text-red-200 dark:before:bg-red-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-red-950 group-data-[state=open]:text-red-950",
+          "dark:text-red-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      active: false,
+      class: {
+        item: [
+          "text-green-950 data-highlighted:text-green-900 data-highlighted:before:bg-green-100 data-[state=open]:text-green-900 data-[state=open]:before:bg-green-100",
+          "dark:text-green-150 dark:data-highlighted:text-green-200 dark:data-highlighted:before:bg-green-900 dark:data-[state=open]:text-green-200 dark:data-[state=open]:before:bg-green-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-green-500 group-data-highlighted:text-green-950 group-data-[state=open]:text-green-950",
+          "dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "success",
+      active: true,
+      class: {
+        item: [
+          "text-green-900 before:bg-green-100",
+          "dark:text-green-200 dark:before:bg-green-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-green-950 group-data-[state=open]:text-green-950",
+          "dark:text-green-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      active: false,
+      class: {
+        item: [
+          "text-orange-950 data-highlighted:text-orange-900 data-highlighted:before:bg-orange-100 data-[state=open]:text-orange-900 data-[state=open]:before:bg-orange-100",
+          "dark:text-orange-150 dark:data-highlighted:text-orange-200 dark:data-highlighted:before:bg-orange-900 dark:data-[state=open]:text-orange-200 dark:data-[state=open]:before:bg-orange-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-orange-500 group-data-highlighted:text-orange-950 group-data-[state=open]:text-orange-950",
+          "dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "warning",
+      active: true,
+      class: {
+        item: [
+          "text-orange-900 before:bg-orange-100",
+          "dark:text-orange-200 dark:before:bg-orange-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-orange-950 group-data-[state=open]:text-orange-950",
+          "dark:text-orange-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      active: false,
+      class: {
+        item: [
+          "text-blue-950 data-highlighted:text-blue-900 data-highlighted:before:bg-blue-100 data-[state=open]:text-blue-900 data-[state=open]:before:bg-blue-100",
+          "dark:text-blue-150 dark:data-highlighted:text-blue-200 dark:data-highlighted:before:bg-blue-900 dark:data-[state=open]:text-blue-200 dark:data-[state=open]:before:bg-blue-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-blue-500 group-data-highlighted:text-blue-950 group-data-[state=open]:text-blue-950",
+          "dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "primary",
+      active: true,
+      class: {
+        item: [
+          "text-blue-900 before:bg-blue-100",
+          "dark:text-blue-200 dark:before:bg-blue-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-blue-950 group-data-[state=open]:text-blue-950",
+          "dark:text-blue-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      active: false,
+      class: {
+        item: [
+          "text-cyan-950 data-highlighted:text-cyan-900 data-highlighted:before:bg-cyan-100/50 data-[state=open]:text-cyan-900 data-[state=open]:before:bg-cyan-100/50",
+          "dark:text-cyan-150 dark:data-highlighted:text-cyan-200 dark:data-highlighted:before:bg-cyan-900 dark:data-[state=open]:text-cyan-200 dark:data-[state=open]:before:bg-cyan-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-cyan-500 group-data-highlighted:text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "secondary",
+      active: true,
+      class: {
+        item: [
+          "text-cyan-900 before:bg-cyan-100/50",
+          "dark:text-cyan-200 dark:before:bg-cyan-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "dark:text-cyan-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      active: false,
+      class: {
+        item: [
+          "text-collab-950 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100",
+          "dark:text-collab-150 dark:data-highlighted:text-collab-200 dark:data-highlighted:before:bg-collab-900 dark:data-[state=open]:text-collab-200 dark:data-[state=open]:before:bg-collab-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-collab-500 group-data-highlighted:text-collab-950 group-data-[state=open]:text-collab-950",
+          "dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "collab",
+      active: true,
+      class: {
+        item: [
+          "text-collab-900 before:bg-collab-100",
+          "dark:text-collab-200 dark:before:bg-collab-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-collab-950 group-data-[state=open]:text-collab-950",
+          "dark:text-collab-700"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      active: false,
+      class: {
+        item: [
+          "text-ai-950 data-highlighted:text-ai-900 data-highlighted:before:bg-ai-100/50 data-[state=open]:text-ai-900 data-[state=open]:before:bg-ai-100/50",
+          "dark:text-ai-150 dark:data-highlighted:text-ai-200 dark:data-highlighted:before:bg-ai-900 dark:data-[state=open]:text-ai-200 dark:data-[state=open]:before:bg-ai-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-ai-500 group-data-highlighted:text-ai-950 group-data-[state=open]:text-ai-950",
+          "dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
+        ].join(" ")
+      }
+    },
+    {
+      color: "ai",
+      active: true,
+      class: {
+        item: [
+          "text-ai-900 before:bg-ai-100/50",
+          "dark:text-ai-200 dark:before:bg-ai-900"
+        ].join(" "),
+        itemLeadingIcon: [
+          "text-ai-950 group-data-[state=open]:text-ai-950",
+          "dark:text-ai-700"
+        ].join(" ")
+      }
+    }
+  ],
+  defaultVariants: {
+    size: "md"
+  }
+};
+
 const form = {
   base: ""
 };
@@ -1638,6 +1996,7 @@ const input = {
   slots: {
     root: "relative inline-flex items-center w-full",
     base: [
+      "px-3",
       "w-full py-0 border-0 focus:outline-none",
       "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
       "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
@@ -1667,7 +2026,7 @@ const input = {
     ...buttonGroupVariantWithRoot,
     size: {
       xs: {
-        base: "px-3 h-xl2 gap-1",
+        base: "h-xl2 gap-1",
         // 26px
         leading: "px-1",
         trailing: "px-1",
@@ -1676,7 +2035,7 @@ const input = {
         trailingIcon: "size-lg2"
       },
       sm: {
-        base: "px-3 h-8 gap-1.5",
+        base: "h-8 gap-1.5",
         // 32px
         leading: "px-1.5",
         trailing: "px-1.5",
@@ -1685,7 +2044,7 @@ const input = {
         trailingIcon: "size-lg2"
       },
       md: {
-        base: "px-3 h-10 gap-1.5",
+        base: "h-10 gap-1.5",
         // 40px
         leading: "px-2",
         trailing: "px-2",
@@ -1694,7 +2053,7 @@ const input = {
         trailingIcon: "size-[24px]"
       },
       lg: {
-        base: "px-3 h-12 gap-2",
+        base: "h-12 gap-2",
         // 48px
         leading: "px-2",
         trailing: "px-2",
@@ -2088,6 +2447,248 @@ const input = {
   }
 };
 
+const defSize$1 = {
+  label: "h-9 ps-2 pe-3 text-sm gap-2",
+  item: "h-9 ps-3 pe-3 text-sm gap-2",
+  itemLeadingIcon: "size-5",
+  itemLeadingAvatarSize: "2xs",
+  itemLeadingChip: "size-3 not-group-data-reka-collection-item:ps-2.5",
+  itemLeadingChipSize: "sm",
+  itemTrailingIcon: "size-3",
+  trailingIcon: "size-lg2"
+};
+const inputMenu = () => {
+  return defu.defuFn({
+    slots: {
+      base: [
+        "py-0 w-full border-0 focus:outline-none",
+        "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
+        "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
+        "appearance-none transition duration-300 ease-linear",
+        "ring ring-inset ring-base-300",
+        "dark:ring-base-800",
+        "text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
+        "dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
+        "font-b24-primary font-regular text-md leading-none",
+        "align-middle",
+        // 'text-ellipsis whitespace-nowrap',
+        "transition-colors"
+      ].join(" "),
+      trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
+      arrow: "fill-base-master/10 dark:fill-base-100/20",
+      content: [
+        "w-[var(--reka-popper-anchor-width)]",
+        // 'max-h-60',
+        // 'h-[var(--reka-popper-available-height)]',
+        "bg-white dark:bg-base-dark",
+        "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
+        "overflow-hidden",
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+        "pointer-events-auto"
+      ].join(" "),
+      viewport: "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
+      group: "p-1 isolate",
+      empty: "py-2 text-center text-sm text-base-500 dark:text-base-600",
+      label: [
+        "flex items-center",
+        "font-semibold text-base-900 dark:text-base-200"
+      ].join(" "),
+      separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
+      item: [
+        "group relative w-full flex items-center select-none outline-none",
+        "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
+        "cursor-pointer",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-75",
+        "text-base-master dark:text-base-150",
+        "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+        "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900",
+        "transition-colors before:transition-colors"
+      ].join(" "),
+      itemLeadingIcon: [
+        "shrink-0 text-base-500 dark:text-base-700",
+        "group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+        "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
+        "transition-colors"
+      ].join(" "),
+      itemLeadingAvatar: "shrink-0",
+      itemLeadingAvatarSize: "",
+      itemLeadingChip: "shrink-0",
+      itemLeadingChipSize: "",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemLabel: "truncate",
+      tagsItem: [
+        "px-2 rounded-2xs font-b24-secondary font-normal leading-normal",
+        "inline-flex items-center gap-1",
+        "ring ring-inset data-disabled:cursor-not-allowed data-disabled:opacity-75",
+        "text-blue-700 bg-blue-250 ring-blue-250",
+        "dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
+        // 'ring-base-200 bg-red-100 text-base-master',
+        // 'dark:ring-base-800 dark:bg-base-900 dark:text-base-150'
+      ].join(" "),
+      tagsItemText: "truncate",
+      tagsItemDelete: [
+        "cursor-pointer hover:rounded-full",
+        "inline-flex items-center rounded-md disabled:pointer-events-none",
+        "text-base-500 hover:text-base-master hover:bg-blue-300",
+        "dark:text-base-500 dark:text-base-700 dark:hover:text-base-master dark:hover:bg-blue-400",
+        "transition-colors"
+      ].join(" "),
+      tagsItemDeleteIcon: "",
+      tagsInput: ""
+    },
+    variants: {
+      addNew: {
+        true: {
+          group: "p-0 isolate -m-px",
+          item: [
+            "before:rounded-none",
+            "text-base-master dark:text-base-150 before:bg-blue-200 dark:before:bg-blue-800",
+            "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-blue-200 dark:data-highlighted:before:bg-blue-800",
+            "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-blue-200 dark:data-[state=checked]:before:bg-blue-800"
+          ].join(" "),
+          itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
+          itemLeadingIcon: [
+            "size-5 rounded-full",
+            "text-white dark:text-base-150 bg-blue-500 dark:bg-blue-600",
+            "group-data-highlighted:text-white dark:group-data-highlighted:text-base-150 group-data-highlighted:bg-blue-500 dark:group-data-highlighted:bg-blue-600",
+            "group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-base-150 group-data-[state=checked]:bg-blue-500 dark:group-data-[state=checked]:bg-blue-600"
+          ].join(" ")
+        }
+      },
+      multiple: {
+        true: {
+          root: "flex-wrap",
+          base: [
+            "py-1.5 ps-1.5 pe-[39px]"
+          ].join(" "),
+          tagsInput: [
+            "w-2/5 border-0 bg-transparent ps-1.5 pe-3 py-0",
+            "placeholder:text-base-400 dark:placeholder:text-base-300",
+            "focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+            "focus:ring-0 focus-visible:ring-0"
+          ].join(" ")
+        },
+        false: {
+          base: [
+            "px-3",
+            "placeholder:text-base-400 dark:placeholder:text-base-300",
+            "focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          ].join(" ")
+        }
+      },
+      size: {
+        xs: defu.defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-5xs",
+              "h-[14px] gap-0.5"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-sm"
+          }
+        ),
+        sm: defu.defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-5xs",
+              "h-[14px] gap-0.5"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3"
+          }
+        ),
+        md: defu.defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-md",
+              "h-[31px] gap-1"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3.5"
+          }
+        ),
+        lg: defu.defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-md",
+              "h-[31px] gap-1"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3.5"
+          }
+        )
+      }
+    },
+    compoundVariants: [
+      // region Color ////
+      {
+        color: "default",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-base-900 dark:has-focus-visible:ring-base-700"
+      },
+      {
+        color: "danger",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-red-500 dark:has-focus-visible:ring-red-600"
+      },
+      {
+        color: "success",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-green-500 dark:has-focus-visible:ring-green-600"
+      },
+      {
+        color: "warning",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-orange-500 dark:has-focus-visible:ring-orange-600"
+      },
+      {
+        color: "primary",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-blue-500 dark:has-focus-visible:ring-blue-600"
+      },
+      {
+        color: "secondary",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-cyan-500 dark:has-focus-visible:ring-cyan-600"
+      },
+      {
+        color: "collab",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-collab-500 dark:has-focus-visible:ring-collab-600"
+      },
+      {
+        color: "ai",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-ai-500 dark:has-focus-visible:ring-ai-600"
+      },
+      // endregion ////
+      // region Size ////
+      {
+        size: "xs",
+        multiple: true,
+        class: "min-h-xl2 h-auto"
+      },
+      {
+        size: "sm",
+        multiple: true,
+        class: "min-h-8 h-auto"
+      },
+      {
+        size: "md",
+        multiple: true,
+        class: "min-h-10 h-auto"
+      },
+      {
+        size: "lg",
+        multiple: true,
+        class: "min-h-12 h-auto"
+      }
+      // endregion ////
+    ]
+  }, input);
+};
+
 const kbd = {
   base: "inline-flex items-center justify-center px-1 rounded-2xs font-normal font-b24-system-mono",
   variants: {
@@ -2709,6 +3310,7 @@ const select = () => {
       slots: {
         root: () => "relative inline-flex items-center w-full",
         base: () => [
+          "px-3",
           "relative inline-flex items-center group",
           "py-0 border-0 focus:outline-none",
           "cursor-pointer disabled:cursor-not-allowed",
@@ -2729,7 +3331,7 @@ const select = () => {
         arrow: "fill-base-master/10 dark:fill-base-100/20",
         content: [
           "w-[var(--reka-popper-anchor-width)]",
-          "max-h-60",
+          // 'max-h-60',
           // 'h-[var(--reka-popper-available-height)]',
           "bg-white dark:bg-base-dark",
           "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
@@ -3717,7 +4319,7 @@ const toast = {
       "text-sm font-normal",
       "text-white dark:text-base-150"
     ].join(" "),
-    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    wrapper: "w-0 flex-1 flex flex-col",
     title: "font-medium",
     description: "",
     icon: "shrink-0 size-6",
@@ -3725,7 +4327,7 @@ const toast = {
     avatarSize: "xl",
     actions: "flex gap-1.5 shrink-0",
     progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    close: "p-0.5 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
+    close: "p-0 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
   },
   variants: {
     color: {
@@ -3770,14 +4372,19 @@ const toast = {
         progress: "bg-ai-500 dark:bg-ai-500"
       }
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-1"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -3893,9 +4500,11 @@ const theme = {
   chip: chip,
   container: container,
   countdown: countdown,
+  dropdownMenu: dropdownMenu,
   form: form,
   formField: formField,
   input: input,
+  inputMenu: inputMenu,
   kbd: kbd,
   link: link,
   progress: progress,
@@ -3920,13 +4529,14 @@ const themeProse = {
 const descriptionList = {
   slots: {
     root: "w-full shrink-0",
-    // ????
     legend: "font-semibold text-black dark:text-base-150",
     text: "text-base-500 dark:text-base-400",
     container: "grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]",
     labelWrapper: [
-      "col-start-1 border-t border-base-950/5 text-base-500 first:border-none sm:border-t sm:border-base-950/5 dark:border-white/5 dark:text-base-400 sm:dark:border-white/5",
-      "flex flex-nowrap flex-row items-center justify-start gap-1.5"
+      "col-start-1 border-t first:border-none sm:border-t",
+      "flex flex-nowrap flex-row items-center justify-start gap-1.5",
+      "border-base-950/5 text-base-500 sm:border-base-950/5",
+      "dark:border-white/5 dark:text-base-400 sm:dark:border-white/5"
     ].join(" "),
     icon: "shrink-0 size-6 text-base-500 dark:text-base-400",
     avatar: "shrink-0",
@@ -3962,14 +4572,19 @@ const descriptionList = {
         footer: "mt-4 p-4"
       }
     },
-    multiline: {
-      true: {
-        descriptionWrapper: "",
-        actions: "items-start mt-2.5"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         descriptionWrapper: "w-full flex flex-row items-center justify-between gap-4",
         actions: "items-center"
+      },
+      vertical: {
+        descriptionWrapper: "",
+        actions: "items-start mt-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -4073,6 +4688,13 @@ function getTemplates(options) {
       }
     });
   }
+  templates.push({
+    filename: "b24ui.css",
+    write: true,
+    getContents: () => `@theme default {
+}
+`
+  });
   templates.push({
     filename: "b24ui/index.ts",
     write: true,