Is it possible to extend components with variants?

[kaumac]

Hey @cschroeter !
First of all, I want to say thanks again for all the hard work! I saw the documentation page for the colors and that is super helpful.

I need to extend some of the components of park-ui/ark and I'd love to know the best/recommended way.

For example, I want to add a variant like "status" on the Input component to handle form error states. Or a loading state for the Button component, this kind of thing.

My first thought was to create an Input wrapper component that applies different styles to and renders it, but it doesn't feel right. So I'd love to know what's the park-ui recommended way of doing this

[cschroeter]

@kaumac

That are useful additions to Park / Ark UI and we have both FormControl and loadings states on the roadmap.
How ever you can defintively start ahead.

For the Input state I would recommend using build in conditions like invalid to get the job done. The input recipe could look something like this:

import { defineRecipe } from '@pandacss/dev'

export const input = defineRecipe({
  className: 'input',
  base: {},
  defaultVariants: {
    size: 'md',
    variant: 'outline',
  },
  variants: {
    outline: {
      base: {
        _invalid: {
          borderColor: 'border.danger',
          boxShadow: 'danger',
        },
      },
    },
  },
})

For the button it kinda depends how a loading state should look like. If you only require css you can use the same technique - maybe like data-state='loading' and target this with _loading: { } within the button recipe.

[kaumac]

Thanks for the fast reply @cschroeter !

I didn't know about the "data-state=" mapping, that's super useful and sounds like a great temporary solution until park/ark ui have those features. I'll use your suggestion for now.

Definitely looking forward to having those as part of native park-ui!