@itamarshdev/reactwind 0.1.1 → 1.0.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",
@@ -139,6 +152,49 @@ var VALUE_PROPS_MAP = {
   skew: "skew",
   origin: "origin"
 };
+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 joinClassNames = (classNames) => {
   if (!classNames || classNames.length === 0) {
     return "";
@@ -152,7 +208,11 @@ 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 hasModifiers = propsKeys.some((key) => {
+    return MODIFIERS.some((mod) => key.startsWith(`${mod}-`));
+  });
+  if (!hasClassNames && !hasLayoutProps && !hasValueProps && !hasModifiers) {
     return props;
   }
   const { classNames, className, ...rest } = props;
@@ -170,12 +230,36 @@ 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 && (prop === "shadow" || prop === "rounded" || prop === "border" || prop === "transition")) {
         generatedClasses.push(prop);
         delete cleanRest[prop];
       }
     }
   }
+  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 && (restKey === "shadow" || restKey === "rounded" || restKey === "border")) {
+          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-WLlcB_RW.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-Bdh-X84v.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-M5PDERS6.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",
@@ -140,6 +153,49 @@ var VALUE_PROPS_MAP = {
   skew: "skew",
   origin: "origin"
 };
+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 joinClassNames = (classNames) => {
   if (!classNames || classNames.length === 0) {
     return "";
@@ -153,7 +209,11 @@ 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 hasModifiers = propsKeys.some((key) => {
+    return MODIFIERS.some((mod) => key.startsWith(`${mod}-`));
+  });
+  if (!hasClassNames && !hasLayoutProps && !hasValueProps && !hasModifiers) {
     return props;
   }
   const { classNames, className, ...rest } = props;
@@ -171,12 +231,36 @@ 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 && (prop === "shadow" || prop === "rounded" || prop === "border" || prop === "transition")) {
         generatedClasses.push(prop);
         delete cleanRest[prop];
       }
     }
   }
+  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 && (restKey === "shadow" || restKey === "rounded" || restKey === "border")) {
+          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-WLlcB_RW.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-Bdh-X84v.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-M5PDERS6.js";
 
 // src/jsx-runtime.ts
 import { Fragment, jsx as reactJsx, jsxs as reactJsxs } from "react/jsx-runtime";

package/dist/types-Bdh-X84v.d.ts

@@ -0,0 +1,125 @@
+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 | boolean;
+    fill?: TailwindColor | string;
+    stroke?: TailwindColor | string;
+    font?: string;
+    p?: TailwindSpacing | string | number;
+    m?: TailwindSpacing | string | number;
+    px?: TailwindSpacing | string | number;
+    py?: TailwindSpacing | string | number;
+    mx?: TailwindSpacing | string | number;
+    my?: TailwindSpacing | string | number;
+    gap?: TailwindSpacing | string | number;
+    w?: TailwindSpacing | string | number;
+    h?: TailwindSpacing | string | number;
+    rounded?: TailwindRadius | string | boolean;
+    shadow?: TailwindShadow | boolean | string;
+    z?: TailwindSpacing | string | number;
+    mb?: TailwindSpacing | string | number;
+    mt?: TailwindSpacing | string | number;
+    ml?: TailwindSpacing | string | number;
+    mr?: TailwindSpacing | string | number;
+    pb?: TailwindSpacing | string | number;
+    pt?: TailwindSpacing | string | number;
+    pl?: TailwindSpacing | string | number;
+    pr?: TailwindSpacing | string | number;
+    "min-w"?: TailwindSpacing | string | number;
+    "max-w"?: TailwindSpacing | string | number;
+    "min-h"?: TailwindSpacing | string | number;
+    "max-h"?: TailwindSpacing | string | number;
+    overflow?: string;
+    tracking?: string;
+    leading?: string;
+    decoration?: string;
+    align?: string;
+    whitespace?: string;
+    break?: string;
+    content?: string;
+    opacity?: string;
+    "bg-opacity"?: string;
+    ring?: string;
+    "ring-offset"?: string;
+    outline?: string;
+    divide?: string;
+    "mix-blend"?: string;
+    "backdrop-blur"?: string;
+    blur?: string;
+    brightness?: string;
+    contrast?: string;
+    grayscale?: string;
+    "hue-rotate"?: string;
+    invert?: string;
+    saturate?: string;
+    sepia?: string;
+    "drop-shadow"?: string;
+    transition?: string | boolean;
+    duration?: string;
+    ease?: string;
+    delay?: string;
+    animate?: string;
+    cursor?: string;
+    "pointer-events"?: string;
+    resize?: string;
+    select?: string;
+    scale?: string;
+    rotate?: string;
+    translate?: string;
+    skew?: string;
+    origin?: 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;
+    italic?: boolean;
+    "not-italic"?: boolean;
+    underline?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    capitalize?: boolean;
+    truncate?: boolean;
+    visible?: boolean;
+    invisible?: boolean;
+    collapse?: boolean;
+    "pointer-events-none"?: boolean;
+    "pointer-events-auto"?: boolean;
+    "sr-only"?: boolean;
+    "not-sr-only"?: boolean;
+}
+declare module "react" {
+    interface HTMLAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+    interface SVGAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+}

package/dist/types-CIbmaQ6w.d.ts

@@ -0,0 +1,125 @@
+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 | boolean;
+    shadow?: TailwindShadow | boolean | string;
+    z?: TailwindSpacing | string;
+    mb?: TailwindSpacing | string;
+    mt?: TailwindSpacing | string;
+    ml?: TailwindSpacing | string;
+    mr?: TailwindSpacing | string;
+    pb?: TailwindSpacing | string;
+    pt?: TailwindSpacing | string;
+    pl?: TailwindSpacing | string;
+    pr?: TailwindSpacing | string;
+    "min-w"?: TailwindSpacing | string;
+    "max-w"?: TailwindSpacing | string;
+    "min-h"?: TailwindSpacing | string;
+    "max-h"?: TailwindSpacing | string;
+    overflow?: string;
+    tracking?: string;
+    leading?: string;
+    decoration?: string;
+    align?: string;
+    whitespace?: string;
+    break?: string;
+    content?: string;
+    opacity?: string;
+    "bg-opacity"?: string;
+    ring?: string;
+    "ring-offset"?: string;
+    outline?: string;
+    divide?: string;
+    "mix-blend"?: string;
+    "backdrop-blur"?: string;
+    blur?: string;
+    brightness?: string;
+    contrast?: string;
+    grayscale?: string;
+    "hue-rotate"?: string;
+    invert?: string;
+    saturate?: string;
+    sepia?: string;
+    "drop-shadow"?: string;
+    transition?: string;
+    duration?: string;
+    ease?: string;
+    delay?: string;
+    animate?: string;
+    cursor?: string;
+    "pointer-events"?: string;
+    resize?: string;
+    select?: string;
+    scale?: string;
+    rotate?: string;
+    translate?: string;
+    skew?: string;
+    origin?: 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;
+    italic?: boolean;
+    "not-italic"?: boolean;
+    underline?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    capitalize?: boolean;
+    truncate?: boolean;
+    visible?: boolean;
+    invisible?: boolean;
+    collapse?: boolean;
+    "pointer-events-none"?: boolean;
+    "pointer-events-auto"?: boolean;
+    "sr-only"?: boolean;
+    "not-sr-only"?: boolean;
+}
+declare module "react" {
+    interface HTMLAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+    interface SVGAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+}

package/dist/types-DmvPRSBP.d.cts

@@ -0,0 +1,125 @@
+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 | boolean;
+    shadow?: TailwindShadow | boolean | string;
+    z?: TailwindSpacing | string;
+    mb?: TailwindSpacing | string;
+    mt?: TailwindSpacing | string;
+    ml?: TailwindSpacing | string;
+    mr?: TailwindSpacing | string;
+    pb?: TailwindSpacing | string;
+    pt?: TailwindSpacing | string;
+    pl?: TailwindSpacing | string;
+    pr?: TailwindSpacing | string;
+    "min-w"?: TailwindSpacing | string;
+    "max-w"?: TailwindSpacing | string;
+    "min-h"?: TailwindSpacing | string;
+    "max-h"?: TailwindSpacing | string;
+    overflow?: string;
+    tracking?: string;
+    leading?: string;
+    decoration?: string;
+    align?: string;
+    whitespace?: string;
+    break?: string;
+    content?: string;
+    opacity?: string;
+    "bg-opacity"?: string;
+    ring?: string;
+    "ring-offset"?: string;
+    outline?: string;
+    divide?: string;
+    "mix-blend"?: string;
+    "backdrop-blur"?: string;
+    blur?: string;
+    brightness?: string;
+    contrast?: string;
+    grayscale?: string;
+    "hue-rotate"?: string;
+    invert?: string;
+    saturate?: string;
+    sepia?: string;
+    "drop-shadow"?: string;
+    transition?: string;
+    duration?: string;
+    ease?: string;
+    delay?: string;
+    animate?: string;
+    cursor?: string;
+    "pointer-events"?: string;
+    resize?: string;
+    select?: string;
+    scale?: string;
+    rotate?: string;
+    translate?: string;
+    skew?: string;
+    origin?: 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;
+    italic?: boolean;
+    "not-italic"?: boolean;
+    underline?: boolean;
+    uppercase?: boolean;
+    lowercase?: boolean;
+    capitalize?: boolean;
+    truncate?: boolean;
+    visible?: boolean;
+    invisible?: boolean;
+    collapse?: boolean;
+    "pointer-events-none"?: boolean;
+    "pointer-events-auto"?: boolean;
+    "sr-only"?: boolean;
+    "not-sr-only"?: boolean;
+}
+declare module "react" {
+    interface HTMLAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+    interface SVGAttributes<T> extends LayoutProps, ValueProps {
+        classNames?: (TailwindClass | string)[];
+        [key: string]: any;
+    }
+}