@itamarshdev/reactwind 0.1.1 → 1.1.0

package/dist/jsx-dev-runtime.cjs

@@ -102,6 +102,17 @@ var VALUE_PROPS_MAP = {
   "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",
@@ -109,6 +120,8 @@ var VALUE_PROPS_MAP = {
   content: "content",
   opacity: "opacity",
   "bg-opacity": "bg-opacity",
+  "text-opacity": "text-opacity",
+  "border-opacity": "border-opacity",
   ring: "ring",
   "ring-offset": "ring-offset",
   outline: "outline",
@@ -137,14 +150,140 @@ 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",
+  "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;
@@ -152,7 +291,15 @@ var withClassNames = (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) {
+  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;
@@ -170,12 +317,45 @@ 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")) {
+      } 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 {

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

@@ -1,4 +1,4 @@
-import './types-CvNsUSZP.cjs';
+import './types-Bb5v_nmy.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-DDH_n69B.js';
+import './types-CBbQP9uE.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-WXTVOZ4W.js";
+} from "./chunk-KAWYX6WW.js";
 
 // src/jsx-dev-runtime.ts
 import { Fragment, jsxDEV as reactJsxDEV } from "react/jsx-dev-runtime";

package/dist/jsx-runtime.cjs

@@ -103,6 +103,17 @@ var VALUE_PROPS_MAP = {
   "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",
@@ -110,6 +121,8 @@ var VALUE_PROPS_MAP = {
   content: "content",
   opacity: "opacity",
   "bg-opacity": "bg-opacity",
+  "text-opacity": "text-opacity",
+  "border-opacity": "border-opacity",
   ring: "ring",
   "ring-offset": "ring-offset",
   outline: "outline",
@@ -138,14 +151,140 @@ 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",
+  "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;
@@ -153,7 +292,15 @@ var withClassNames = (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) {
+  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;
@@ -171,12 +318,45 @@ 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")) {
+      } 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 {

package/dist/jsx-runtime.d.cts

@@ -1,4 +1,4 @@
-import './types-CvNsUSZP.cjs';
+import './types-Bb5v_nmy.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-DDH_n69B.js';
+import './types-CBbQP9uE.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-WXTVOZ4W.js";
+} from "./chunk-KAWYX6WW.js";
 
 // src/jsx-runtime.ts
 import { Fragment, jsx as reactJsx, jsxs as reactJsxs } from "react/jsx-runtime";