najm-kit 2.1.32 → 2.1.33

package/dist/index.d.ts

@@ -267,6 +267,12 @@ interface NThemeCustomizerProps {
     onPreviewModeChange: (mode: NajmMode) => void;
     /** Whether to show the light/dark preview-mode control in the theme tab. */
     showPreviewMode?: boolean;
+    /**
+     * Whether to render the internal Theme/Typography tab bar. Defaults to `true`.
+     * When `false`, the first resolved entry from `tabs` is rendered directly so
+     * a host application can present a single section inside its own tabs.
+     */
+    showTabs?: boolean;
     tabs?: readonly NThemeCustomizerTab[];
     fontOptions?: readonly NThemeCustomizerFontOption[];
     labels?: Partial<NThemeCustomizerLabels>;
@@ -274,7 +280,7 @@ interface NThemeCustomizerProps {
     className?: string;
 }
 
-declare function NThemeCustomizer({ value, factoryValue, onChange, previewMode, onPreviewModeChange, showPreviewMode, tabs, fontOptions, labels, disabled, className, }: NThemeCustomizerProps): react_jsx_runtime.JSX.Element;
+declare function NThemeCustomizer({ value, factoryValue, onChange, previewMode, onPreviewModeChange, showPreviewMode, showTabs, tabs, fontOptions, labels, disabled, className, }: NThemeCustomizerProps): react_jsx_runtime.JSX.Element;
 
 /** Keeps authored TypeScript theme objects type-checked without changing them. */
 declare function defineNajmThemeConfig(config: NajmThemeConfig): NajmThemeConfig;

package/dist/index.mjs

@@ -3289,6 +3289,7 @@ function NThemeCustomizer({
   previewMode,
   onPreviewModeChange,
   showPreviewMode = true,
+  showTabs = true,
   tabs,
   fontOptions,
   labels,
@@ -3350,115 +3351,119 @@ function NThemeCustomizer({
     }
     return out;
   }, [labels]);
+  const themeContent = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx(
+      ThemeCustomizerThemeTab,
+      {
+        value,
+        factoryValue,
+        onChange,
+        previewMode,
+        onPreviewModeChange,
+        showPreviewMode,
+        disabled,
+        labels: {
+          resetField: resetFieldLabel,
+          resetSection: resetSectionLabel,
+          colorSwatchFallback: colorSwatchFallbackLabel,
+          defaultOption: defaultOptionLabel,
+          lightMode: resolveLabel("lightMode", labels),
+          darkMode: resolveLabel("darkMode", labels),
+          surfaceGroup: resolveLabel("surfaceGroup", labels),
+          brandGroup: resolveLabel("brandGroup", labels),
+          feedbackGroup: resolveLabel("feedbackGroup", labels),
+          borderFocusGroup: resolveLabel("borderFocusGroup", labels),
+          sidebarGroup: resolveLabel("sidebarGroup", labels),
+          chartsGroup: resolveLabel("chartsGroup", labels),
+          globalBorderWidth: resolveLabel("globalBorderWidth", labels),
+          tableSubsection: resolveLabel("tableSubsection", labels),
+          tableHeaderColor: resolveLabel("tableHeaderColor", labels),
+          tableHeaderTextColor: resolveLabel("tableHeaderTextColor", labels),
+          tableBorderColor: resolveLabel("tableBorderColor", labels),
+          previewMode: resolveLabel("previewMode", labels),
+          tokens: tokenLabels,
+          options: labels?.options ?? {}
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-4", children: /* @__PURE__ */ jsx(
+      ThemeCustomizerComponentsLayoutTab,
+      {
+        value,
+        factoryValue,
+        onChange,
+        disabled,
+        showTableColors: false,
+        labels: {
+          resetField: resetFieldLabel,
+          defaultOption: defaultOptionLabel,
+          layoutSubsection: resolveLabel("layoutSubsection", labels),
+          pageHeaderSubsection: resolveLabel("pageHeaderSubsection", labels),
+          sidebarSubsection: resolveLabel("sidebarSubsection", labels),
+          tableSubsection: resolveLabel("tableSubsection", labels),
+          inputSubsection: resolveLabel("inputSubsection", labels),
+          pageGutter: resolveLabel("pageGutter", labels),
+          sectionGap: resolveLabel("sectionGap", labels),
+          pageHeaderCard: resolveLabel("pageHeaderCard", labels),
+          sidebarSectionLabels: resolveLabel("sidebarSectionLabels", labels),
+          sidebarSectionSeparators: resolveLabel("sidebarSectionSeparators", labels),
+          tableHeaderColor: resolveLabel("tableHeaderColor", labels),
+          tableHeaderTextColor: resolveLabel("tableHeaderTextColor", labels),
+          tableBorderColor: resolveLabel("tableBorderColor", labels),
+          inputBorderWidth: resolveLabel("inputBorderWidth", labels),
+          globalBorderWidth: resolveLabel("globalBorderWidth", labels),
+          globalRadius: resolveLabel("globalRadius", labels)
+        }
+      }
+    ) })
+  ] });
+  const typographyContent = /* @__PURE__ */ jsx(
+    ThemeCustomizerTypographyTab,
+    {
+      value,
+      factoryValue,
+      onChange,
+      fontOptions,
+      disabled,
+      labels: {
+        resetField: resetFieldLabel,
+        defaultOption: defaultOptionLabel,
+        fontSans: resolveLabel("fontSans", labels),
+        fontHeading: resolveLabel("fontHeading", labels),
+        fontMono: resolveLabel("fontMono", labels),
+        advancedTypography: resolveLabel("advancedTypography", labels),
+        baseSize: resolveLabel("baseSize", labels),
+        scale: resolveLabel("scale", labels),
+        options: labels?.options ?? {},
+        lineHeight: resolveLabel("lineHeight", labels),
+        letterSpacing: resolveLabel("letterSpacing", labels)
+      }
+    }
+  );
   const items = visibleTabs.map((tab) => {
     if (tab === "theme") {
       return {
         value: TAB_VALUE.theme,
         label: themeLabel,
         disabled,
-        content: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx(
-            ThemeCustomizerThemeTab,
-            {
-              value,
-              factoryValue,
-              onChange,
-              previewMode,
-              onPreviewModeChange,
-              showPreviewMode,
-              disabled,
-              labels: {
-                resetField: resetFieldLabel,
-                resetSection: resetSectionLabel,
-                colorSwatchFallback: colorSwatchFallbackLabel,
-                defaultOption: defaultOptionLabel,
-                lightMode: resolveLabel("lightMode", labels),
-                darkMode: resolveLabel("darkMode", labels),
-                surfaceGroup: resolveLabel("surfaceGroup", labels),
-                brandGroup: resolveLabel("brandGroup", labels),
-                feedbackGroup: resolveLabel("feedbackGroup", labels),
-                borderFocusGroup: resolveLabel("borderFocusGroup", labels),
-                sidebarGroup: resolveLabel("sidebarGroup", labels),
-                chartsGroup: resolveLabel("chartsGroup", labels),
-                globalBorderWidth: resolveLabel("globalBorderWidth", labels),
-                tableSubsection: resolveLabel("tableSubsection", labels),
-                tableHeaderColor: resolveLabel("tableHeaderColor", labels),
-                tableHeaderTextColor: resolveLabel("tableHeaderTextColor", labels),
-                tableBorderColor: resolveLabel("tableBorderColor", labels),
-                previewMode: resolveLabel("previewMode", labels),
-                tokens: tokenLabels,
-                options: labels?.options ?? {}
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border pt-4", children: /* @__PURE__ */ jsx(
-            ThemeCustomizerComponentsLayoutTab,
-            {
-              value,
-              factoryValue,
-              onChange,
-              disabled,
-              showTableColors: false,
-              labels: {
-                resetField: resetFieldLabel,
-                defaultOption: defaultOptionLabel,
-                layoutSubsection: resolveLabel("layoutSubsection", labels),
-                pageHeaderSubsection: resolveLabel("pageHeaderSubsection", labels),
-                sidebarSubsection: resolveLabel("sidebarSubsection", labels),
-                tableSubsection: resolveLabel("tableSubsection", labels),
-                inputSubsection: resolveLabel("inputSubsection", labels),
-                pageGutter: resolveLabel("pageGutter", labels),
-                sectionGap: resolveLabel("sectionGap", labels),
-                pageHeaderCard: resolveLabel("pageHeaderCard", labels),
-                sidebarSectionLabels: resolveLabel("sidebarSectionLabels", labels),
-                sidebarSectionSeparators: resolveLabel("sidebarSectionSeparators", labels),
-                tableHeaderColor: resolveLabel("tableHeaderColor", labels),
-                tableHeaderTextColor: resolveLabel("tableHeaderTextColor", labels),
-                tableBorderColor: resolveLabel("tableBorderColor", labels),
-                inputBorderWidth: resolveLabel("inputBorderWidth", labels),
-                globalBorderWidth: resolveLabel("globalBorderWidth", labels),
-                globalRadius: resolveLabel("globalRadius", labels)
-              }
-            }
-          ) })
-        ] })
+        content: themeContent
       };
     }
     return {
       value: TAB_VALUE.typography,
       label: typographyLabel,
       disabled,
-      content: /* @__PURE__ */ jsx(
-        ThemeCustomizerTypographyTab,
-        {
-          value,
-          factoryValue,
-          onChange,
-          fontOptions,
-          disabled,
-          labels: {
-            resetField: resetFieldLabel,
-            defaultOption: defaultOptionLabel,
-            fontSans: resolveLabel("fontSans", labels),
-            fontHeading: resolveLabel("fontHeading", labels),
-            fontMono: resolveLabel("fontMono", labels),
-            advancedTypography: resolveLabel("advancedTypography", labels),
-            baseSize: resolveLabel("baseSize", labels),
-            scale: resolveLabel("scale", labels),
-            options: labels?.options ?? {},
-            lineHeight: resolveLabel("lineHeight", labels),
-            letterSpacing: resolveLabel("letterSpacing", labels)
-          }
-        }
-      )
+      content: typographyContent
     };
   });
   const handleResetTheme = () => onChange(resetComponentsLayoutSection(resetThemeSection(value, factoryValue), factoryValue));
   const handleResetTypography = () => onChange(resetTypographySection(value, factoryValue));
   const handleReset = () => {
-    if (activeTab === TAB_VALUE.theme) handleResetTheme();
+    const target = showTabs ? activeTab : TAB_VALUE[firstTab];
+    if (target === TAB_VALUE.theme) handleResetTheme();
     else handleResetTypography();
   };
+  const directContent = items[0]?.content ?? themeContent;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3469,7 +3474,7 @@ function NThemeCustomizer({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(
+        showTabs ? /* @__PURE__ */ jsx(
           NTabs,
           {
             items,
@@ -3483,7 +3488,7 @@ function NThemeCustomizer({
               trigger: "min-w-0 px-1.5 text-xs"
             }
           }
-        ),
+        ) : directContent,
         /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
           NButton,
           {

package/package.json

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