najm-kit 2.1.28 → 2.1.31

package/dist/index.d.ts

@@ -2074,6 +2074,7 @@ interface ImageInputProps extends BaseProps {
     placeholder?: string;
     icon?: InputIcon;
     showIcon?: boolean;
+    uploadIcon?: React.ReactNode;
     previewClassName?: string;
     showPreview?: boolean;
     previewPosition?: "top" | "bottom" | "left" | "right";
@@ -2082,6 +2083,12 @@ interface ImageInputProps extends BaseProps {
     defaultImage?: string;
     imageSize?: "sm" | "md" | "lg" | "xl";
     imageVersion?: string | number | null;
+    title?: string;
+    subtitle?: string;
+    replaceTitle?: string;
+    replaceSubtitle?: string;
+    trigger?: "icon" | "button" | "both";
+    buttonLabel?: string;
 }
 interface EmojiInputProps extends BaseProps {
     value: number;
@@ -2179,7 +2186,7 @@ interface NUploaderProps {
 }
 declare function NUploader({ title, subtitle, accept, multiple, disabled, items, listTitle, className, dropzoneClassName, onFilesSelected, onCancel, onRemove, }: NUploaderProps): react_jsx_runtime.JSX.Element;
 
-declare function ImageInput({ value, onChange, previewClassName, showPreview, previewPosition, allowClear, accept, defaultImage, imageSize, imageVersion, disabled, }: ImageInputProps & {
+declare function ImageInput({ value, onChange, previewClassName, showPreview, previewPosition, allowClear, accept, defaultImage, imageSize, imageVersion, disabled, uploadIcon, title, subtitle, replaceTitle, replaceSubtitle, trigger, buttonLabel, }: ImageInputProps & {
     disabled?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
@@ -2285,6 +2292,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 +2312,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
       }
     );
   }
@@ -7459,7 +7463,14 @@ function ImageInput({
   defaultImage,
   imageSize = "md",
   imageVersion,
-  disabled = false
+  disabled = false,
+  uploadIcon,
+  title = "Click to upload",
+  subtitle,
+  replaceTitle = "Replace image",
+  replaceSubtitle,
+  trigger = "icon",
+  buttonLabel = "Upload"
 }) {
   const fileInputRef = useRef(null);
   const [preview, setPreview] = useState(null);
@@ -7489,6 +7500,8 @@ function ImageInput({
     if (fileInputRef.current) fileInputRef.current.value = "";
   };
   const effectiveSize = previewClassName || IMAGE_SIZE_MAP[imageSize];
+  const isDropzone = !!previewClassName;
+  const effectiveReplaceSubtitle = replaceSubtitle ?? subtitle;
   const renderPreview = () => /* @__PURE__ */ jsx(
     "div",
     {
@@ -7496,7 +7509,24 @@ function ImageInput({
         "flex relative group rounded-lg overflow-hidden border-2 border-dashed border-muted-foreground/60 hover:border-primary transition-colors",
         effectiveSize
       ),
-      children: preview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: preview ? isDropzone ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", className: "absolute inset-0 w-full h-full object-cover" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex flex-col items-center justify-center gap-1.5 bg-black/40 text-white px-6 py-8 text-center", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: replaceTitle }),
+          effectiveReplaceSubtitle ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: effectiveReplaceSubtitle }) : null,
+          allowClear && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              disabled,
+              className: "absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+              "aria-label": "Remove image",
+              children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", className: "w-full h-full object-cover" }),
         /* @__PURE__ */ jsx(
           "div",
@@ -7526,7 +7556,26 @@ function ImageInput({
             children: /* @__PURE__ */ jsx(Upload, { className: "h-8 w-8 text-white" })
           }
         )
-      ] }) : /* @__PURE__ */ jsxs(
+      ] }) : isDropzone ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: handleClick,
+          className: "w-full h-full flex flex-col items-center justify-center gap-2 cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors px-6 py-8 text-center",
+          children: [
+            (trigger === "icon" || trigger === "both") && /* @__PURE__ */ jsx("div", { className: "text-primary", children: uploadIcon ?? /* @__PURE__ */ jsx(Plus, { className: "h-8 w-8" }) }),
+            (trigger === "button" || trigger === "both") && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                className: "inline-flex items-center justify-center rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
+                children: buttonLabel
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: title }),
+            subtitle ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: subtitle }) : null
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
         "div",
         {
           onClick: handleClick,

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.31",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",