@bitrix24/b24ui-nuxt

const color = [ "default", "danger", "success", "warning", "primary", "secondary", "collab", "ai", "link" ] as const const depth = [ "light", "normal", "dark" ] as const const size = [ "xs", "sm", "md", "lg" ] as const export default { "slots": { "base": [ "select-none cursor-pointer inline-flex items-center", "relative", "outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50", "transition duration-150 ease-linear" ], "baseLine": "inline-flex items-center", "label": "truncate", "leadingIcon": "shrink-0", "leadingAvatar": "shrink-0", "leadingAvatarSize": "", "trailingIcon": "shrink-0", "safeList": "h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center w-[28px] h-[28px] size-lg animate-spin stroke-2 invisible" }, "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" }, "color": { "default": "text-white dark:text-base-100 bg-base-650 border border-base-650 hover:bg-base-850 hover:border-base-850 hover:focus-visible:ring-0 active:bg-slate-850 active:border-slate-850 active:focus-visible:ring-0 disabled:bg-base-650 aria-disabled:bg-base-650 disabled:border-base-650 aria-disabled:border-base-650 focus-visible:outline-base-650 ring-base-850 focus:outline-none focus-visible:ring-base-850", "danger": "text-white dark:text-red-100 bg-red-720 border border-red-720 hover:bg-red-790 hover:border-red-790 hover:focus-visible:ring-0 active:bg-red-730 active:border-red-730 active:focus-visible:ring-0 disabled:bg-red-720 aria-disabled:bg-red-720 disabled:border-red-720 aria-disabled:border-red-720 focus-visible:outline-red-720 ring-red-800 focus:outline-none focus-visible:ring-red-800", "success": "text-base-900 bg-green-450 border border-green-450 hover:bg-green-370 hover:border-green-370 hover:focus-visible:ring-0 active:bg-green-430 active:border-green-430 active:focus-visible:ring-0 disabled:bg-green-450 aria-disabled:bg-green-450 disabled:border-green-450 aria-disabled:border-green-450 focus-visible:outline-green-450 ring-green-500 focus:outline-none focus-visible:ring-green-500", "warning": "text-white dark:text-orange-100 bg-orange-500 border border-orange-500 hover:bg-orange-500/75 hover:border-orange-500/75 hover:focus-visible:ring-0 active:bg-orange-500/85 active:border-orange-500/85 active:focus-visible:ring-0 disabled:bg-orange-500 aria-disabled:bg-orange-500 disabled:border-bg-orange-500 aria-disabled:border-bg-orange-500 focus-visible:outline-orange-500 ring-orange-800 focus:outline-none focus-visible:ring-orange-800", "primary": "text-white dark:text-blue-100 bg-blue-530 border border-blue-530 hover:bg-blue-450 hover:border-blue-450 hover:focus-visible:ring-0 active:bg-blue-550 active:border-blue-550 active:focus-visible:ring-0 disabled:bg-blue-530 aria-disabled:bg-blue-530 disabled:border-blue-530 aria-disabled:border-blue-530 focus-visible:outline-blue-530 ring-blue-800 focus:outline-none focus-visible:ring-blue-800", "secondary": "text-base-900 bg-cyan-160 border border-cyan-230 hover:bg-cyan-150 hover:border-cyan-230 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-cyan-160 aria-disabled:bg-cyan-160 disabled:border-cyan-230 aria-disabled:border-cyan-230 focus-visible:outline-cyan-160 ring-cyan-500 focus:outline-none focus-visible:ring-cyan-500", "collab": "text-white dark:text-collab-100 bg-collab-600 border border-collab-600 hover:bg-collab-500 hover:border-collab-500 hover:focus-visible:ring-0 active:bg-collab-700 active:border-collab-700 active:focus-visible:ring-0 disabled:bg-collab-600 aria-disabled:bg-collab-600 disabled:border-collab-600 aria-disabled:border-collab-600 focus-visible:outline-collab-600 ring-collab-900 focus:outline-none focus-visible:ring-collab-900", "ai": "text-white dark:text-ai-100 bg-ai-450 border border-ai-450 hover:bg-ai-370 hover:border-ai-370 hover:focus-visible:ring-0 active:bg-ai-550 active:border-ai-550 active:focus-visible:ring-0 disabled:bg-ai-450 aria-disabled:bg-ai-450 disabled:border-ai-450 aria-disabled:border-ai-450 focus-visible:outline-ai-450 ring-ai-900 focus:outline-none focus-visible:ring-ai-900", "link": "no-underline decoration-solid decoration-auto text-base-900 decoration-gray-900 bg-transparent border border-transparent dark:text-base-300 hover:text-base-750 dark:hover:text-base-400 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-700 active:focus-visible:ring-0 disabled:text-base-900 aria-disabled:text-base-900 dark:disabled:text-base-300 dark:aria-disabled:disabled:text-base-300 focus-visible:outline-base-400 ring-base-850 focus:outline-none focus-visible:ring-base-850" }, "depth": { "light": "", "normal": "", "dark": "" }, "size": { "xs": { "base": "h-xl2 ps-4 pe-4 text-3xs leading-none", "baseLine": "gap-1", "leadingIcon": "size-5", "leadingAvatarSize": "2xs", "trailingIcon": "size-md2" }, "sm": { "base": "h-3xl ps-[18px] pe-[18px] text-xs leading-none", "baseLine": "gap-1.5", "leadingIcon": "size-6", "leadingAvatarSize": "xs", "trailingIcon": "size-lg" }, "md": { "base": "h-5xl ps-5 pe-5 text-xs leading-none", "baseLine": "gap-1.5", "leadingIcon": "size-xl2", "leadingAvatarSize": "sm", "trailingIcon": "size-lg" }, "lg": { "base": "h-6xl ps-[28px] pe-[28px] text-xs leading-none", "baseLine": "gap-2", "leadingIcon": "size-xl2", "leadingAvatarSize": "md", "trailingIcon": "size-lg" } }, "block": { "true": { "base": "w-full", "baseLine": "w-full justify-center", "trailingIcon": "ms-auto" } }, "rounded": { "true": "rounded-full", "false": "rounded-2xs" }, "leading": { "true": "" }, "useLabel": { "true": "", "false": "ps-1.5 pe-1.5 justify-center" }, "useDropdown": { "true": "ps-2 pe-2" }, "useWait": { "true": "" }, "useClock": { "true": "" }, "loading": { "true": "" }, "normalCase": { "true": "font-semibold normal-case", "false": "font-bold uppercase" }, "active": { "true": { "base": "" }, "false": { "base": "" } } }, "compoundVariants": [ { "color": "default" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-base-800 dark:text-base-800 bg-base-200 border border-base-300 hover:bg-base-320 hover:border-base-320 hover:focus-visible:ring-0 active:bg-base-250 active:border-base-250 active:focus-visible:ring-0 disabled:bg-base-200 aria-disabled:bg-base-200 disabled:border-base-300 aria-disabled:border-base-300 focus-visible:outline-base-200 ring-base-320 focus-visible:ring-base-320" }, { "color": "default" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-base-100 bg-base-900 border border-base-900 hover:bg-base-900/75 hover:border-base-900/75 hover:focus-visible:ring-0 active:bg-base-900/85 active:border-base-900/85 active:focus-visible:ring-0 disabled:bg-base-900 aria-disabled:bg-base-900 disabled:border-base-900 aria-disabled:border-base-900 focus-visible:outline-base-900 ring-base-700 focus-visible:ring-base-700" }, { "color": "danger" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-red-750 dark:text-red-760 bg-red-270 border border-red-270 hover:bg-red-250 hover:border-red-250 dark:hover:bg-red-200 dark:hover:border-red-200 hover:focus-visible:ring-0 active:bg-red-350 active:border-red-350 dark:active:bg-red-350 dark:active:border-red-350 active:focus-visible:ring-0 disabled:bg-red-270 aria-disabled:bg-red-270 disabled:border-red-270 aria-disabled:border-red-270 dark:disabled:bg-red-270 dark:aria-disabled:bg-red-270 dark:disabled:border-red-270 dark:aria-disabled:border-red-270 focus-visible:outline-red-270" }, { "color": "danger" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-red-100 bg-red-850 border border-red-850 hover:bg-red-760 hover:border-red-760 hover:focus-visible:ring-0 active:bg-red-930 active:border-red-930 active:focus-visible:ring-0 disabled:bg-red-850 aria-disabled:bg-red-850 disabled:border-red-850 aria-disabled:border-red-850 focus-visible:outline-red-850 ring-red-950 focus-visible:ring-red-950" }, { "color": "success" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-green-780 bg-green-280 border border-green-280 hover:bg-green-270 hover:border-green-270 hover:focus-visible:ring-0 dark:hover:bg-green-200 dark:hover:border-green-200 active:bg-green-330 active:border-green-270 active:focus-visible:ring-0 dark:active:bg-green-330 dark:active:border-green-270 disabled:bg-green-280 aria-disabled:bg-green-280 disabled:border-green-280 aria-disabled:border-green-280 dark:disabled:bg-green-280 dark:aria-disabled:bg-green-280 dark:disabled:border-green-280 dark:aria-disabled:border-green-280 focus-visible:outline-green-280" }, { "color": "success" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-green-100 bg-green-730 border border-green-730 hover:bg-green-570 hover:border-green-570 hover:focus-visible:ring-0 active:bg-green-570 active:border-green-570 active:focus-visible:ring-0 disabled:bg-green-730 aria-disabled:bg-green-730 disabled:border-green-730 aria-disabled:border-green-730 focus-visible:outline-green-730 ring-green-900 focus-visible:ring-green-900" }, { "color": "warning" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-orange-750 dark:text-orange-750 bg-orange-350/80 border border-orange-350/80 dark:bg-orange-230 dark:border-orange-230 hover:bg-orange-500/65 hover:border-orange-500/65 dark:hover:bg-orange-400 dark:hover:border-orange-400 hover:focus-visible:ring-0 active:bg-orange-550 active:border-orange-550 dark:active:bg-orange-600 dark:active:border-orange-600 active:focus-visible:ring-0 disabled:bg-orange-230 aria-disabled:bg-orange-230 disabled:border-orange-230 aria-disabled:border-orange-230 dark:disabled:bg-orange-230 dark:aria-disabled:bg-orange-230 dark:disabled:border-orange-230 dark:aria-disabled:border-orange-230 focus-visible:outline-orange-230" }, { "color": "warning" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-orange-100 bg-orange-700 border border-orange-700 hover:bg-orange-700/75 hover:border-orange-700/75 hover:focus-visible:ring-0 active:bg-orange-700/85 active:border-orange-700/85 active:focus-visible:ring-0 disabled:bg-orange-700 aria-disabled:bg-orange-700 disabled:border-orange-700 aria-disabled:border-orange-700 focus-visible:outline-orange-700" }, { "color": "primary" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-blue-800 dark:text-blue-800 bg-blue-300 border border-blue-400 hover:bg-blue-300/75 hover:border-blue-300/75 hover:focus-visible:ring-0 active:bg-blue-300/85 active:border-blue-300/85 active:focus-visible:ring-0 disabled:bg-blue-300 aria-disabled:bg-blue-300 disabled:border-blue-300 aria-disabled:border-blue-300 focus-visible:outline-blue-300" }, { "color": "primary" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-blue-100 bg-blue-650 border border-blue-650 hover:bg-blue-630 hover:border-blue-630 hover:focus-visible:ring-0 active:bg-blue-750 active:border-blue-750 active:focus-visible:ring-0 disabled:bg-blue-650 aria-disabled:bg-blue-650 disabled:border-blue-650 aria-disabled:border-blue-650 focus-visible:outline-blue-650" }, { "color": "secondary" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-blue-620 dark:text-blue-850 bg-blue-310 border border-blue-310 hover:bg-cyan-150 hover:border-cyan-150 hover:focus-visible:ring-0 active:bg-cyan-230 active:border-cyan-230 active:focus-visible:ring-0 disabled:bg-blue-310 aria-disabled:bg-blue-310 disabled:border-blue-310 aria-disabled:border-blue-310 focus-visible:outline-blue-310" }, { "color": "secondary" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-base-900 bg-cyan-350 border-cyan-500 hover:bg-cyan-350/75 hover:focus-visible:ring-0 active:bg-cyan-350/85 active:focus-visible:ring-0 disabled:bg-cyan-350 aria-disabled:bg-cyan-350 focus-visible:outline-cyan-350 ring-cyan-900 focus-visible:ring-cyan-900" }, { "color": "collab" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-collab-900 dark:text-collab-900 bg-collab-300 border border-collab-400 hover:bg-collab-300/75 hover:border-collab-300/75 hover:focus-visible:ring-0 active:bg-collab-300/85 active:border-collab-300/85 active:focus-visible:ring-0 disabled:bg-collab-300 aria-disabled:bg-collab-300 disabled:border-collab-300 aria-disabled:border-collab-300 focus-visible:outline-collab-300" }, { "color": "collab" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-collab-100 bg-collab-700 border border-collab-700 hover:bg-collab-700/75 hover:border-collab-700/75 hover:focus-visible:ring-0 active:bg-collab-700/85 active:border-collab-700/85 active:focus-visible:ring-0 disabled:bg-collab-700 aria-disabled:bg-collab-700 disabled:border-collab-700 aria-disabled:border-collab-700 focus-visible:outline-collab-700" }, { "color": "ai" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-ai-900 dark:text-ai-900 bg-ai-300 border border-ai-400 hover:bg-ai-300/75 hover:border-ai-300/75 hover:focus-visible:ring-0 active:bg-ai-300/85 active:border-ai-300/85 active:focus-visible:ring-0 disabled:bg-ai-300 aria-disabled:bg-ai-300 disabled:border-ai-300 aria-disabled:border-ai-300 focus-visible:outline-ai-300" }, { "color": "ai" as typeof color[number], "depth": "dark" as typeof depth[number], "class": "text-white dark:text-ai-100 bg-ai-550 border border-ai-550 hover:bg-ai-550/75 hover:border-ai-550/75 hover:focus-visible:ring-0 active:bg-ai-550/85 active:border-ai-550/85 active:focus-visible:ring-0 disabled:bg-ai-550 aria-disabled:bg-ai-550 disabled:border-ai-550 aria-disabled:border-ai-550 focus-visible:outline-ai-550 ring-ai-900 focus-visible:ring-ai-900" }, { "color": "link" as typeof color[number], "depth": "light" as typeof depth[number], "class": "text-base-900 dark:text-base-300 bg-transparent border border-transparent hover:text-base-master dark:hover:text-base-100 hover:bg-base-30 dark:hover:bg-base-850 hover:focus-visible:ring-0 active:text-base-ebony active:bg-blue-270 dark:active:text-base-100 dark:active:bg-slate-850 active:focus-visible:ring-0 disabled:text-base-master disabled:bg-base-30 aria-disabled:bg-base-30 dark:disabled:text-base-100 dark:aria-disabled:text-base-100 dark:disabled:bg-base-850 dark:aria-disabled:bg-base-850 focus-visible:outline-base-30 dark:focus-visible:outline-base-850" }, { "color": "link" as typeof color[number], "depth": "light" as typeof depth[number], "useLabel": true, "class": "ps-1.5 pe-1.5" }, { "color": "link" as typeof color[number], "depth": "normal" as typeof depth[number], "useLabel": true, "class": "ps-0 pe-0" }, { "color": "link" as typeof color[number], "depth": "dark" as typeof depth[number], "class": " border text-base-900 bg-transparent border-base-330 dark:text-base-300 dark:border-base-800 hover:text-base-900 dark:hover:text-base-900 hover:bg-base-320 hover:border-base-330 hover:focus-visible:ring-0 active:text-base-900 dark:active:text-base-900 active:bg-base-250 active:border-base-550 active:focus-visible:ring-0 disabled:bg-transparent disabled:border-base-330 aria-disabled:bg-transparent aria-disabled:border-base-330 dark:disabled:text-base-900 dark:aria-disabled:text-base-900 dark:disabled:border-base-900 dark:aria-disabled:border-base-900 focus-visible:outline-base-330" }, { "size": "xs" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": false, "class": "ps-1.5 pe-4" }, { "size": "sm" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": false, "class": "ps-2.5 pe-[18px]" }, { "size": "md" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": false, "class": "ps-3.5 pe-5" }, { "size": "lg" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": false, "class": "ps-4 pe-[28px]" }, { "size": "xs" as typeof size[number], "leading": false, "useLabel": true, "useDropdown": true, "class": "ps-4 pe-1.5" }, { "size": "sm" as typeof size[number], "leading": false, "useLabel": true, "useDropdown": true, "class": "ps-[18px] pe-1.5" }, { "size": "md" as typeof size[number], "leading": false, "useLabel": true, "useDropdown": true, "class": "ps-5 pe-2.5" }, { "size": "lg" as typeof size[number], "leading": false, "useLabel": true, "useDropdown": true, "class": "ps-[28px] pe-3.5" }, { "size": "xs" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": true, "class": "ps-1.5 pe-1.5" }, { "size": "sm" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": true, "class": "ps-2.5 pe-1.5" }, { "size": "md" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": true, "class": "ps-3.5 pe-2.5" }, { "size": "lg" as typeof size[number], "leading": true, "useLabel": true, "useDropdown": true, "class": "ps-4 pe-3.5" }, { "normalCase": true, "size": "xs" as typeof size[number], "class": "text-xs" }, { "normalCase": true, "size": "sm" as typeof size[number], "class": "text-sm" }, { "normalCase": true, "size": "md" as typeof size[number], "class": "text-md" }, { "normalCase": true, "size": "lg" as typeof size[number], "class": "text-md" } ], "defaultVariants": { "size": "md" as typeof size[number], "color": "default" as typeof color[number], "depth": "normal" as typeof depth[number] } }