Added transient config option

docs/docs/add-variants.md

@@ -66,6 +66,50 @@ type CheckboxProps = W.infer<typeof Checkbox>;
 // CheckboxProps['color'] is 'gray' | 'red' | undefined
 ```
 
+## Transient Variants
+
+Sometimes you want to pass a variant that is not a custom component prop. You can do that with `transient` option. This is useful if you want a pass a variable only for styling purposes to variant.
+
+```typescript
+import { w, W } from 'windstitch';
+
+const CustomComponent: React.FC<{
+  className: string;
+  active?: boolean;
+}> = props => <p {...props}>{props.active ? "I'm active" : "I'm inactive"}</p>;
+
+const StyledComponent = w(CustomComponent, {
+  variants: {
+    active: (yes: boolean) => (yes ? 'text-indigo-500' : 'text-white'),
+  },
+  transient: ['active'],
+});
+
+<StyledComponent active={true} />;
+// Renders <p class="text-indigo-500">I'm inactive</p>
+```
+
+If `transient` options is not set, the variant will be passed to the component as a prop, sometimes resulting in an HTML error.
+
+```typescript
+import { w, W } from 'windstitch';
+
+const CustomComponent: React.FC<{
+  className: string;
+  active?: boolean;
+}> = props => <p {...props}>{props.active ? "I'm active" : "I'm inactive"}</p>;
+
+const StyledComponent = w(CustomComponent, {
+  variants: {
+    active: (yes: boolean) => (yes ? 'text-indigo-500' : 'text-white'),
+  },
+});
+
+<StyledComponent active={true} />;
+// Renders <p class="text-indigo-500">I'm active</p>,
+// but gives a warning: "Received `true` for a non-boolean attribute `active`" in the console
+```
+
 ## Reusing styles
 
 As prop types are inferred by your variants shape, you can easily reuse styles across components.

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/styled.tsx

@@ -6,11 +6,25 @@ import { evaluateClassName } from './utils';
 
 export const styled: W.Styled = function(
   component,
-  { className: defaultClassName, variants, defaultProps, defaultVariants }
+  {
+    className: defaultClassName,
+    variants,
+    transient,
+    defaultProps,
+    defaultVariants,
+  }
 ) {
   const overrideVariantProps = variants
     ? Object.fromEntries(Object.keys(variants).map(key => [key, undefined]))
     : {};
+  const overrideTransientProps =
+    transient && variants
+      ? Object.fromEntries(
+          Object.keys(variants)
+            .filter(key => transient.includes(key))
+            .map(key => [key, undefined])
+        )
+      : {};
   const Component = <As extends ElementType>(
     { as: asProp, ...props }: W.StyledProps<As, any, any>,
     ref: any
@@ -22,7 +36,7 @@ export const styled: W.Styled = function(
         {...defaultProps}
         {...props}
         // remove all variants props if the component is a tag name
-        {...(isTag ? overrideVariantProps : {})}
+        {...(isTag ? overrideVariantProps : overrideTransientProps)}
         ref={isTag ? ref : undefined}
         className={
           evaluateClassName(

src/types.ts

@@ -64,6 +64,7 @@ export interface ComponentConfig<
 > {
   className?: string;
   variants?: Variants;
+  transient?: (keyof Variants)[];
   defaultVariants?: DefaultVariants;
   defaultProps?: Partial<
     InferAnyComponentProps<ToIntrinsicElementIfPossible<DefaultAs>>