responsive-class-variants/types.ts at main · benebene84/responsive-class-variants · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
export type DefaultBreakpoints = "sm" | "md" | "lg" | "xl";
export type Breakpoints = DefaultBreakpoints;

export type BreakpointsMap<V, B extends string = DefaultBreakpoints> = {
	initial: V;
} & Partial<{
	[breakpoint in B]: V;
}>;

export type ResponsiveValue<T, B extends string = DefaultBreakpoints> =
	| T
	| BreakpointsMap<T, B>;

type ClassValue = string | ReadonlyArray<string>;

type ValueType = ClassValue | Record<string, ClassValue>;

type VariantValue = Record<string, ValueType>;
type VariantConfig = Record<string, VariantValue>;

type StringBoolean = "true" | "false";
type BooleanVariant = Partial<
	Record<StringBoolean, ClassValue | Record<string, ClassValue>>
>;

type VariantPropValue<T, B extends string> = T extends BooleanVariant
	? ResponsiveValue<boolean, B> | undefined
	: T extends Record<string, unknown>
		? ResponsiveValue<keyof T, B>
		: never;

type VariantPropsBase<T extends VariantConfig, B extends string> = {
	[K in keyof T]?: VariantPropValue<T[K], B>;
};

type VariantProps<T extends VariantConfig, B extends string> = VariantPropsBase<
	T,
	B
> & {
	className?: string;
	class?: string;
};

// Slot configuration types
type SlotConfig = ClassValue;

type SlotsConfig<S extends Record<string, SlotConfig>> = S;

type CompoundVariantClassValue<S extends string> =
	| string
	| Partial<Record<S, ClassValue>>;

type CompoundVariantWithSlots<
	T extends VariantConfig,
	S extends string,
	B extends string,
> = Partial<Omit<VariantProps<T, B>, "class" | "className">> & {
	class?: CompoundVariantClassValue<S>;
	className?: CompoundVariantClassValue<S>;
};

/**
 * Optional tuple of breakpoint names, used only so TypeScript can infer `B`.
 * It is not read at runtime; omit it to use {@link DefaultBreakpoints}.
 */
type BreakpointsInference<B extends string> = readonly B[];

type ResponsiveClassesConfigBase<T extends VariantConfig, B extends string> = {
	base: string;
	variants?: T;
	compoundVariants?: Partial<VariantProps<T, B>>[];
	breakpoints?: BreakpointsInference<B>;
	onComplete?: (classes: string) => string;
};

type ResponsiveClassesConfigSlots<
	T extends VariantConfig,
	S extends Record<string, SlotConfig>,
	B extends string,
> = {
	slots: SlotsConfig<S>;
	variants?: T;
	compoundVariants?: CompoundVariantWithSlots<T, keyof S & string, B>[];
	breakpoints?: BreakpointsInference<B>;
	onComplete?: (classes: string) => string;
};

type ResponsiveClassesConfig<T extends VariantConfig, B extends string> =
	| ResponsiveClassesConfigBase<T, B>
	| ResponsiveClassesConfigSlots<T, Record<string, SlotConfig>, B>;

export type {
	ClassValue,
	CompoundVariantClassValue,
	CompoundVariantWithSlots,
	ResponsiveClassesConfig,
	ResponsiveClassesConfigSlots,
	SlotConfig,
	SlotsConfig,
	VariantConfig,
	VariantProps,
	VariantPropValue,
	VariantValue,
};