@bitrix24/b24ui-nuxt
Version:
Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE
92 lines (90 loc) • 3.17 kB
text/typescript
const color = [
"default",
"danger",
"success",
"warning",
"primary",
"secondary",
"collab",
"ai"
] as const
const orientation = [
"horizontal",
"vertical"
] as const
export default {
"slots": {
"root": "relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus:outline-none font-b24-primary dark:ring-2 dark:ring-base-900 bg-base-ebony/80 dark:bg-base-dark text-sm font-normal text-white dark:text-base-150",
"wrapper": "w-0 flex-1 flex flex-col",
"title": "font-medium",
"description": "",
"icon": "shrink-0 size-6",
"avatar": "shrink-0",
"avatarSize": "xl",
"actions": "flex gap-1.5 shrink-0",
"progress": "absolute inset-x-0 bottom-0 h-1 z-[-1]",
"close": "p-0 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
},
"variants": {
"color": {
"default": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-base-400 dark:focus-visible:ring-base-400",
"icon": "text-white",
"progress": "bg-base-350 dark:bg-base-350"
},
"danger": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-400 dark:focus-visible:ring-red-400",
"icon": "text-red-500",
"progress": "bg-red-500 dark:bg-red-500"
},
"success": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-400 dark:focus-visible:ring-green-400",
"icon": "text-green-500",
"progress": "bg-green-500 dark:bg-green-500"
},
"warning": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400 dark:focus-visible:ring-orange-400",
"icon": "text-orange-500",
"progress": "bg-orange-500 dark:bg-orange-500"
},
"primary": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400 dark:focus-visible:ring-blue-400",
"icon": "text-blue-500",
"progress": "bg-blue-500 dark:bg-blue-500"
},
"secondary": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-400 dark:focus-visible:ring-cyan-400",
"icon": "text-cyan-500",
"progress": "bg-cyan-500 dark:bg-cyan-500"
},
"collab": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-collab-400 dark:focus-visible:ring-collab-400",
"icon": "text-collab-500",
"progress": "bg-collab-500 dark:bg-collab-500"
},
"ai": {
"root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-400 dark:focus-visible:ring-ai-400",
"icon": "text-ai-500",
"progress": "bg-ai-500 dark:bg-ai-500"
}
},
"orientation": {
"horizontal": {
"root": "items-center",
"actions": "items-center"
},
"vertical": {
"root": "items-center",
"actions": "items-start mt-1"
}
},
"title": {
"true": {
"description": "mt-1"
}
}
},
"defaultVariants": {
"color": "default" as typeof color[number]
}
}