@bitrix24/b24ui-nuxt 0.2.9 → 0.3.0

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.DcPkWX-m.cjs');
+const templates = require('./shared/b24ui-nuxt.BDw9-NAb.cjs');
 require('node:url');
 require('scule');
 

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.0h2uYsyZ.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.aLj37Bax.mjs';
 import 'node:url';
 import 'scule';
 

package/dist/runtime/components/Checkbox.vue

@@ -44,6 +44,8 @@ import { useFormField } from '../composables/useFormField'
 import Minus20Icon from '@bitrix24/b24icons-vue/actions/Minus20Icon'
 import CheckIcon from '@bitrix24/b24icons-vue/main/CheckIcon'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<CheckboxProps>()
 const slots = defineSlots<CheckboxSlots>()
 const emits = defineEmits<CheckboxEmits>()
@@ -78,7 +80,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <CheckboxRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"

package/dist/runtime/components/InputMenu.vue

@@ -14,10 +14,13 @@ const appConfigInputMenu = _appConfig as AppConfig & { b24ui: { inputMenu: Parti
 
 const inputMenu = tv({ extend: tv(theme), ...(appConfigInputMenu.b24ui?.inputMenu || {}) })
 
+type InputMenuVariants = VariantProps<typeof inputMenu>
+
 export interface InputMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: InputMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -28,8 +31,6 @@ export interface InputMenuItem {
   onSelect?(e?: Event): void
 }
 
-type InputMenuVariants = VariantProps<typeof inputMenu>
-
 export interface InputMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<InputMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
@@ -453,7 +454,7 @@ defineExpose({
 
               <ComboboxItem
                 v-else
-                :class="b24ui.item({ class: props.b24ui?.item })"
+                :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                 :disabled="item.disabled"
                 :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 @select="item.onSelect"
@@ -463,16 +464,16 @@ defineExpose({
                     <Component
                       :is="item.icon"
                       v-if="item.icon"
-                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                      :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                     />
-                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                    <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                     <B24Chip
                       v-else-if="item.chip"
                       :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                       inset
                       standalone
                       v-bind="item.chip"
-                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                      :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                     />
                   </slot>
 
@@ -482,13 +483,13 @@ defineExpose({
                     </slot>
                   </span>
 
-                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                  <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                     <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                     <ComboboxItemIndicator as-child>
                       <Component
                         :is="selectedIcon || icons.check"
-                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                        :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                       />
                     </ComboboxItemIndicator>
                   </span>

package/dist/runtime/components/Select.vue

@@ -13,10 +13,13 @@ const appConfigSelect = _appConfig as AppConfig & { b24ui: { select: Partial<typ
 
 const select = tv({ extend: tv(theme), ...(appConfigSelect.b24ui?.select || {}) })
 
+type SelectVariants = VariantProps<typeof select>
+
 export interface SelectItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectItem {
   disabled?: boolean
 }
 
-type SelectVariants = VariantProps<typeof select>
-
 export interface SelectProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Omit<SelectRootProps<T>, 'dir' | 'multiple' | 'modelValue' | 'defaultValue' | 'by'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -125,6 +126,8 @@ import icons from '../dictionary/icons'
 import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectProps<T, I, V, M>>(), {
   valueKey: 'value' as never,
   labelKey: 'label' as never,
@@ -214,7 +217,7 @@ function onUpdateOpen(value: boolean) {
       @update:model-value="onUpdate"
       @update:open="onUpdateOpen"
     >
-      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="ariaAttrs">
+      <SelectTrigger :id="id" :class="b24ui.base({ class: [props.class, props.b24ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
         <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
           {{ props.tag }}
         </div>
@@ -271,7 +274,7 @@ function onUpdateOpen(value: boolean) {
 
                 <SelectItem
                   v-else
-                  :class="b24ui.item({ class: props.b24ui?.item })"
+                  :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                   :disabled="item.disabled"
                   :value="typeof item === 'object' ? get(item, props.valueKey as string) : item"
                 >
@@ -280,16 +283,16 @@ function onUpdateOpen(value: boolean) {
                       <Component
                         :is="item.icon"
                         v-if="item.icon"
-                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                        :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                       />
-                      <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                      <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                       <B24Chip
                         v-else-if="item.chip"
                         :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                         inset
                         standalone
                         v-bind="item.chip"
-                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                        :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                       />
                     </slot>
 
@@ -299,13 +302,13 @@ function onUpdateOpen(value: boolean) {
                       </slot>
                     </SelectItemText>
 
-                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                    <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                       <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                       <SelectItemIndicator as-child>
                         <Component
                           :is="selectedIcon || icons.check"
-                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                          :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                         />
                       </SelectItemIndicator>
                     </span>

package/dist/runtime/components/SelectMenu.vue

@@ -13,10 +13,13 @@ const appConfigSelectMenu = _appConfig as AppConfig & { b24ui: { selectMenu: Par
 
 const selectMenu = tv({ extend: tv(theme), ...(appConfigSelectMenu.b24ui?.selectMenu || {}) })
 
+type SelectMenuVariants = VariantProps<typeof selectMenu>
+
 export interface SelectMenuItem {
   label?: string
   icon?: IconComponent
   avatar?: AvatarProps
+  color?: SelectMenuVariants['color']
   chip?: ChipProps
   /**
    * The item type.
@@ -27,8 +30,6 @@ export interface SelectMenuItem {
   onSelect?(e?: Event): void
 }
 
-type SelectMenuVariants = VariantProps<typeof selectMenu>
-
 export interface SelectMenuProps<T extends MaybeArrayOfArrayItem<I>, I extends MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean> = MaybeArrayOfArray<SelectMenuItem | AcceptableValue | boolean>, V extends SelectItemKey<T> | undefined = undefined, M extends boolean = false> extends Pick<ComboboxRootProps<T>, 'open' | 'defaultOpen' | 'disabled' | 'name' | 'resetSearchTermOnBlur' | 'highlightOnHover'>, UseComponentIconsProps {
   id?: string
   /** The placeholder text when the select is empty. */
@@ -172,6 +173,8 @@ import B24Avatar from './Avatar.vue'
 import B24Chip from './Chip.vue'
 import B24Input from './Input.vue'
 
+defineOptions({ inheritAttrs: false })
+
 const props = withDefaults(defineProps<SelectMenuProps<T, I, V, M>>(), {
   portal: true,
   searchInput: true,
@@ -341,7 +344,7 @@ function onUpdateOpen(value: boolean) {
     <ComboboxRoot
       :id="id"
       v-slot="{ modelValue, open }"
-      v-bind="{ ...rootProps, ...ariaAttrs }"
+      v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
       ignore-filter
       as-child
       :name="name"
@@ -414,7 +417,7 @@ function onUpdateOpen(value: boolean) {
 
                   <ComboboxItem
                     v-else
-                    :class="b24ui.item({ class: props.b24ui?.item })"
+                    :class="b24ui.item({ class: props.b24ui?.item, colorItem: item?.color })"
                     :disabled="item.disabled"
                     :value="valueKey && typeof item === 'object' ? get(item, props.valueKey as string) : item"
                     @select="item.onSelect"
@@ -424,16 +427,16 @@ function onUpdateOpen(value: boolean) {
                         <Component
                           :is="item.icon"
                           v-if="item.icon"
-                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon })"
+                          :class="b24ui.itemLeadingIcon({ class: props.b24ui?.itemLeadingIcon, colorItem: item?.color })"
                         />
-                        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar })" />
+                        <B24Avatar v-else-if="item.avatar" :size="((props.b24ui?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="b24ui.itemLeadingAvatar({ class: props.b24ui?.itemLeadingAvatar, colorItem: item?.color })" />
                         <B24Chip
                           v-else-if="item.chip"
                           :size="((props.b24ui?.itemLeadingChipSize || b24ui.itemLeadingChipSize()) as ChipProps['size'])"
                           inset
                           standalone
                           v-bind="item.chip"
-                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip })"
+                          :class="b24ui.itemLeadingChip({ class: props.b24ui?.itemLeadingChip, colorItem: item?.color })"
                         />
                       </slot>
 
@@ -443,13 +446,13 @@ function onUpdateOpen(value: boolean) {
                         </slot>
                       </span>
 
-                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing })">
+                      <span :class="b24ui.itemTrailing({ class: props.b24ui?.itemTrailing, colorItem: item?.color })">
                         <slot name="item-trailing" :item="(item as T)" :index="index" />
 
                         <ComboboxItemIndicator as-child>
                           <Component
                             :is="selectedIcon || icons.check"
-                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon })"
+                            :class="b24ui.itemTrailingIcon({ class: props.b24ui?.itemTrailingIcon, colorItem: item?.color })"
                           />
                         </ComboboxItemIndicator>
                       </span>

package/dist/runtime/components/Switch.vue

@@ -54,8 +54,11 @@ import { computed, useId } from 'vue'
 import { Primitive, SwitchRoot, SwitchThumb, useForwardProps, Label } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useFormField } from '../composables/useFormField'
+import { omit } from '../utils'
 import icons from '../dictionary/icons'
 
+defineOptions({ inheritAttrs: false })
+
 const props = defineProps<SwitchProps>()
 const slots = defineSlots<SwitchSlots>()
 const emits = defineEmits<SwitchEmits>()
@@ -89,7 +92,7 @@ function onUpdate(value: any) {
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <SwitchRoot
         :id="id"
-        v-bind="{ ...rootProps, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...omit({ ...$attrs }, ['data-state']), ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled || loading"

package/dist/runtime/composables/useComponentIcons.d.ts

@@ -15,6 +15,6 @@ export interface UseComponentIconsProps {
 export declare function useComponentIcons(componentProps: MaybeRefOrGetter<UseComponentIconsProps>): {
     isLeading: import("vue").ComputedRef<any>;
     isTrailing: import("vue").ComputedRef<boolean>;
-    leadingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
-    trailingIconName: import("vue").ComputedRef<import("vue").FunctionalComponent<import("vue").HTMLAttributes & import("vue").VNodeProps, {}, any, {}> | undefined>;
+    leadingIconName: import("vue").ComputedRef<IconComponent | undefined>;
+    trailingIconName: import("vue").ComputedRef<IconComponent | undefined>;
 };

package/dist/runtime/plugins/colors.js

@@ -28,13 +28,15 @@ export default defineNuxtPlugin(() => {
     }]
   };
   if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
-    const style = document.createElement("style");
-    style.innerHTML = root.value;
-    style.setAttribute("data-bitrix24-ui-colors", "");
-    document.head.appendChild(style);
-    headData.script = [{
-      innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
-    }];
+    if (typeof document !== "undefined") {
+      const style = document.createElement("style");
+      style.innerHTML = root.value;
+      style.setAttribute("data-bitrix24-ui-colors", "");
+      document.head.appendChild(style);
+      headData.script = [{
+        innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
+      }];
+    }
   }
   useHead(headData);
 });

package/dist/shared/{b24ui-nuxt.DcPkWX-m.cjs → b24ui-nuxt.BDw9-NAb.cjs}

@@ -1761,7 +1761,7 @@ const dropdownMenu = {
           "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",
+          "text-red-500 group-data-highlighted:text-red-900 group-data-[state=open]:text-red-900",
           "dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
         ].join(" ")
       }
@@ -1775,7 +1775,7 @@ const dropdownMenu = {
           "dark:text-red-200 dark:before:bg-red-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-red-950 group-data-[state=open]:text-red-950",
+          "text-red-900 group-data-[state=open]:text-red-900",
           "dark:text-red-700"
         ].join(" ")
       }
@@ -1789,7 +1789,7 @@ const dropdownMenu = {
           "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",
+          "text-green-500 group-data-highlighted:text-green-900 group-data-[state=open]:text-green-900",
           "dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
         ].join(" ")
       }
@@ -1803,7 +1803,7 @@ const dropdownMenu = {
           "dark:text-green-200 dark:before:bg-green-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-green-950 group-data-[state=open]:text-green-950",
+          "text-green-900 group-data-[state=open]:text-green-900",
           "dark:text-green-700"
         ].join(" ")
       }
@@ -1817,7 +1817,7 @@ const dropdownMenu = {
           "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",
+          "text-orange-500 group-data-highlighted:text-orange-900 group-data-[state=open]:text-orange-900",
           "dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
         ].join(" ")
       }
@@ -1831,7 +1831,7 @@ const dropdownMenu = {
           "dark:text-orange-200 dark:before:bg-orange-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-orange-950 group-data-[state=open]:text-orange-950",
+          "text-orange-900 group-data-[state=open]:text-orange-900",
           "dark:text-orange-700"
         ].join(" ")
       }
@@ -1845,7 +1845,7 @@ const dropdownMenu = {
           "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",
+          "text-blue-500 group-data-highlighted:text-blue-900 group-data-[state=open]:text-blue-900",
           "dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
         ].join(" ")
       }
@@ -1859,7 +1859,7 @@ const dropdownMenu = {
           "dark:text-blue-200 dark:before:bg-blue-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-blue-950 group-data-[state=open]:text-blue-950",
+          "text-blue-900 group-data-[state=open]:text-blue-900",
           "dark:text-blue-700"
         ].join(" ")
       }
@@ -1873,7 +1873,7 @@ const dropdownMenu = {
           "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",
+          "text-cyan-500 group-data-highlighted:text-cyan-900 group-data-[state=open]:text-cyan-900",
           "dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
         ].join(" ")
       }
@@ -1887,7 +1887,7 @@ const dropdownMenu = {
           "dark:text-cyan-200 dark:before:bg-cyan-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "text-cyan-900 group-data-[state=open]:text-cyan-900",
           "dark:text-cyan-700"
         ].join(" ")
       }
@@ -1897,11 +1897,11 @@ const dropdownMenu = {
       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",
+          "text-collab-900 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",
+          "text-collab-600 group-data-highlighted:text-collab-900 group-data-[state=open]:text-collab-900",
           "dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
         ].join(" ")
       }
@@ -1915,7 +1915,7 @@ const dropdownMenu = {
           "dark:text-collab-200 dark:before:bg-collab-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-collab-950 group-data-[state=open]:text-collab-950",
+          "text-collab-900 group-data-[state=open]:text-collab-900",
           "dark:text-collab-700"
         ].join(" ")
       }
@@ -1929,7 +1929,7 @@ const dropdownMenu = {
           "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",
+          "text-ai-500 group-data-highlighted:text-ai-900 group-data-[state=open]:text-ai-900",
           "dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
         ].join(" ")
       }
@@ -1943,7 +1943,7 @@ const dropdownMenu = {
           "dark:text-ai-200 dark:before:bg-ai-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-ai-950 group-data-[state=open]:text-ai-950",
+          "text-ai-900 group-data-[state=open]:text-ai-900",
           "dark:text-ai-700"
         ].join(" ")
       }
@@ -2449,6 +2449,99 @@ const input = {
   }
 };
 
+const colorDropDownItem = {
+  colorItem: {
+    /**
+     * @memo not fill - use default data
+     */
+    default: "",
+    danger: {
+      item: [
+        "text-red-900 dark:text-red-150",
+        "data-highlighted:text-red-900 dark:data-highlighted:text-red-200 data-highlighted:before:bg-red-100 dark:data-highlighted:before:bg-red-900",
+        "data-[state=checked]:text-red-900 dark:data-[state=checked]:text-red-200 data-[state=checked]:before:bg-red-100 dark:data-[state=checked]:before:bg-red-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-red-600 dark:text-red-700",
+        "group-data-highlighted:text-red-900 dark:group-data-highlighted:text-red-150",
+        "group-data-[state=checked]:text-red-900 dark:group-data-[state=checked]:text-red-700"
+      ].join(" ")
+    },
+    success: {
+      item: [
+        "text-green-900 dark:text-green-150",
+        "data-highlighted:text-green-900 dark:data-highlighted:text-green-200 data-highlighted:before:bg-green-100 dark:data-highlighted:before:bg-green-900",
+        "data-[state=checked]:text-green-900 dark:data-[state=checked]:text-green-200 data-[state=checked]:before:bg-green-100 dark:data-[state=checked]:before:bg-green-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-green-600 dark:text-green-700",
+        "group-data-highlighted:text-green-900 dark:group-data-highlighted:text-green-150",
+        "group-data-[state=checked]:text-green-900 dark:group-data-[state=checked]:text-green-700"
+      ].join(" ")
+    },
+    warning: {
+      item: [
+        "text-orange-900 dark:text-orange-150",
+        "data-highlighted:text-orange-900 dark:data-highlighted:text-orange-200 data-highlighted:before:bg-orange-100 dark:data-highlighted:before:bg-orange-900",
+        "data-[state=checked]:text-orange-900 dark:data-[state=checked]:text-orange-200 data-[state=checked]:before:bg-orange-100 dark:data-[state=checked]:before:bg-orange-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-orange-600 dark:text-orange-700",
+        "group-data-highlighted:text-orange-900 dark:group-data-highlighted:text-orange-150",
+        "group-data-[state=checked]:text-orange-900 dark:group-data-[state=checked]:text-orange-700"
+      ].join(" ")
+    },
+    primary: {
+      item: [
+        "text-blue-900 dark:text-blue-150",
+        "data-highlighted:text-blue-900 dark:data-highlighted:text-blue-200 data-highlighted:before:bg-blue-100 dark:data-highlighted:before:bg-blue-900",
+        "data-[state=checked]:text-blue-900 dark:data-[state=checked]:text-blue-200 data-[state=checked]:before:bg-blue-100 dark:data-[state=checked]:before:bg-blue-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-blue-600 dark:text-blue-700",
+        "group-data-highlighted:text-blue-900 dark:group-data-highlighted:text-blue-150",
+        "group-data-[state=checked]:text-blue-900 dark:group-data-[state=checked]:text-blue-700"
+      ].join(" ")
+    },
+    secondary: {
+      item: [
+        "text-cyan-900 dark:text-cyan-150",
+        "data-highlighted:text-cyan-900 dark:data-highlighted:text-cyan-200 data-highlighted:before:bg-cyan-100 dark:data-highlighted:before:bg-cyan-900",
+        "data-[state=checked]:text-cyan-900 dark:data-[state=checked]:text-cyan-200 data-[state=checked]:before:bg-cyan-100 dark:data-[state=checked]:before:bg-cyan-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-cyan-600 dark:text-cyan-700",
+        "group-data-highlighted:text-cyan-900 dark:group-data-highlighted:text-cyan-150",
+        "group-data-[state=checked]:text-cyan-900 dark:group-data-[state=checked]:text-cyan-700"
+      ].join(" ")
+    },
+    collab: {
+      item: [
+        "text-collab-900 dark:text-collab-150",
+        "data-highlighted:text-collab-900 dark:data-highlighted:text-collab-200 data-highlighted:before:bg-collab-100 dark:data-highlighted:before:bg-collab-900",
+        "data-[state=checked]:text-collab-900 dark:data-[state=checked]:text-collab-200 data-[state=checked]:before:bg-collab-100 dark:data-[state=checked]:before:bg-collab-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-collab-600 dark:text-collab-700",
+        "group-data-highlighted:text-collab-900 dark:group-data-highlighted:text-collab-150",
+        "group-data-[state=checked]:text-collab-900 dark:group-data-[state=checked]:text-collab-700"
+      ].join(" ")
+    },
+    ai: {
+      item: [
+        "text-ai-900 dark:text-ai-150",
+        "data-highlighted:text-ai-900 dark:data-highlighted:text-ai-200 data-highlighted:before:bg-ai-100 dark:data-highlighted:before:bg-ai-900",
+        "data-[state=checked]:text-ai-900 dark:data-[state=checked]:text-ai-200 data-[state=checked]:before:bg-ai-100 dark:data-[state=checked]:before:bg-ai-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-ai-600 dark:text-ai-700",
+        "group-data-highlighted:text-ai-900 dark:group-data-highlighted:text-ai-150",
+        "group-data-[state=checked]:text-ai-900 dark:group-data-[state=checked]:text-ai-700"
+      ].join(" ")
+    }
+  }
+};
+
 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",
@@ -2620,7 +2713,8 @@ const inputMenu = () => {
             tagsItemDeleteIcon: "size-3.5"
           }
         )
-      }
+      },
+      ...colorDropDownItem
     },
     compoundVariants: [
       // region Color ////
@@ -3811,10 +3905,10 @@ const select = () => {
           "transition-colors before:transition-colors"
         ].join(" "),
         itemLeadingIcon: [
-          "shrink-0 text-base-500 dark:text-base-700",
+          "shrink-0 transition-colors",
+          "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"
+          "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150"
         ].join(" "),
         itemLeadingAvatar: "shrink-0",
         itemLeadingAvatarSize: "",
@@ -3831,7 +3925,8 @@ const select = () => {
           sm: defSize,
           md: defSize,
           lg: defSize
-        }
+        },
+        ...colorDropDownItem
       }
     },
     input