classname-variants 1.3.0 → 1.3.2

package/README.md

@@ -2,7 +2,7 @@
 
 Stitches-like [variant API](https://stitches.dev/docs/variants) for plain class names.
 
-The library is framework agnostic and can be used with any kind of CSS flavor.
+The library is framework-agnostic and can be used with any kind of CSS flavor.
 
 It is especially useful though if used with [Tailwind](https://tailwindcss.com/) or [CSS Modules](https://github.com/css-modules/css-modules) in combination with React, as it provides some [dedicated helpers](#React) and even allows for a _styled-components_ like API, but with [class names instead of styles](#bonus-styled-components-but-with-class-names-)!
 
@@ -158,14 +158,14 @@ function App() {
 
 Things can be taken even a step further, resulting in a _styled-components_ like way of defining reusable components. Under the hood, this does basically the same as the example above, but also handles _refs_ correctly:
 
-```tsx
-import { styled } from "classname-variants/react";
+```ts
+import { styled, tw } from "classname-variants/react";
 
 const Button = styled("button", {
   variants: {
     size: {
-      small: "text-xs",
-      large: "text-base",
+      small: tw`text-xs`,
+      large: tw`text-base`,
     },
   },
 });
@@ -173,7 +173,7 @@ const Button = styled("button", {
 
 Again, this is not limited to tailwind, so you could do the same with CSS modules:
 
-```tsx
+```ts
 import { styled } from "classname-variants/react";
 import styles from "./styles.module.css";
 
@@ -187,7 +187,21 @@ const Button = styled("button", {
 });
 ```
 
-**NOTE:** You can also style other custom React components as long as they accept a `className` prop.
+> **Note**
+> You can also style other custom React components as long as they accept a `className` prop.
+
+## Styled components without variants
+
+You can also use the `styled` function to create styled components without any variants at all:
+
+```ts
+import { styled } from "classname-variants/react";
+
+const Button = styled(
+  "button",
+  "border-none rounded px-3 font-sans bg-green-600 text-white hover:bg-green-500"
+);
+```
 
 ## Polymorphic components with "as"
 
@@ -195,7 +209,6 @@ If you want to keep all the variants you have defined for a component but want t
 
 ```tsx
 import { styled } from "classname-variants/react";
-import styles from "./styles.module.css";
 
 const Button = styled("button", {
   variants: {
@@ -217,12 +230,12 @@ function App() {
 
 # Tailwind IntelliSense
 
-In order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants config, you have to somehow mark them and configure the plugin accordingly.
+In order to get auto-completion for the CSS classes themselves, you can use the [Tailwind CSS IntelliSense](https://github.com/tailwindlabs/tailwindcss-intellisense) plugin for VS Code. In order to make it recognize the strings inside your variants-config, you have to somehow mark them and configure the plugin accordingly.
 
 One way of doing so is by using tagged template literals:
 
 ```ts
-const tw = String.raw;
+import { variants, tw } from "classname-variants";
 
 const button = variants({
   base: tw`px-5 py-2 text-white`,
@@ -235,26 +248,15 @@ const button = variants({
 });
 ```
 
-```ts
-const tw = String.raw;
-
-const button = variants({
-  base: tw.px(5).py(2).text.white,
-  variants: {
-    color: {
-      neutral: tw.bg.slate(500).hover(tw.bg.slate.400),
-      accent: tw.bg.teal(500).hover(tw.bg.teal(400)),
-    },
-  },
-});
-```
-
 You can then add the following line to your `settings.json`:
 
 ```
 "tailwindCSS.experimental.classRegex": ["tw`(.+?)`"]
 ```
 
+> **Note**
+> The `tw` helper function is just an alias for [`String.raw`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw).
+
 In order to get type coverage even for your Tailwind classes you can use a tool like [tailwind-ts](https://github.com/mathieutu/tailwind-ts).
 
 # License

package/index.html

@@ -11,6 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./example.tsx"></script>
+    <script type="module" src="./src/example.tsx"></script>
   </body>
 </html>

package/lib/index.d.ts

@@ -12,11 +12,11 @@
  *   }
  * }
  */
-export declare type Variants = Record<string, Record<string, string>>;
+export type Variants = Record<string, Record<string, string>>;
 /**
  * Configuration including defaults and compound variants.
  */
-export interface VariantsConfig<V extends Variants> {
+export interface VariantsConfig<V extends Variants = {}> {
     base?: string;
     variants: V;
     compoundVariants?: CompoundVariant<V>[];
@@ -32,7 +32,7 @@ export interface CompoundVariant<V extends Variants> {
 /**
  * Only the boolean variants, i.e. ones that have "true" or "false" as options.
  */
-declare type BooleanVariants<V extends Variants> = {
+type BooleanVariants<V extends Variants> = {
     [K in keyof V as V[K] extends {
         true: any;
     } | {
@@ -42,13 +42,13 @@ declare type BooleanVariants<V extends Variants> = {
 /**
  * Only the variants for which a default options is set.
  */
-declare type DefaultVariants<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type DefaultVariants<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends keyof C["defaultVariants"] ? K : never]: C["variants"][K];
 };
 /**
  * Names of all optional variants, i.e. booleans or ones with default options.
  */
-declare type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
+type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
 /**
  * Possible options for all the optional variants.
  *
@@ -58,7 +58,7 @@ declare type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variant
  *   rounded?: boolean | undefined
  * }
  */
-declare type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends OptionalVariantNames<C> ? K : never]?: OptionsOf<V>[K];
 };
 /**
@@ -68,7 +68,7 @@ declare type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C
  *   size: "small" | "large"
  * }
  */
-declare type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
+type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
     [K in keyof V as K extends OptionalVariantNames<C> ? never : K]: OptionsOf<V>[K];
 };
 /**
@@ -86,20 +86,26 @@ declare type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C
  *   rounded: boolean;
  * }
  */
-declare type OptionsOf<V extends Variants> = {
+type OptionsOf<V extends Variants> = {
     [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
 };
 /**
  * Extracts the possible options.
  */
-export declare type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = RequiredOptions<C> & OptionalOptions<C>;
+export type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = RequiredOptions<C> & OptionalOptions<C>;
 /**
  * Without this conversion step, defaultVariants and compoundVariants will
  * allow extra keys, i.e. non-existent variants.
  * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
  */
-export declare type Simplify<T> = {
+export type Simplify<T> = {
     [K in keyof T]: T[K];
 };
 export declare function variants<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): (props: VariantOptions<C>) => string;
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export declare const tw: (template: {
+    raw: readonly string[] | ArrayLike<string>;
+}, ...substitutions: any[]) => string;
 export {};

package/lib/index.js

@@ -25,3 +25,7 @@ export function variants(config) {
         return res.filter(Boolean).join(" ");
     };
 }
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export const tw = String.raw;

package/lib/react.d.ts

@@ -3,28 +3,34 @@ import { Variants, VariantsConfig, VariantOptions, Simplify } from "./index.js";
 /**
  * Utility type to infer the first argument of a variantProps function.
  */
-export declare type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
+export type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
 /**
  * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
  */
-declare type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = VariantOptions<C> & {
+type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = VariantOptions<C> & {
     className?: string;
 };
 export declare function variantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): <P extends VariantProps<C, C["variants"]>>(props: P) => {
     className: string;
 } & Omit<P, keyof C["variants"]>;
-declare type VariantsOf<T> = T extends VariantsConfig<infer V> ? V : {};
-declare type AsProps<T extends ElementType = ElementType> = {
+type VariantsOf<T, V> = T extends VariantsConfig ? V : {};
+type AsProps<T extends ElementType = ElementType> = {
     as?: T;
 };
-declare 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>>(type: T, config: string | Simplify<C>): <As extends ElementType<any> = T>(props: AsProps<As> & Omit<ComponentProps<As>, "as"> & { [K in keyof C["variants"] as K extends keyof { [K_1 in keyof C["variants"] as C["variants"][K_1] extends {
+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]; } | keyof { [K_2 in keyof C["variants"] as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } ? never : K]: { [K_3 in keyof C["variants"]]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; }[K]; } & { [K_4 in keyof C["variants"] as K_4 extends keyof { [K_1 in keyof C["variants"] as C["variants"][K_1] extends {
+} ? 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]; } | keyof { [K_2 in keyof C["variants"] as K_2 extends keyof C["defaultVariants"] ? K_2 : never]: C["variants"][K_2]; } ? K_4 : never]?: { [K_3 in keyof C["variants"]]: keyof C["variants"][K_3] extends "true" | "false" ? boolean : keyof C["variants"][K_3]; }[K_4] | undefined; }) => ReactElement | null;
+} ? 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;
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export declare const tw: (template: {
+    raw: readonly string[] | ArrayLike<string>;
+}, ...substitutions: any[]) => string;
 export {};

package/lib/react.js

@@ -26,3 +26,7 @@ export function styled(type, config) {
     });
     return Component;
 }
+/**
+ * No-op function to mark template literals as tailwind strings.
+ */
+export const tw = String.raw;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classname-variants",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Variant API for plain class names",
   "author": "Felix Gnass <fgnass@gmail.com>",
   "license": "MIT",
@@ -41,9 +41,10 @@
     "react"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.39",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.6.4"
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^4.9.4"
   }
 }

package/example.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { styled } from "./src/react";
-
-function CustomComponent({
-  title,
-  ...props
-}: {
-  className?: string;
-  title: string;
-}) {
-  return <div {...props}>{title}</div>;
-}
-
-const Card = styled("div", "bg-white p-4 border-2 rounded-lg");
-
-const TitleCard = styled(CustomComponent, "bg-white p-4 border-2 rounded-lg");
-
-const Button = styled("button", {
-  base: "px-5 py-2 text-white disabled:bg-gray-400 disabled:text-gray-300",
-  variants: {
-    color: {
-      neutral: "bg-slate-500 hover:bg-slate-400",
-      accent: "bg-teal-500 hover:bg-teal-400",
-    },
-    outlined: {
-      true: "border-2",
-    },
-    rounded: {
-      true: "rounded-full",
-      false: "rounded-sm",
-    },
-  },
-  compoundVariants: [
-    {
-      variants: { color: "accent", outlined: true },
-      className: "border-teal-600",
-    },
-  ],
-  defaultVariants: {
-    color: "neutral",
-  },
-});
-
-function App() {
-  return (
-    <div className="flex justify-center items-center pt-8 gap-4 flex-wrap">
-      <Button onClick={console.log}>Accent</Button>
-      <Button rounded>Neutral + Rounded</Button>
-      <Button color="accent" outlined>
-        Accent + Outlined
-      </Button>
-      <Button color="accent" disabled>
-        Disabled
-      </Button>
-      <TitleCard title="Hello" />
-      <Card>
-        <h1>Hello</h1>
-        <p>world</p>
-      </Card>
-      <Card as="a" href="https://example.com">
-        Link
-      </Card>
-    </div>
-  );
-}
-
-ReactDOM.render(<App />, document.getElementById("root"));

package/lib/example.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/example.js

@@ -1,45 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { styled } from "./src/react";
-function CustomComponent({ title, ...props }) {
-    return React.createElement("div", { ...props }, title);
-}
-const Card = styled("div", "bg-white p-4 border-2 rounded-lg");
-const TitleCard = styled(CustomComponent, "bg-white p-4 border-2 rounded-lg");
-const Button = styled("button", {
-    base: "px-5 py-2 text-white disabled:bg-gray-400 disabled:text-gray-300",
-    variants: {
-        color: {
-            neutral: "bg-slate-500 hover:bg-slate-400",
-            accent: "bg-teal-500 hover:bg-teal-400",
-        },
-        outlined: {
-            true: "border-2",
-        },
-        rounded: {
-            true: "rounded-full",
-            false: "rounded-sm",
-        },
-    },
-    compoundVariants: [
-        {
-            variants: { color: "accent", outlined: true },
-            className: "border-teal-600",
-        },
-    ],
-    defaultVariants: {
-        color: "neutral",
-    },
-});
-function App() {
-    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(TitleCard, { title: "Hello" }),
-        React.createElement(Card, null,
-            React.createElement("h1", null, "Hello"),
-            React.createElement("p", null, "world"))));
-}
-ReactDOM.render(React.createElement(App, null), document.getElementById("root"));

package/lib/src/index.d.ts

@@ -1,105 +0,0 @@
-/**
- * Definition of the available variants and their options.
- * @example
- * {
- *   color: {
- *     white: "bg-white"
- *     green: "bg-green-500",
- *   },
- *   size: {
- *     small: "text-xs",
- *     large: "text-lg"
- *   }
- * }
- */
-export declare type Variants = Record<string, Record<string, string>>;
-/**
- * Configuration including defaults and compound variants.
- */
-export interface VariantsConfig<V extends Variants> {
-    base?: string;
-    variants: V;
-    compoundVariants?: CompoundVariant<V>[];
-    defaultVariants?: Partial<OptionsOf<V>>;
-}
-/**
- * Rules for class names that are applied for certain variant combinations.
- */
-export interface CompoundVariant<V extends Variants> {
-    variants: Partial<OptionsOf<V>>;
-    className: string;
-}
-/**
- * Only the boolean variants, i.e. ones that have "true" or "false" as options.
- */
-declare type BooleanVariants<V extends Variants> = {
-    [K in keyof V as V[K] extends {
-        true: any;
-    } | {
-        false: any;
-    } ? K : never]: V[K];
-};
-/**
- * Only the variants for which a default options is set.
- */
-declare type DefaultVariants<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
-    [K in keyof V as K extends keyof C["defaultVariants"] ? K : never]: C["variants"][K];
-};
-/**
- * Names of all optional variants, i.e. booleans or ones with default options.
- */
-declare type OptionalVariantNames<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
-/**
- * Possible options for all the optional variants.
- *
- * @example
- * {
- *   color?: "white" | "green",
- *   rounded?: boolean | undefined
- * }
- */
-declare type OptionalOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
-    [K in keyof V as K extends OptionalVariantNames<C> ? K : never]?: OptionsOf<V>[K];
-};
-/**
- * Possible options for all required variants.
- *
- * @example {
- *   size: "small" | "large"
- * }
- */
-declare type RequiredOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = {
-    [K in keyof V as K extends OptionalVariantNames<C> ? never : K]: OptionsOf<V>[K];
-};
-/**
- * Utility type to extract the possible options.
- * Converts "true" | "false" options into booleans.
- *
- * @example
- * OptionsOf<{
- *   size: { small: "text-xs"; large: "text-lg" };
- *   rounded: { true: "rounded-full" }
- * }>
- * ==>
- * {
- *   size: "text-xs" | "text-lg";
- *   rounded: boolean;
- * }
- */
-declare type OptionsOf<V extends Variants> = {
-    [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
-};
-/**
- * Extracts the possible options.
- */
-export declare type VariantOptions<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = RequiredOptions<C> & OptionalOptions<C>;
-/**
- * Without this conversion step, defaultVariants and compoundVariants will
- * allow extra keys, i.e. non-existent variants.
- * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
- */
-export declare type Simplify<T> = {
-    [K in keyof T]: T[K];
-};
-export declare function variants<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): (props: VariantOptions<C>) => string;
-export {};

package/lib/src/index.js

@@ -1,27 +0,0 @@
-export function variants(config) {
-    const { base, variants, compoundVariants, defaultVariants } = config;
-    const isBooleanVariant = (name) => {
-        const v = variants === null || variants === void 0 ? void 0 : variants[name];
-        return v && ("false" in v || "true" in v);
-    };
-    return (props) => {
-        var _a;
-        const res = [base];
-        const getSelected = (name) => {
-            var _a, _b;
-            return (_b = (_a = props[name]) !== null && _a !== void 0 ? _a : defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[name]) !== null && _b !== void 0 ? _b : (isBooleanVariant(name) ? false : undefined);
-        };
-        for (let name in variants) {
-            const selected = getSelected(name);
-            if (selected !== undefined)
-                res.push((_a = variants[name]) === null || _a === void 0 ? void 0 : _a[selected]);
-        }
-        for (let { variants, className } of compoundVariants !== null && compoundVariants !== void 0 ? compoundVariants : []) {
-            const isSelected = (name) => getSelected(name) === variants[name];
-            if (Object.keys(variants).every(isSelected)) {
-                res.push(className);
-            }
-        }
-        return res.filter(Boolean).join(" ");
-    };
-}

package/lib/src/react.d.ts

@@ -1,19 +0,0 @@
-import { ComponentProps, ElementType, ForwardRefExoticComponent, PropsWithoutRef } from "react";
-import { Variants, VariantsConfig, VariantOptions, Simplify } from "./index.js";
-/**
- * Utility type to infer the first argument of a variantProps function.
- */
-export declare type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
-/**
- * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
- */
-declare type VariantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]> = VariantOptions<C> & {
-    className?: string;
-};
-export declare function variantProps<C extends VariantsConfig<V>, V extends Variants = C["variants"]>(config: Simplify<C>): <P extends VariantProps<C, C["variants"]>>(props: P) => {
-    className: string;
-} & Omit<P, keyof C["variants"]>;
-declare type StyledComponent<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = C["variants"]> = ForwardRefExoticComponent<PropsWithoutRef<ComponentProps<T> & VariantOptions<C>> & React.RefAttributes<T>>;
-declare type Vars<T> = T extends VariantsConfig<infer V> ? V : {};
-export declare function styled<T extends ElementType, C extends VariantsConfig<V>, V extends Variants = Vars<C>>(type: T, config: string | Simplify<C>): StyledComponent<T, C>;
-export {};

package/lib/src/react.js

@@ -1,25 +0,0 @@
-import { createElement, forwardRef, } from "react";
-import { variants, } from "./index.js";
-export function variantProps(config) {
-    const variantClassName = variants(config);
-    return (props) => {
-        const result = {};
-        // Pass-through all unrelated props
-        for (let prop in props) {
-            if (config.variants && !(prop in config.variants)) {
-                result[prop] = props[prop];
-            }
-        }
-        // Add the optionally passed className prop for chaining
-        result.className = [props.className, variantClassName(props)]
-            .filter(Boolean)
-            .join(" ");
-        return result;
-    };
-}
-export function styled(type, config) {
-    const styledProps = typeof config === "string"
-        ? variantProps({ base: config, variants: {} })
-        : variantProps(config);
-    return forwardRef((props, ref) => createElement(type, { ...styledProps(props), ref }));
-}

package/src/index.ts

@@ -1,166 +0,0 @@
-/**
- * Definition of the available variants and their options.
- * @example
- * {
- *   color: {
- *     white: "bg-white"
- *     green: "bg-green-500",
- *   },
- *   size: {
- *     small: "text-xs",
- *     large: "text-lg"
- *   }
- * }
- */
-export type Variants = Record<string, Record<string, string>>;
-
-/**
- * Configuration including defaults and compound variants.
- */
-export interface VariantsConfig<V extends Variants> {
-  base?: string;
-  variants: V;
-  compoundVariants?: CompoundVariant<V>[];
-  defaultVariants?: Partial<OptionsOf<V>>;
-}
-
-/**
- * Rules for class names that are applied for certain variant combinations.
- */
-export interface CompoundVariant<V extends Variants> {
-  variants: Partial<OptionsOf<V>>;
-  className: string;
-}
-
-/**
- * Only the boolean variants, i.e. ones that have "true" or "false" as options.
- */
-type BooleanVariants<V extends Variants> = {
-  [K in keyof V as V[K] extends { true: any } | { false: any }
-    ? K
-    : never]: V[K];
-};
-
-/**
- * Only the variants for which a default options is set.
- */
-type DefaultVariants<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends keyof C["defaultVariants"]
-    ? K
-    : never]: C["variants"][K];
-};
-
-/**
- * Names of all optional variants, i.e. booleans or ones with default options.
- */
-type OptionalVariantNames<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = keyof BooleanVariants<V> | keyof DefaultVariants<C>;
-
-/**
- * Possible options for all the optional variants.
- *
- * @example
- * {
- *   color?: "white" | "green",
- *   rounded?: boolean | undefined
- * }
- */
-type OptionalOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends OptionalVariantNames<C>
-    ? K
-    : never]?: OptionsOf<V>[K];
-};
-
-/**
- * Possible options for all required variants.
- *
- * @example {
- *   size: "small" | "large"
- * }
- */
-type RequiredOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = {
-  [K in keyof V as K extends OptionalVariantNames<C>
-    ? never
-    : K]: OptionsOf<V>[K];
-};
-
-/**
- * Utility type to extract the possible options.
- * Converts "true" | "false" options into booleans.
- *
- * @example
- * OptionsOf<{
- *   size: { small: "text-xs"; large: "text-lg" };
- *   rounded: { true: "rounded-full" }
- * }>
- * ==>
- * {
- *   size: "text-xs" | "text-lg";
- *   rounded: boolean;
- * }
- */
-type OptionsOf<V extends Variants> = {
-  [K in keyof V]: keyof V[K] extends "true" | "false" ? boolean : keyof V[K];
-};
-
-/**
- * Extracts the possible options.
- */
-export type VariantOptions<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = RequiredOptions<C> & OptionalOptions<C>;
-
-/**
- * Without this conversion step, defaultVariants and compoundVariants will
- * allow extra keys, i.e. non-existent variants.
- * See https://github.com/sindresorhus/type-fest/blob/main/source/simplify.d.ts
- */
-export type Simplify<T> = {
-  [K in keyof T]: T[K];
-};
-
-export function variants<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(config: Simplify<C>) {
-  const { base, variants, compoundVariants, defaultVariants } = config;
-
-  const isBooleanVariant = (name: keyof V) => {
-    const v = variants?.[name];
-    return v && ("false" in v || "true" in v);
-  };
-
-  return (props: VariantOptions<C>) => {
-    const res = [base];
-
-    const getSelected = (name: keyof V) =>
-      (props as any)[name] ??
-      defaultVariants?.[name] ??
-      (isBooleanVariant(name) ? false : undefined);
-
-    for (let name in variants) {
-      const selected = getSelected(name);
-      if (selected !== undefined) res.push(variants[name]?.[selected]);
-    }
-
-    for (let { variants, className } of compoundVariants ?? []) {
-      const isSelected = (name: string) => getSelected(name) === variants[name];
-      if (Object.keys(variants).every(isSelected)) {
-        res.push(className);
-      }
-    }
-    return res.filter(Boolean).join(" ");
-  };
-}

package/src/react.ts

@@ -1,82 +0,0 @@
-import {
-  ComponentProps,
-  createElement,
-  ElementType,
-  forwardRef,
-  ReactElement,
-  Ref,
-} from "react";
-
-import {
-  Variants,
-  variants,
-  VariantsConfig,
-  VariantOptions,
-  Simplify,
-} from "./index.js";
-
-/**
- * Utility type to infer the first argument of a variantProps function.
- */
-export type VariantPropsOf<T> = T extends (props: infer P) => any ? P : never;
-
-/**
- * Type for the variantProps() argument – consists of the VariantOptions and an optional className for chaining.
- */
-type VariantProps<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
-> = VariantOptions<C> & { className?: string };
-
-export function variantProps<
-  C extends VariantsConfig<V>,
-  V extends Variants = C["variants"]
->(config: Simplify<C>) {
-  const variantClassName = variants<C>(config);
-  return <P extends VariantProps<C>>(props: P) => {
-    const result: any = {};
-
-    // Pass-through all unrelated props
-    for (let prop in props) {
-      if (config.variants && !(prop in config.variants)) {
-        result[prop] = props[prop];
-      }
-    }
-
-    // Add the optionally passed className prop for chaining
-    result.className = [props.className, variantClassName(props)]
-      .filter(Boolean)
-      .join(" ");
-
-    return result as { className: string } & Omit<P, keyof C["variants"]>;
-  };
-}
-
-type VariantsOf<T> = T extends VariantsConfig<infer V> ? V : {};
-
-type AsProps<T extends ElementType = ElementType> = {
-  as?: T;
-};
-
-type PolymorphicComponentProps<T extends ElementType> = AsProps<T> &
-  Omit<ComponentProps<T>, "as">;
-
-export function styled<
-  T extends ElementType,
-  C extends VariantsConfig<V>,
-  V extends Variants = VariantsOf<C>
->(type: T, config: string | Simplify<C>) {
-  const styledProps =
-    typeof config === "string"
-      ? variantProps({ base: config, variants: {} })
-      : variantProps(config);
-
-  const Component: <As extends ElementType = T>(
-    props: PolymorphicComponentProps<As> & VariantOptions<C>
-  ) => ReactElement | null = forwardRef(
-    ({ as, ...props }: AsProps, ref: Ref<Element>) => {
-      return createElement(as ?? type, { ...styledProps(props), ref });
-    }
-  );
-  return Component;
-}