Usage
sva
Learn how to style your components with sva functions.
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
options:slots: slots allow you to separate a component into multiple parts. (Record<string, ClassValue>).name: the name of the component that is of typestring(required for use ingetClassesandunplugin-jade-garden).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.
Examples
basic.ts
import { sva } from "jade-garden/sva";
const card = sva({
slots: {
base: "md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-gray-900",
avatar:
"w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto drop-shadow-lg",
wrapper: "flex-1 pt-6 md:p-8 text-center md:text-left space-y-4",
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"
}
});
const { base, avatar, wrapper, description, infoWrapper, name, role } = card();
createSVA
Creates a slots variants authority (sva) function with a custom merge function.
Parameters
Examples
sva.ts
import { cn, createSVA, type MergeFn } from "jade-garden";
import { twMerge } from "tailwind-merge";
import { buttonConfig } from "./button.ts";
const svaCN = createSVA(cn);
const alertCN = svaCN(buttonConfig)({ variant: "outlined" });
const sva = createSVA();
const alertDefault = sva(buttonConfig)({ severity: "success" });
const svaTM = createSVA(twMerge as MergeFn);
const alertTM = svaTM(buttonConfig)({ size: "xs" });
defineSVA
Defines a type-safe structure for a sva configuration object.
Parameters
options:slots: slots allow you to separate a component into multiple parts. (Record<string, ClassValue>).name: the name of the component that is of typestring(required for use ingetClassesandunplugin-jade-garden).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.
Examples
import { defineSVA } from "jade-garden/sva";
/**
* SVAConfig<{
* root: string;
* title: string;
* message: string;
* }, {
* variant: {
* outlined: {
* root: string;
* };
* filled: {
* root: string;
* };
* };
* severity: {
* error: {};
* success: {};
* };
* size: {
* xs: {};
* sm: {};
* md: {};
* };
* }>
*/
export const alertConfig = defineSVA(["root", "title", "message"])({
name: "alert",
slots: {
root: "rounded py-3 px-5 mb-4",
title: "font-bold mb-1",
message: ""
},
variants: {
variant: {
outlined: {
root: "border"
},
filled: {
root: ""
}
},
severity: {
error: {},
success: {}
},
size: {
xs: {},
sm: {},
md: {}
}
},
compoundSlots: [
{
slots: ["root", "title", "message"],
class: [
"flex",
"flex-wrap",
"truncate",
"box-border",
"outline-none",
"items-center",
"justify-center",
"bg-neutral-100",
"hover:bg-neutral-200",
"active:bg-neutral-300",
"text-neutral-500"
]
},
{
slots: ["root", "title", "message"],
size: "xs",
class: "w-7 h-7 text-xs"
},
{
slots: ["root", "title", "message"],
size: "sm",
class: "w-8 h-8 text-sm"
},
{
slots: ["root", "title", "message"],
size: "md",
class: "w-9 h-9 text-base"
}
],
compoundVariants: [
{
variant: "outlined",
severity: "error",
class: {
root: "border-red-700 dark:border-red-500",
title: "text-red-700 dark:text-red-500",
message: "text-red-600 dark:text-red-500"
}
},
{
variant: "outlined",
severity: "success",
class: {
root: "border-green-700 dark:border-green-500",
title: "text-green-700 dark:text-green-500",
message: "text-green-600 dark:text-green-500"
}
},
{
variant: "filled",
severity: "error",
class: {
root: "bg-red-100 dark:bg-red-800",
title: "text-red-900 dark:text-red-50",
message: "text-red-700 dark:text-red-200"
}
},
{
variant: "filled",
severity: "success",
class: {
root: "bg-green-100 dark:bg-green-800",
title: "text-green-900 dark:text-green-50",
message: "text-green-700 dark:text-green-200"
}
}
],
defaultVariants: {
variant: "filled",
severity: "success"
}
});