sva

You can import sva functions from jade-garden/sva.

sva

Implementation of the slots variants authority (sva) function using the default class merging function (cx).

Parameters

• styleConfig:
  • base: the base classes for each slot Partial<typeof slots[number], ClassValue>.
  • slots: an array of slots for the component string[].
  • variants: variants allow you to create multiple versions of the same component.
  • compoundVariants: compound variants allow you to apply classes to multiple variants at once.
  • compoundSlots: compound slots allow you to apply classes to multiple slots at once.
  • defaultVariants: default variants allow you to set default variants for a component.
• metaConfig:
  • deprecated: adds a deprecated tag and a description if deprecated is a string string | boolean.
  • description: adds a description tag string.
  • name: adds a name tag string.
  • see: adds a see tag string.

Examples

import { sva } from "jade-garden/sva";

const card = sva({
  base: {
    description: "text-md font-medium",
    infoWrapper: "font-medium",
    name: "text-sm text-sky-500 dark:text-sky-400",
    role: "text-sm text-slate-700 dark:text-slate-500"
  },
  slots: ["base", "avatar", "wrapper", "description", "infoWrapper", "name", "role"]
});

const { base, avatar, wrapper, description, infoWrapper, name, role } = card();

createSVA

Creates a slots variants authority (sva) function with a custom merge function.

Parameters

• createOptions:
  • mergeFn: The optional function to merge class names, defaults to cx (MergeFn).
  • prefix: The prefix for the class name. Applied when useStylesheet is set to true.
  • useStylesheet: Determines if the component returns classes for a stylesheet or not. If true the class name generated is a combination of base and variant keys.

Examples

import { cn, createSVA, type MergeFn } from "jade-garden";
import { twMerge } from "tailwind-merge";

import { alert } from "./alert.ts";

const svaCN = createSVA({ mergeFn: cn });
const alertCN = svaCN(alert.styleConfig)({ variant: "outlined" });

const sva = createSVA({
  prefix: "jg",
  useStylesheet: true
});
const alertDefault = sva(alert.styleConfig)({ severity: "success" });

const svaTM = createSVA({ mergeFn: twMerge as MergeFn });
const alertTM = svaTM(alert.styleConfig)({ size: "xs" });