css-variants 1.0.0

package/LICENSE

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to
+deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,407 @@
+![Logo](.github/assets/logo.png)
+
+[![test](https://github.com/timphandev/css-variants/actions/workflows/ci.yml/badge.svg)](https://github.com/timphandev/css-variants/actions/workflows/ci.yml)
+[![license](https://img.shields.io/github/license/timphandev/css-variants)](https://github.com/timphandev/css-variants/blob/main/LICENSE)
+[![npm](https://img.shields.io/npm/dm/css-variants)](https://npmjs.com/package/css-variants)
+![npm](https://img.shields.io/npm/v/css-variants)
+
+# A powerful and flexible package for managing style-based variants
+
+Creating variants with the "traditional" CSS approach can become an arduous task; manually matching classes to props and manually adding types.
+
+`css-variants` aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.
+
+`css-variants` is heavily inspired by [CVA](https://github.com/joe-bell/cva), [Tailwind Variants](https://github.com/nextui-org/tailwind-variants) and [Panda CSS](https://github.com/chakra-ui/panda).
+
+## Features
+- First-class variant API
+- Inline-style support
+- Slots support
+- Fully type-safe
+- Framework agnostic
+- Supports custom strategies like `tailwind-merge`
+- Light-weight without any dependencies
+
+## Table of Contents
+* [Installation](#installation)
+* [Variants](#variants)
+  * [Adding variants](#adding-variants)
+  * [Multiple variants](#multiple-variants)
+  * [Boolean variants](#boolean-variants)
+  * [Compound variants](#compound-variants)
+  * [Default variants](#default-variants)
+* [Slots](#events)
+  * [Basic Usage](#basic-usage)
+  * [Slots with variants](#slots-with-variants)
+* [Handling Style Conflicts](#handling-style-conflicts)
+* [TypeScript](#typeScript)
+* [Contribute](#contribute)
+* [License](#license)
+
+
+## Installation
+
+To use `css-variants` in your project, you can install it as a dependency:
+
+```sh
+yarn add css-variants
+```
+
+## Variants
+
+Variants allows you to create multiple versions of the same component.
+
+### Adding variants
+
+You can add variants by using the `variants` key. There's no limit to how many variants you can add.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: 'font-bold rounded-sm',
+  variants: {
+    color: {
+      primary: 'bg-blue-500 hover:bg-blue-700',
+      secondary: 'bg-purple-500 hover:bg-purple-700',
+      success: {
+        className: 'hover:bg-green-700',
+        style: { color: 'green' }, // You can also use inline style
+      },
+    },
+  },
+})
+
+button({ color: 'secondary' })
+/**
+ * Result:
+ * {
+ *    className: 'font-bold rounded-sm bg-purple-500 hover:bg-purple-700',
+ *    style: {},
+ * }
+ */
+
+button({ color: 'success' })
+/**
+ * Result:
+ * {
+ *    className: 'font-bold rounded-sm hover:bg-green-700',
+ *    style: { color: 'green' },
+ * }
+ */
+```
+
+### Multiple variants
+
+You can add multiple variants to a single component.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: {
+    className: 'font-bold',
+    style: { borderRadius: 16 },
+  },
+  variants: {
+    color: {
+      primary: 'bg-blue-500 hover:bg-blue-700',
+      secondary: 'bg-purple-500 hover:bg-purple-700',
+      success: 'bg-green-500 hover:bg-green-700'
+    },
+    size: {
+      sm: 'text-sm p-2',
+      md: 'text-md p-4',
+      lg: 'text-lg p-6',
+    },
+  },
+})
+
+button({ color: 'success', size: 'lg' })
+/**
+ * Result:
+ * {
+ *    className: 'font-bold bg-green-500 hover:bg-green-700 text-lg p-6',
+ *    style: { borderRadius: 16 },
+ * }
+ */
+```
+
+### Boolean variants
+
+You can also add boolean variants to a component. This is useful when you want to add a state variant e.g. `disabled`.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: {
+    style: { fontWeight: 'bold' },
+  },
+  variants: {
+    color: {
+      primary: 'bg-blue-500 hover:bg-blue-700',
+      secondary: 'bg-purple-500 hover:bg-purple-700',
+      success: 'bg-green-500 hover:bg-green-700'
+    },
+    disabled: {
+      true: 'opacity-50 pointer-events-none',
+    },
+  },
+})
+
+button({ disabled: true })
+/**
+ * Result:
+ * {
+ *    className: 'opacity-50 pointer-events-none',
+ *    style: { fontWeight: 'bold' },
+ * }
+ */
+```
+
+### Compound variants
+
+Sometimes you might want to add a variant that depends on another variant. This is possible by using the `compoundVariants` key.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: {
+    style: { fontWeight: 'bold' },
+  },
+  variants: {
+    size: {
+      sm: 'text-sm p-2',
+      md: 'text-md p-4',
+      lg: {
+        className: 'text-lg',
+        style: { padding: 6 },
+      },
+    },
+    disabled: {
+      true: 'opacity-50 pointer-events-none',
+    },
+  },
+  compoundVariants: [
+    {
+      size: 'lg', // You can also use the values as an array
+      disabled: true,
+      className: 'uppercase',
+      style: { padding: 5 },
+    }
+  ],
+})
+
+button({ size: 'lg', disabled: true })
+/**
+ * Result:
+ * {
+ *    className: 'text-lg p-6 opacity-50 pointer-events-none uppercase',
+ *    style: { fontWeight: 'bold', padding: 5 },
+ * }
+ */
+```
+
+### Default variants
+
+You can also add a default variant to a component. This is useful when you want to add a predefined variants values to a component.
+
+```ts
+import { cv } from 'css-variants'
+ 
+const button = cv({
+  base: 'font-bold rounded-sm',
+  variants: {
+    color: {
+      primary: 'bg-blue-500 hover:bg-blue-700',
+      secondary: 'bg-purple-500 hover:bg-purple-700',
+      success: 'bg-green-500 hover:bg-green-700'
+    },
+  },
+  defaultVariants: {
+    color: 'primary',
+  },
+})
+
+button()
+/**
+ * Result:
+ * {
+ *    className: 'font-bold rounded-sm bg-blue-500 hover:bg-blue-700',
+ *    style: {},
+ * }
+ */
+```
+
+## Slots
+
+Slots allows you to separate a component into multiple parts.
+
+### Basic Usage
+
+You can add `slots` by using the slots key. There's no limit to how many slots you can add.
+
+```ts
+import { csv } from 'css-variants'
+
+const notification = cv({
+  slots: ['root', 'title'],
+  base: {
+    root: 'root',
+    title: {
+      className: 'title',
+      style: { fontSize: 16 },
+    },
+  },
+});
+
+notification()
+/**
+ * Result:
+ * {
+ *    root: {
+ *      className: 'root',
+ *      style: {},
+ *    },
+ *    title: {
+ *      className: 'title',
+ *      style: { fontSize: 16 },
+ *    },
+ * }
+ */
+
+```
+
+### Slots with variants
+
+You can also change the entire component and its slots by using the variants.
+
+```ts
+import { csv } from 'css-variants'
+
+const notification = cv({
+  slots: ['root', 'title', 'content'],
+  base: {
+    root: 'root',
+    title: 'title',
+    content: {
+      className: 'content',
+      style: { fontSize: 16 },
+    },
+  },
+  variants: {
+    color: {
+      primary: {
+        root: 'root-primary',
+        title: 'title-primary',
+        content: 'content-primary',
+      },
+      secondary: {
+        title: 'title-secondary',
+        content: 'content-secondary',
+      },
+    }
+  },
+});
+
+notification({ color: 'primary' })
+/**
+ * Result:
+ * {
+ *    root: {
+ *      className: 'root root-primary',
+ *      style: {},
+ *    },
+ *    title: {
+ *      className: 'title title-primary',
+ *      style: {},
+ *    },
+ *    content: {
+ *      className: 'content content-primary',
+ *      style: { fontSize: 16 },
+ *    },
+ * }
+ */
+
+notification({ color: 'secondary' })
+/**
+ * Result:
+ * {
+ *    root: {
+ *      className: 'root',
+ *      style: {},
+ *    },
+ *    title: {
+ *      className: 'title title-secondary',
+ *      style: {},
+ *    },
+ *    content: {
+ *      className: 'content content-secondary',
+ *      style: { fontSize: 16 },
+ *    },
+ * }
+ */
+```
+
+## Handling Style Conflicts
+
+Although `css-variants` is designed to help you avoid styling conflicts, there's still a small margin of error.
+
+If you're keen to lift that burden altogether, check out the wonderful `tailwind-merge` package.
+
+For bulletproof components, wrap your `cx`, `cv`, `csv` component with `twMerge`.
+
+```ts
+import { twMerge } from 'tailwind-merge'
+import { cx as baseCx, cv as baseCv } from 'css-variants'
+
+export const cx: typeof baseCx = (...args) => twMerge(baseCx(...args))
+
+export const cv: typeof baseCv = (config) => {
+  return baseCv({
+    ...config,
+    onDone: ({ className, style }) => {
+      const css = {
+        style,
+        className: twMerge(className),
+      }
+
+      return config.onDone ? config.onDone(css) : css
+    },
+  })
+}
+```
+
+## TypeScript
+
+### Extracting Variant Types
+
+You can use the `VariantProps` utility to extract variants from a component.
+
+```tsx
+import { VariantProps } from 'css-variants'
+import { cv } from 'class-variance-authority'
+ 
+export const button = cv({
+  variants: {
+    color: {
+      primary: 'bg-blue-500 text-white',
+      secondary: 'bg-purple-500 text-white',
+    },
+  },
+})
+
+export type ButtonProps = VariantProps<typeof button>
+```
+
+## Contribute
+
+If you would like to contribute to the project, please read how to contribute here [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+Licensed under the MIT License.
+
+See [MIT license](./LICENSE) for more information.

package/dist/cjs/csv.d.ts

@@ -0,0 +1,3 @@
+import { SlotVariantCreatorFn } from './types';
+export declare const csv: SlotVariantCreatorFn;
+export default csv;

package/dist/cjs/csv.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.csv = void 0;
+const cx_1 = require("./cx");
+const utils_1 = require("./utils");
+const push = (data, key, value) => {
+    if (value) {
+        if (data[key] === undefined) {
+            data[key] = { classNames: [], style: {} };
+        }
+        if (typeof value === 'string') {
+            data[key].classNames.push(value);
+        }
+        else {
+            if (value.className) {
+                data[key].classNames.push(value.className);
+            }
+            if (value.style) {
+                data[key].style = { ...data[key].style, ...value.style };
+            }
+        }
+    }
+};
+const csv = ({ slots, base, variants, compoundVariants, defaultVariants, onDone }) => (props) => {
+    const { classNames: propClassNames, styles: propStyles, ...rest } = props ?? {};
+    const data = {};
+    const variantProps = { ...defaultVariants, ...(0, utils_1.compact)(rest) };
+    for (const [key, value] of (0, utils_1.entries)(base)) {
+        push(data, key, value);
+    }
+    for (const [propKey, propValue] of (0, utils_1.entries)(variantProps)) {
+        for (const [key, value] of (0, utils_1.entries)(variants?.[propKey]?.[propValue])) {
+            push(data, key, value);
+        }
+    }
+    for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants ?? []) {
+        if ((0, utils_1.match)(compoundVariant, variantProps)) {
+            for (const [key, value] of (0, utils_1.entries)(cvClassNames))
+                push(data, key, { className: value });
+            for (const [key, value] of (0, utils_1.entries)(cvStyles))
+                push(data, key, { style: value });
+        }
+    }
+    for (const [key, value] of (0, utils_1.entries)(propClassNames))
+        push(data, key, { className: value });
+    for (const [key, value] of (0, utils_1.entries)(propStyles))
+        push(data, key, { style: value });
+    const css = (0, utils_1.fromEntries)(slots.map((slot) => [
+        slot,
+        {
+            className: (0, cx_1.cx)(data[slot]?.classNames),
+            style: data[slot]?.style ?? {},
+        },
+    ]));
+    if (onDone)
+        return onDone(css);
+    return css;
+};
+exports.csv = csv;
+exports.default = exports.csv;
+//# sourceMappingURL=csv.js.map

package/dist/cjs/csv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"csv.js","sourceRoot":"","sources":["../../src/csv.ts"],"names":[],"mappings":"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"}

package/dist/cjs/cv.d.ts

@@ -0,0 +1,3 @@
+import { VariantCreatorFn } from './types';
+export declare const cv: VariantCreatorFn;
+export default cv;

package/dist/cjs/cv.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cv = void 0;
+const cx_1 = require("./cx");
+const utils_1 = require("./utils");
+const push = (data, value) => {
+    if (typeof value === 'string') {
+        data.classNames.push(value);
+    }
+    else {
+        if (value?.className) {
+            data.classNames.push(value.className);
+        }
+        if (value?.style) {
+            data.style = { ...data.style, ...value.style };
+        }
+    }
+};
+const cv = ({ base, variants, compoundVariants, defaultVariants, onDone }) => (props) => {
+    const { className: propClassName, style: propStyle, ...rest } = props ?? {};
+    const data = { classNames: [], style: {} };
+    const variantProps = { ...defaultVariants, ...(0, utils_1.compact)(rest) };
+    if (base) {
+        push(data, base);
+    }
+    for (const [propKey, propValue] of (0, utils_1.entries)(variantProps)) {
+        push(data, variants?.[propKey]?.[propValue]);
+    }
+    for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants ?? []) {
+        if ((0, utils_1.match)(compoundVariant, variantProps)) {
+            push(data, { className: cvClassName, style: cvStyle });
+        }
+    }
+    if (propClassName || propStyle) {
+        push(data, { className: propClassName, style: propStyle });
+    }
+    const css = { className: (0, cx_1.cx)(data.classNames), style: data.style };
+    if (onDone)
+        return onDone(css);
+    return css;
+};
+exports.cv = cv;
+exports.default = exports.cv;
+//# sourceMappingURL=cv.js.map

package/dist/cjs/cv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":";;;AAAA,6BAAyB;AACzB,mCAAiD;AAGjD,MAAM,IAAI,GAAG,CAAC,IAAoD,EAAE,KAAsC,EAAE,EAAE;IAC5G,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC;SAAM,CAAC;QACN,IAAI,KAAK,EAAE,SAAS,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACvC,CAAC;QAED,IAAI,KAAK,EAAE,KAAK,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;QAChD,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAEM,MAAM,EAAE,GACb,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,EAAE,CAClE,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;IAE3E,MAAM,IAAI,GAAmD,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAE1F,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,IAAA,eAAO,EAAC,IAAI,CAAC,EAAE,CAAA;IAE7D,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,KAAK,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,IAAA,eAAO,EAAC,YAAY,CAAC,EAAE,CAAC;QACzD,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,SAAmB,CAAC,CAAC,CAAA;IACxD,CAAC;IAED,KAAK,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,IAAI,EAAE,EAAE,CAAC;QACpG,IAAI,IAAA,aAAK,EAAC,eAAe,EAAE,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;IAED,IAAI,aAAa,IAAI,SAAS,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;IAC5D,CAAC;IAED,MAAM,GAAG,GAAG,EAAE,SAAS,EAAE,IAAA,OAAE,EAAC,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAA;IAEjE,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAA;IAE9B,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAhCU,QAAA,EAAE,MAgCZ;AAEH,kBAAe,UAAE,CAAA"}

package/dist/cjs/cx.d.ts

@@ -0,0 +1,3 @@
+type Arg = string | number | null | undefined | Record<string, boolean>;
+export declare const cx: (...args: (Arg | Arg[])[]) => string;
+export default cx;

package/dist/cjs/cx.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cx = void 0;
+const concat = (str1, str2) => {
+    const str = typeof str2 === 'number' ? str2.toString() : str2.trim();
+    if (str && str1)
+        return str1 + ' ' + str;
+    return str1 || str;
+};
+const cx = (...args) => {
+    let className = '';
+    for (const arg of args) {
+        if (typeof arg === 'string') {
+            className = concat(className, arg);
+            continue;
+        }
+        if (typeof arg === 'number') {
+            className = concat(className, arg);
+            continue;
+        }
+        if (arg && typeof arg === 'object') {
+            if (Array.isArray(arg)) {
+                className = concat(className, (0, exports.cx)(...arg));
+                continue;
+            }
+            for (const key in arg) {
+                if (arg[key]) {
+                    className = concat(className, key);
+                }
+            }
+            continue;
+        }
+    }
+    return className;
+};
+exports.cx = cx;
+exports.default = exports.cx;
+//# sourceMappingURL=cx.js.map

package/dist/cjs/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":";;;AAEA,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,IAAqB,EAAE,EAAE;IACrD,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;IACpE,IAAI,GAAG,IAAI,IAAI;QAAE,OAAO,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;IACxC,OAAO,IAAI,IAAI,GAAG,CAAA;AACpB,CAAC,CAAA;AAEM,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAElB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAClC,SAAQ;QACV,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAClC,SAAQ;QACV,CAAC;QAED,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvB,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,IAAA,UAAE,EAAC,GAAG,GAAG,CAAC,CAAC,CAAA;gBACzC,SAAQ;YACV,CAAC;YAED,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;gBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACb,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;gBACpC,CAAC;YACH,CAAC;YAED,SAAQ;QACV,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AA/BY,QAAA,EAAE,MA+Bd;AAED,kBAAe,UAAE,CAAA"}

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './cx';
+export * from './cv';
+export * from './csv';
+export { VariantProps } from './types';

package/dist/cjs/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./cx"), exports);
+__exportStar(require("./cv"), exports);
+__exportStar(require("./csv"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,uCAAoB;AACpB,uCAAoB;AACpB,wCAAqB"}

package/dist/cjs/types.d.ts

@@ -0,0 +1,44 @@
+import { Properties } from 'csstype';
+export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
+export type OneOrMore<T> = T | T[];
+export type PartialRecord<S extends string, T> = Partial<Record<S, T>>;
+export type RequireAtLeastOne<T> = {
+    [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
+}[keyof T];
+export type CssProperties = Properties<string | number>;
+export type VariantStyle = {
+    className: string;
+    style: CssProperties;
+};
+export type VariantRecord = Record<string, Record<string, string | RequireAtLeastOne<VariantStyle>>>;
+export type VariantSelection<T> = T extends undefined ? Record<string, unknown> : {
+    [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined;
+};
+export type VariantCompoundSelection<T> = T extends undefined ? Record<string, unknown> : {
+    [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;
+};
+export interface VariantDefinition<T extends VariantRecord | undefined> {
+    base?: string | RequireAtLeastOne<VariantStyle>;
+    variants?: T;
+    compoundVariants?: (VariantCompoundSelection<T> & RequireAtLeastOne<VariantStyle>)[];
+    defaultVariants?: VariantSelection<T>;
+    onDone?: (css: VariantStyle) => VariantStyle;
+}
+export type VariantFn<T extends VariantRecord | undefined> = (props?: VariantSelection<T> & Partial<VariantStyle>) => VariantStyle;
+export type VariantCreatorFn = <T extends VariantRecord | undefined>(config: VariantDefinition<T>) => VariantFn<T>;
+export type SlotVariantStyle<S extends string> = {
+    classNames: PartialRecord<S, string>;
+    styles: PartialRecord<S, CssProperties>;
+};
+export type SlotVariantRecord<S extends string> = Record<string, Record<string, PartialRecord<S, string | RequireAtLeastOne<VariantStyle>>>>;
+export interface SlotVariantDefinition<S extends string, T extends SlotVariantRecord<S> | undefined> {
+    slots: S[] | Readonly<S[]>;
+    base?: PartialRecord<S, string | RequireAtLeastOne<VariantStyle>>;
+    variants?: T;
+    compoundVariants?: (VariantCompoundSelection<T> & RequireAtLeastOne<SlotVariantStyle<S>>)[];
+    defaultVariants?: VariantSelection<T>;
+    onDone?: (css: Record<S, VariantStyle>) => Record<S, VariantStyle>;
+}
+export type SlotVariantFn<S extends string, T extends SlotVariantRecord<S> | undefined> = (props?: VariantSelection<T> & Partial<SlotVariantStyle<S>>) => Record<S, VariantStyle>;
+export type SlotVariantCreatorFn = <S extends string, T extends SlotVariantRecord<S> | undefined>(config: SlotVariantDefinition<S, T>) => SlotVariantFn<S, T>;
+export type VariantProps<T extends VariantFn<VariantRecord> | SlotVariantFn<string, SlotVariantRecord<string>>> = Parameters<T>[0];

package/dist/cjs/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/dist/cjs/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj?: T) => TEntry[];
+export declare function fromEntries<A extends symbol | string | number, B>(entries: [A, B][]): {
+    [key in A]: B;
+};
+export declare const compact: <T extends Record<string, unknown>>(obj?: T) => T;
+export declare const match: <T1 extends object, T2 extends object>(obj1: T1, obj2: T2) => boolean;

package/dist/cjs/utils.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.match = exports.compact = exports.entries = void 0;
+exports.fromEntries = fromEntries;
+const entries = (obj) => (obj ? Object.entries(obj) : []);
+exports.entries = entries;
+function fromEntries(entries) {
+    const result = {};
+    for (const [key, value] of entries) {
+        result[key] = value;
+    }
+    return result;
+}
+const compact = (obj) => {
+    const newObj = {};
+    if (obj) {
+        for (const k in obj) {
+            if (obj[k] !== undefined) {
+                newObj[k] = obj[k];
+            }
+        }
+    }
+    return newObj;
+};
+exports.compact = compact;
+const match = (obj1, obj2) => {
+    for (const k in obj1) {
+        const val1 = obj1[k];
+        const val2 = obj2[k];
+        if (Array.isArray(val1)) {
+            if (!val1.includes(val2))
+                return false;
+        }
+        else {
+            if (val1 !== val2)
+                return false;
+        }
+    }
+    return true;
+};
+exports.match = match;
+//# sourceMappingURL=utils.js.map

package/dist/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":";;;AASA,kCAMC;AAfM,MAAM,OAAO,GAAG,CAMrB,GAAO,EACG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAa,CAAA;AAP9C,QAAA,OAAO,WAOuC;AAE3D,SAAgB,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,OAAO,EAAE,CAAC;QACnC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;IACrB,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAEM,MAAM,OAAO,GAAG,CAAoC,GAAO,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,IAAI,GAAG,EAAE,CAAC;QACR,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;YACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;gBACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAZY,QAAA,OAAO,WAYnB;AAEM,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAXY,QAAA,KAAK,SAWjB"}

package/dist/esm/csv.d.ts

@@ -0,0 +1,3 @@
+import { SlotVariantCreatorFn } from './types';
+export declare const csv: SlotVariantCreatorFn;
+export default csv;

package/dist/esm/csv.js

@@ -0,0 +1,57 @@
+import { cx } from './cx';
+import { compact, entries, fromEntries, match } from './utils';
+const push = (data, key, value) => {
+    if (value) {
+        if (data[key] === undefined) {
+            data[key] = { classNames: [], style: {} };
+        }
+        if (typeof value === 'string') {
+            data[key].classNames.push(value);
+        }
+        else {
+            if (value.className) {
+                data[key].classNames.push(value.className);
+            }
+            if (value.style) {
+                data[key].style = { ...data[key].style, ...value.style };
+            }
+        }
+    }
+};
+export const csv = ({ slots, base, variants, compoundVariants, defaultVariants, onDone }) => (props) => {
+    const { classNames: propClassNames, styles: propStyles, ...rest } = props ?? {};
+    const data = {};
+    const variantProps = { ...defaultVariants, ...compact(rest) };
+    for (const [key, value] of entries(base)) {
+        push(data, key, value);
+    }
+    for (const [propKey, propValue] of entries(variantProps)) {
+        for (const [key, value] of entries(variants?.[propKey]?.[propValue])) {
+            push(data, key, value);
+        }
+    }
+    for (const { classNames: cvClassNames, styles: cvStyles, ...compoundVariant } of compoundVariants ?? []) {
+        if (match(compoundVariant, variantProps)) {
+            for (const [key, value] of entries(cvClassNames))
+                push(data, key, { className: value });
+            for (const [key, value] of entries(cvStyles))
+                push(data, key, { style: value });
+        }
+    }
+    for (const [key, value] of entries(propClassNames))
+        push(data, key, { className: value });
+    for (const [key, value] of entries(propStyles))
+        push(data, key, { style: value });
+    const css = fromEntries(slots.map((slot) => [
+        slot,
+        {
+            className: cx(data[slot]?.classNames),
+            style: data[slot]?.style ?? {},
+        },
+    ]));
+    if (onDone)
+        return onDone(css);
+    return css;
+};
+export default csv;
+//# sourceMappingURL=csv.js.map

package/dist/esm/csv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"csv.js","sourceRoot":"","sources":["../../src/csv.ts"],"names":[],"mappings":"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"}

package/dist/esm/cv.d.ts

@@ -0,0 +1,3 @@
+import { VariantCreatorFn } from './types';
+export declare const cv: VariantCreatorFn;
+export default cv;

package/dist/esm/cv.js

@@ -0,0 +1,40 @@
+import { cx } from './cx';
+import { compact, entries, match } from './utils';
+const push = (data, value) => {
+    if (typeof value === 'string') {
+        data.classNames.push(value);
+    }
+    else {
+        if (value?.className) {
+            data.classNames.push(value.className);
+        }
+        if (value?.style) {
+            data.style = { ...data.style, ...value.style };
+        }
+    }
+};
+export const cv = ({ base, variants, compoundVariants, defaultVariants, onDone }) => (props) => {
+    const { className: propClassName, style: propStyle, ...rest } = props ?? {};
+    const data = { classNames: [], style: {} };
+    const variantProps = { ...defaultVariants, ...compact(rest) };
+    if (base) {
+        push(data, base);
+    }
+    for (const [propKey, propValue] of entries(variantProps)) {
+        push(data, variants?.[propKey]?.[propValue]);
+    }
+    for (const { className: cvClassName, style: cvStyle, ...compoundVariant } of compoundVariants ?? []) {
+        if (match(compoundVariant, variantProps)) {
+            push(data, { className: cvClassName, style: cvStyle });
+        }
+    }
+    if (propClassName || propStyle) {
+        push(data, { className: propClassName, style: propStyle });
+    }
+    const css = { className: cx(data.classNames), style: data.style };
+    if (onDone)
+        return onDone(css);
+    return css;
+};
+export default cv;
+//# sourceMappingURL=cv.js.map

package/dist/esm/cv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cv.js","sourceRoot":"","sources":["../../src/cv.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAGjD,MAAM,IAAI,GAAG,CAAC,IAAoD,EAAE,KAAsC,EAAE,EAAE;IAC5G,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC;SAAM,CAAC;QACN,IAAI,KAAK,EAAE,SAAS,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACvC,CAAC;QAED,IAAI,KAAK,EAAE,KAAK,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;QAChD,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,EAAE,GACb,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,EAAE,CAClE,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,IAAI,EAAE,CAAA;IAE3E,MAAM,IAAI,GAAmD,EAAE,UAAU,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IAE1F,MAAM,YAAY,GAAG,EAAE,GAAG,eAAe,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;IAE7D,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAClB,CAAC;IAED,KAAK,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE,CAAC;QACzD,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,SAAmB,CAAC,CAAC,CAAA;IACxD,CAAC;IAED,KAAK,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,IAAI,gBAAgB,IAAI,EAAE,EAAE,CAAC;QACpG,IAAI,KAAK,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,CAAC;YACzC,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;QACxD,CAAC;IACH,CAAC;IAED,IAAI,aAAa,IAAI,SAAS,EAAE,CAAC;QAC/B,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;IAC5D,CAAC;IAED,MAAM,GAAG,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAA;IAEjE,IAAI,MAAM;QAAE,OAAO,MAAM,CAAC,GAAG,CAAC,CAAA;IAE9B,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAEH,eAAe,EAAE,CAAA"}

package/dist/esm/cx.d.ts

@@ -0,0 +1,3 @@
+type Arg = string | number | null | undefined | Record<string, boolean>;
+export declare const cx: (...args: (Arg | Arg[])[]) => string;
+export default cx;

package/dist/esm/cx.js

@@ -0,0 +1,34 @@
+const concat = (str1, str2) => {
+    const str = typeof str2 === 'number' ? str2.toString() : str2.trim();
+    if (str && str1)
+        return str1 + ' ' + str;
+    return str1 || str;
+};
+export const cx = (...args) => {
+    let className = '';
+    for (const arg of args) {
+        if (typeof arg === 'string') {
+            className = concat(className, arg);
+            continue;
+        }
+        if (typeof arg === 'number') {
+            className = concat(className, arg);
+            continue;
+        }
+        if (arg && typeof arg === 'object') {
+            if (Array.isArray(arg)) {
+                className = concat(className, cx(...arg));
+                continue;
+            }
+            for (const key in arg) {
+                if (arg[key]) {
+                    className = concat(className, key);
+                }
+            }
+            continue;
+        }
+    }
+    return className;
+};
+export default cx;
+//# sourceMappingURL=cx.js.map

package/dist/esm/cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.js","sourceRoot":"","sources":["../../src/cx.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,GAAG,CAAC,IAAY,EAAE,IAAqB,EAAE,EAAE;IACrD,MAAM,GAAG,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;IACpE,IAAI,GAAG,IAAI,IAAI;QAAE,OAAO,IAAI,GAAG,GAAG,GAAG,GAAG,CAAA;IACxC,OAAO,IAAI,IAAI,GAAG,CAAA;AACpB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAqB,EAAE,EAAE;IAC7C,IAAI,SAAS,GAAG,EAAE,CAAA;IAElB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAClC,SAAQ;QACV,CAAC;QAED,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;YAClC,SAAQ;QACV,CAAC;QAED,IAAI,GAAG,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YACnC,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC;gBACvB,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAA;gBACzC,SAAQ;YACV,CAAC;YAED,KAAK,MAAM,GAAG,IAAI,GAAG,EAAE,CAAC;gBACtB,IAAI,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;oBACb,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;gBACpC,CAAC;YACH,CAAC;YAED,SAAQ;QACV,CAAC;IACH,CAAC;IAED,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,eAAe,EAAE,CAAA"}

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './cx';
+export * from './cv';
+export * from './csv';
+export { VariantProps } from './types';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './cx';
+export * from './cv';
+export * from './csv';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,MAAM,CAAA;AACpB,cAAc,MAAM,CAAA;AACpB,cAAc,OAAO,CAAA"}

package/dist/esm/types.d.ts

@@ -0,0 +1,44 @@
+import { Properties } from 'csstype';
+export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
+export type OneOrMore<T> = T | T[];
+export type PartialRecord<S extends string, T> = Partial<Record<S, T>>;
+export type RequireAtLeastOne<T> = {
+    [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
+}[keyof T];
+export type CssProperties = Properties<string | number>;
+export type VariantStyle = {
+    className: string;
+    style: CssProperties;
+};
+export type VariantRecord = Record<string, Record<string, string | RequireAtLeastOne<VariantStyle>>>;
+export type VariantSelection<T> = T extends undefined ? Record<string, unknown> : {
+    [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined;
+};
+export type VariantCompoundSelection<T> = T extends undefined ? Record<string, unknown> : {
+    [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>> | undefined;
+};
+export interface VariantDefinition<T extends VariantRecord | undefined> {
+    base?: string | RequireAtLeastOne<VariantStyle>;
+    variants?: T;
+    compoundVariants?: (VariantCompoundSelection<T> & RequireAtLeastOne<VariantStyle>)[];
+    defaultVariants?: VariantSelection<T>;
+    onDone?: (css: VariantStyle) => VariantStyle;
+}
+export type VariantFn<T extends VariantRecord | undefined> = (props?: VariantSelection<T> & Partial<VariantStyle>) => VariantStyle;
+export type VariantCreatorFn = <T extends VariantRecord | undefined>(config: VariantDefinition<T>) => VariantFn<T>;
+export type SlotVariantStyle<S extends string> = {
+    classNames: PartialRecord<S, string>;
+    styles: PartialRecord<S, CssProperties>;
+};
+export type SlotVariantRecord<S extends string> = Record<string, Record<string, PartialRecord<S, string | RequireAtLeastOne<VariantStyle>>>>;
+export interface SlotVariantDefinition<S extends string, T extends SlotVariantRecord<S> | undefined> {
+    slots: S[] | Readonly<S[]>;
+    base?: PartialRecord<S, string | RequireAtLeastOne<VariantStyle>>;
+    variants?: T;
+    compoundVariants?: (VariantCompoundSelection<T> & RequireAtLeastOne<SlotVariantStyle<S>>)[];
+    defaultVariants?: VariantSelection<T>;
+    onDone?: (css: Record<S, VariantStyle>) => Record<S, VariantStyle>;
+}
+export type SlotVariantFn<S extends string, T extends SlotVariantRecord<S> | undefined> = (props?: VariantSelection<T> & Partial<SlotVariantStyle<S>>) => Record<S, VariantStyle>;
+export type SlotVariantCreatorFn = <S extends string, T extends SlotVariantRecord<S> | undefined>(config: SlotVariantDefinition<S, T>) => SlotVariantFn<S, T>;
+export type VariantProps<T extends VariantFn<VariantRecord> | SlotVariantFn<string, SlotVariantRecord<string>>> = Parameters<T>[0];

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":""}

package/dist/esm/utils.d.ts

@@ -0,0 +1,6 @@
+export declare const entries: <T extends object, TK extends Extract<keyof T, string>, TV extends T[TK], TEntry extends [TK, TV]>(obj?: T) => TEntry[];
+export declare function fromEntries<A extends symbol | string | number, B>(entries: [A, B][]): {
+    [key in A]: B;
+};
+export declare const compact: <T extends Record<string, unknown>>(obj?: T) => T;
+export declare const match: <T1 extends object, T2 extends object>(obj1: T1, obj2: T2) => boolean;

package/dist/esm/utils.js

@@ -0,0 +1,35 @@
+export const entries = (obj) => (obj ? Object.entries(obj) : []);
+export function fromEntries(entries) {
+    const result = {};
+    for (const [key, value] of entries) {
+        result[key] = value;
+    }
+    return result;
+}
+export const compact = (obj) => {
+    const newObj = {};
+    if (obj) {
+        for (const k in obj) {
+            if (obj[k] !== undefined) {
+                newObj[k] = obj[k];
+            }
+        }
+    }
+    return newObj;
+};
+export const match = (obj1, obj2) => {
+    for (const k in obj1) {
+        const val1 = obj1[k];
+        const val2 = obj2[k];
+        if (Array.isArray(val1)) {
+            if (!val1.includes(val2))
+                return false;
+        }
+        else {
+            if (val1 !== val2)
+                return false;
+        }
+    }
+    return true;
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,CAMrB,GAAO,EACG,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAa,CAAA;AAE3D,MAAM,UAAU,WAAW,CAAwC,OAAiB;IAClF,MAAM,MAAM,GAAsB,EAAuB,CAAA;IACzD,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,OAAO,EAAE,CAAC;QACnC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;IACrB,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,CAAoC,GAAO,EAAE,EAAE;IACpE,MAAM,MAAM,GAAG,EAAO,CAAA;IAEtB,IAAI,GAAG,EAAE,CAAC;QACR,KAAK,MAAM,CAAC,IAAI,GAAG,EAAE,CAAC;YACpB,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,SAAS,EAAE,CAAC;gBACzB,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAA;YACpB,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAuC,IAAQ,EAAE,IAAQ,EAAE,EAAE;IAChF,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,IAAI,CAAC,CAAwB,CAAC,CAAA;QAC3C,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,OAAO,KAAK,CAAA;QACxC,CAAC;aAAM,CAAC;YACN,IAAK,IAAgB,KAAK,IAAI;gBAAE,OAAO,KAAK,CAAA;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,IAAI,CAAA;AACb,CAAC,CAAA"}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "css-variants",
+  "version": "1.0.0",
+  "description": "Variant API for plain class names",
+  "type": "module",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "lint": "eslint .",
+    "test": "vitest run --coverage",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "build": "rimraf ./dist && yarn build:cjs && yarn build:esm"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/timphandev/css-variants.git"
+  },
+  "keywords": [
+    "javascript",
+    "typescript",
+    "js",
+    "ts",
+    "css variants",
+    "class variants",
+    "classname variants",
+    "style variants",
+    "cva",
+    "class variance authority"
+  ],
+  "authors": [
+    {
+      "name": "Tim Phan",
+      "email": "timphan.dev@gmail.com"
+    }
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "@eslint/js": "^9.7.0",
+    "@types/eslint__js": "^8.42.3",
+    "@types/node": "^20.12.12",
+    "@vitest/coverage-v8": "^1.6.0",
+    "eslint": "^9.7.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "prettier": "^3.3.0",
+    "rimraf": "^5.0.7",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.16.1",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "csstype": "^3.1.3"
+  }
+}