najm-kit 2.1.39 → 2.1.40

package/dist/index.d.ts

@@ -2168,6 +2168,8 @@ interface ImageInputProps extends BaseProps {
     icon?: InputIcon;
     showIcon?: boolean;
     uploadIcon?: React.ReactNode;
+    /** Class applied to the component's outer layout container. */
+    containerClassName?: string;
     previewClassName?: string;
     /** Inline styles applied to the preview container. */
     previewStyle?: CSSProperties;
@@ -2197,6 +2199,8 @@ interface AvatarInputProps extends ImageInputProps {
     radius?: AvatarInputRadius;
     /** Exact width and height. Numbers are interpreted as pixels. */
     size?: number | string;
+    /** Fill the available width and remaining height of the form item. */
+    fill?: boolean;
 }
 interface EmojiInputProps extends BaseProps {
     value: number;
@@ -2294,10 +2298,10 @@ 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, previewStyle, contentClassName, showPreview, previewPosition, allowClear, accept, defaultImage, imageSize, imageVersion, disabled, uploadIcon, title, subtitle, titleClassName, subtitleClassName, replaceTitle, replaceSubtitle, trigger, buttonLabel, }: ImageInputProps): react_jsx_runtime.JSX.Element;
+declare function ImageInput({ value, onChange, containerClassName, previewClassName, previewStyle, contentClassName, showPreview, previewPosition, allowClear, accept, defaultImage, imageSize, imageVersion, disabled, uploadIcon, title, subtitle, titleClassName, subtitleClassName, replaceTitle, replaceSubtitle, trigger, buttonLabel, }: ImageInputProps): react_jsx_runtime.JSX.Element;
 
 /** A circular image picker preset for profile photos and user avatars. */
-declare function AvatarInput({ imageSize, size, radius, previewClassName, previewStyle, contentClassName, uploadIcon, title, subtitleClassName, trigger, ...props }: AvatarInputProps): react_jsx_runtime.JSX.Element;
+declare function AvatarInput({ imageSize, size, fill, radius, containerClassName, previewClassName, previewStyle, contentClassName, uploadIcon, title, subtitleClassName, trigger, ...props }: AvatarInputProps): react_jsx_runtime.JSX.Element;
 
 declare const StarRatingInput: React__default.FC<StarRatingInputProps>;
 

package/dist/index.mjs

@@ -9494,6 +9494,7 @@ var IMAGE_SIZE_MAP = {
 function ImageInput({
   value,
   onChange,
+  containerClassName,
   previewClassName,
   previewStyle,
   contentClassName,
@@ -9645,12 +9646,12 @@ function ImageInput({
   );
   if (!showPreview) return renderFileInput();
   if (previewPosition === "left" || previewPosition === "right") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", previewPosition === "right" && "flex-row-reverse"), children: [
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-4", previewPosition === "right" && "flex-row-reverse", containerClassName), children: [
       renderPreview(),
       /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderFileInput() })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", previewPosition === "bottom" && "flex-col-reverse"), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", previewPosition === "bottom" && "flex-col-reverse", containerClassName), children: [
     renderPreview(),
     renderFileInput()
   ] });
@@ -9673,7 +9674,9 @@ var AVATAR_RADIUS_MAP = {
 function AvatarInput({
   imageSize = "md",
   size,
+  fill = false,
   radius = "full",
+  containerClassName,
   previewClassName,
   previewStyle,
   contentClassName,
@@ -9688,15 +9691,19 @@ function AvatarInput({
     {
       ...props,
       imageSize,
+      containerClassName: cn(
+        fill && "min-h-24 w-full flex-1",
+        containerClassName
+      ),
       previewClassName: cn(
-        AVATAR_SIZE_MAP[imageSize],
+        fill ? "size-full min-h-0" : AVATAR_SIZE_MAP[imageSize],
         "shrink-0",
         AVATAR_RADIUS_MAP[radius],
         previewClassName
       ),
       previewStyle: {
         ...previewStyle,
-        ...size != null ? { width: size, height: size } : null
+        ...size != null && !fill ? { width: size, height: size } : null
       },
       contentClassName: cn("gap-1 p-2", contentClassName),
       uploadIcon: uploadIcon ?? /* @__PURE__ */ jsx(Camera, { className: "size-6" }),
@@ -10584,8 +10591,13 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
     return "";
   };
   const presetInput = type === "textarea" ? preset.input?.replace(/\bh-\d+\b/g, "").trim() : preset.input;
+  const isFillAvatar = type === "avatar" && inputRest.fill === true;
   const slot = {
-    item: cn(preset.item, classNames?.item),
+    item: cn(
+      preset.item,
+      isFillAvatar && "flex h-full min-h-0 w-full flex-col",
+      classNames?.item
+    ),
     label: cn(preset.label, classNames?.label),
     input: cn(presetInput, background && inputBackgroundClasses[background], classNames?.input, className),
     description: cn(preset.description, classNames?.description),

package/package.json

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