@bitrix24/b24ui-nuxt

const buttonGroup = [ "horizontal", "vertical" ] as const const color = [ "default", "danger", "success", "warning", "primary", "secondary", "collab", "ai" ] as const const depth = [ "light", "normal", "dark" ] as const const size = [ "xs", "sm", "md", "lg", "xl" ] as const export default { "slots": { "base": "select-none font-b24-secondary font-normal inline-flex items-center transition-all duration-200 ease-linear px-2 leading-normal rounded-md", "wrapper": "inline-flex items-center", "label": "max-w-full whitespace-nowrap text-ellipsis decoration-from-font", "leadingIcon": "shrink-0", "leadingAvatar": "shrink-0", "leadingAvatarSize": "", "trailingIcon": "shrink-0 cursor-pointer hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35" }, "variants": { "buttonGroup": { "horizontal": "focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 group-[.is-button-group]/items:not-only:first:rounded-e-none group-[.is-button-group]/items:not-only:last:rounded-s-none group-[.is-button-group]/items:not-last:not-first:rounded-none group-[.is-button-group]/items:not-only:first:border-e-0 group-[.is-button-group]/items:not-only:not-first:border-s-0 focus-visible:z-[1]", "vertical": "focus-visible:outline-none ring ring-inset ring-0 focus-visible:ring-2 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none focus-visible:z-[1]" }, "noSplit": { "false": "group-[.is-button-group]/items:not-only:not-first:after:content-[''] group-[.is-button-group]/items:not-only:not-first:after:absolute group-[.is-button-group]/items:not-only:not-first:after:top-[7px] group-[.is-button-group]/items:not-only:not-first:after:bottom-[6px] group-[.is-button-group]/items:not-only:not-first:after:left-0 group-[.is-button-group]/items:not-only:not-first:after:w-px group-[.is-button-group]/items:not-only:not-first:after:bg-current/30" }, "useLink": { "true": { "base": "cursor-pointer", "wrapper": "group", "label": "group-hover:underline group-hover:decoration-dashed" } }, "useClose": { "true": "pe-2xs" }, "useFill": { "true": "", "false": "bg-transparent" }, "leading": { "true": "ps-1" }, "color": { "default": "", "danger": "", "success": "", "warning": "", "primary": "", "secondary": "", "collab": "", "ai": "" }, "depth": { "light": "font-normal", "normal": "font-bold", "dark": "font-bold" }, "size": { "xs": { "base": "text-5xs gap-0.5", "wrapper": "h-[14px] gap-0.5", "label": "underline-offset-1", "leadingIcon": "size-sm", "leadingAvatarSize": "3xs", "trailingIcon": "size-sm " }, "sm": { "base": "text-4xs gap-1", "wrapper": "h-[16px] gap-1", "label": "underline-offset-1", "leadingIcon": "size-sm2", "leadingAvatarSize": "3xs", "trailingIcon": "size-sm2" }, "md": { "base": "text-3xs gap-1", "wrapper": "h-[17px] gap-1", "label": "underline-offset-1", "leadingIcon": "size-[15px]", "leadingAvatarSize": "3xs", "trailingIcon": "size-[15px]" }, "lg": { "base": "text-xs gap-1 rounded-lg", "wrapper": "h-[24px] gap-1", "leadingIcon": "size-[22px]", "leadingAvatarSize": "2xs", "trailingIcon": "size-[22px]" }, "xl": { "base": "text-md gap-1 rounded-xl", "wrapper": "h-[31px] gap-1", "leadingIcon": "size-[26px]", "leadingAvatarSize": "xs", "trailingIcon": "size-[26px]" } }, "square": { "true": "" } }, "compoundVariants": [ { "color": "default" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-base-900 bg-base-100 ring-base-100 dark:text-base-900 dark:bg-base-150 dark:ring-base-150" }, { "color": "default" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-base-800 bg-base-150 ring-base-300 dark:text-base-950 dark:bg-base-200 dark:ring-base-800" }, { "color": "default" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-base-500 ring-base-500 dark:text-base-50 dark:bg-base-600 dark:ring-base-600" }, { "color": "danger" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-red-800 bg-red-500/17 ring-red-500/17 dark:text-red-900 dark:bg-red-300 dark:ring-red-300" }, { "color": "danger" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-red-800 bg-red-250 ring-red-250 dark:text-red-800 dark:bg-red-350 dark:ring-red-350" }, { "color": "danger" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-red-500 ring-red-500 dark:text-red-250 dark:bg-red-600 dark:ring-red-600" }, { "color": "success" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-green-800 bg-green-500/17 ring-green-500/17 dark:text-green-900 dark:bg-green-300 dark:ring-green-300" }, { "color": "success" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-green-800 bg-green-300 ring-green-300 dark:text-green-800 dark:bg-green-330 dark:ring-green-330" }, { "color": "success" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-green-500 ring-green-500 dark:text-green-250 dark:bg-green-600 dark:ring-green-600" }, { "color": "warning" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-orange-800 bg-orange-250 ring-orange-300 dark:text-orange-900 dark:bg-orange-300 dark:ring-orange-300" }, { "color": "warning" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-orange-800 bg-orange-300 ring-orange-300 dark:text-orange-800 dark:bg-orange-400 dark:ring-orange-400" }, { "color": "warning" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-orange-500 ring-orange-500 dark:text-orange-250 dark:bg-orange-600 dark:ring-orange-600" }, { "color": "primary" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-blue-800 bg-blue-500/17 ring-blue-500/17 dark:text-blue-900 dark:bg-blue-300 dark:ring-blue-300" }, { "color": "primary" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-blue-700 bg-blue-250 ring-blue-250 dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300" }, { "color": "primary" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-blue-500 ring-blue-500 dark:text-blue-250 dark:bg-blue-600 dark:ring-blue-600" }, { "color": "secondary" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-base-master bg-blue-320 ring-blue-320 dark:text-base-master dark:bg-blue-400 dark:ring-blue-400" }, { "color": "secondary" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-white bg-cyan-350 ring-cyan-350 dark:text-cyan-100 dark:bg-cyan-400 dark:ring-cyan-400" }, { "color": "secondary" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-cyan-500 ring-cyan-500 dark:text-cyan-250 dark:bg-cyan-600 dark:ring-cyan-600" }, { "color": "collab" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-collab-800 bg-collab-500/17 ring-collab-500/17 dark:text-collab-900 dark:bg-collab-300 dark:ring-collab-300" }, { "color": "collab" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-collab-800 bg-collab-300 ring-collab-300 dark:text-collab-800 dark:bg-collab-300 dark:ring-collab-300" }, { "color": "collab" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-collab-500 ring-collab-500 dark:text-collab-250 dark:bg-collab-600 dark:ring-collab-600" }, { "color": "ai" as typeof color[number], "depth": "light" as typeof depth[number], "class": "ring ring-inset text-ai-500 bg-white ring-ai-10 dark:text-ai-500 dark:bg-ai-50 dark:ring-ai-50" }, { "color": "ai" as typeof color[number], "depth": "normal" as typeof depth[number], "class": "ring ring-inset text-ai-500 bg-ai-150 ring-ai-150 dark:text-ai-600 dark:bg-ai-200 dark:ring-ai-200" }, { "color": "ai" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "ring ring-inset text-white bg-ai-330 ring-ai-330 dark:text-ai-100 dark:bg-ai-400 dark:ring-ai-400" }, { "size": "xs" as typeof size[number], "square": true, "class": { "base": "p-0 ps-0 pe-0", "wrapper": "p-0.5 gap-0" } }, { "size": "sm" as typeof size[number], "square": true, "class": { "base": "p-0 ps-0 pe-0", "wrapper": "p-1 gap-0" } }, { "size": "md" as typeof size[number], "square": true, "class": { "base": "p-0 ps-0 pe-0", "wrapper": "p-1 gap-0" } }, { "size": "lg" as typeof size[number], "square": true, "class": { "base": "p-0 ps-0 pe-0", "wrapper": "p-1 gap-0" } }, { "size": "xl" as typeof size[number], "square": true, "class": { "base": "p-0 ps-0 pe-0", "wrapper": "p-1 gap-0" } }, { "useLink": true, "useFill": false, "class": "" }, { "useFill": false, "class": "text-base-800 dark:text-base-250 bg-transparent dark:bg-transparent" }, { "useClose": true, "class": "" }, { "buttonGroup": [ "horizontal" as typeof buttonGroup[number], "vertical" as typeof buttonGroup[number] ], "class": "rounded-2xs" } ], "defaultVariants": { "color": "default" as typeof color[number], "depth": "normal" as typeof depth[number], "size": "md" as typeof size[number], "useFill": false } }