najm-kit 2.1.29 → 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;
 

package/dist/index.mjs

@@ -7463,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);
@@ -7493,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",
     {
@@ -7500,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",
@@ -7530,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/package.json

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