UNPKG

3.72 kBTypeScriptView Raw
1import { CSSRules, Directive, Token } from 'twind';
2export * from 'twind/css';
3
4/**
5 * [[include:src/style/README.md]]
6 *
7 * @packageDocumentation
8 * @module twind/style
9 */
10
11declare type StrictMorphVariant<T> = T extends number ? `${T}` | T : T extends 'true' ? true | T : T extends 'false' ? false | T : T;
12declare type MorphVariant<T> = T extends number ? `${T}` | T : T extends 'true' ? boolean | T : T extends 'false' ? boolean | T : T extends `${number}` ? number | T : T;
13declare type StyleToken = string | CSSRules | Directive<CSSRules>;
14declare type VariantsOf<T> = T extends Style<infer Variants> ? {
15 [key in keyof Variants]: MorphVariant<keyof Variants[key]>;
16} : never;
17declare type DefaultVariants<Variants> = {
18 [key in keyof Variants]?: StrictMorphVariant<keyof Variants[key]> | (Record<string, StrictMorphVariant<keyof Variants[key]>> & {
19 initial?: StrictMorphVariant<keyof Variants[key]>;
20 });
21};
22declare type VariantsProps<Variants> = {
23 [key in keyof Variants]?: MorphVariant<keyof Variants[key]> | (Record<string, MorphVariant<keyof Variants[key]>> & {
24 initial?: MorphVariant<keyof Variants[key]>;
25 });
26};
27declare type VariantMatchers<Variants> = {
28 [key in keyof Variants]?: StrictMorphVariant<keyof Variants[key]>;
29};
30interface StyleConfig<Variants, BaseVariants = {}> {
31 base?: StyleToken;
32 variants?: Variants & {
33 [variant in keyof BaseVariants]?: {
34 [key in keyof BaseVariants[variant]]?: StyleToken;
35 };
36 };
37 defaults?: DefaultVariants<Variants & BaseVariants>;
38 matches?: (VariantMatchers<Variants & BaseVariants> & {
39 use: StyleToken;
40 })[];
41}
42interface StyleFunction {
43 <Variants>(config?: StyleConfig<Variants>): Style<Variants> & string;
44 <Variants, BaseVariants>(base: Style<BaseVariants>, config?: StyleConfig<Variants, BaseVariants>): Style<BaseVariants & Variants> & string;
45}
46interface BaseStyleProps {
47 tw?: Token;
48 css?: CSSRules;
49 class?: string;
50 className?: string;
51}
52declare type StyleProps<Variants> = VariantsProps<Variants> & BaseStyleProps;
53interface Style<Variants> {
54 /**
55 * CSS Class associated with the current component.
56 *
57 * ```jsx
58 * const button = style({
59 * base: {
60 * color: "DarkSlateGray"
61 * }
62 * })
63 *
64 * <div className={tw(button())} />
65 * ```
66 * <br />
67 */
68 (props?: StyleProps<Variants>): Directive<CSSRules>;
69 /**
70 * CSS Selector associated with the current component.
71 *
72 * ```js
73 * const button = style({
74 * base: {
75 * color: "DarkSlateGray"
76 * }
77 * })
78 *
79 * const article = style({
80 * base: {
81 * [button]: { boxShadow: "0 0 0 5px" }
82 * }
83 * })
84 * ```
85 */
86 toString(): string;
87 /**
88 * CSS Class associated with the current component.
89 *
90 * ```js
91 * const button = style({
92 * base: {
93 * color: "DarkSlateGray"
94 * }
95 * })
96 *
97 * <div className={button.className} />
98 * ```
99 */
100 readonly className: string;
101 /**
102 * CSS Selector associated with the current component.
103 *
104 * ```js
105 * const button = style({
106 * base: {
107 * color: "DarkSlateGray"
108 * }
109 * })
110 *
111 * const Card = styled({
112 * base: {
113 * [Button.selector]: { boxShadow: "0 0 0 5px" }
114 * }
115 * })
116 * ```
117 */
118 readonly selector: string;
119}
120declare const style: StyleFunction;
121
122export { BaseStyleProps, DefaultVariants, MorphVariant, StrictMorphVariant, Style, StyleConfig, StyleFunction, StyleProps, StyleToken, VariantMatchers, VariantsOf, VariantsProps, style };
123//# sourceMappingURL=style.d.ts.map