Class Utils

You can import class utility functions from jade-garden/class-utils.

cm

Conditionally combines class names, allowing for exclusion and inclusion of specific classes. Duplicate class names are removed by default from input.

Parameters

• input: the class names to change (ClassValue).
• options:
  • include: class names to add to input that is type string or string[].
  • exclude: class names to exclude from input that is type string or string[].

Examples

import { cm } from "jade-garden/class-utils";

cm("class1 class2 class3", {
  include: "class4",
  exclude: "class2"
});
// "class1 class3 class4"

cm(["class1", "class2", "class3"], {
  include: ["class4", "class5"],
  exclude: ["class2"]
});
// "class1 class3 class4 class5"

cm(["class1", "class2", "class1"], {
  add: ["class2", "class3"]
});
// "class1 class2 class3"

cn

Alias for clsx/lite. Conditionally generates a string of class names from string arguments. It concatenates the provided string arguments, separated by spaces, excluding any falsy values (null, undefined, '', 0, false).

Parameters

• ...inputs: accepts arguments that can be strings, numbers, arrays, or objects, but works with string arguments (ClassValue[]).

Examples

import { cn } from "jade-garden/class-utils";

cn("foo", "bar");
// "foo bar"

cn(true && "foo", false && "bar", "baz");
// "foo baz"

cn(false && "foo", "bar", "baz", "")
// "bar baz";

cn(["foo", "bar"]);
// ""

cn({ true: "a" }, { false: "b" });
// ""

cx

Alias for clsx. Conditionally generates a string of class names that accepts multiple arguments of various types to build a class name string.

Parameters

• ...inputs: arguments can be strings, numbers, arrays, or objects (ClassValue[]).

Examples

import { cx } from "jade-garden/class-utils";

cx("foo", "bar");
// "foo bar"

cx(true && "foo", false && "bar", "baz");
// "foo baz"

cx(false && "foo", "bar", "baz", "");
// "bar baz"

cx(["foo", "bar"]);
// "foo bar"

cx(["foo", 0 && "bar", 1 && "baz"]);
// "foo baz"

cx(["foo", ["bar", ["", [["baz"]]]]]);
// "foo bar baz"

getClasses

Returns a function that generates class names based on a cva or sva configuration. This function acts as a factory, detecting the configuration type and returning functions with similar inputs to cva and sva functions: variants, class, and className.

Parameters

• styleConfig: A cva or sva configuration. You can use define functions to have type safety included.
• classNameConfig:
  • mergeFn: An optional field to apply a custom function to merge class names (MergeFn)
  • jgPrefix: Takes an optional string to apply prefixes to the generated class names.

Examples

import { getClasses } from "jade-garden/class-utils";

// cva
const button = getClasses({
 name: "button",
 base: "button",
 variants: {
   size: {
    small: "size-2",
    medium: "size-4"
  },
   variant: {
    primary: "bg-red-500",
    secondary: "bg-blue-500"
  }
 }
});

button({ size: "small", variant: "primary" });
// "button button__size--small button__variant--primary"

// cva w/ prefixes
const button = getClasses({
 name: "button",
 base: "button",
 variants: {
   size: {
    small: "size-2",
    medium: "size-4"
  },
   variant: {
    primary: "bg-red-500",
    secondary: "bg-blue-500"
  }
 }
}, {
  jgPrefix: "jg"
});

button({ size: "small", variant: "primary", className: "font-bold" });
// "jg:button jg:button__size--small jg:button__variant--primary font-bold"

// sva
const card = getClasses({
 name: "card",
 slots: {
  content: "content-class",
  footer: "footer-class"
},
 variants: {
   size: {
     small: {
      content: "size-2"
    },
     medium: {
      content: "size-4"
    }
   }
 }
});

const { content, footer } = card({ size: "small" });

content();
// "card--content card--content__size--small"

footer();
// "card--footer"

// sva w/ prefixes
const card = getClasses({
 name: "card",
 slots: {
  content: "content-class",
  footer: "footer-class"
},
 variants: {
   size: {
     small: {
      content: "size-2"
    },
     medium: {
      content: "size-4"
    }
   }
 }
}, {
  jgPrefix: "jg"
});

const { content, footer } = card({ size: "small" });

content({ className: "tw:font-normal" });
// "jg:card--content jg:card--content__size--small tw:font-normal"

footer({ className: "tw:font-medium" });
// "jg:card--footer tw:font-medium"

prefixClasses

A utility to simplify the maintenance of prefixed CSS classes.

It iterates through an array of inputs, applying a base prefix to each class string. It also supports variant-specific prefixes, allowing for different styles based on a condition (e.g., dark:has-checked:bg-indigo-950).

Parameters

• prefix: The base prefix to apply to each class name that is of type string.
• inputs: An array of class names, which can be simple strings or objects for variants.

Examples

import { prefixClasses } from "jade-garden/class-utils";

prefixClasses("has-checked", []);
// ""

prefixClasses("has-checked", ["bg-indigo-50", "text-indigo-900", "ring-indigo-200"]);
// "has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200

prefixClasses(
  "has-checked",
  [{
    variant: "dark",
    classes: ["bg-indigo-950", "text-indigo-200"]
  }]
);
// "dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200"

prefixClasses(
  "has-checked",
  [
    "bg-indigo-50",
    "text-indigo-900",
    "ring-indigo-200",
    {
      variant: "dark",
      classes: ["bg-indigo-950", "text-indigo-200", "ring-indigo-900"]
    }
  ]
);
// "has-checked:bg-indigo-50 has-checked:text-indigo-900 has-checked:ring-indigo-200 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900"

traits

Generates CSS class names with data attributes for a part of an anatomy.

Parameters

• options:
  • class: The type of the input class value, which can be a string, number, array, or object (ClassValue).
  • className: The type of the input class value, which can be a string, number, array, or object (ClassValue).
  • data: An interface defining the shape of the data attributes (Record<string, any>).

Examples

import type { Traits } from "jade-garden";
import { traits } from "jade-garden/class-utils";

const data: Traits<{ disabled: boolean }> = {
  disabled: { true: "is-disabled", false: "is-enabled" }
};

traits({ data })
// "data-[disabled=true]:is-disabled data-[disabled=false]:is-enabled";

traits({ className: ["bg-blue-500", "size-4"], data })
// "data-[disabled=true]:is-disabled data-[disabled=false]:is-enabled bg-blue-500 size-4";