najm-kit 2.1.28 → 2.1.29

package/dist/index.d.ts

@@ -2285,6 +2285,13 @@ interface BaseFormInputProps {
     onChange?: (value: any) => void;
 }
 type FormInputSpecificProps<T> = Omit<T, "value" | "onChange" | keyof BaseFormInputProps>;
+type FormImageInputProps = FormInputSpecificProps<ImageInputProps> & {
+    /**
+     * Optional controlled preview value.
+     * React Hook Form owns the value when omitted.
+     */
+    value?: ImageInputProps["value"];
+};
 type InputTypeMap = {
     text: FormInputSpecificProps<TextInputProps>;
     number: FormInputSpecificProps<NumberInputProps>;
@@ -2298,7 +2305,7 @@ type InputTypeMap = {
     checkbox: FormInputSpecificProps<CheckboxInputProps>;
     checkboxGroup: FormInputSpecificProps<CheckboxGroupInputProps>;
     file: FormInputSpecificProps<FileInputProps>;
-    image: FormInputSpecificProps<ImageInputProps>;
+    image: FormImageInputProps;
     date: FormInputSpecificProps<DateInputProps>;
     starRating: FormInputSpecificProps<StarRatingInputProps>;
     colorArray: FormInputSpecificProps<ColorArrayInputProps>;

package/dist/index.mjs

@@ -1234,11 +1234,26 @@ var Button = React.forwardRef(
       },
       [autoLoading, isDisabled, onClick]
     );
-    const content = loadingText && isLoading ? loadingText : children;
+    const child = asChild ? React.Children.only(children) : null;
+    const childContent = asChild && React.isValidElement(child) ? child.props.children : children;
+    const content = loadingText && isLoading ? loadingText : childContent;
     const loaderNode = isLoading ? loader : null;
     const leftIconNode = renderIcon(leftIcon);
     const rightIconNode = renderIcon(rightIcon);
     const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
+    const renderedContent = showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
+        leftIconNode,
+        content,
+        rightIconNode
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
+      content,
+      loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
+    ] });
+    const renderedChild = asChild && React.isValidElement(child) ? React.cloneElement(child, void 0, renderedContent) : renderedContent;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -1267,18 +1282,7 @@ var Button = React.forwardRef(
         ),
         onClick: handleClick,
         ...props,
-        children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
-            leftIconNode,
-            content,
-            rightIconNode
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
-          content,
-          loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
-        ] })
+        children: renderedChild
       }
     );
   }

package/dist/json.mjs

@@ -1,5 +1,5 @@
-import * as React3 from 'react';
-import React3__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
+import * as React5 from 'react';
+import React5__default, { createContext, useContext, useMemo, useRef, useCallback } from 'react';
 import CodeMirror from '@uiw/react-codemirror';
 import { json } from '@codemirror/lang-json';
 import { keymap, EditorView, Decoration, ViewPlugin } from '@codemirror/view';
@@ -201,8 +201,8 @@ var NIcon = ({
     height: size,
     ...style
   };
-  if (React3__default.isValidElement(icon)) {
-    return React3__default.cloneElement(icon, {
+  if (React5__default.isValidElement(icon)) {
+    return React5__default.cloneElement(icon, {
       className: cn(className, icon.props.className),
       onClick,
       ...rest
@@ -249,15 +249,15 @@ var NIcon = ({
   return null;
 };
 NIcon.displayName = "NIcon";
-React3.createContext(0);
-React3.createContext(null);
+React5.createContext(0);
+React5.createContext(null);
 var DEFAULT_APPEARANCE = {};
-React3.createContext(DEFAULT_APPEARANCE);
-var NajmDesignContext = React3.createContext({
+React5.createContext(DEFAULT_APPEARANCE);
+var NajmDesignContext = React5.createContext({
   components: {}
 });
 function useNajmDesign() {
-  return React3.useContext(NajmDesignContext);
+  return React5.useContext(NajmDesignContext);
 }
 function useNajmComponentStyle(name) {
   const { components } = useNajmDesign();
@@ -427,7 +427,7 @@ function renderIcon(icon) {
   if (!icon) return null;
   return /* @__PURE__ */ jsx(NIcon, { "aria-hidden": "true", icon, className: "shrink-0" });
 }
-var Button = React3.forwardRef(
+var Button = React5.forwardRef(
   ({
     className,
     variant,
@@ -459,11 +459,11 @@ var Button = React3.forwardRef(
     const effSize = size ?? recipe?.defaultSize;
     const recipeRadius = rounded === void 0 ? resolveRadiusValue(recipe?.radius) : void 0;
     const recipeStyle = recipeRadius ? { borderRadius: recipeRadius } : void 0;
-    const [pending, setPending] = React3.useState(false);
+    const [pending, setPending] = React5.useState(false);
     const isLoading = loading || pending;
     const isDisabled = disabled || disabledWhileLoading && isLoading;
     const Comp = asChild ? Slot : "button";
-    const handleClick = React3.useCallback(
+    const handleClick = React5.useCallback(
       (event) => {
         if (isDisabled) {
           event.preventDefault();
@@ -480,11 +480,26 @@ var Button = React3.forwardRef(
       },
       [autoLoading, isDisabled, onClick]
     );
-    const content = loadingText && isLoading ? loadingText : children;
+    const child = asChild ? React5.Children.only(children) : null;
+    const childContent = asChild && React5.isValidElement(child) ? child.props.children : children;
+    const content = loadingText && isLoading ? loadingText : childContent;
     const loaderNode = isLoading ? loader : null;
     const leftIconNode = renderIcon(leftIcon);
     const rightIconNode = renderIcon(rightIcon);
     const showCenteredLoader = Boolean(loaderNode && loaderPosition === "center");
+    const renderedContent = showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
+        leftIconNode,
+        content,
+        rightIconNode
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
+      content,
+      loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
+    ] });
+    const renderedChild = asChild && React5.isValidElement(child) ? React5.cloneElement(child, void 0, renderedContent) : renderedContent;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -513,18 +528,7 @@ var Button = React3.forwardRef(
         ),
         onClick: handleClick,
         ...props,
-        children: showCenteredLoader ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("span", { className: "invisible inline-flex items-center gap-2", children: [
-            leftIconNode,
-            content,
-            rightIconNode
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 inline-flex items-center justify-center", children: loaderNode })
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          loaderNode && loaderPosition === "left" ? loaderNode : leftIconNode,
-          content,
-          loaderNode && loaderPosition === "right" ? loaderNode : rightIconNode
-        ] })
+        children: renderedChild
       }
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.28",
+  "version": "2.1.29",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",