tailwind-variants 0.0.24 → 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"],a={tv:new RegExp(/tv\({[\s\S]*?}\)/g),tvContent:new RegExp(/\({[\s\S]*?}\)/g),comment:new RegExp(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm),blankLine:new RegExp(/^\s*$(?:\r\n?|\n)/gm)},n=t=>!!(!t||Array.isArray(t)&&t.length===0||typeof t=="string"&&t.length===0||typeof t=="object"&&Object.keys(t).length===0),p=t=>t.replace(a.comment,"$1").toString().replace(a.blankLine,"").toString().match(a.tv),d=content=>{let tvStrArray=p(content);if(!n(tvStrArray))return tvStrArray.map(item=>{let str=item.toString(),tv=str.match(a.tvContent).toString();return eval(tv.replaceAll("`",'"').replaceAll("'",'"').replaceAll(/\s{2,}/g," ").replaceAll(/(\r\n|\n|\r)/gm,"").trim())})},y=t=>{let{variants:s={}}=t;if(n(s))return;let e={};for(let[r,c]of Object.entries(s))if(!n(c)){e[r]={};for(let[o,l]of Object.entries(c)){if(n(l))continue;let m=l.split(" ");if(!n(m)){e[r][o]={};for(let u of v.values()){let f="";m.forEach(g=>{f+=`${u}:${g} `;}),e[r][o].original=l,e[r][o][u]=f.trimEnd();}}}}return e},i=t=>{try{if(!t.includes("tailwind-variants"))return t;let e=d(t);if(n(e))return t;let r=e.map(o=>y(o));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(`
 /*
 
-${JSON.stringify(r,void 0,2)}
+${e}
 
 */
-`)}catch{return t}},C={tsx:t=>i(t),ts:t=>i(t),jsx:t=>i(t),js:t=>i(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 = C;
+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"],a={tv:new RegExp(/tv\({[\s\S]*?}\)/g),tvContent:new RegExp(/\({[\s\S]*?}\)/g),comment:new RegExp(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm),blankLine:new RegExp(/^\s*$(?:\r\n?|\n)/gm)},n=t=>!!(!t||Array.isArray(t)&&t.length===0||typeof t=="string"&&t.length===0||typeof t=="object"&&Object.keys(t).length===0),p=t=>t.replace(a.comment,"$1").toString().replace(a.blankLine,"").toString().match(a.tv),d=content=>{let tvStrArray=p(content);if(!n(tvStrArray))return tvStrArray.map(item=>{let str=item.toString(),tv=str.match(a.tvContent).toString();return eval(tv.replaceAll("`",'"').replaceAll("'",'"').replaceAll(/\s{2,}/g," ").replaceAll(/(\r\n|\n|\r)/gm,"").trim())})},y=t=>{let{variants:s={}}=t;if(n(s))return;let e={};for(let[r,c]of Object.entries(s))if(!n(c)){e[r]={};for(let[o,l]of Object.entries(c)){if(n(l))continue;let m=l.split(" ");if(!n(m)){e[r][o]={};for(let u of v.values()){let f="";m.forEach(g=>{f+=`${u}:${g} `;}),e[r][o].original=l,e[r][o][u]=f.trimEnd();}}}}return e},i=t=>{try{if(!t.includes("tailwind-variants"))return t;let e=d(t);if(n(e))return t;let r=e.map(o=>y(o));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(`
 /*
 
-${JSON.stringify(r,void 0,2)}
+${e}
 
 */
-`)}catch{return t}},C={tsx:t=>i(t),ts:t=>i(t),jsx:t=>i(t),js:t=>i(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 { C as transformer };
+export { l as tvTransformer, T as withTV };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-variants",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "description": "🦄 Tailwindcss first-class variant API",
   "author": "Junior Garcia <jrgarciadev@gmail.com>",
   "license": "MIT",
@@ -27,10 +27,7 @@
   ],
   "scripts": {
     "build": "tsup && node copy-types.cjs",
-    "dev": "pnpm build:fast -- --watch",
-    "clean": "rimraf dist .turbo",
     "typecheck": "tsc --noEmit",
-    "dry-run": "node ./scripts/dry-run.js",
     "prepack": "clean-package",
     "postpack": "clean-package restore",
     "lint": "eslint -c .eslintrc.json ./src/**/*.{ts,tsx}",
@@ -61,16 +58,20 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
+    "jest": "28.1.1",
     "prettier": "^2.2.1",
     "prettier-eslint": "^12.0.0",
     "prettier-eslint-cli": "^5.0.1",
-    "jest": "28.1.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",