arto
Version:
Arto is a flexible and type-safe class name management library for building scalable UIs with variants, states, and conditional styling.
52 lines • 2.19 kB
TypeScript
import { VariantValue, ArtoConfig } from './types';
import { Plugin } from './plugin-interface';
/**
* Creates a function that, given user options (selected variants, active states, and an optional context),
* returns a string of classes based on the provided `ArtoConfig`.
*
* @template TVariants - A record of variant keys and their possible values.
* @template TStates - A string union of possible state names.
* @template TContext - Optional context object used by callbacks or plugin logic.
*
* @param config - The main Arto configuration object (e.g., base classes, variants, states, rules).
* @param plugins - Optional array of additional (local) plugins, merged with global ones.
* @returns A function that accepts user options (`variants`, `states`, `context`) and returns a final space-joined string of classes.
*
* @throws {ArtoError} If `config` is nullish or not an object.
*
* @example
* ```ts
* // Basic usage example
* const myArto = arto({
* className: 'btn',
* variants: {
* size: {
* small: 'btn-sm',
* large: 'btn-lg'
* }
* },
* states: {
* disabled: 'disabled'
* }
* })
*
* // Once created, call the returned function with user options:
* const classString = myArto({
* variants: { size: 'small' },
* states: { disabled: true }
* })
* // => 'btn btn-sm disabled'
* ```
*
* @remarks
* The returned function merges `config.defaultVariants` with any user-supplied variants. It also
* collects all active states from `options.states`, integrates global plus local plugins,
* then outputs a deduplicated string of classes. If no global or local plugins are provided,
* only the built-in logic (base, variants, states, and rules) will be used.
*/
export declare const arto: <TVariants extends Record<string, VariantValue> = Record<string, VariantValue>, TStates extends string = string, TContext = unknown>(config: Readonly<ArtoConfig<TVariants, TStates, TContext>>, plugins?: Plugin<TVariants, TStates, TContext>[]) => (options?: {
variants?: Partial<TVariants>;
states?: Partial<Record<TStates, boolean>>;
context?: TContext;
}) => string;
//# sourceMappingURL=arto.d.ts.map