View Source CVA (CVA v0.2.2)

Construct classes with variant definitions.

A variant consists of a name and a class. These variants are defined by providing a declarative set of nested keyword lists.

defmodule MyCVA do
  import CVA

  def button(props) do
    config = [
      variants: [
        intent: [
          primary: "bg-cyan-600",
          secondary: "bg-zinc-700",
          destructive: "bg-red-500"
        ],
        size: [
          xs: "rounded px-2.5 py-1.5 text-xs",
          sm: "rounded-md px-3 py-2 text-sm",
          md: "rounded-md px-4 py-2 text-sm",
          lg: "rounded-md px-4 py-2 text-base",
          xl: "rounded-md px-6 py-3 text-base"
        ]
      ]
    ]

    cva(config, props)
  end
end

Invoking button/1 with the desired variants will return a class name including the classes specified in the config.

  button(intent: :primary, size: :md) # -> "bg-cyan-600 rounded-md px-4 py-2 text-sm"

See cva/3 for more info.

## Usage with Phoenix function components.

CVA integrates nicely with Phoenix function components by providing variant/3 and compound_variant/2 macros.

Please refer to the CVA.Component module.

Summary

Functions

cva(config)

See cva/3.

cva(config, props)

See cva/3.

cva(base, config, props)

Construct a class string from a variant configuration.

cx(classes)

Merges a list of classes into a single class string removing any nil or empty strings. Class lists can be infinitely nested.

Functions

cva(config)

See cva/3.

cva(config, props)

See cva/3.

cva(base, config, props)

Construct a class string from a variant configuration.

Accepts a base class string, a variant configuration, and a list of props.

config = [
  variants: [
    intent: [
      primary: "bg-cyan-600",
      secondary: "bg-zinc-700",
      destructive: "bg-red-500"
    ],
    size: [
      xs: "rounded px-2.5 py-1.5 text-xs",
      sm: "rounded-md px-3 py-2 text-sm",
      md: "rounded-md px-4 py-2 text-sm",
      lg: "rounded-md px-4 py-2 text-base",
      xl: "rounded-md px-6 py-3 text-base"
    ]
  ],
  default_variants: [
    intent: :secondary,
    size: :md
  ],
  compound_variants: [
    [intent: :primary, size: :xl, class: "uppercase"]
  ]
]

cva("base", config, intent: :primary, size: :md) # -> "base bg-cyan-600 rounded-md px-4 py-2 text-sm"
cva("base", config, intent: :primary, size: :xl) # -> "base bg-cyan-600 rounded-md px-6 py-3 text-base uppercase"
cva("base", config, intent: :primary, size: :xl) # -> "base bg-cyan-600 rounded-md px-6 py-3 text-base uppercase"

cva("base", config) # -> "base bg-zinc-700 rounded-md px-4 py-2 text-sm"
cva("base", config, intent: :primary) # -> "base bg-cyan-600 rounded-md px-4 py-2 text-sm"

Config

The configuration is a keyword list with the following keys:

:variants - A keyword list of variants. Each variant is a keyword list of variant names and classes.
:compound_variants - A list of compound variants. Each compound variant is a keyword list of required variants and a :class key to specify the class which should be applied if all variants are present.
:default_variants - A keyword list of default variants. For example [intent: :primary].

Props

Props define the variants to be applied. Each key in the props list must be a variant name. Values can either be an atom or a string.

Special props

:class - A class string or list of classes. This class is applied last.

cx(classes)

Merges a list of classes into a single class string removing any nil or empty strings. Class lists can be infinitely nested.