najm-kit 2.1.15 → 2.1.17

package/dist/index.d.ts

@@ -167,6 +167,10 @@ interface NajmComponentStyleConfig {
     showSectionLabels?: boolean;
     /** Sidebar-only: render separator lines between nav item sections. */
     showSectionSeparators?: boolean;
+    /** Sidebar-only: expanded width in px (default 240). */
+    expandedWidth?: number;
+    /** Sidebar-only: collapsed width in px (default 64). */
+    collapsedWidth?: number;
     defaultVariant?: string;
     defaultSize?: string;
     density?: NajmDensity;

package/dist/index.mjs

@@ -608,6 +608,8 @@ var COMPONENT_KEYS = /* @__PURE__ */ new Set([
   "card",
   "showSectionLabels",
   "showSectionSeparators",
+  "expandedWidth",
+  "collapsedWidth",
   "defaultVariant",
   "defaultSize",
   "density",
@@ -645,6 +647,13 @@ function optionalBoolean(value, path) {
   }
   return value;
 }
+function optionalNumber(value, path) {
+  if (value === void 0) return void 0;
+  if (typeof value !== "number") {
+    throw new TypeError(`${path} must be a number`);
+  }
+  return value;
+}
 function optionalEnum2(value, values, path) {
   if (value === void 0) return void 0;
   if (typeof value !== "string" || !values.has(value)) {
@@ -705,6 +714,8 @@ function parseComponentStyle(value, path) {
   const card = optionalBoolean(value.card, `${path}.card`);
   const showSectionLabels = optionalBoolean(value.showSectionLabels, `${path}.showSectionLabels`);
   const showSectionSeparators = optionalBoolean(value.showSectionSeparators, `${path}.showSectionSeparators`);
+  const expandedWidth = optionalNumber(value.expandedWidth, `${path}.expandedWidth`);
+  const collapsedWidth = optionalNumber(value.collapsedWidth, `${path}.collapsedWidth`);
   const defaultVariant = optionalString2(value.defaultVariant, `${path}.defaultVariant`);
   const defaultSize = optionalString2(value.defaultSize, `${path}.defaultSize`);
   const density = optionalEnum2(value.density, DENSITIES, `${path}.density`);
@@ -716,6 +727,8 @@ function parseComponentStyle(value, path) {
   if (card !== void 0) cfg.card = card;
   if (showSectionLabels !== void 0) cfg.showSectionLabels = showSectionLabels;
   if (showSectionSeparators !== void 0) cfg.showSectionSeparators = showSectionSeparators;
+  if (expandedWidth !== void 0) cfg.expandedWidth = expandedWidth;
+  if (collapsedWidth !== void 0) cfg.collapsedWidth = collapsedWidth;
   if (defaultVariant !== void 0) cfg.defaultVariant = defaultVariant;
   if (defaultSize !== void 0) cfg.defaultSize = defaultSize;
   if (density !== void 0) cfg.density = density;
@@ -1982,7 +1995,7 @@ function NPageHeaderCompactActions({ children, className }) {
 }
 NPageHeaderCompactActions.displayName = "NPageHeaderCompactActions";
 function NPageHeaderFilters({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("px-2 py-3 lg:px-4 xl:px-5", className), children });
+  return /* @__PURE__ */ jsx("div", { className: cn("py-3 lg:px-4 xl:px-4 2xl:px-5", className), children });
 }
 NPageHeaderFilters.displayName = "NPageHeaderFilters";
 function NPageHeaderTop({ children, className }) {
@@ -2091,7 +2104,7 @@ function NPageHeader({
           {
             "data-slot": "page-header-main",
             className: cn(
-              "relative grid min-h-12 grid-cols-[minmax(2.75rem,1fr)_minmax(0,auto)_minmax(2.75rem,1fr)] items-center gap-2 px-2 lg:px-4 xl:px-5",
+              "relative grid min-h-12 grid-cols-[minmax(2.75rem,1fr)_minmax(0,auto)_minmax(2.75rem,1fr)] items-center gap-2 lg:px-4 xl:px-4 2xl:px-5",
               breakpointClasses.main,
               breakpointClasses.minH,
               headerClassName
@@ -5085,7 +5098,7 @@ function NCard({
       style: recipeStyle,
       className: cn(
         "flex flex-col",
-        !noPadding && "p-2 lg:p-4 xl:p-5 gap-3",
+        !noPadding && "p-2 lg:p-4 xl:p-4 2xl:p-5 gap-3",
         surfaceBorderClasses(bordered),
         classNames?.root,
         className
@@ -5285,7 +5298,7 @@ function DefaultCard({
       onClick,
       bordered,
       className: cn(
-        "group p-4 transition-colors",
+        "group p-2 lg:p-4 xl:p-4 2xl:p-5 transition-colors",
         onClick && "cursor-pointer hover:border-border/60 hover:bg-accent/40",
         className
       ),
@@ -5298,10 +5311,10 @@ function DefaultCard({
           "div",
           {
             className: cn(
-              "flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
+              "flex h-8 w-8 lg:h-9 lg:w-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
               classNames?.icon
             ),
-            children: /* @__PURE__ */ jsx(NIcon, { icon, className: "w-7 h-7" })
+            children: /* @__PURE__ */ jsx(NIcon, { icon, className: "w-4 h-4 lg:w-5 lg:h-5 2xl:w-6 2xl:h-6" })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
@@ -5321,7 +5334,7 @@ function DefaultCard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("p", { className: cn("text-xl font-semibold leading-none text-foreground", classNames?.value), children: value }),
+          /* @__PURE__ */ jsx("p", { className: cn("text-sm lg:text-base xl:text-base 2xl:text-xl font-semibold leading-none text-foreground", classNames?.value), children: value }),
           subtext && /* @__PURE__ */ jsx("p", { className: cn("text-[10px] text-muted-foreground", classNames?.description), children: subtext })
         ] })
       ]
@@ -11177,8 +11190,8 @@ function NSidebar({
   }, [onNavigate, closeOnNavigate]);
   const groups = useMemo(() => buildGroups(navItems), [navItems]);
   const desktopClass = mobileBreakpoint === "sm" ? "hidden sm:flex" : mobileBreakpoint === "lg" ? "hidden lg:flex" : "hidden md:flex";
-  const expandedWidth = widths?.expanded ?? 240;
-  const collapsedWidth = widths?.collapsed ?? 64;
+  const expandedWidth = widths?.expanded ?? recipe?.expandedWidth ?? 240;
+  const collapsedWidth = widths?.collapsed ?? recipe?.collapsedWidth ?? 64;
   const mobileWidth = widths?.mobile ?? expandedWidth;
   const railVar = typeof collapsedWidth === "number" ? `${collapsedWidth}px` : collapsedWidth;
   const sidebarEdgeWidth = bordered === false ? "0px" : recipe?.borderWidth ?? "var(--border-width, 1px)";
@@ -11252,7 +11265,7 @@ function NSidebar({
         "data-collapsed": desktopCollapsed ? "true" : "false",
         "data-auto-collapsed": autoCollapsed ? "true" : void 0,
         className: cn(
-          "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200",
+          "relative z-10 flex flex-col h-full bg-sidebar text-sidebar-foreground transition-all duration-200 shrink-0",
           desktopClass,
           sidebarBorderClasses(bordered, "right"),
           classNames?.sidebar,

package/package.json

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