class-variance-authority - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

dist/index.d.ts

 declare type ClassValue = string | null | undefined | ClassValue[];
 declare type OmitUndefined<T> = T extends undefined ? never : T;
+declare type StringToBoolean<T> = T extends "true" ? true : T extends "false" ? false : T;
 export declare type VariantProps<Component extends (...args: any) => any> = OmitUndefined<Parameters<Component>[0]>;
@@ -12,3 +13,3 @@ export declare type CxOptions = ClassValue[];
 declare type VariantsConfig<Variants extends VariantsSchema> = {
-    [Variant in keyof Variants]?: keyof Variants[Variant];
+    [Variant in keyof Variants]?: StringToBoolean<keyof Variants[Variant]>;
 };
@@ -15,0 +16,0 @@ export declare const cva: <Variants>(base?: ClassValue, config?: (Variants extends VariantsSchema ? {

package.json

 {
   "name": "class-variance-authority",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Class Variance Authority 🧬",
@@ -5,0 +5,0 @@ "author": "Joe Bell (https://joebell.co.uk)",

README.md

@@ -42,3 +42,3 @@ ![CVA](/.github/assets/meta.png)
 
-CVA aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.
+`cva` aims to take those pain points away, allowing you to focus on the more fun aspects of UI development.
 
@@ -52,2 +52,3 @@ ## Acknowledgements
   I'm so grateful to Bill for sharing his work publicly and for getting me excited about building a type-safe variants API for classes. If you have a moment, please go and [star the project on GitHub](https://github.com/crswll/clb). Thank you Bill!
+- [**Vanilla Extract**](http://vanilla-extract.style) ([Seek](https://github.com/seek-oss))
 
@@ -104,2 +105,3 @@ ## Installation
 ```ts
+// components/button.ts
 import { cva } from "class-variance-authority";
@@ -144,2 +146,16 @@
 
+### Additional Classes
+
+All `cva` components provide an optional `class` prop, which can be used to pass additional classes to the component.
+
+```ts
+// components/button.ts
+import { cva } from "class-variance-authority";
+
+const button = cva(/* … */);
+
+button({ class: "m-4" });
+// => "…buttonClasses m-4"
+```
+
 ### TypeScript Helpers
@@ -150,22 +166,22 @@
 ```ts
-// styles/components.ts
-import type * as CVA from "class-variance-authority";
+// components/button.ts
+import type { VariantProps } from "class-variance-authority";
 import { cva, cx } from "class-variance-authority";
 
 /**
- * YourComponent
+ * Button
  */
-export type YourComponentProps = CVA.VariantProps<typeof yourComponent>;
-export const yourComponent = cva(/* ... */);
+export type ButtonProps = VariantProps<typeof button>;
+export const button = cva(/* … */);
 ```
 
-### Composing Classes
+### Composing Components
 
-Whilst `cva` doesn't yet offer a built-in method for composing classes, it does offer the tools to extend components on your own terms…
+Whilst `cva` doesn't yet offer a built-in method for composing components, it does offer the tools to _extend_ components on your own terms…
 
-For example; two `cva` styles, concatenated together with `cx`:
+For example; two `cva` components, concatenated together with `cx`:
 
 ```ts
-// styles/components.ts
-import type * as CVA from "class-variance-authority";
+// components/card.ts
+import type { VariantProps } from "class-variance-authority";
 import { cva, cx } from "class-variance-authority";
@@ -176,3 +192,3 @@
  */
-export type BoxProps = CVA.VariantProps<typeof box>;
+export type BoxProps = VariantProps<typeof box>;
 export const box = cva(["box", "box-border"], {
@@ -192,3 +208,3 @@ variants: {
  */
-type CardBaseProps = CVA.VariantProps<typeof cardBase>;
+type CardBaseProps = VariantProps<typeof cardBase>;
 const cardBase = cva(["card", "border-solid", "border-slate-300", "rounded"], {
@@ -213,3 +229,3 @@ variants: {
 
-Builds a class variance authority
+Builds a `cva` component
 
@@ -220,2 +236,4 @@ ```ts
 
+#### Parameters
+
 1. `base`: the base class name (`string`, `string[]` or `null`)
@@ -227,2 +245,6 @@ 1. `options` _(optional)_
 
+#### Returns
+
+A `cva` component function
+
 ### `cx`
@@ -236,4 +258,10 @@
 
+#### Parameters
+
 - `classes`: array of classes to be concatenated
 
+#### Returns
+
+`string`
+
 ## Examples
@@ -378,3 +406,3 @@
 import { cva } from "class-variance-authority";
-import * as CVA from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
@@ -411,3 +439,3 @@ import {
 
-export type ButtonProps = CVA.VariantProps<typeof button>;
+export type ButtonProps = VariantProps<typeof button>;
 
@@ -428,3 +456,3 @@ export const Button: React.FC<ButtonProps> = ({ intent, size, ...props }) => (
 import { cva } from "class-variance-authority";
-import * as CVA from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
@@ -460,3 +488,3 @@ // ⚠️ Disclaimer: Use of Tailwind CSS is optional
 
-export type ButtonProps = CVA.VariantProps<typeof button>;
+export type ButtonProps = VariantProps<typeof button>;
 
@@ -477,3 +505,3 @@ export const Button: React.FC<ButtonProps> = ({ intent, size, ...props }) => (
   import { cva } from "class-variance-authority";
-  import type * as CVA from "class-variance-authority";
+  import type {VariantProps} from "class-variance-authority";
 
@@ -500,3 +528,3 @@ const button = cva("button", {
 
-  type ButtonProps = CVA.VariantProps<typeof button>;
+  type ButtonProps = VariantProps<typeof button>;
 
@@ -533,3 +561,3 @@ export let intent: ButtonProps["intent"];
 import { cva } from "class-variance-authority";
-import type * as CVA from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
@@ -556,3 +584,3 @@ const button = cva("button", {
 
-type ButtonProps = CVA.VariantProps<typeof button>;
+type ButtonProps = VariantProps<typeof button>;
 
@@ -559,0 +587,0 @@ export default defineComponent({

No alert changes

Improved metrics

Total package byte prevSize

33606

1.94%

Lines of code

107

0.94%

Number of lines in readme file

637

4.6%

No dependency changes