I have this component:

const Text = w.p(
  ``,
  {
    variants: {
      size: {
        'base' : 'text-base',
      },
      weight: {
        normal: 'font-normal',
      },
      variant: {
        h1: 'font-bold text-8xl',
       base: 'font-normal text-base',
      },
    },
    defaultVariants: {
      variant: 'base',
      weight: 'normal',
      size: 'base',
    }
  }
);

I render this:

<Text variant="h1">Heading 1</Text>

the output I get:

<h1 class="text-base font-normal font-bold text-8xl">Heading 1</h1>

The issue here is the output has conflicting classNames and it shows a normal font instead of bold.

The question would be, how can I make the variant reference the size and weight so specifying the variant acts just like specifying both weight and size and I won't get those conflicting classNames? or how can I make the defaultVariants not apply if the variant prop is specified?

the expected result is

I render this:

<Text variant="h1">Heading 1</Text>

The output should be:

<h1 class="font-bold text-8xl">Heading 1</h1>

Hey,
When I change base styles or variant styles I need to refresh the page to see changes.

Nextjs: ^13.0.5
Tailwindscss: ^3.2.4

'use client'
import { w } from 'windstitch';

const Button = w.button('bg-red-500', {
  variants: {
    color: {
      red: 'text-red-500',
      blue: 'text-blue-500',
    },
    size: {
      small: 'text-sm',
      large: 'text-lg',
    },
  },
  defaultVariants: {
    size: 'small',
  },
});

export default Button

Add transient option to avoid problems with passing values to the HTML if not intended.

I didn't see any links to a discord or slack, so I'll just say it here. Really love this repo and I use it in my personal projects, great work!

Feel free to close this issue

Hello,

I have been testing a few libraries out to see which one is the more robust, or the most stable in order to create different variants, I have used CVA, and I liked it, however it is missing some of the functionality that you have in this library, like the fact that you can create record function variants, which I think are extremely powerful for some edge cases, the thing, that I think might be cool to add to it would be the correct typing and allowing the user to create a function like className if they are using the ClassName creator

so ideally it would be nice, to have something like this api

I think this would be a really good enhancement for the library, at the moment if I were to try something similar it does not work, with TS

Thoughts 🤔 ?

Would the following be possible?

const craftInput = cva(
  [...],
  {
    variants: {
      size: {
        medium: ['text-base', 'h-11', 'px-3'],
      },
      iconLeading: {
        true: 'pl-10',
      },
    },
  },
);

This is a cva example but would migrate to WindStitches if it would work.

I am trying to create a medium input but when iconLeading is true I would like the padding to end up like this pr-3 pl-10 which is the result of px-3 + pl-10.

Would WindStitches be aware a px-3 is applied and to override only the left part of the padding?

Hey, love the idea of this package, I was wondering if you knew a way to get tailwind intellisense working with the strings in this package

Would be cool if some values can be passed as props and be concatinated with a className:

<Text ellipsizeMode="tail" numOfLines={2}>Heading 1</Text>

I want to get the value of the prop numOfLines so I can use it like so:

export const TextComponent = w.p(
  ``,
  {
    variants: {
      ellipsizeMode: {
        tail: `truncate line-clamp-${numOfLines}`,
        clip: 'text-clip'
      }
  }
)

or something like this:

numberOfLinesClamp: (num: number) => `line-clamp-${num}`,

Today it is only possible to create one level component.
Should be possible to create nested combinations with the same initial parameters?

Ex:

const Box = w.div("color-red", { ...config1 }).nest.div("border-2", { ...config2})

and then when use, any parameters will be reflected to all nested components:

and variant should reach config1 and config2.

Would be great to support responsive variants, something like:

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

or

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

I'm trying to use windstitch with Tailwind and next 13 but when I used W.infer, I got the following error: node_modules/windstitch/dist/types"' has no exported member named 'infer'. Did you mean 'Infer'?

The problem occurs when I have to map items where each item must have a unique key and that element has a child element, I get the typescript error as you can see in the example below:

If I dont pass key prop works fine:

My component:

Hey folks,
Sorry for opening an issue for this. I couldn't find discussions on the repo, so I had to post this as an issue.

I have this working className

className={classNames(
  "whitespace-nowrap px-3 py-4 text-sm",
  (!isBold && !hasDarkMode) && "text-gray-500",
  isBold && "font-medium text-gray-900",
   hasDarkMode ? (isBold ? "dark:text-white" : "dark:text-gray-300") : ""
 )}

And I didn't know how to convert it to Windstitch, I tried using compound variants, but that didn't work for me.

Thanks.

import { FunctionComponent } from "preact";
import { w, W } from "windstitch";

const Title = w.div("leading-3 tracking-[0.066px]");

const Value = w.div("text-[15px] font-semibold tracking-[-.5px]", {
  variants: {
    color: {
      green: "text-emerald-500",
      default: "text-zinc-800",
    },
  },
  defaultVariants: {
    color: "default",
  },
});
type ValueProps = W.Infer<typeof Value>;

interface Props {
  title: string;
  green: ValueProps["color"];
  value: string;
  subvalue?: string;
}

export const Column: FunctionComponent<Props> = ({
  title,
  green,
  value,
  subvalue,
}) => {
  return (
    <div className="flex-col justify-center items-start gap-0.5 inline-flex font-['SF Pro Text'] font-normal text-slate-500 text-[11px]">
      <Title>{title}</Title>
      <Value color={green}>{value}</Value>
      {subvalue ? <Title>{subvalue}</Title> : null}
    </div>
  );
};

I got error on <Value color:

Type '{ children: string; color: "green" | "default" | undefined; }' is not assignable to type 'IntrinsicAttributes & { as?: "div" | undefined; } & GetPropsWithoutVariantsKeys<"div", { color: { green: string; default: string; }; }> & Omit<...> & Partial<...>'.
  Property 'children' does not exist on type 'IntrinsicAttributes & { as?: "div" | undefined; } & GetPropsWithoutVariantsKeys<"div", { color: { green: string; default: string; }; }> & Omit<...> & Partial<...>'