UNPKG

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
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