Feat: Support responsive variants

Would be great to support responsive variants, something like:

<ImageParentSkeletonComponent color='md:green lg:red' />

or

<ImageParentSkeletonComponent mdColor='green' lgColor='red' />

[vinpac]

Hey @enyelsequeira . This is still not added to the library. I will work on it as soon as possible. I was working on a conflicting classnames which have just being published as a Pull Request

[enyelsequeira]

Hey @AbdallahAbis . Still thinking about this. The idea behind windstitch is to provide a way to control when classnames are applied to a component based solely on variants. Adding breakpoints would create a new layer of consideration when applying a classname.

Maybe we can abstract that from the main package into its own package. Like:

import { responsive } from '@windstich/responsive'

const variant = responsive({
  xs: 0,
  sm: 480,
  md: 700,
  lg: 1000
})

const Button = w.button('', {
  variants: {
    color: responsive({
      green: 'bg-green-500',
      red: 'bg-red-500'
    })
  }
})

function Home () {
  return <>
     <Button color="green" />
     <Button color={{ xs: 'green', sm: 'green', lg: 'red' }} />
  </>
}

The responsive function could look like this:

function responsive<Breakpoints extends Record<string, number>>(breakpoints: Breakpoints) {
  return function variant<Variants extends Record<string, string>>(variants: Variants) {
    return (value: keyof Variants | Record<keyof Breakpoints, keyof Variants>) => {
      // ... calculate the classnames based on the current breakpoint
    }
  }
}

One challenge here would be to update the classname when window size changes. This would require some watcher running.

What do you think?

Hey @vinpac is this the way to handle responsiveness? and is it added in the library already? I am also looking how it would work handling responsiveness