@itamarshdev/reactwind 1.0.0 → 1.2.0

package/dist/jsx-dev-runtime.cjs

@@ -150,7 +150,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",
@@ -195,23 +259,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;
   }
@@ -230,12 +321,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;
@@ -248,7 +348,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/jsx-dev-runtime.d.cts

@@ -1,4 +1,4 @@
-import './types-WLlcB_RW.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-Bdh-X84v.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-M5PDERS6.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

@@ -151,7 +151,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",
@@ -196,23 +260,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;
   }
@@ -231,12 +322,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;
@@ -249,7 +349,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/jsx-runtime.d.cts

@@ -1,4 +1,4 @@
-import './types-WLlcB_RW.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-Bdh-X84v.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-M5PDERS6.js";
+} from "./chunk-6MX4RX23.js";
 
 // src/jsx-runtime.ts
 import { Fragment, jsx as reactJsx, jsxs as reactJsxs } from "react/jsx-runtime";

package/dist/types-DuRT-DEW.d.ts

@@ -0,0 +1,248 @@
+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;
+    "grid-cols"?: string | number;
+    "grid-rows"?: string | number;
+    "col-span"?: string | number;
+    "row-span"?: string | number;
+    items?: string;
+    justify?: string;
+    self?: string;
+    "place-content"?: string;
+    "place-items"?: string;
+    "place-self"?: string;
+    order?: string | number;
+    tracking?: string;
+    leading?: string;
+    decoration?: string;
+    align?: string;
+    whitespace?: string;
+    break?: string;
+    content?: string;
+    opacity?: string | number;
+    "bg-opacity"?: string | number;
+    "text-opacity"?: string | number;
+    "border-opacity"?: string | number;
+    ring?: string | boolean;
+    "ring-offset"?: string;
+    outline?: string | boolean;
+    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 | number;
+    ease?: string;
+    delay?: string | number;
+    animate?: string;
+    cursor?: string;
+    "pointer-events"?: string;
+    resize?: string;
+    select?: string;
+    scale?: string | number;
+    rotate?: string | number;
+    translate?: string;
+    skew?: string;
+    origin?: string;
+    top?: TailwindSpacing | string | number;
+    right?: TailwindSpacing | string | number;
+    bottom?: TailwindSpacing | string | number;
+    left?: TailwindSpacing | string | number;
+    inset?: TailwindSpacing | string | number;
+    "inset-x"?: TailwindSpacing | string | number;
+    "inset-y"?: TailwindSpacing | string | number;
+    aspect?: "auto" | "square" | "video" | string;
+    columns?: string | number;
+    float?: "right" | "left" | "none" | "start" | "end" | string;
+    clear?: "left" | "right" | "both" | "none" | "start" | "end" | string;
+    basis?: TailwindSpacing | string | number;
+    "gap-x"?: TailwindSpacing | string | number;
+    "gap-y"?: TailwindSpacing | string | number;
+    "auto-cols"?: "auto" | "min" | "max" | "fr" | string;
+    "auto-rows"?: "auto" | "min" | "max" | "fr" | string;
+    "grid-flow"?: "row" | "col" | "dense" | "row-dense" | "col-dense" | string;
+    "space-x"?: TailwindSpacing | string | number;
+    "space-y"?: TailwindSpacing | string | number;
+    "justify-items"?: "start" | "end" | "center" | "stretch" | string;
+    "justify-self"?: "auto" | "start" | "end" | "center" | "stretch" | string;
+    size?: TailwindSpacing | string | number;
+    "border-t"?: TailwindColor | string | number;
+    "border-r"?: TailwindColor | string | number;
+    "border-b"?: TailwindColor | string | number;
+    "border-l"?: TailwindColor | string | number;
+    "border-x"?: TailwindColor | string | number;
+    "border-y"?: TailwindColor | string | number;
+    "rounded-t"?: TailwindRadius | string;
+    "rounded-r"?: TailwindRadius | string;
+    "rounded-b"?: TailwindRadius | string;
+    "rounded-l"?: TailwindRadius | string;
+    "rounded-tl"?: TailwindRadius | string;
+    "rounded-tr"?: TailwindRadius | string;
+    "rounded-bl"?: TailwindRadius | string;
+    "rounded-br"?: TailwindRadius | string;
+    "border-style"?: "solid" | "dashed" | "dotted" | "double" | "hidden" | "none" | string;
+    "text-align"?: "left" | "center" | "right" | "justify" | "start" | "end" | string;
+    "line-clamp"?: string | number;
+    list?: "none" | "disc" | "decimal" | "inside" | "outside" | string;
+    indent?: TailwindSpacing | string | number;
+    "bg-gradient"?: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl" | string;
+    from?: TailwindColor | string;
+    via?: TailwindColor | string;
+    to?: TailwindColor | string;
+    "bg-size"?: "auto" | "cover" | "contain" | string;
+    "bg-position"?: "bottom" | "center" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | string;
+    "bg-repeat"?: "repeat" | "no-repeat" | "repeat-x" | "repeat-y" | "repeat-round" | "repeat-space" | string;
+    scroll?: "auto" | "smooth" | string;
+    snap?: "start" | "end" | "center" | "align-none" | "normal" | "always" | string;
+    touch?: "auto" | "none" | "pan-x" | "pan-left" | "pan-right" | "pan-y" | "pan-up" | "pan-down" | "pinch-zoom" | "manipulation" | string;
+    "will-change"?: "auto" | "scroll" | "contents" | "transform" | string;
+    caret?: TailwindColor | string;
+    accent?: TailwindColor | string;
+    "stroke-width"?: string | number;
+}
+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;
+}
+type ModifierValue = Partial<ValueProps & LayoutProps> & {
+    hover?: ModifierValue;
+    focus?: ModifierValue;
+    active?: ModifierValue;
+    visited?: ModifierValue;
+    disabled?: ModifierValue;
+    "group-hover"?: ModifierValue;
+    "group-focus"?: ModifierValue;
+    "focus-within"?: ModifierValue;
+    "focus-visible"?: ModifierValue;
+    first?: ModifierValue;
+    last?: ModifierValue;
+    odd?: ModifierValue;
+    even?: ModifierValue;
+    checked?: ModifierValue;
+    required?: ModifierValue;
+    valid?: ModifierValue;
+    invalid?: ModifierValue;
+    sm?: ModifierValue;
+    md?: ModifierValue;
+    lg?: ModifierValue;
+    xl?: ModifierValue;
+    "2xl"?: ModifierValue;
+    dark?: ModifierValue;
+    print?: ModifierValue;
+};
+interface ModifierProps {
+    hover?: ModifierValue;
+    focus?: ModifierValue;
+    active?: ModifierValue;
+    visited?: ModifierValue;
+    disabled?: ModifierValue;
+    "group-hover"?: ModifierValue;
+    "group-focus"?: ModifierValue;
+    "focus-within"?: ModifierValue;
+    "focus-visible"?: ModifierValue;
+    first?: ModifierValue;
+    last?: ModifierValue;
+    odd?: ModifierValue;
+    even?: ModifierValue;
+    checked?: ModifierValue;
+    required?: ModifierValue;
+    valid?: ModifierValue;
+    invalid?: ModifierValue;
+    sm?: ModifierValue;
+    md?: ModifierValue;
+    lg?: ModifierValue;
+    xl?: ModifierValue;
+    "2xl"?: ModifierValue;
+    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;
+    }
+}