najm-kit 2.1.51 → 2.1.52

package/dist/index.d.ts

@@ -1647,7 +1647,7 @@ type NStatCardProps = DefaultProps | UsageProps | CompactProps;
 declare function NStatCard(props: NStatCardProps): react_jsx_runtime.JSX.Element;
 
 type NDonutCardVariant = "compact" | "default";
-type NDonutCardLayout = "vertical" | "horizontal";
+type NDonutCardLayout = "auto" | "vertical" | "horizontal";
 type NDonutCardLegendMarker = "dot" | "icon" | "none";
 type NDonutCardCenterOrientation = "column" | "row";
 interface NDonutCardItem {
@@ -1684,6 +1684,7 @@ interface NDonutCardProps {
     emptyLabel?: React__default.ReactNode;
     footer?: React__default.ReactNode;
     variant?: NDonutCardVariant;
+    /** `"auto"` keeps the donut and legend side by side and lets the space between them grow. */
     layout?: NDonutCardLayout;
     legendMarker?: NDonutCardLegendMarker;
     centerOrientation?: NDonutCardCenterOrientation;

package/dist/index.mjs

@@ -7685,7 +7685,7 @@ function NCard({
                 CardContent,
                 {
                   className: cn(
-                    "m-0 flex min-w-0 flex-col gap-2 p-0",
+                    "m-0 flex min-w-0 flex-1 flex-col gap-2 p-0",
                     sideBody && "col-start-2",
                     headerBody && "col-span-full",
                     responsiveAvatarBody && "col-start-2 sm:col-span-full",
@@ -8233,7 +8233,7 @@ function NDonutCard({
   emptyLabel,
   footer,
   variant = "default",
-  layout = "vertical",
+  layout = "auto",
   legendMarker = "dot",
   centerOrientation = "column",
   percentageFormatter,
@@ -8261,6 +8261,7 @@ function NDonutCard({
   const isTitleString = typeof title === "string";
   const accessibleLabel = isTitleString ? title : ariaLabel;
   const isCompact = variant === "compact";
+  const isAuto = layout === "auto";
   const isHorizontal = layout === "horizontal";
   const isCenterRow = centerOrientation === "row";
   const ringStyle = {
@@ -8291,7 +8292,7 @@ function NDonutCard({
             role: "group",
             "aria-label": accessibleLabel,
             className: cn(
-              isHorizontal ? "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-5 p-2 lg:p-3 2xl:p-4" : cn(
+              isAuto ? "flex w-full items-center gap-4 p-2 sm:p-3 lg:p-4" : isHorizontal ? "grid grid-cols-[auto_minmax(0,1fr)] items-center gap-5 p-2 lg:p-3 2xl:p-4" : cn(
                 "flex flex-col items-center p-2 lg:p-3 2xl:p-4",
                 isCompact ? "gap-2" : "gap-4"
               ),
@@ -8301,7 +8302,10 @@ function NDonutCard({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: cn("flex flex-col items-center gap-2", isHorizontal && "shrink-0"),
+                  className: cn(
+                    "flex flex-col items-center gap-2",
+                    (isHorizontal || isAuto) && "shrink-0"
+                  ),
                   children: [
                     /* @__PURE__ */ jsxs(
                       "div",
@@ -8391,9 +8395,11 @@ function NDonutCard({
                 {
                   "data-slot": "donut-legend",
                   className: cn(
-                    "flex flex-col gap-1.5 w-full",
-                    isCompact && "gap-1",
-                    isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5",
+                    isAuto ? "ms-auto shrink-0 space-y-3" : cn(
+                      "flex flex-col gap-1.5 w-full",
+                      isCompact && "gap-1",
+                      isHorizontal && "min-w-0 flex-1 gap-2 pt-0.5"
+                    ),
                     classNames?.legend
                   ),
                   children: normalized.map((item) => /* @__PURE__ */ jsx(
@@ -8401,7 +8407,44 @@ function NDonutCard({
                     {
                       "data-slot": "donut-legend-item",
                       className: cn(classNames?.legendItem),
-                      children: isHorizontal ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+                      children: isAuto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(
+                            LegendMarker,
+                            {
+                              className: cn(classNames?.legendMarker),
+                              color: item.color,
+                              icon: item.icon,
+                              mode: legendMarker
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: cn(
+                                "min-w-0 flex-1 truncate text-muted-foreground",
+                                isCompact ? "text-[11px]" : "text-xs sm:text-sm",
+                                classNames?.legendLabel
+                              ),
+                              children: item.label
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "ms-4 block whitespace-nowrap tabular-nums text-foreground font-semibold",
+                              isCompact ? "text-[11px]" : "text-xs sm:text-sm",
+                              classNames?.legendValue
+                            ),
+                            children: [
+                              valueFormatter(item.value),
+                              percentageFormatter ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-[11px] font-normal text-muted-foreground sm:ml-0.5", children: percentageFormatter(item.ratio) }) : null
+                            ]
+                          }
+                        )
+                      ] }) : isHorizontal ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
                         /* @__PURE__ */ jsx(
                           LegendMarker,
                           {

package/package.json

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