@itamarshdev/reactwind 1.1.0 → 1.2.0

package/README.md

@@ -1,15 +1,15 @@
-# 🚀 ReactWind
+# ReactWind
 
-[![Version](https://img.shields.io/npm/v/reactwind)](https://www.npmjs.com/package/reactwind)
-[![License](https://img.shields.io/npm/l/reactwind)](https://github.com/reactwind/reactwind/blob/main/LICENSE)
-[![Demo](https://img.shields.io/badge/storybook-demo-FF4785?logo=storybook)](https://itamarsharify.github.io/reactwind/storybook/index.html)
-[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+[![Version](https://img.shields.io/npm/v/@itamarshdev/reactwind)](https://www.npmjs.com/package/@itamarshdev/reactwind)
+[![License](https://img.shields.io/npm/l/@itamarshdev/reactwind)](https://github.com/ItamarShDev/reactwind/blob/main/LICENSE)
+[![Demo](https://img.shields.io/badge/storybook-demo-FF4785?logo=storybook)](https://ItamarShDev.github.io/reactwind/storybook/)
+[![semantic-release](https://img.shields.io/badge/semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 **ReactWind** is a JSX runtime wrapper that brings the power of Tailwind CSS shorthands and array-based classNames directly to your React components. No more template literal spaghetti or complex utility merges.
 
 ---
 
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @itamarshdev/reactwind
@@ -20,20 +20,20 @@ yarn add @itamarshdev/reactwind
 ```
 
 
-## ✨ Features
+## Features
 
-- 🎯 **Prop-based Styling**: Use Tailwind utilities as props: `<div flex bg="blue-500" p={4} />`.
-- 🧬 **Array ClassNames**: Pass classes as clean arrays: `classNames={['text-center', isActive && 'font-bold']}`.
-- 💨 **Zero Runtime (Concept)**: Designed for minimal overhead. Most transformations happen at the JSX level.
-- 📘 **TypeScript First**: Automatic types for nearly all Tailwind utilities.
-- 🔌 **Framework Agnostic**: Works with Vite, Next.js, and any stack supporting custom JSX runtimes.
+- **Prop-based Styling**: Use Tailwind utilities as props: `<div flex bg="blue-500" p={4} />`.
+- **Array ClassNames**: Pass classes as clean arrays: `classNames={['text-center', isActive && 'font-bold']}`.
+- **Zero Runtime (Concept)**: Designed for minimal overhead. Most transformations happen at the JSX level.
+- **TypeScript First**: Automatic types for nearly all Tailwind utilities.
+- **Framework Agnostic**: Works with Vite, Next.js, and any stack supporting custom JSX runtimes.
 
 ---
 
 
-## 🛠 Setup
+## Setup
 
-Configure your build tool to use `reactwind` as your JSX import source.
+Configure your build tool to use `@itamarshdev/reactwind` as your JSX import source.
 
 ### Vite
 
@@ -41,7 +41,7 @@ Configure your build tool to use `reactwind` as your JSX import source.
 // vite.config.ts
 export default defineConfig({
   esbuild: {
-    jsxImportSource: 'reactwind',
+    jsxImportSource: '@itamarshdev/reactwind',
   },
 });
 ```
@@ -53,14 +53,14 @@ export default defineConfig({
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "reactwind"
+    "jsxImportSource": "@itamarshdev/reactwind"
   }
 }
 ```
 
 ---
 
-## 📖 Usage Examples
+## Usage Examples
 
 ### 1. Shorthand Props & Booleans
 
@@ -132,7 +132,7 @@ export default defineConfig({
 
 ---
 
-## 🎯 Goals
+## Goals
 
 ReactWind aims to improve the developer experience of styling with Tailwind CSS by:
 1. **Removing syntactic noise**: Replacing long `className` strings with structured props.
@@ -141,10 +141,10 @@ ReactWind aims to improve the developer experience of styling with Tailwind CSS
 
 ---
 
-## 🤝 Contributing
+## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## 📄 License
+## License
 
-MIT © [reactwind](https://github.com/reactwind/reactwind)
+MIT © [ItamarShDev](https://github.com/ItamarShDev/reactwind)

package/dist/{chunk-KAWYX6WW.js → chunk-6MX4RX23.js}

@@ -260,6 +260,10 @@ var withClassNames = (props) => {
   if (!props) {
     return props;
   }
+  if ("sx" in props && typeof props.sx === "object" && props.sx !== null) {
+    const { sx, ...restProps } = props;
+    return withClassNames({ ...restProps, ...sx });
+  }
   const hasClassNames = "classNames" in props;
   const hasLayoutProps = LAYOUT_PROPS.some((k) => k in props);
   const hasValueProps = Object.keys(VALUE_PROPS_MAP).some((k) => k in props);

package/dist/index.cjs

@@ -286,6 +286,10 @@ var withClassNames = (props) => {
   if (!props) {
     return props;
   }
+  if ("sx" in props && typeof props.sx === "object" && props.sx !== null) {
+    const { sx, ...restProps } = props;
+    return withClassNames({ ...restProps, ...sx });
+  }
   const hasClassNames = "classNames" in props;
   const hasLayoutProps = LAYOUT_PROPS.some((k) => k in props);
   const hasValueProps = Object.keys(VALUE_PROPS_MAP).some((k) => k in props);

package/dist/index.d.cts

@@ -49,13 +49,17 @@ interface LayoutProps {
   shrink?: boolean;
 }
 
+type SxProp = Partial<ValueProps & LayoutProps>;
+
 declare module "react" {
   interface HTMLAttributes<T> extends LayoutProps, ValueProps {
     classNames?: (TailwindClass | string)[];
+    sx?: SxProp;
   }
   interface SVGAttributes<T> extends LayoutProps, ValueProps {
     classNames?: (TailwindClass | string)[];
+    sx?: SxProp;
   }
 }
 
-export type { LayoutProps, ValueProps };
+export type { LayoutProps, SxProp, ValueProps };

package/dist/index.d.ts

@@ -49,13 +49,17 @@ interface LayoutProps {
   shrink?: boolean;
 }
 
+type SxProp = Partial<ValueProps & LayoutProps>;
+
 declare module "react" {
   interface HTMLAttributes<T> extends LayoutProps, ValueProps {
     classNames?: (TailwindClass | string)[];
+    sx?: SxProp;
   }
   interface SVGAttributes<T> extends LayoutProps, ValueProps {
     classNames?: (TailwindClass | string)[];
+    sx?: SxProp;
   }
 }
 
-export type { LayoutProps, ValueProps };
+export type { LayoutProps, SxProp, ValueProps };

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   withClassNames
-} from "./chunk-KAWYX6WW.js";
+} from "./chunk-6MX4RX23.js";
 export {
   withClassNames
 };

package/dist/jsx-dev-runtime.cjs

@@ -288,6 +288,10 @@ var withClassNames = (props) => {
   if (!props) {
     return props;
   }
+  if ("sx" in props && typeof props.sx === "object" && props.sx !== null) {
+    const { sx, ...restProps } = props;
+    return withClassNames({ ...restProps, ...sx });
+  }
   const hasClassNames = "classNames" in props;
   const hasLayoutProps = LAYOUT_PROPS.some((k) => k in props);
   const hasValueProps = Object.keys(VALUE_PROPS_MAP).some((k) => k in props);

package/dist/jsx-dev-runtime.d.cts

@@ -1,4 +1,4 @@
-import './types-Bb5v_nmy.cjs';
+import './types-I6XgQvJp.cjs';
 import React from 'react';
 export { Fragment } from 'react/jsx-dev-runtime';
 export { JSX } from 'react/jsx-runtime';

package/dist/jsx-dev-runtime.d.ts

@@ -1,4 +1,4 @@
-import './types-CBbQP9uE.js';
+import './types-DuRT-DEW.js';
 import React from 'react';
 export { Fragment } from 'react/jsx-dev-runtime';
 export { JSX } from 'react/jsx-runtime';

package/dist/jsx-dev-runtime.js

@@ -1,6 +1,6 @@
 import {
   withClassNames
-} from "./chunk-KAWYX6WW.js";
+} from "./chunk-6MX4RX23.js";
 
 // src/jsx-dev-runtime.ts
 import { Fragment, jsxDEV as reactJsxDEV } from "react/jsx-dev-runtime";

package/dist/jsx-runtime.cjs

@@ -289,6 +289,10 @@ var withClassNames = (props) => {
   if (!props) {
     return props;
   }
+  if ("sx" in props && typeof props.sx === "object" && props.sx !== null) {
+    const { sx, ...restProps } = props;
+    return withClassNames({ ...restProps, ...sx });
+  }
   const hasClassNames = "classNames" in props;
   const hasLayoutProps = LAYOUT_PROPS.some((k) => k in props);
   const hasValueProps = Object.keys(VALUE_PROPS_MAP).some((k) => k in props);

package/dist/jsx-runtime.d.cts

@@ -1,4 +1,4 @@
-import './types-Bb5v_nmy.cjs';
+import './types-I6XgQvJp.cjs';
 import React from 'react';
 export { Fragment, JSX } from 'react/jsx-runtime';
 import './tailwind.types-BSQudz76.cjs';

package/dist/jsx-runtime.d.ts

@@ -1,4 +1,4 @@
-import './types-CBbQP9uE.js';
+import './types-DuRT-DEW.js';
 import React from 'react';
 export { Fragment, JSX } from 'react/jsx-runtime';
 import './tailwind.types-BSQudz76.js';

package/dist/jsx-runtime.js

@@ -1,6 +1,6 @@
 import {
   withClassNames
-} from "./chunk-KAWYX6WW.js";
+} from "./chunk-6MX4RX23.js";
 
 // src/jsx-runtime.ts
 import { Fragment, jsx as reactJsx, jsxs as reactJsxs } from "react/jsx-runtime";

package/dist/{types-CBbQP9uE.d.ts → types-DuRT-DEW.d.ts}

@@ -233,13 +233,16 @@ interface ModifierProps {
     dark?: ModifierValue;
     print?: ModifierValue;
 }
+type SxProp = Partial<ValueProps & LayoutProps & ModifierProps>;
 declare module "react" {
     interface HTMLAttributes<T> extends LayoutProps, ValueProps, ModifierProps {
         classNames?: (TailwindClass | string)[];
+        sx?: SxProp;
         [key: string]: any;
     }
     interface SVGAttributes<T> extends LayoutProps, ValueProps, ModifierProps {
         classNames?: (TailwindClass | string)[];
+        sx?: SxProp;
         [key: string]: any;
     }
 }

package/dist/{types-Bb5v_nmy.d.cts → types-I6XgQvJp.d.cts}

@@ -233,13 +233,16 @@ interface ModifierProps {
     dark?: ModifierValue;
     print?: ModifierValue;
 }
+type SxProp = Partial<ValueProps & LayoutProps & ModifierProps>;
 declare module "react" {
     interface HTMLAttributes<T> extends LayoutProps, ValueProps, ModifierProps {
         classNames?: (TailwindClass | string)[];
+        sx?: SxProp;
         [key: string]: any;
     }
     interface SVGAttributes<T> extends LayoutProps, ValueProps, ModifierProps {
         classNames?: (TailwindClass | string)[];
+        sx?: SxProp;
         [key: string]: any;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itamarshdev/reactwind",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "JSX runtime wrapper that adds a classNames prop to React elements.",
   "keywords": [
     "react",