najm-kit 2.1.26 → 2.1.28

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;

package/dist/index.mjs

@@ -1913,7 +1913,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 +1943,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 +2466,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 +2568,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 +2593,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: [
@@ -5856,7 +5879,7 @@ function NDonutCard({
       iconColor,
       bordered: true,
       className: cn(className, classNames?.root),
-      classNames: { content: "@container p-0" },
+      classNames: { content: "p-0" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -5867,7 +5890,7 @@ function NDonutCard({
             role: "group",
             "aria-label": accessibleLabel,
             className: cn(
-              isHorizontal ? "grid grid-cols-1 justify-items-center gap-4 p-2 lg:p-3 xl:p-4 2xl:p-5 @min-[16rem]:grid-cols-[auto_minmax(0,1fr)] @min-[16rem]:items-center @min-[16rem]:justify-items-stretch @min-[16rem]:gap-5" : cn(
+              isHorizontal ? "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-5 p-2 lg:p-3 xl:p-4 2xl:p-5" : cn(
                 "flex flex-col items-center p-2 lg:p-3 xl:p-4 2xl:p-5",
                 isCompact ? "gap-2" : "gap-4"
               ),
@@ -5969,7 +5992,7 @@ function NDonutCard({
                   className: cn(
                     "flex flex-col gap-1.5 w-full",
                     isCompact && "gap-1",
-                    isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5 @min-[16rem]:pt-0",
+                    isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5",
                     classNames?.legend
                   ),
                   children: normalized.map((item) => /* @__PURE__ */ jsx(

package/package.json

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