@itamarshdev/reactwind 0.1.1

package/README.md

@@ -0,0 +1,106 @@
+# 🚀 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)
+
+**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
+
+```bash
+npm install reactwind
+# or
+bun add reactwind
+# or
+yarn add reactwind
+```
+
+
+## ✨ 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.
+
+---
+
+
+## 🛠 Setup
+
+Configure your build tool to use `reactwind` as your JSX import source.
+
+### Vite
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  esbuild: {
+    jsxImportSource: 'reactwind',
+  },
+});
+```
+
+### TypeScript
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "reactwind"
+  }
+}
+```
+
+---
+
+## 📖 Usage Examples
+
+### 1. Shorthand Props & Booleans
+
+```tsx
+// Instead of <div className="flex items-center justify-between p-4">
+<div flex items-center justify-between p={4}>
+  <span>Header</span>
+  <button bg="blue-600" text="white" px={3} py={1} rounded="md">Click Me</button>
+</div>
+```
+
+### 2. Array-based ClassNames
+
+```tsx
+<div 
+  classNames={[
+    'transition-all duration-300',
+    isHovered ? 'scale-105 shadow-lg' : 'scale-100 shadow-sm',
+    customClass && customClass
+  ]}
+>
+  Card Content
+</div>
+```
+
+---
+
+## 🎯 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.
+2. **Improving modifiability**: Making it easier to toggle styles based on props without complex string manipulation.
+3. **Enhancing discoverability**: leveraging TypeScript to provide autocompletion for styling props.
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+MIT © [reactwind](https://github.com/reactwind/reactwind)

package/dist/chunk-WXTVOZ4W.js

@@ -0,0 +1,161 @@
+// 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",
+  overflow: "overflow",
+  decoration: "decoration",
+  whitespace: "whitespace",
+  break: "break",
+  content: "content",
+  opacity: "opacity",
+  "bg-opacity": "bg-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"
+};
+var joinClassNames = (classNames) => {
+  if (!classNames || classNames.length === 0) {
+    return "";
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var withClassNames = (props) => {
+  if (!props) {
+    return props;
+  }
+  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);
+  if (!hasClassNames && !hasLayoutProps && !hasValueProps) {
+    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 && (prop === "shadow" || prop === "rounded")) {
+        generatedClasses.push(prop);
+        delete cleanRest[prop];
+      }
+    }
+  }
+  const joined = joinClassNames(classNames || []);
+  const merged = [className, ...generatedClasses, joined].filter(Boolean).join(" ");
+  return {
+    ...cleanRest,
+    ...merged ? { className: merged } : {}
+  };
+};
+
+export {
+  withClassNames
+};

package/dist/index.cjs

@@ -0,0 +1,187 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  withClassNames: () => withClassNames
+});
+module.exports = __toCommonJS(index_exports);
+
+// 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",
+  overflow: "overflow",
+  decoration: "decoration",
+  whitespace: "whitespace",
+  break: "break",
+  content: "content",
+  opacity: "opacity",
+  "bg-opacity": "bg-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"
+};
+var joinClassNames = (classNames) => {
+  if (!classNames || classNames.length === 0) {
+    return "";
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var withClassNames = (props) => {
+  if (!props) {
+    return props;
+  }
+  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);
+  if (!hasClassNames && !hasLayoutProps && !hasValueProps) {
+    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 && (prop === "shadow" || prop === "rounded")) {
+        generatedClasses.push(prop);
+        delete cleanRest[prop];
+      }
+    }
+  }
+  const joined = joinClassNames(classNames || []);
+  const merged = [className, ...generatedClasses, joined].filter(Boolean).join(" ");
+  return {
+    ...cleanRest,
+    ...merged ? { className: merged } : {}
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  withClassNames
+});

package/dist/index.d.cts

@@ -0,0 +1,61 @@
+import { T as TailwindColor, a as TailwindSpacing, b as TailwindRadius, c as TailwindShadow, d as TailwindClass } from './tailwind.types-BSQudz76.cjs';
+
+interface ValueProps {
+  bg?: TailwindColor | string;
+  text?: TailwindColor | string;
+  border?: TailwindColor | string;
+  fill?: TailwindColor | string;
+  stroke?: TailwindColor | string;
+  font?: string;
+  p?: TailwindSpacing | string;
+  m?: TailwindSpacing | string;
+  px?: TailwindSpacing | string;
+  py?: TailwindSpacing | string;
+  mx?: TailwindSpacing | string;
+  my?: TailwindSpacing | string;
+  gap?: TailwindSpacing | string;
+  w?: TailwindSpacing | string;
+  h?: TailwindSpacing | string;
+  rounded?: TailwindRadius | string;
+  shadow?: TailwindShadow | boolean | string;
+}
+
+interface LayoutProps {
+  flex?: boolean;
+  grid?: boolean;
+  hidden?: boolean;
+  block?: boolean;
+  inline?: boolean;
+  "inline-block"?: boolean;
+  "inline-flex"?: boolean;
+  "inline-grid"?: boolean;
+  relative?: boolean;
+  absolute?: boolean;
+  fixed?: boolean;
+  sticky?: boolean;
+  static?: boolean;
+  "flex-row"?: boolean;
+  "flex-col"?: boolean;
+  "flex-wrap"?: boolean;
+  "flex-nowrap"?: boolean;
+  "items-center"?: boolean;
+  "items-start"?: boolean;
+  "items-end"?: boolean;
+  "justify-center"?: boolean;
+  "justify-between"?: boolean;
+  "justify-start"?: boolean;
+  "justify-end"?: boolean;
+  grow?: boolean;
+  shrink?: boolean;
+}
+
+declare module "react" {
+  interface HTMLAttributes<T> extends LayoutProps, ValueProps {
+    classNames?: (TailwindClass | string)[];
+  }
+  interface SVGAttributes<T> extends LayoutProps, ValueProps {
+    classNames?: (TailwindClass | string)[];
+  }
+}
+
+export type { LayoutProps, ValueProps };

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { T as TailwindColor, a as TailwindSpacing, b as TailwindRadius, c as TailwindShadow, d as TailwindClass } from './tailwind.types-BSQudz76.js';
+
+interface ValueProps {
+  bg?: TailwindColor | string;
+  text?: TailwindColor | string;
+  border?: TailwindColor | string;
+  fill?: TailwindColor | string;
+  stroke?: TailwindColor | string;
+  font?: string;
+  p?: TailwindSpacing | string;
+  m?: TailwindSpacing | string;
+  px?: TailwindSpacing | string;
+  py?: TailwindSpacing | string;
+  mx?: TailwindSpacing | string;
+  my?: TailwindSpacing | string;
+  gap?: TailwindSpacing | string;
+  w?: TailwindSpacing | string;
+  h?: TailwindSpacing | string;
+  rounded?: TailwindRadius | string;
+  shadow?: TailwindShadow | boolean | string;
+}
+
+interface LayoutProps {
+  flex?: boolean;
+  grid?: boolean;
+  hidden?: boolean;
+  block?: boolean;
+  inline?: boolean;
+  "inline-block"?: boolean;
+  "inline-flex"?: boolean;
+  "inline-grid"?: boolean;
+  relative?: boolean;
+  absolute?: boolean;
+  fixed?: boolean;
+  sticky?: boolean;
+  static?: boolean;
+  "flex-row"?: boolean;
+  "flex-col"?: boolean;
+  "flex-wrap"?: boolean;
+  "flex-nowrap"?: boolean;
+  "items-center"?: boolean;
+  "items-start"?: boolean;
+  "items-end"?: boolean;
+  "justify-center"?: boolean;
+  "justify-between"?: boolean;
+  "justify-start"?: boolean;
+  "justify-end"?: boolean;
+  grow?: boolean;
+  shrink?: boolean;
+}
+
+declare module "react" {
+  interface HTMLAttributes<T> extends LayoutProps, ValueProps {
+    classNames?: (TailwindClass | string)[];
+  }
+  interface SVGAttributes<T> extends LayoutProps, ValueProps {
+    classNames?: (TailwindClass | string)[];
+  }
+}
+
+export type { LayoutProps, ValueProps };

package/dist/index.js

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