@bitrix24/b24ui-nuxt/.nuxt/b24ui/chip.ts

Bitrix24 UI-Kit for developing web applications REST API for NUXT & VUE

const color = [
  "default",
  "danger",
  "success",
  "warning",
  "primary",
  "secondary",
  "collab",
  "ai",
  "link"
] as const

const size = [
  "3xs",
  "2xs",
  "xs",
  "sm",
  "md",
  "lg",
  "xl",
  "2xl",
  "3xl"
] as const

const position = [
  "top-right",
  "bottom-right",
  "top-left",
  "bottom-left"
] as const

export default {
  "slots": {
    "root": "relative inline-flex items-center justify-center shrink-0",
    "base": "select-none rounded-sm flex items-center justify-center p-1 text-white leading-none font-semibold font-b24-secondary whitespace-nowrap"
  },
  "variants": {
    "color": {
      "default": "bg-base-500 dark:bg-base-900 dark:text-base-150",
      "danger": "bg-red-500 dark:bg-red-600 dark:text-red-250",
      "success": "bg-green-500 dark:bg-green-600 dark:text-green-250",
      "warning": "bg-orange-500 dark:bg-orange-600 dark:text-orange-250",
      "primary": "bg-blue-500 dark:bg-blue-600 dark:text-blue-250",
      "secondary": "bg-cyan-350 dark:bg-cyan-500",
      "collab": "bg-collab-500 dark:bg-collab-800 dark:text-collab-250",
      "ai": "bg-ai-500 dark:bg-ai-800 dark:text-ai-250",
      "link": "bg-base-900/85 text-white dark:bg-white/85 dark:text-base-900"
    },
    "size": {
      "3xs": "h-1 min-w-1 text-[0px] text-transparent p-0",
      "2xs": "h-1.5 min-w-1.5 text-[0px] text-transparent p-0",
      "xs": "h-xs2 min-w-xs2 text-[0px] text-transparent  p-0",
      "sm": "h-sm min-w-sm text-4xs font-regular",
      "md": "h-md min-w-md text-3xs",
      "lg": "h-lg min-w-lg rounded-md text-xs",
      "xl": "h-lg min-w-lg rounded-md text-xs",
      "2xl": "h-lg min-w-lg rounded-md text-xs",
      "3xl": "h-lg min-w-lg rounded-md text-xs"
    },
    "position": {
      "top-right": "top-0 right-0",
      "bottom-right": "bottom-0 right-0",
      "top-left": "top-0 left-0",
      "bottom-left": "bottom-0 left-0"
    },
    "inset": {
      "false": ""
    },
    "standalone": {
      "true": "",
      "false": "ring ring-white dark:ring-base-700 absolute"
    }
  },
  "compoundVariants": [
    {
      "position": "top-right" as typeof position[number],
      "inset": false,
      "standalone": false,
      "class": "-translate-y-1/2 translate-x-1/2 transform"
    },
    {
      "position": "bottom-right" as typeof position[number],
      "inset": false,
      "standalone": false,
      "class": "translate-y-1/2 translate-x-1/2 transform"
    },
    {
      "position": "top-left" as typeof position[number],
      "inset": false,
      "standalone": false,
      "class": "-translate-y-1/2 -translate-x-1/2 transform"
    },
    {
      "position": "bottom-left" as typeof position[number],
      "inset": false,
      "standalone": false,
      "class": "translate-y-1/2 -translate-x-1/2 transform"
    },
    {
      "position": "top-right" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "xs" as typeof size[number],
        "sm" as typeof size[number],
        "md" as typeof size[number],
        "lg" as typeof size[number],
        "xl" as typeof size[number],
        "2xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "-translate-y-1/3 translate-x-1/3 transform"
    },
    {
      "position": "top-right" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "3xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "translate-y-0 translate-x-0 transform"
    },
    {
      "position": "bottom-right" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "xs" as typeof size[number],
        "sm" as typeof size[number],
        "md" as typeof size[number],
        "lg" as typeof size[number],
        "xl" as typeof size[number],
        "2xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "translate-y-1/3 translate-x-1/3 transform"
    },
    {
      "position": "bottom-right" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "3xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "translate-y-0 translate-x-0 transform"
    },
    {
      "position": "top-left" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "xs" as typeof size[number],
        "sm" as typeof size[number],
        "md" as typeof size[number],
        "lg" as typeof size[number],
        "xl" as typeof size[number],
        "2xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "-translate-y-1/3 -translate-x-1/3 transform"
    },
    {
      "position": "top-left" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "3xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "-translate-y-0 -translate-x-0 transform"
    },
    {
      "position": "bottom-left" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "xs" as typeof size[number],
        "sm" as typeof size[number],
        "md" as typeof size[number],
        "lg" as typeof size[number],
        "xl" as typeof size[number],
        "2xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "translate-y-1/3 -translate-x-1/3 transform"
    },
    {
      "position": "bottom-left" as typeof position[number],
      "size": [
        "2xs" as typeof size[number],
        "3xl" as typeof size[number]
      ],
      "inset": true,
      "standalone": false,
      "class": "translate-y-0 -translate-x-0 transform"
    }
  ],
  "defaultVariants": {
    "size": "sm" as typeof size[number],
    "color": "danger" as typeof color[number],
    "position": "top-right" as typeof position[number]
  }
}