@refineui/utilities 0.0.2 → 0.0.4

package/lib/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Slot: () => Slot,
   acquireBodyScrollLock: () => acquireBodyScrollLock,
   ariaAttr: () => ariaAttr,
   buttonProps: () => buttonProps,
@@ -297,6 +298,45 @@ function getMergeableTriggerChild(children) {
   return node;
 }
 
+// src/Slot.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    if (key === "ref" || key === "children") continue;
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    const isEvent = key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function";
+    if (key === "className" || key === "aria-describedby") {
+      merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      merged.style = { ...slotValue ?? {}, ...childValue ?? {} };
+    } else if (isEvent) {
+      merged[key] = (event) => {
+        childValue(event);
+        if (!event?.defaultPrevented) slotValue(event);
+      };
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var Slot = (0, import_react2.forwardRef)(function Slot2({ children, ...slotProps }, forwardedRef) {
+  if (!(0, import_react2.isValidElement)(children)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  const child = children;
+  const childProps = { ...child.props ?? {} };
+  const childRef = child.ref ?? childProps.ref;
+  delete childProps.ref;
+  delete childProps.children;
+  const merged = mergeProps(slotProps, childProps);
+  merged.ref = composeRefs(forwardedRef, childRef);
+  return (0, import_react2.cloneElement)(child, merged);
+});
+
 // src/typography.ts
 function semanticTextToken(name) {
   return { type: "semantic-text", name };
@@ -314,6 +354,7 @@ function isSemanticTextTokenRef(value) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Slot,
   acquireBodyScrollLock,
   ariaAttr,
   buttonProps,

package/lib/index.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CSSProperties, Ref, ReactNode, ReactElement } from 'react';
+import { CSSProperties, Ref, ReactNode, ReactElement, HTMLAttributes } from 'react';
 
 declare const motionDurations: {
     readonly instant: "var(--refineui-motion-duration-instant)";
@@ -115,6 +115,12 @@ declare const composeRef: typeof composeRefs;
  */
 declare function getMergeableTriggerChild(children: ReactNode): ReactElement | null;
 
+interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children?: any;
+}
+/** Merges its props onto the single child. Used for `asChild`. */
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement | null>>;
+
 type SemanticTextTokenRef<TName extends string = string> = Readonly<{
     type: "semantic-text";
     name: TName;
@@ -129,4 +135,4 @@ declare function foundationTypographyToken<TName extends string>(name: TName): F
 declare function foundationTypographyUtilityClass(foundationKey: string): string;
 declare function isSemanticTextTokenRef(value: unknown): value is SemanticTextTokenRef;
 
-export { type AnimationStyleOptions, type ColorTokenRef, type ColorTokenValue, type FoundationTypographyTokenRef, type MotionDuration, type MotionEasing, type MotionPresetName, type PaletteColorTokenRef, type SemanticColorTokenRef, type SemanticTextTokenRef, type TransitionStyleOptions, acquireBodyScrollLock, ariaAttr, buttonProps, composeRef, composeRefs, createAnimationStyle, createTransitionStyle, dataAttr, elementProps, foundationTypographyToken, foundationTypographyUtilityClass, getMergeableTriggerChild, getReducedMotionQuery, hexToRgba, imgProps, inputProps, isColorTokenRef, isSemanticTextTokenRef, labelProps, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, semanticTextToken, shadowWithColor, toKebab, useComposedRefs };
+export { type AnimationStyleOptions, type ColorTokenRef, type ColorTokenValue, type FoundationTypographyTokenRef, type MotionDuration, type MotionEasing, type MotionPresetName, type PaletteColorTokenRef, type SemanticColorTokenRef, type SemanticTextTokenRef, Slot, type SlotProps, type TransitionStyleOptions, acquireBodyScrollLock, ariaAttr, buttonProps, composeRef, composeRefs, createAnimationStyle, createTransitionStyle, dataAttr, elementProps, foundationTypographyToken, foundationTypographyUtilityClass, getMergeableTriggerChild, getReducedMotionQuery, hexToRgba, imgProps, inputProps, isColorTokenRef, isSemanticTextTokenRef, labelProps, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, semanticTextToken, shadowWithColor, toKebab, useComposedRefs };

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CSSProperties, Ref, ReactNode, ReactElement } from 'react';
+import { CSSProperties, Ref, ReactNode, ReactElement, HTMLAttributes } from 'react';
 
 declare const motionDurations: {
     readonly instant: "var(--refineui-motion-duration-instant)";
@@ -115,6 +115,12 @@ declare const composeRef: typeof composeRefs;
  */
 declare function getMergeableTriggerChild(children: ReactNode): ReactElement | null;
 
+interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children?: any;
+}
+/** Merges its props onto the single child. Used for `asChild`. */
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement | null>>;
+
 type SemanticTextTokenRef<TName extends string = string> = Readonly<{
     type: "semantic-text";
     name: TName;
@@ -129,4 +135,4 @@ declare function foundationTypographyToken<TName extends string>(name: TName): F
 declare function foundationTypographyUtilityClass(foundationKey: string): string;
 declare function isSemanticTextTokenRef(value: unknown): value is SemanticTextTokenRef;
 
-export { type AnimationStyleOptions, type ColorTokenRef, type ColorTokenValue, type FoundationTypographyTokenRef, type MotionDuration, type MotionEasing, type MotionPresetName, type PaletteColorTokenRef, type SemanticColorTokenRef, type SemanticTextTokenRef, type TransitionStyleOptions, acquireBodyScrollLock, ariaAttr, buttonProps, composeRef, composeRefs, createAnimationStyle, createTransitionStyle, dataAttr, elementProps, foundationTypographyToken, foundationTypographyUtilityClass, getMergeableTriggerChild, getReducedMotionQuery, hexToRgba, imgProps, inputProps, isColorTokenRef, isSemanticTextTokenRef, labelProps, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, semanticTextToken, shadowWithColor, toKebab, useComposedRefs };
+export { type AnimationStyleOptions, type ColorTokenRef, type ColorTokenValue, type FoundationTypographyTokenRef, type MotionDuration, type MotionEasing, type MotionPresetName, type PaletteColorTokenRef, type SemanticColorTokenRef, type SemanticTextTokenRef, Slot, type SlotProps, type TransitionStyleOptions, acquireBodyScrollLock, ariaAttr, buttonProps, composeRef, composeRefs, createAnimationStyle, createTransitionStyle, dataAttr, elementProps, foundationTypographyToken, foundationTypographyUtilityClass, getMergeableTriggerChild, getReducedMotionQuery, hexToRgba, imgProps, inputProps, isColorTokenRef, isSemanticTextTokenRef, labelProps, motionDurations, motionEasings, motionKeyframesCss, motionMsToNumber, motionPresets, paletteColorCssVar, paletteColorToken, resolveColorToken, resolveColorTokenValue, semanticColorCssVar, semanticColorToken, semanticTextToken, shadowWithColor, toKebab, useComposedRefs };

package/lib/index.js

@@ -228,6 +228,49 @@ function getMergeableTriggerChild(children) {
   return node;
 }
 
+// src/Slot.tsx
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement as isValidElement2
+} from "react";
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    if (key === "ref" || key === "children") continue;
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    const isEvent = key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function";
+    if (key === "className" || key === "aria-describedby") {
+      merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      merged.style = { ...slotValue ?? {}, ...childValue ?? {} };
+    } else if (isEvent) {
+      merged[key] = (event) => {
+        childValue(event);
+        if (!event?.defaultPrevented) slotValue(event);
+      };
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var Slot = forwardRef(function Slot2({ children, ...slotProps }, forwardedRef) {
+  if (!isValidElement2(children)) {
+    return /* @__PURE__ */ jsx(Fragment2, { children });
+  }
+  const child = children;
+  const childProps = { ...child.props ?? {} };
+  const childRef = child.ref ?? childProps.ref;
+  delete childProps.ref;
+  delete childProps.children;
+  const merged = mergeProps(slotProps, childProps);
+  merged.ref = composeRefs(forwardedRef, childRef);
+  return cloneElement(child, merged);
+});
+
 // src/typography.ts
 function semanticTextToken(name) {
   return { type: "semantic-text", name };
@@ -244,6 +287,7 @@ function isSemanticTextTokenRef(value) {
   return candidate.type === "semantic-text" && typeof candidate.name === "string";
 }
 export {
+  Slot,
   acquireBodyScrollLock,
   ariaAttr,
   buttonProps,

package/lib/react.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/react.ts
 var react_exports = {};
 __export(react_exports, {
+  Slot: () => Slot,
   acquireBodyScrollLock: () => acquireBodyScrollLock,
   composeRef: () => composeRef,
   composeRefs: () => composeRefs,
@@ -117,8 +118,48 @@ function getMergeableTriggerChild(children) {
   }
   return node;
 }
+
+// src/Slot.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    if (key === "ref" || key === "children") continue;
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    const isEvent = key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function";
+    if (key === "className" || key === "aria-describedby") {
+      merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      merged.style = { ...slotValue ?? {}, ...childValue ?? {} };
+    } else if (isEvent) {
+      merged[key] = (event) => {
+        childValue(event);
+        if (!event?.defaultPrevented) slotValue(event);
+      };
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var Slot = (0, import_react2.forwardRef)(function Slot2({ children, ...slotProps }, forwardedRef) {
+  if (!(0, import_react2.isValidElement)(children)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+  }
+  const child = children;
+  const childProps = { ...child.props ?? {} };
+  const childRef = child.ref ?? childProps.ref;
+  delete childProps.ref;
+  delete childProps.children;
+  const merged = mergeProps(slotProps, childProps);
+  merged.ref = composeRefs(forwardedRef, childRef);
+  return (0, import_react2.cloneElement)(child, merged);
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Slot,
   acquireBodyScrollLock,
   composeRef,
   composeRefs,

package/lib/react.d.cts

@@ -1,4 +1,5 @@
-import { Ref, ReactNode, ReactElement } from 'react';
+import * as react from 'react';
+import { Ref, ReactNode, ReactElement, HTMLAttributes } from 'react';
 
 /**
  * Root document scroll lock with ref-counting for nested overlays.
@@ -24,4 +25,10 @@ declare const composeRef: typeof composeRefs;
  */
 declare function getMergeableTriggerChild(children: ReactNode): ReactElement | null;
 
-export { acquireBodyScrollLock, composeRef, composeRefs, getMergeableTriggerChild, useComposedRefs };
+interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children?: any;
+}
+/** Merges its props onto the single child. Used for `asChild`. */
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement | null>>;
+
+export { Slot, type SlotProps, acquireBodyScrollLock, composeRef, composeRefs, getMergeableTriggerChild, useComposedRefs };

package/lib/react.d.ts

@@ -1,4 +1,5 @@
-import { Ref, ReactNode, ReactElement } from 'react';
+import * as react from 'react';
+import { Ref, ReactNode, ReactElement, HTMLAttributes } from 'react';
 
 /**
  * Root document scroll lock with ref-counting for nested overlays.
@@ -24,4 +25,10 @@ declare const composeRef: typeof composeRefs;
  */
 declare function getMergeableTriggerChild(children: ReactNode): ReactElement | null;
 
-export { acquireBodyScrollLock, composeRef, composeRefs, getMergeableTriggerChild, useComposedRefs };
+interface SlotProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    children?: any;
+}
+/** Merges its props onto the single child. Used for `asChild`. */
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement | null>>;
+
+export { Slot, type SlotProps, acquireBodyScrollLock, composeRef, composeRefs, getMergeableTriggerChild, useComposedRefs };

package/lib/react.js

@@ -77,7 +77,51 @@ function getMergeableTriggerChild(children) {
   }
   return node;
 }
+
+// src/Slot.tsx
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement as isValidElement2
+} from "react";
+import { Fragment as Fragment2, jsx } from "react/jsx-runtime";
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key of Object.keys(childProps)) {
+    if (key === "ref" || key === "children") continue;
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    const isEvent = key.startsWith("on") && typeof slotValue === "function" && typeof childValue === "function";
+    if (key === "className" || key === "aria-describedby") {
+      merged[key] = [slotValue, childValue].filter(Boolean).join(" ");
+    } else if (key === "style") {
+      merged.style = { ...slotValue ?? {}, ...childValue ?? {} };
+    } else if (isEvent) {
+      merged[key] = (event) => {
+        childValue(event);
+        if (!event?.defaultPrevented) slotValue(event);
+      };
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+var Slot = forwardRef(function Slot2({ children, ...slotProps }, forwardedRef) {
+  if (!isValidElement2(children)) {
+    return /* @__PURE__ */ jsx(Fragment2, { children });
+  }
+  const child = children;
+  const childProps = { ...child.props ?? {} };
+  const childRef = child.ref ?? childProps.ref;
+  delete childProps.ref;
+  delete childProps.children;
+  const merged = mergeProps(slotProps, childProps);
+  merged.ref = composeRefs(forwardedRef, childRef);
+  return cloneElement(child, merged);
+});
 export {
+  Slot,
   acquireBodyScrollLock,
   composeRef,
   composeRefs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refineui/utilities",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "RefineUI React utilities for building components",
   "sideEffects": false,
   "type": "module",
@@ -49,7 +49,7 @@
     "lib"
   ],
   "dependencies": {
-    "@refineui/version": "1.0.0"
+    "@refineui/version": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",