@itamarshdev/reactwind 1.0.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
 
@@ -86,9 +86,53 @@ export default defineConfig({
 </div>
 ```
 
+### 3. Modifier Props (Hover, Focus, Responsive, etc.)
+
+```tsx
+// Hyphenated syntax
+<button hover-bg="blue-700" hover-scale="105" focus-ring="2">
+  Hover Me
+</button>
+
+// Object syntax for multiple props per modifier
+<button hover={{ bg: "blue-700", scale: "105", shadow: "lg" }}>
+  Hover Me
+</button>
+
+// Stacked modifiers via nesting
+<div dark={{ hover: { bg: "slate-800", text: "white" } }}>
+  Dark mode hover styles
+</div>
+
+// Responsive breakpoints
+<div md={{ flex: true, gap: "4" }} lg={{ gap: "8" }}>
+  Responsive layout
+</div>
+```
+
+### 4. Position & Layout Props
+
+```tsx
+<div absolute top="0" right="0" inset-x="4">
+  Positioned element
+</div>
+
+<div grid grid-cols="3" gap-x="4" gap-y="2">
+  Grid with different gaps
+</div>
+```
+
+### 5. Gradient & Background Props
+
+```tsx
+<div bg-gradient="to-r" from="blue-500" via="purple-500" to="pink-500">
+  Gradient background
+</div>
+```
+
 ---
 
-## 🎯 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.
@@ -97,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-6MX4RX23.js

@@ -0,0 +1,345 @@
+// src/runtime.ts
+var LAYOUT_PROPS = [
+  "flex",
+  "grid",
+  "hidden",
+  "block",
+  "inline",
+  "inline-block",
+  "inline-flex",
+  "inline-grid",
+  "relative",
+  "absolute",
+  "fixed",
+  "sticky",
+  "static",
+  "flex-row",
+  "flex-col",
+  "flex-wrap",
+  "flex-nowrap",
+  "items-center",
+  "items-start",
+  "items-end",
+  "justify-center",
+  "justify-between",
+  "justify-start",
+  "justify-end",
+  "grow",
+  "shrink",
+  "italic",
+  "not-italic",
+  "underline",
+  "uppercase",
+  "lowercase",
+  "capitalize",
+  "truncate",
+  "visible",
+  "invisible",
+  "collapse",
+  "pointer-events-none",
+  "pointer-events-auto",
+  "sr-only",
+  "not-sr-only"
+];
+var VALUE_PROPS_MAP = {
+  bg: "bg",
+  text: "text",
+  border: "border",
+  fill: "fill",
+  stroke: "stroke",
+  p: "p",
+  m: "m",
+  px: "px",
+  py: "py",
+  mx: "mx",
+  my: "my",
+  gap: "gap",
+  w: "w",
+  h: "h",
+  rounded: "rounded",
+  shadow: "shadow",
+  font: "font",
+  z: "z",
+  mb: "mb",
+  mt: "mt",
+  ml: "ml",
+  mr: "mr",
+  pb: "pb",
+  pt: "pt",
+  pl: "pl",
+  pr: "pr",
+  tracking: "tracking",
+  leading: "leading",
+  "max-w": "max-w",
+  "min-w": "min-w",
+  "min-h": "min-h",
+  "max-h": "max-h",
+  "grid-cols": "grid-cols",
+  "col-span": "col-span",
+  "row-span": "row-span",
+  "grid-rows": "grid-rows",
+  "items": "items",
+  "justify": "justify",
+  "self": "self",
+  "place-content": "place-content",
+  "place-items": "place-items",
+  "place-self": "place-self",
+  "order": "order",
+  overflow: "overflow",
+  decoration: "decoration",
+  whitespace: "whitespace",
+  break: "break",
+  content: "content",
+  opacity: "opacity",
+  "bg-opacity": "bg-opacity",
+  "text-opacity": "text-opacity",
+  "border-opacity": "border-opacity",
+  ring: "ring",
+  "ring-offset": "ring-offset",
+  outline: "outline",
+  divide: "divide",
+  "mix-blend": "mix-blend",
+  "backdrop-blur": "backdrop-blur",
+  blur: "blur",
+  brightness: "brightness",
+  contrast: "contrast",
+  grayscale: "grayscale",
+  "hue-rotate": "hue-rotate",
+  invert: "invert",
+  saturate: "saturate",
+  sepia: "sepia",
+  "drop-shadow": "drop-shadow",
+  transition: "transition",
+  duration: "duration",
+  ease: "ease",
+  delay: "delay",
+  animate: "animate",
+  cursor: "cursor",
+  "pointer-events": "pointer-events",
+  resize: "resize",
+  select: "select",
+  scale: "scale",
+  rotate: "rotate",
+  translate: "translate",
+  skew: "skew",
+  origin: "origin",
+  // Layout & Position
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
+  "inset-x": "inset-x",
+  "inset-y": "inset-y",
+  aspect: "aspect",
+  columns: "columns",
+  float: "float",
+  clear: "clear",
+  // Flexbox & Grid
+  basis: "basis",
+  "gap-x": "gap-x",
+  "gap-y": "gap-y",
+  "auto-cols": "auto-cols",
+  "auto-rows": "auto-rows",
+  "grid-flow": "grid-flow",
+  "space-x": "space-x",
+  "space-y": "space-y",
+  "justify-items": "justify-items",
+  "justify-self": "justify-self",
+  // Sizing
+  size: "size",
+  // Borders
+  "border-t": "border-t",
+  "border-r": "border-r",
+  "border-b": "border-b",
+  "border-l": "border-l",
+  "border-x": "border-x",
+  "border-y": "border-y",
+  "rounded-t": "rounded-t",
+  "rounded-r": "rounded-r",
+  "rounded-b": "rounded-b",
+  "rounded-l": "rounded-l",
+  "rounded-tl": "rounded-tl",
+  "rounded-tr": "rounded-tr",
+  "rounded-bl": "rounded-bl",
+  "rounded-br": "rounded-br",
+  "border-style": "border",
+  // Typography
+  "text-align": "text",
+  align: "align",
+  "line-clamp": "line-clamp",
+  list: "list",
+  indent: "indent",
+  // Backgrounds & Gradients
+  "bg-gradient": "bg-gradient",
+  from: "from",
+  via: "via",
+  to: "to",
+  "bg-size": "bg",
+  "bg-position": "bg",
+  "bg-repeat": "bg",
+  // Interactivity
+  scroll: "scroll",
+  snap: "snap",
+  touch: "touch",
+  "will-change": "will-change",
+  caret: "caret",
+  accent: "accent",
+  // SVG
+  "stroke-width": "stroke"
+};
+var MODIFIERS = [
+  "hover",
+  "focus",
+  "active",
+  "visited",
+  "disabled",
+  "group-hover",
+  "group-focus",
+  "focus-within",
+  "focus-visible",
+  "target",
+  "first",
+  "last",
+  "only",
+  "odd",
+  "even",
+  "first-of-type",
+  "last-of-type",
+  "only-of-type",
+  "empty",
+  "checked",
+  "indeterminate",
+  "default",
+  "required",
+  "valid",
+  "invalid",
+  "in-range",
+  "out-of-range",
+  "placeholder-shown",
+  "autofill",
+  "read-only",
+  "open",
+  // Responsive breakpoints
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  // Dark mode
+  "dark",
+  // Print
+  "print"
+];
+var BOOLEAN_VALUE_PROPS = ["shadow", "rounded", "border", "transition", "ring", "outline"];
+var joinClassNames = (classNames) => {
+  if (!classNames || classNames.length === 0) {
+    return "";
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var processModifierObject = (modifier, obj, classes) => {
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (MODIFIERS.includes(key)) {
+        processModifierObject(`${modifier}:${key}`, value, classes);
+      }
+    } else if (key in VALUE_PROPS_MAP) {
+      const prefix = VALUE_PROPS_MAP[key];
+      if (typeof value === "string" || typeof value === "number") {
+        classes.push(`${modifier}:${prefix}-${value}`);
+      } else if (value === true && BOOLEAN_VALUE_PROPS.includes(key)) {
+        classes.push(`${modifier}:${key}`);
+      }
+    } else if (LAYOUT_PROPS.includes(key) && value === true) {
+      classes.push(`${modifier}:${key}`);
+    }
+  }
+};
+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);
+  const propsKeys = Object.keys(props);
+  const hasHyphenatedModifiers = propsKeys.some((key) => {
+    return MODIFIERS.some((mod) => key.startsWith(`${mod}-`));
+  });
+  const hasObjectModifiers = propsKeys.some((key) => {
+    return MODIFIERS.includes(key) && typeof props[key] === "object" && props[key] !== null;
+  });
+  const hasModifiers = hasHyphenatedModifiers || hasObjectModifiers;
+  if (!hasClassNames && !hasLayoutProps && !hasValueProps && !hasModifiers) {
+    return props;
+  }
+  const { classNames, className, ...rest } = props;
+  const generatedClasses = [];
+  const cleanRest = { ...rest };
+  for (const prop of LAYOUT_PROPS) {
+    if (prop in cleanRest && cleanRest[prop] === true) {
+      generatedClasses.push(prop);
+      delete cleanRest[prop];
+    }
+  }
+  for (const [prop, prefix] of Object.entries(VALUE_PROPS_MAP)) {
+    if (prop in cleanRest) {
+      const value = cleanRest[prop];
+      if (typeof value === "string" || typeof value === "number") {
+        generatedClasses.push(`${prefix}-${value}`);
+        delete cleanRest[prop];
+      } else if (value === true && BOOLEAN_VALUE_PROPS.includes(prop)) {
+        generatedClasses.push(prop);
+        delete cleanRest[prop];
+      }
+    }
+  }
+  for (const modifier of MODIFIERS) {
+    if (modifier in cleanRest) {
+      const value = cleanRest[modifier];
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        processModifierObject(modifier, value, generatedClasses);
+        delete cleanRest[modifier];
+      }
+    }
+  }
+  Object.keys(cleanRest).forEach((key) => {
+    const firstHyphenIndex = key.indexOf("-");
+    if (firstHyphenIndex === -1) return;
+    const modifier = key.substring(0, firstHyphenIndex);
+    if (MODIFIERS.includes(modifier)) {
+      const restKey = key.substring(firstHyphenIndex + 1);
+      const value = cleanRest[key];
+      if (restKey in VALUE_PROPS_MAP) {
+        const prefix = VALUE_PROPS_MAP[restKey];
+        if (typeof value === "string" || typeof value === "number") {
+          generatedClasses.push(`${modifier}:${prefix}-${value}`);
+          delete cleanRest[key];
+        } else if (value === true && BOOLEAN_VALUE_PROPS.includes(restKey)) {
+          generatedClasses.push(`${modifier}:${restKey}`);
+          delete cleanRest[key];
+        }
+      } else if (LAYOUT_PROPS.includes(restKey)) {
+        if (value === true) {
+          generatedClasses.push(`${modifier}:${restKey}`);
+          delete cleanRest[key];
+        }
+      }
+    }
+  });
+  const joined = joinClassNames(classNames || []);
+  const merged = [className, ...generatedClasses, joined].filter(Boolean).join(" ");
+  return {
+    ...cleanRest,
+    ...merged ? { className: merged } : {}
+  };
+};
+
+export {
+  withClassNames
+};

package/dist/index.cjs

@@ -148,7 +148,71 @@ var VALUE_PROPS_MAP = {
   rotate: "rotate",
   translate: "translate",
   skew: "skew",
-  origin: "origin"
+  origin: "origin",
+  // Layout & Position
+  top: "top",
+  right: "right",
+  bottom: "bottom",
+  left: "left",
+  inset: "inset",
+  "inset-x": "inset-x",
+  "inset-y": "inset-y",
+  aspect: "aspect",
+  columns: "columns",
+  float: "float",
+  clear: "clear",
+  // Flexbox & Grid
+  basis: "basis",
+  "gap-x": "gap-x",
+  "gap-y": "gap-y",
+  "auto-cols": "auto-cols",
+  "auto-rows": "auto-rows",
+  "grid-flow": "grid-flow",
+  "space-x": "space-x",
+  "space-y": "space-y",
+  "justify-items": "justify-items",
+  "justify-self": "justify-self",
+  // Sizing
+  size: "size",
+  // Borders
+  "border-t": "border-t",
+  "border-r": "border-r",
+  "border-b": "border-b",
+  "border-l": "border-l",
+  "border-x": "border-x",
+  "border-y": "border-y",
+  "rounded-t": "rounded-t",
+  "rounded-r": "rounded-r",
+  "rounded-b": "rounded-b",
+  "rounded-l": "rounded-l",
+  "rounded-tl": "rounded-tl",
+  "rounded-tr": "rounded-tr",
+  "rounded-bl": "rounded-bl",
+  "rounded-br": "rounded-br",
+  "border-style": "border",
+  // Typography
+  "text-align": "text",
+  align: "align",
+  "line-clamp": "line-clamp",
+  list: "list",
+  indent: "indent",
+  // Backgrounds & Gradients
+  "bg-gradient": "bg-gradient",
+  from: "from",
+  via: "via",
+  to: "to",
+  "bg-size": "bg",
+  "bg-position": "bg",
+  "bg-repeat": "bg",
+  // Interactivity
+  scroll: "scroll",
+  snap: "snap",
+  touch: "touch",
+  "will-change": "will-change",
+  caret: "caret",
+  accent: "accent",
+  // SVG
+  "stroke-width": "stroke"
 };
 var MODIFIERS = [
   "hover",
@@ -193,23 +257,50 @@ var MODIFIERS = [
   // Print
   "print"
 ];
+var BOOLEAN_VALUE_PROPS = ["shadow", "rounded", "border", "transition", "ring", "outline"];
 var joinClassNames = (classNames) => {
   if (!classNames || classNames.length === 0) {
     return "";
   }
   return classNames.filter(Boolean).join(" ");
 };
+var processModifierObject = (modifier, obj, classes) => {
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      if (MODIFIERS.includes(key)) {
+        processModifierObject(`${modifier}:${key}`, value, classes);
+      }
+    } else if (key in VALUE_PROPS_MAP) {
+      const prefix = VALUE_PROPS_MAP[key];
+      if (typeof value === "string" || typeof value === "number") {
+        classes.push(`${modifier}:${prefix}-${value}`);
+      } else if (value === true && BOOLEAN_VALUE_PROPS.includes(key)) {
+        classes.push(`${modifier}:${key}`);
+      }
+    } else if (LAYOUT_PROPS.includes(key) && value === true) {
+      classes.push(`${modifier}:${key}`);
+    }
+  }
+};
 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);
   const propsKeys = Object.keys(props);
-  const hasModifiers = propsKeys.some((key) => {
+  const hasHyphenatedModifiers = propsKeys.some((key) => {
     return MODIFIERS.some((mod) => key.startsWith(`${mod}-`));
   });
+  const hasObjectModifiers = propsKeys.some((key) => {
+    return MODIFIERS.includes(key) && typeof props[key] === "object" && props[key] !== null;
+  });
+  const hasModifiers = hasHyphenatedModifiers || hasObjectModifiers;
   if (!hasClassNames && !hasLayoutProps && !hasValueProps && !hasModifiers) {
     return props;
   }
@@ -228,12 +319,21 @@ var withClassNames = (props) => {
       if (typeof value === "string" || typeof value === "number") {
         generatedClasses.push(`${prefix}-${value}`);
         delete cleanRest[prop];
-      } else if (value === true && (prop === "shadow" || prop === "rounded" || prop === "border" || prop === "transition")) {
+      } else if (value === true && BOOLEAN_VALUE_PROPS.includes(prop)) {
         generatedClasses.push(prop);
         delete cleanRest[prop];
       }
     }
   }
+  for (const modifier of MODIFIERS) {
+    if (modifier in cleanRest) {
+      const value = cleanRest[modifier];
+      if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+        processModifierObject(modifier, value, generatedClasses);
+        delete cleanRest[modifier];
+      }
+    }
+  }
   Object.keys(cleanRest).forEach((key) => {
     const firstHyphenIndex = key.indexOf("-");
     if (firstHyphenIndex === -1) return;
@@ -246,7 +346,7 @@ var withClassNames = (props) => {
         if (typeof value === "string" || typeof value === "number") {
           generatedClasses.push(`${modifier}:${prefix}-${value}`);
           delete cleanRest[key];
-        } else if (value === true && (restKey === "shadow" || restKey === "rounded" || restKey === "border")) {
+        } else if (value === true && BOOLEAN_VALUE_PROPS.includes(restKey)) {
           generatedClasses.push(`${modifier}:${restKey}`);
           delete cleanRest[key];
         }

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-M5PDERS6.js";
+} from "./chunk-6MX4RX23.js";
 export {
   withClassNames
 };