najm-kit 2.1.27 → 2.1.29

package/dist/index.d.ts

@@ -457,7 +457,7 @@ declare function DialogClose({ ...props }: React$1.ComponentProps<typeof DialogP
 declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): react_jsx_runtime.JSX.Element;
 type DialogPadding = "none" | "sm" | "md" | "lg";
 interface DialogContentProps extends React$1.ComponentProps<typeof DialogPrimitive.Content> {
-    /** Controls the padding of the dialog surface. `none` also collapses the header/body/footer gap. Defaults to `md` (p-6). */
+    /** Controls the padding of the dialog surface. `none` also collapses the header/body/footer gap. Defaults to `sm` on mobile, `md` on desktop. */
     padding?: DialogPadding;
     /** Hides the built-in top-right close (X). Use when the content provides its own close control (e.g. inside a page header). */
     hideClose?: boolean;
@@ -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
       }
     );
   }
@@ -1913,7 +1917,29 @@ var dialogPaddingMap = {
   md: "p-6",
   lg: "p-8"
 };
-function DialogContent({ className, children, padding = "md", hideClose = false, ...props }) {
+var MOBILE_PADDING_QUERY = "(max-width: 639.98px)";
+function getDefaultPadding() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "md";
+  return window.matchMedia(MOBILE_PADDING_QUERY).matches ? "sm" : "md";
+}
+function useResponsivePadding(value) {
+  const [resolved, setResolved] = React.useState(() => value ?? getDefaultPadding());
+  React.useEffect(() => {
+    if (value) {
+      setResolved(value);
+      return;
+    }
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const mql = window.matchMedia(MOBILE_PADDING_QUERY);
+    const update = () => setResolved(mql.matches ? "sm" : "md");
+    update();
+    mql.addEventListener("change", update);
+    return () => mql.removeEventListener("change", update);
+  }, [value]);
+  return resolved;
+}
+function DialogContent({ className, children, padding, hideClose = false, ...props }) {
+  const resolvedPadding = useResponsivePadding(padding);
   const portalClassName = useNPortalScope();
   return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsxs("div", { className: portalClassName, children: [
     /* @__PURE__ */ jsx(DialogOverlay, {}),
@@ -1921,10 +1947,10 @@ function DialogContent({ className, children, padding = "md", hideClose = false,
       SheetPrimitive.Content,
       {
         "data-slot": "dialog-content",
-        "data-padding": padding,
+        "data-padding": resolvedPadding,
         className: cn(
-          "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg najm-border border-border shadow-lg duration-200",
-          dialogPaddingMap[padding],
+          "bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-sm translate-x-[-50%] translate-y-[-50%] gap-4 rounded-none lg:rounded-lg najm-border border-border shadow-lg duration-200",
+          dialogPaddingMap[resolvedPadding],
           className
         ),
         ...props,
@@ -2444,12 +2470,12 @@ function parseDirectDialogSlots(children) {
   return { ...parsed, body };
 }
 var dialogVariants = cva(
-  "flex flex-col w-full max-w-[95vw] h-full max-h-screen",
+  "flex flex-col w-full max-w-full h-full max-h-screen",
   {
     variants: {
       variant: {
         default: "",
-        window: "rounded-sm"
+        window: "rounded-none lg:rounded-sm"
       },
       size: {
         sm: "lg:max-w-md",
@@ -2546,10 +2572,11 @@ function DialogChrome({
   contentRef,
   children
 }) {
+  const resolvedPadding = useResponsivePadding(padding);
   const noTitle = !title || title.trim() === "";
   const noDescription = !description || description.trim() === "";
   const noHeader = noTitle && noDescription;
-  const flush = padding === "none";
+  const flush = resolvedPadding === "none";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     pageHeader ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: cn("sr-only", titleClassName), children: pageHeader.title || title || "Dialog" }),
@@ -2570,7 +2597,7 @@ function DialogChrome({
       {
         className: cn(
           "flex-row items-center justify-between gap-3 border-b border-border bg-secondary text-left text-secondary-foreground",
-          windowHeaderSpacing[padding ?? "md"],
+          windowHeaderSpacing[resolvedPadding],
           headerClassName
         ),
         children: [

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