tailwind-variants 0.0.25 → 0.0.26

package/README.md

@@ -18,9 +18,85 @@
 </p>
 
 
-# Tailwind Variants
+## Features
+
+- Zero runtime 
+- First-class variant API
+- Responsive variants
+- Slots support
+- Composition support
+- Fully typed
+- Framework agnostic
+- Automatic conflict resolution
+
+## Documentation
+
+For full documentation, visit [tailwind-variants.org](https://tailwind-variants.org)
+
+## Quick Start
+
+1. Installation: 
+To use Tailwind Variants in your project, you can install it as a dependency:
+
+```bash
+yarn add tailwind-variants
+# or
+npm i tailwind-variants
+```
+
+2. Usage:
+
+```js
+import { tv } from 'tailwind-variants';
+ 
+const button = tv({
+  base: "font-medium bg-blue-500 text-white rounded-full active:opacity-80",
+  variants: {
+    color: {
+      primary: "bg-blue-500 text-white",
+      secondary: "bg-purple-500 text-white",
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "px-4 py-3 text-lg",
+    },
+  },
+  compoundVariants: [
+    {
+      size: ["sm", "md"],
+      class: "px-3 py-1",
+    },
+  ],
+  defaultVariants: {
+    size: "md",
+    color: "primary",
+  }
+});
+ 
+return (
+  <button className={button({ size: 'sm', color: 'secondary' })}>Click me</button>
+)
+```
+
+3. Responsive variants configuration (optional): If you want to use responsive variants
+you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file `tailwind.config.js`.
+
+```js
+// tailwind.config.js
+ 
+const { withTV } = require('tailwind-variants/transformer')
+ 
+/** @type {import('tailwindcss').Config} */
+module.exports = withTV({
+  content:  ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+})
+```
 
-🚧 Under construction - please check back later
 
 ## Acknowledgements
 
@@ -30,13 +106,15 @@
 - [**Stitches**](https://stitches.dev/) ([Modulz](https://modulz.app))  
   The pioneers of the `variants` API movement. Inmense thanks to [Modulz](https://modulz.app) for their work on Stitches and the community around it. 🙏
 
-## Installation
 
-```sh
-yarn add tailwind-variants
-#or
-npm i tailwind-variants
-```
+## Community
+
+We're excited to see the community adopt NextUI, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
+
+- [Discord](https://discord.gg/9b6yyZKmH4)
+- [Twitter](https://twitter.com/getnextui)
+- [GitHub Discussions](https://github.com/nextui-org/tailwind-variants/discussions)
+
 ## Contributing
 
 Contributions are always welcome!

package/dist/transformer.cjs

@@ -1,11 +1,12 @@
 'use strict';
 
-var v=["xs","sm","md","lg","xl","2xl"],l={tv:/tv\({[\s\S]*?}\)/g,tvContent:/\({[\s\S]*?}\)/g,comment:/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,blankLine:/^\s*$(?:\r\n?|\n)/gm},u=t=>Array.isArray(t),s=t=>!!(!t||u(t)&&t.length===0||typeof t=="string"&&t.length===0||typeof t=="object"&&Object.keys(t).length===0),y=t=>t.replace(l.comment,"$1").toString().replace(l.blankLine,"").toString().match(l.tv),d=t=>{let n=y(t);if(!s(n))return n.map(e=>new Function(`return ${e.match(l.tvContent).toString()}`)())},p=t=>t.flatMap(n=>n).toString().replaceAll(","," ").split(" "),h=t=>{let n={};for(let[e,r]of Object.entries(t))n[e]={},n[e].original=r,!s(r)&&(n.temp=u(r)?p(r):r.split(" "),v.forEach(i=>{let o="";n.temp.forEach(c=>{o+=`${i}:${c} `;}),n[e][i]=o.trimEnd();}),delete n.temp);return n},b=t=>typeof t=="string"?t.split(" "):u(t)?p(t):t instanceof Object?h(t):t,j=t=>{let{variants:n={}}=t;if(s(n))return;let e={};for(let[r,i]of Object.entries(n))if(e[r]={},!s(i))for(let[o,c]of Object.entries(i)){if(e[r][o]={},e[r][o].original=c,s(c))continue;let f=b(c);if(!s(f)){if(!u(f)){e[r][o]=f;continue}v.forEach(m=>{let g="";f.forEach(C=>{g+=`${m}:${C} `;}),e[r][o][m]=g.trimEnd();});}}return e},a=t=>{try{if(!t.includes("tailwind-variants"))return t;let n=d(t);if(s(n))return t;let e=JSON.stringify(n.map(r=>j(r)),void 0,2);return t.concat(`
+var b=["xs","sm","md","lg","xl","2xl"],a={tv:/tv\({[\s\S]*?}\)/g,tvContent:/\({[\s\S]*?}\)/g,comment:/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,blankLine:/^\s*$(?:\r\n?|\n)/gm,ext:/\.\w+/g},u=n=>Array.isArray(n),g=n=>typeof n=="string",m=n=>typeof n=="object",y=n=>typeof n=="function",f=n=>!!(!n||u(n)&&n.length===0||g(n)&&n.length===0||m(n)&&Object.keys(n).length===0),E=(...n)=>t=>n.reduce((e,r)=>r(e),t),O=n=>n.replace(a.comment,"$1").toString().replace(a.blankLine,"").toString().match(a.tv),S=n=>{let t=O(n);if(!f(t))return t.map(e=>new Function(`return ${e.match(a.tvContent).toString()}`)())},h=n=>n.flatMap(t=>t).toString().replaceAll(","," ").split(" "),C=n=>{let t={};for(let[e,r]of Object.entries(n))t[e]={},t[e].original=r,!f(r)&&(t.temp=u(r)?h(r):r.split(" "),b.forEach(o=>{let s="";t.temp.forEach(i=>{s+=`${o}:${i} `;}),t[e][o]=s.trimEnd();}),delete t.temp);return t},$=n=>g(n)?n.split(" "):u(n)?h(n):m(n)?C(n):n,d=n=>{let{variants:t={}}=n;if(f(t))return;let e={};for(let[r,o]of Object.entries(t))if(e[r]={},!f(o))for(let[s,i]of Object.entries(o)){if(e[r][s]={},e[r][s].original=i,f(i))continue;let c=$(i);if(!f(c)){if(!u(c)){e[r][s]=c;continue}b.forEach(v=>{let x="";c.forEach(j=>{x+=`${v}:${j} `;}),e[r][s][v]=x.trimEnd();});}}return e},l=n=>{try{if(!n.includes("tailwind-variants"))return n;let t=S(n);if(f(t))return n;let e=JSON.stringify(t.map(r=>d(r)),void 0,2);return n.concat(`
 /*
 
 ${e}
 
 */
-`)}catch{return t}},S={tsx:t=>a(t),ts:t=>a(t),jsx:t=>a(t),js:t=>a(t)};
+`)}catch{return n}},p=n=>{let t=n.map(e=>{if(m(e)&&e.extension)return e.extension;let r=e.match(a.ext);return r||(r=e.split("{"),r=r.pop().replace("}","").split(",")),r.map(o=>o.replace(".","").split(".")).flat()}).flatMap(e=>e);return Array.from(new Set(t)).filter(e=>e!=="html")},T=n=>{var e,r;let t=Object.assign({},n);if(f(t==null?void 0:t.content)||g(t.content))return t;if(u(t.content)){let s=p(t.content).map(i=>[i,l]);return t.content={},t.content.files=n.content,t.content.transform=Object.fromEntries(s),t}if(m(t.content)){if(f((e=t.content)==null?void 0:e.files)||g(t.content.files))return t;if(f((r=t.content)==null?void 0:r.transform)){let s=p(t.content.files).map(i=>[i,l]);return t.content.transform=Object.fromEntries(s),t}if(y(t.content.transform)){let{transform:o}=n.content,i=p(t.content.files).map(c=>[c,E(l,o)]);return t.content.transform=Object.fromEntries(i),t}if(m(t.content.transform)){let{transform:o}=n.content,i=p(t.content.files).map(c=>[c,E(l,o[c]&&o[c])]);return t.content.transform=Object.fromEntries(i),t}return t}return t};
 
-exports.transformer = S;
+exports.tvTransformer = l;
+exports.withTV = T;

package/dist/transformer.d.ts

@@ -1,8 +1,13 @@
-export type TVTransformer = {
-  tsx(content: string): string;
-  ts(content: string): string;
-  jsx(content: string): string;
-  js(content: string): string;
+import type {Config} from "tailwindcss/types/config";
+
+export type TailwindConfig = Config;
+
+export type WithTV = {
+  <TC extends TailwindConfig>(tvConfig: TailwindConfig): TC;
 };
 
-export declare const transformer: TVTransformer;
+export declare const withTV: WithTV;
+
+export type TVTransformer = {(content: string): string};
+
+export declare const tvTransformer: TVTransformer;

package/dist/transformer.js

@@ -1,9 +1,9 @@
-var v=["xs","sm","md","lg","xl","2xl"],l={tv:/tv\({[\s\S]*?}\)/g,tvContent:/\({[\s\S]*?}\)/g,comment:/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,blankLine:/^\s*$(?:\r\n?|\n)/gm},u=t=>Array.isArray(t),s=t=>!!(!t||u(t)&&t.length===0||typeof t=="string"&&t.length===0||typeof t=="object"&&Object.keys(t).length===0),y=t=>t.replace(l.comment,"$1").toString().replace(l.blankLine,"").toString().match(l.tv),d=t=>{let n=y(t);if(!s(n))return n.map(e=>new Function(`return ${e.match(l.tvContent).toString()}`)())},p=t=>t.flatMap(n=>n).toString().replaceAll(","," ").split(" "),h=t=>{let n={};for(let[e,r]of Object.entries(t))n[e]={},n[e].original=r,!s(r)&&(n.temp=u(r)?p(r):r.split(" "),v.forEach(i=>{let o="";n.temp.forEach(c=>{o+=`${i}:${c} `;}),n[e][i]=o.trimEnd();}),delete n.temp);return n},b=t=>typeof t=="string"?t.split(" "):u(t)?p(t):t instanceof Object?h(t):t,j=t=>{let{variants:n={}}=t;if(s(n))return;let e={};for(let[r,i]of Object.entries(n))if(e[r]={},!s(i))for(let[o,c]of Object.entries(i)){if(e[r][o]={},e[r][o].original=c,s(c))continue;let f=b(c);if(!s(f)){if(!u(f)){e[r][o]=f;continue}v.forEach(m=>{let g="";f.forEach(C=>{g+=`${m}:${C} `;}),e[r][o][m]=g.trimEnd();});}}return e},a=t=>{try{if(!t.includes("tailwind-variants"))return t;let n=d(t);if(s(n))return t;let e=JSON.stringify(n.map(r=>j(r)),void 0,2);return t.concat(`
+var b=["xs","sm","md","lg","xl","2xl"],a={tv:/tv\({[\s\S]*?}\)/g,tvContent:/\({[\s\S]*?}\)/g,comment:/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm,blankLine:/^\s*$(?:\r\n?|\n)/gm,ext:/\.\w+/g},u=n=>Array.isArray(n),g=n=>typeof n=="string",m=n=>typeof n=="object",y=n=>typeof n=="function",f=n=>!!(!n||u(n)&&n.length===0||g(n)&&n.length===0||m(n)&&Object.keys(n).length===0),E=(...n)=>t=>n.reduce((e,r)=>r(e),t),O=n=>n.replace(a.comment,"$1").toString().replace(a.blankLine,"").toString().match(a.tv),S=n=>{let t=O(n);if(!f(t))return t.map(e=>new Function(`return ${e.match(a.tvContent).toString()}`)())},h=n=>n.flatMap(t=>t).toString().replaceAll(","," ").split(" "),C=n=>{let t={};for(let[e,r]of Object.entries(n))t[e]={},t[e].original=r,!f(r)&&(t.temp=u(r)?h(r):r.split(" "),b.forEach(o=>{let s="";t.temp.forEach(i=>{s+=`${o}:${i} `;}),t[e][o]=s.trimEnd();}),delete t.temp);return t},$=n=>g(n)?n.split(" "):u(n)?h(n):m(n)?C(n):n,d=n=>{let{variants:t={}}=n;if(f(t))return;let e={};for(let[r,o]of Object.entries(t))if(e[r]={},!f(o))for(let[s,i]of Object.entries(o)){if(e[r][s]={},e[r][s].original=i,f(i))continue;let c=$(i);if(!f(c)){if(!u(c)){e[r][s]=c;continue}b.forEach(v=>{let x="";c.forEach(j=>{x+=`${v}:${j} `;}),e[r][s][v]=x.trimEnd();});}}return e},l=n=>{try{if(!n.includes("tailwind-variants"))return n;let t=S(n);if(f(t))return n;let e=JSON.stringify(t.map(r=>d(r)),void 0,2);return n.concat(`
 /*
 
 ${e}
 
 */
-`)}catch{return t}},S={tsx:t=>a(t),ts:t=>a(t),jsx:t=>a(t),js:t=>a(t)};
+`)}catch{return n}},p=n=>{let t=n.map(e=>{if(m(e)&&e.extension)return e.extension;let r=e.match(a.ext);return r||(r=e.split("{"),r=r.pop().replace("}","").split(",")),r.map(o=>o.replace(".","").split(".")).flat()}).flatMap(e=>e);return Array.from(new Set(t)).filter(e=>e!=="html")},T=n=>{var e,r;let t=Object.assign({},n);if(f(t==null?void 0:t.content)||g(t.content))return t;if(u(t.content)){let s=p(t.content).map(i=>[i,l]);return t.content={},t.content.files=n.content,t.content.transform=Object.fromEntries(s),t}if(m(t.content)){if(f((e=t.content)==null?void 0:e.files)||g(t.content.files))return t;if(f((r=t.content)==null?void 0:r.transform)){let s=p(t.content.files).map(i=>[i,l]);return t.content.transform=Object.fromEntries(s),t}if(y(t.content.transform)){let{transform:o}=n.content,i=p(t.content.files).map(c=>[c,E(l,o)]);return t.content.transform=Object.fromEntries(i),t}if(m(t.content.transform)){let{transform:o}=n.content,i=p(t.content.files).map(c=>[c,E(l,o[c]&&o[c])]);return t.content.transform=Object.fromEntries(i),t}return t}return t};
 
-export { S as transformer };
+export { l as tvTransformer, T as withTV };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-variants",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "🦄 Tailwindcss first-class variant API",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "license": "MIT",
@@ -62,12 +62,16 @@
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.1",
+    "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
     "tsup": "6.4.0",
     "typescript": "4.6.2",
     "webpack": "^5.53.0"
   },
+  "peerDependencies": {
+    "tailwindcss": "*"
+  },
   "keywords": [
     "tailwindcss",
     "classes",