Autotyping for both slots and className

[omarkhatibco]

I would like to share with you how you could build a component and allow the user to easily override the types without having to type each className for each slot.

so I have this tv function, we will export both CircularProgressVariants and CircularProgressSlots

note here that the slots are exported using typeof circularProgressStyleFn.slots

export const circularProgressStyleFn = tv({
	slots: {
		base: 'fy-circular-progress text-primary relative h-9 w-9',
		tracker: 'fy-circular-progress__svg absolute inset-0 -rotate-90',
	},
})

export type CircularProgressVariants = VariantProps<typeof circularProgressStyleFn>

export type CircularProgressSlots = typeof circularProgressStyleFn.slots

now your component should look like this:

import { FC } from 'react'
import { ClassValue } from 'tailwind-variants'

import {
	CircularProgressSlots,
	CircularProgressVariants,
	circularProgressStyleFn,
} from './CircularProgress.css'

export type WithTwClassName<P = unknown, S = undefined> = P & {
	className?: S extends undefined ? ClassValue : Partial<Record<keyof S, ClassValue>>
}

export type CircularProgressProps = CircularProgressVariants &
	WithTwClassName<
		{
			min?: number
			max?: number
			value?: number
		},
		CircularProgressSlots
	>

export const CircularProgress: FC<CircularProgressProps> = ({ className }) => {
	const { base, tracker } = circularProgressStyleFn({})

	return (
		<div className={base({ class: className?.base })}>
			<div className={tracker({ class: className?.tracker })}></div>
		</div>
	)
}

now the type of className would be

Partial<Record<"base" | "track" , ClassValue>> | undefined

and if there are no slots you could omit CircularProgressSlots and className would be ClassValue