import type { CSSInterpolation } from "@emotion/css"; import type { FalsyValue, Style } from "../main"; import { defaultModifiers } from "../defaultModifiers"; export declare type DefaultModifierKey = keyof typeof defaultModifiers; export declare type ColorSwatch = Partial, string>>; export declare type ColorScheme = { [key: string]: ColorSwatch; }; export declare type Shading = "default" | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; export interface CombinableHandler { (param: P1, context?: VariantContext): CSSInterpolation; combineWith(pattern: RegExp, other: (param: P2, context: VariantContext) => CSSInterpolation): CombinableHandler; } export declare type Rule = Style | ((param: any) => CSSInterpolation); export interface WithModifiers { /** * create dynamic rules with specified names and modifiers * ```js * sheet({ * ...withModifiers('bordered', () => ({ borderWidth: 1 })) * }); * * // generated rules: * bordered: { borderWidth: 1 } * hover_bordered: { borderWidth: 1 } * active_bordered: { borderWidth: 1 } * ... and so on * // please refer this link to see list of modifiers * // https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference * * // this means the div has borders when mouse is over or it has active status *
* ``` */ | Variants, TPrefix extends string>(prefix: TPrefix | TPrefix[], rule: TRule): DynamicRule; | Variants, TPrefix extends string, T1 extends string>(prefix: TPrefix | TPrefix[], rule: TRule, p1: readonly T1[]): DynamicRuleWithKey; | Variants, TPrefix extends string, T1 extends string, T2 extends string>(prefix: TPrefix | TPrefix[], rule: TRule, p1: readonly T1[], p2: readonly T2[]): DynamicRuleWithKey; | Variants, TPrefix extends string, T1 extends string, T2 extends string, T3 extends string>(prefix: TPrefix | TPrefix[], rule: TRule, p1: readonly T1[], p2: readonly T2[], p3: readonly T3[]): DynamicRuleWithKey; } export interface WithValues { (group: TGroup[], handler: (item: any, context: VariantContext) => CSSInterpolation): { [key in TGroup]: (value: any, context: VariantContext) => CSSInterpolation; }; (group: TGroup, handler: (item: any, context: VariantContext) => CSSInterpolation): { [key in keyof TGroup]: (value: TValue, context: VariantContext) => CSSInterpolation; }; } export declare type Spacings = Record; export declare type Modifiers = Record; export declare type TextSizes = Record; export interface PresetOptions { modifiers?: TModifiers; } declare const createPreset: ({ modifiers, }?: PresetOptions) => { withValues: WithValues; withColors: (colors: TScheme, handler: (color: string, context: VariantContext) => CSSInterpolation) => CombinableHandler>; withVariants: (variants: TVariants) => CombinableHandler | VariantParam[]>; withModifiers: WithModifiers; modifiers: TModifiers; }; export declare type MetaOptions = { variants?: any; description?: string; }; export declare const meta: (func: T, { variants }: MetaOptions) => T; declare const createSwatch: (mainColor: string, lighters?: string[], darkers?: string[]) => Partial>; export interface VariantContext { key?: string; path?: string[]; sides?: Side[]; withSides(name: false, styles: (side: Side) => CSSInterpolation, noSideStyles?: () => CSSInterpolation): Record; withSides(name: string | ((formattedSide: string, side: Exclude) => string), styles: (name: string) => CSSInterpolation, noSideStyles?: () => CSSInterpolation): Record; withKey(keyMap: Record, styles: (name: string) => CSSInterpolation, noSideStyles?: () => CSSInterpolation): Record; } export declare type Variants = { [key: string]: (value: any, context: VariantContext) => CSSInterpolation | true; }; export declare type VariantParamWithModifier = { [key in TModifer | "$" | `${string}&${string}`]?: VariantParam | VariantParam[] | VariantParamWithModifier; }; export declare type DynamicRuleMapping = TRule extends Function ? TRule : TRule extends Variants ? (param: VariantParam | VariantParam[] | VariantParamWithModifier) => any : never; export declare type DynamicRuleProps = { [key in TKey]: DynamicRuleMapping; }; export declare type DynamicRule = DynamicRuleProps; export declare type DynamicRuleWithKey = DynamicRuleProps; export declare type SpecialSide = "X" | "Y" | "H" | "V" | "--"; export declare type Side = /** * left */ "L" /** * top */ | "T" /** * right */ | "R" /** * bottom */ | "B" | SpecialSide; export declare type VariantParam = (TVariants["$param"] extends (values: Array) => any ? T : Exclude | (TVariants["$number"] extends Function ? number | `${number}` : never) | (TVariants["$fraction"] extends Function ? `${number}/${number}` : never) | (TVariants["$custom"] extends (value: infer T) => any ? T : never) | (TVariants["$default"] extends Function ? true : never) | (TVariants["$sides"] extends Function ? Side | Side[] : never) | (TVariants["$xy"] extends Function ? "X" | "Y" | ("X" | "Y")[] : never)) | FalsyValue; export declare type ColorSchemeParam = keyof TScheme | `${string & keyof TScheme}-${number}` | `${string & keyof TScheme}-${number}/${number}` | `${string & keyof TScheme}/${number}`; declare const withModifiers: WithModifiers, withVariants: (variants: TVariants) => CombinableHandler | VariantParam[]>, withColors: (colors: TScheme, handler: (color: string, context: VariantContext) => CSSInterpolation) => CombinableHandler>, withValues: WithValues; export { createSwatch, withModifiers, withVariants, withColors, withValues, createPreset, };