classname-variants 1.4.0 → 1.4.1

package/README.md

@@ -2,6 +2,15 @@
 
 Library to create type-safe components that render their class name based on a set of variants.
 
+## Features
+
+- ⚛️ Supports React, Preact and vanilla DOM
+- 🛡️ Fully type-safe and excellent auto completion support
+- ✅ Supports both optional and required variants
+- 🪶 Light-weight without any dependencies
+
+![npm bundle size](https://img.shields.io/bundlephobia/minzip/classname-variants)
+
 # Examples
 
 Here is an example that uses React and Tailwind CSS:
@@ -138,7 +147,7 @@ The `compoundVariants` option can be used to apply class names based on a combin
 
 ### Default variants
 
-You can use the `defaultVariants` property to set defaults:
+If you define a variant it becomes a required prop unless you specify a default (or the variant is boolean). You can use the `defaultVariants` property to specify defaults:
 
 ```ts
 {

package/lib/example/preact.d.ts

@@ -2,7 +2,7 @@
 import { h } from "preact";
 export declare const ExpectErrors: <As extends keyof h.JSX.IntrinsicElements | import("preact").ComponentType<any> = "div">(props: {
     as?: As | undefined;
-} & Omit<import("preact").ComponentProps<As>, "as"> & {
+} & Omit<import("preact").ComponentProps<As>, "as" | "color"> & {
     color: "neutral" | "accent";
 } & {}) => import("preact").VNode<{}> | null;
 export declare function WithErrors(): h.JSX.Element;

package/lib/example/preact.js

@@ -13,6 +13,10 @@ const Button = styled("button", {
             neutral: "bg-slate-500 hover:bg-slate-400",
             accent: "bg-teal-500 hover:bg-teal-400",
         },
+        size: {
+            small: "text-sm",
+            medium: "text-md",
+        },
         outlined: {
             true: "border-2",
         },
@@ -52,16 +56,17 @@ export const ExpectErrors = styled("div", {
 });
 export function WithErrors() {
     return (h("div", null,
-        h(Button, { foo: true }, "unknown property"),
+        h(Button, { foo: true, size: "medium" }, "unknown property"),
         h(Card, { foo: true }, "Unknown property"),
-        h(Button, { color: "foo" }, "Invalid variant")));
+        h(Button, { size: "medium", color: "foo" }, "Invalid variant"),
+        h(Button, null, "Missing size")));
 }
 export function PreactApp() {
     return (h("div", { className: "flex justify-center items-center pt-8 gap-4 flex-wrap" },
-        h(Button, { onClick: console.log }, "Accent"),
-        h(Button, { rounded: true }, "Neutral + Rounded"),
-        h(Button, { color: "accent", outlined: true }, "Accent + Outlined"),
-        h(Button, { color: "accent", disabled: true }, "Disabled"),
+        h(Button, { size: "medium", onClick: console.log }, "Accent"),
+        h(Button, { size: "medium", rounded: true }, "Neutral + Rounded"),
+        h(Button, { size: "medium", color: "accent", outlined: true }, "Accent + Outlined"),
+        h(Button, { size: "medium", color: "accent", disabled: true }, "Disabled"),
         h(TitleCard, { title: "Hello" }),
         h(Card, null,
             h("h1", null, "Hello"),

package/lib/example/react.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 export declare const ExpectErrors: <As extends React.ElementType<any> = "div">(props: {
     as?: As | undefined;
-} & Omit<React.ComponentProps<As>, "as"> & {
+} & Omit<React.ComponentProps<As>, "as" | "color"> & {
     color: "neutral" | "accent";
 } & {}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
 export declare function WithErrors(): JSX.Element;

package/lib/example/react.js

@@ -12,6 +12,10 @@ const Button = styled("button", {
             neutral: "bg-slate-500 hover:bg-slate-400",
             accent: "bg-teal-500 hover:bg-teal-400",
         },
+        size: {
+            small: "text-sm",
+            medium: "text-md",
+        },
         outlined: {
             true: "border-2",
         },
@@ -51,17 +55,18 @@ export const ExpectErrors = styled("div", {
 });
 export function WithErrors() {
     return (React.createElement("div", null,
-        React.createElement(Button, { foo: true }, "unknown property"),
+        React.createElement(Button, { foo: true, size: "medium" }, "unknown property"),
         React.createElement(Card, { foo: true }, "Unknown property"),
-        React.createElement(Button, { color: "foo" }, "Invalid variant"),
+        React.createElement(Button, { size: "medium", color: "foo" }, "Invalid variant"),
+        React.createElement(Button, null, "Missing size"),
         React.createElement(Card, { as: "b", href: "https://example.com" }, "B tags don't have a href attribute")));
 }
 export function ReactApp() {
     return (React.createElement("div", { className: "flex justify-center items-center pt-8 gap-4 flex-wrap" },
-        React.createElement(Button, { onClick: console.log }, "Accent"),
-        React.createElement(Button, { rounded: true }, "Neutral + Rounded"),
-        React.createElement(Button, { color: "accent", outlined: true }, "Accent + Outlined"),
-        React.createElement(Button, { color: "accent", disabled: true }, "Disabled"),
+        React.createElement(Button, { size: "medium", onClick: console.log }, "Accent"),
+        React.createElement(Button, { size: "medium", rounded: true }, "Neutral + Rounded"),
+        React.createElement(Button, { size: "medium", color: "accent", outlined: true }, "Accent + Outlined"),
+        React.createElement(Button, { size: "medium", color: "accent", disabled: true }, "Disabled"),
         React.createElement(TitleCard, { title: "Hello" }),
         React.createElement(Card, null,
             React.createElement("h1", null, "Hello"),

package/lib/preact.d.ts

@@ -19,16 +19,8 @@ type VariantsOf<T, V> = T extends VariantsConfig ? V : {};
 type AsProps<T extends ElementType = ElementType> = {
     as?: T;
 };
-type PolymorphicComponentProps<T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as">;
-export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C, C["variants"]>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & (C["variants"] extends infer T_1 extends Variants ? { [K in keyof T_1 as K extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
-    true: any;
-} | {
-    false: any;
-} ? K_1 : never]: C["variants"][K_1]; } : never) | keyof (C["variants"] extends infer T_3 extends Variants ? { [K_2 in keyof T_3 as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } : never) ? never : K]: (C["variants"] extends infer T_4 extends Variants ? { [K_3 in keyof T_4]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; } : never)[K]; } : never) & (C["variants"] extends infer T_5 extends Variants ? { [K_4 in keyof T_5 as K_4 extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
-    true: any;
-} | {
-    false: any;
-} ? K_1 : never]: C["variants"][K_1]; } : never) | keyof (C["variants"] extends infer T_3 extends Variants ? { [K_2 in keyof T_3 as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } : never) ? K_4 : never]?: (C["variants"] extends infer T_4 extends Variants ? { [K_3 in keyof T_4]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; } : never)[K_4] | undefined; } : never)) => VNode | null;
+type PolymorphicComponentProps<V, T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as" | keyof V> & V;
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C, C["variants"]>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: PolymorphicComponentProps<VariantOptions<C, C["variants"]>, As>) => VNode | null;
 /**
  * No-op function to mark template literals as tailwind strings.
  */

package/lib/react.d.ts

@@ -17,16 +17,8 @@ type VariantsOf<T, V> = T extends VariantsConfig ? V : {};
 type AsProps<T extends ElementType = ElementType> = {
     as?: T;
 };
-type PolymorphicComponentProps<T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as">;
-export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C, C["variants"]>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & (C["variants"] extends infer T_1 extends Variants ? { [K in keyof T_1 as K extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
-    true: any;
-} | {
-    false: any;
-} ? K_1 : never]: C["variants"][K_1]; } : never) | keyof (C["variants"] extends infer T_3 extends Variants ? { [K_2 in keyof T_3 as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } : never) ? never : K]: (C["variants"] extends infer T_4 extends Variants ? { [K_3 in keyof T_4]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; } : never)[K]; } : never) & (C["variants"] extends infer T_5 extends Variants ? { [K_4 in keyof T_5 as K_4 extends keyof (C["variants"] extends infer T_2 extends Variants ? { [K_1 in keyof T_2 as C["variants"][K_1] extends {
-    true: any;
-} | {
-    false: any;
-} ? K_1 : never]: C["variants"][K_1]; } : never) | keyof (C["variants"] extends infer T_3 extends Variants ? { [K_2 in keyof T_3 as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } : never) ? K_4 : never]?: (C["variants"] extends infer T_4 extends Variants ? { [K_3 in keyof T_4]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; } : never)[K_4] | undefined; } : never)) => ReactElement | null;
+type PolymorphicComponentProps<V, T extends ElementType> = AsProps<T> & Omit<ComponentProps<T>, "as" | keyof V> & V;
+export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = VariantsOf<C, C["variants"]>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: PolymorphicComponentProps<VariantOptions<C, C["variants"]>, As>) => ReactElement | null;
 /**
  * No-op function to mark template literals as tailwind strings.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",