@vhsys-ui/system-rsc - npm Package Compare versions

Comparing version 0.0.38 to 0.0.39

dist/extend-variants.js

@@ -33,95 +33,4 @@ "use strict";
 var React = __toESM(require("react"));
+var import_theme = require("@vhsys-ui/theme");
 
-// ../theme/src/utils/tv.ts
-var import_tailwind_variants = require("tailwind-variants");
-
-// ../theme/src/types.ts
-var spacingScaleKeys = [
-  "0",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl",
-  "4xl",
-  "5xl",
-  "6xl",
-  "7xl",
-  "8xl",
-  "9xl",
-  "1",
-  "2",
-  "3",
-  "3.5",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "15",
-  "16",
-  "17",
-  "18",
-  "20",
-  "24",
-  "28",
-  "32",
-  "36",
-  "40",
-  "44",
-  "48",
-  "52",
-  "56",
-  "60",
-  "64",
-  "72",
-  "80",
-  "96"
-];
-var mappedSpacingScaleKeys = spacingScaleKeys.map((key) => `unit-${key}`);
-
-// ../theme/src/utils/tv.ts
-var COMMON_UNITS = ["small", "medium", "large"];
-var tv = (options, config) => {
-  var _a, _b, _c;
-  return (0, import_tailwind_variants.tv)(options, {
-    ...config,
-    twMerge: (_a = config == null ? void 0 : config.twMerge) != null ? _a : true,
-    twMergeConfig: {
-      ...config == null ? void 0 : config.twMergeConfig,
-      theme: {
-        ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme,
-        opacity: ["disabled"],
-        spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
-        borderWidth: COMMON_UNITS,
-        borderRadius: COMMON_UNITS
-      },
-      classGroups: {
-        ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups,
-        shadow: [{ shadow: COMMON_UNITS }],
-        "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-        "bg-image": ["bg-stripe-gradient"],
-        "min-w": [
-          {
-            "min-w": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ],
-        "min-h": [
-          {
-            "min-h": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ]
-      }
-    }
-  });
-};
-
 // src/utils.ts
@@ -163,8 +72,22 @@ var import_clsx = __toESM(require("clsx"));
 }
-function extendVariants(BaseComponent, styles = {}, opts = {}) {
-  var _a, _b;
-  const { variants, defaultVariants, compoundVariants } = styles || {};
-  const slots = getSlots(variants);
-  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
-  const customTv = tv(
+function getClassNamesWithProps({
+  props = {},
+  variants,
+  slots,
+  defaultVariants,
+  compoundVariants,
+  hasSlots,
+  opts
+}) {
+  var _a, _b, _c;
+  if (defaultVariants && typeof defaultVariants === "object") {
+    for (const key in defaultVariants) {
+      const value = defaultVariants[key];
+      const propValue = props == null ? void 0 : props[key];
+      if (propValue && propValue !== value) {
+        delete defaultVariants[key];
+      }
+    }
+  }
+  const customTv = (0, import_theme.tv)(
     {
@@ -181,26 +104,59 @@ variants,
   );
-  const ForwardedComponent = React.forwardRef((originalProps, ref) => {
-    var _a2;
-    const [baseProps, variantProps] = mapPropsVariants(originalProps, customTv.variantKeys, false);
-    const newProps = { ...defaultVariants, ...baseProps, ref };
-    let classNames = {};
-    const result = React.useMemo(() => customTv(variantProps), [...Object.values(variantProps)]);
-    if (!hasSlots) {
-      newProps.className = cn(result, originalProps.className);
-    } else {
-      Object.entries(result).forEach(([key, value]) => {
-        const slotResult = value();
-        if (typeof slotResult === "string") {
-          classNames[key] = slotResult;
-        }
+  const [baseProps, variantProps] = mapPropsVariants(props, customTv.variantKeys, false);
+  const newProps = { ...defaultVariants, ...baseProps };
+  let classNames = {};
+  const result = customTv(variantProps);
+  if (!hasSlots) {
+    newProps.className = cn(result, props.className);
+  } else {
+    Object.entries(result).forEach(([key, value]) => {
+      const slotResult = value();
+      if (typeof slotResult === "string") {
+        classNames[key] = slotResult;
+      }
+    });
+    Object.entries((_c = props.classNames) != null ? _c : {}).forEach(([key, value]) => {
+      classNames[key] = cn(classNames[key], value);
+    });
+  }
+  if (Object.keys(classNames).length !== 0) {
+    newProps.classNames = classNames;
+  }
+  return newProps;
+}
+function extendVariants(BaseComponent, styles = {}, opts = {}) {
+  const { variants, defaultVariants, compoundVariants } = styles || {};
+  const slots = getSlots(variants);
+  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
+  const ForwardedComponent = React.forwardRef((originalProps = {}, ref) => {
+    const newProps = React.useMemo(
+      () => getClassNamesWithProps(
+        {
+          slots,
+          variants,
+          compoundVariants,
+          props: originalProps,
+          defaultVariants,
+          hasSlots,
+          opts
+        },
+        [originalProps]
+      )
+    );
+    return React.createElement(BaseComponent, { ...originalProps, ...newProps, ref });
+  });
+  if (BaseComponent.getCollectionNode) {
+    ForwardedComponent.getCollectionNode = (itemProps) => {
+      const newProps = getClassNamesWithProps({
+        slots,
+        variants,
+        compoundVariants,
+        props: itemProps,
+        defaultVariants,
+        hasSlots,
+        opts
       });
-      Object.entries((_a2 = originalProps.classNames) != null ? _a2 : {}).forEach(([key, value]) => {
-        classNames[key] = cn(classNames[key], value);
-      });
-    }
-    if (Object.keys(classNames).length !== 0) {
-      newProps.classNames = classNames;
-    }
-    return React.createElement(BaseComponent, newProps);
-  });
+      return BaseComponent.getCollectionNode({ ...itemProps, ...newProps });
+    };
+  }
   ForwardedComponent.displayName = `Extended(${BaseComponent.displayName || BaseComponent.name})`;
@@ -207,0 +163,0 @@ return ForwardedComponent;

dist/index.js

@@ -94,96 +94,3 @@ "use strict";
 var React = __toESM(require("react"));
-
-// ../theme/src/utils/tv.ts
-var import_tailwind_variants = require("tailwind-variants");
-
-// ../theme/src/types.ts
-var spacingScaleKeys = [
-  "0",
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "2xl",
-  "3xl",
-  "4xl",
-  "5xl",
-  "6xl",
-  "7xl",
-  "8xl",
-  "9xl",
-  "1",
-  "2",
-  "3",
-  "3.5",
-  "4",
-  "5",
-  "6",
-  "7",
-  "8",
-  "9",
-  "10",
-  "11",
-  "12",
-  "13",
-  "14",
-  "15",
-  "16",
-  "17",
-  "18",
-  "20",
-  "24",
-  "28",
-  "32",
-  "36",
-  "40",
-  "44",
-  "48",
-  "52",
-  "56",
-  "60",
-  "64",
-  "72",
-  "80",
-  "96"
-];
-var mappedSpacingScaleKeys = spacingScaleKeys.map((key) => `unit-${key}`);
-
-// ../theme/src/utils/tv.ts
-var COMMON_UNITS = ["small", "medium", "large"];
-var tv = (options, config) => {
-  var _a, _b, _c;
-  return (0, import_tailwind_variants.tv)(options, {
-    ...config,
-    twMerge: (_a = config == null ? void 0 : config.twMerge) != null ? _a : true,
-    twMergeConfig: {
-      ...config == null ? void 0 : config.twMergeConfig,
-      theme: {
-        ...(_b = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _b.theme,
-        opacity: ["disabled"],
-        spacing: ["divider", "unit", ...mappedSpacingScaleKeys],
-        borderWidth: COMMON_UNITS,
-        borderRadius: COMMON_UNITS
-      },
-      classGroups: {
-        ...(_c = config == null ? void 0 : config.twMergeConfig) == null ? void 0 : _c.classGroups,
-        shadow: [{ shadow: COMMON_UNITS }],
-        "font-size": [{ text: ["tiny", ...COMMON_UNITS] }],
-        "bg-image": ["bg-stripe-gradient"],
-        "min-w": [
-          {
-            "min-w": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ],
-        "min-h": [
-          {
-            "min-h": ["unit", ...mappedSpacingScaleKeys]
-          }
-        ]
-      }
-    }
-  });
-};
-
-// src/extend-variants.js
+var import_theme = require("@vhsys-ui/theme");
 function getSlots(variants) {
@@ -201,8 +108,22 @@ return variants ? Object.values(variants).flatMap(Object.values).reduce((acc, slot) => {
 }
-function extendVariants(BaseComponent, styles = {}, opts = {}) {
-  var _a, _b;
-  const { variants, defaultVariants, compoundVariants } = styles || {};
-  const slots = getSlots(variants);
-  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
-  const customTv = tv(
+function getClassNamesWithProps({
+  props = {},
+  variants,
+  slots,
+  defaultVariants,
+  compoundVariants,
+  hasSlots,
+  opts
+}) {
+  var _a, _b, _c;
+  if (defaultVariants && typeof defaultVariants === "object") {
+    for (const key in defaultVariants) {
+      const value = defaultVariants[key];
+      const propValue = props == null ? void 0 : props[key];
+      if (propValue && propValue !== value) {
+        delete defaultVariants[key];
+      }
+    }
+  }
+  const customTv = (0, import_theme.tv)(
     {
@@ -219,26 +140,59 @@ variants,
   );
-  const ForwardedComponent = React.forwardRef((originalProps, ref) => {
-    var _a2;
-    const [baseProps, variantProps] = mapPropsVariants(originalProps, customTv.variantKeys, false);
-    const newProps = { ...defaultVariants, ...baseProps, ref };
-    let classNames = {};
-    const result = React.useMemo(() => customTv(variantProps), [...Object.values(variantProps)]);
-    if (!hasSlots) {
-      newProps.className = cn(result, originalProps.className);
-    } else {
-      Object.entries(result).forEach(([key, value]) => {
-        const slotResult = value();
-        if (typeof slotResult === "string") {
-          classNames[key] = slotResult;
-        }
+  const [baseProps, variantProps] = mapPropsVariants(props, customTv.variantKeys, false);
+  const newProps = { ...defaultVariants, ...baseProps };
+  let classNames = {};
+  const result = customTv(variantProps);
+  if (!hasSlots) {
+    newProps.className = cn(result, props.className);
+  } else {
+    Object.entries(result).forEach(([key, value]) => {
+      const slotResult = value();
+      if (typeof slotResult === "string") {
+        classNames[key] = slotResult;
+      }
+    });
+    Object.entries((_c = props.classNames) != null ? _c : {}).forEach(([key, value]) => {
+      classNames[key] = cn(classNames[key], value);
+    });
+  }
+  if (Object.keys(classNames).length !== 0) {
+    newProps.classNames = classNames;
+  }
+  return newProps;
+}
+function extendVariants(BaseComponent, styles = {}, opts = {}) {
+  const { variants, defaultVariants, compoundVariants } = styles || {};
+  const slots = getSlots(variants);
+  const hasSlots = typeof slots === "object" && Object.keys(slots).length !== 0;
+  const ForwardedComponent = React.forwardRef((originalProps = {}, ref) => {
+    const newProps = React.useMemo(
+      () => getClassNamesWithProps(
+        {
+          slots,
+          variants,
+          compoundVariants,
+          props: originalProps,
+          defaultVariants,
+          hasSlots,
+          opts
+        },
+        [originalProps]
+      )
+    );
+    return React.createElement(BaseComponent, { ...originalProps, ...newProps, ref });
+  });
+  if (BaseComponent.getCollectionNode) {
+    ForwardedComponent.getCollectionNode = (itemProps) => {
+      const newProps = getClassNamesWithProps({
+        slots,
+        variants,
+        compoundVariants,
+        props: itemProps,
+        defaultVariants,
+        hasSlots,
+        opts
       });
-      Object.entries((_a2 = originalProps.classNames) != null ? _a2 : {}).forEach(([key, value]) => {
-        classNames[key] = cn(classNames[key], value);
-      });
-    }
-    if (Object.keys(classNames).length !== 0) {
-      newProps.classNames = classNames;
-    }
-    return React.createElement(BaseComponent, newProps);
-  });
+      return BaseComponent.getCollectionNode({ ...itemProps, ...newProps });
+    };
+  }
   ForwardedComponent.displayName = `Extended(${BaseComponent.displayName || BaseComponent.name})`;
@@ -245,0 +199,0 @@ return ForwardedComponent;

dist/types.d.ts

@@ -37,3 +37,3 @@ /**
 type Merge<M, N> = N extends Record<string, unknown> ? M : Omit<M, keyof N> & N;
-type HTMLVhsysUIProps<T extends As = "div", OmitKeys extends keyof any = never> = Omit<PropsOf<T>, "ref" | "color" | "slot" | OmitKeys> & {
+type HTMLVhsysUIProps<T extends As = "div", OmitKeys extends keyof any = never> = Omit<PropsOf<T>, "ref" | "color" | "slot" | "size" | "defaultChecked" | "defaultValue" | OmitKeys> & {
     as?: As;
@@ -40,0 +40,0 @@ };

package.json

 {
   "name": "@vhsys-ui/system-rsc",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "VhsysUI system primitives compatibles with RSC imports",
@@ -18,6 +18,7 @@ "keywords": [
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "@vhsys-ui/theme": ">=2.1.0",
+    "tailwind-variants": ">=0.1.13"
   },
   "dependencies": {
-    "tailwind-variants": "^0.1.14",
     "clsx": "^1.2.1"
@@ -24,0 +25,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

33736

decreased by-5.35%

Dependency count

4

increased by33.33%

Lines of code

944

decreased by-11.69%

Dependency changes

• + Addedtailwind-merge@2.5.4(transitive)

• + Addedtailwind-variants@0.3.1(transitive)

• - Removedtailwind-variants@^0.1.14

• - Removedtailwind-merge@1.14.0(transitive)

• - Removedtailwind-variants@0.1.20(transitive)