@smalt-ui/nuxt 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stanislav Dyachenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @smalt-ui/nuxt
+
+Nuxt module for [`@smalt-ui/core`](../core/README.md): component auto-import, styles, color mode
+and SSR setup out of the box.
+
+> Part of the **Smalt UI** monorepo. Shared requirements, installation and workspace commands are
+> described in the [root README](../../README.md).
+
+## Installation
+
+```bash
+pnpm add @smalt-ui/nuxt @smalt-ui/core
+```
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@smalt-ui/nuxt'],
+  sui: {
+    // options (see below)
+  },
+})
+```
+
+The module registers the components for auto-import, includes `@smalt-ui/core/styles.css`, adds
+the `.s-root` isolation container and sets up color mode. `reka-ui` is a peer dependency.
+
+**Nuxt 3 and Nuxt 4** are supported: `@nuxt/kit` is declared with the `^3.0.0 || ^4.0.0` range, so
+the module uses the app's kit instead of pulling in a second copy.
+
+## Options (`sui` config key)
+
+| Option      | Type                     | Default | Description                                                 |
+| ----------- | ------------------------ | ------- | ----------------------------------------------------------- |
+| `prefix`    | `string`                 | `''`    | Name prefix for auto-imported components                    |
+| `css`       | `boolean`                | `true`  | Include the global `@smalt-ui/core/styles.css` styles       |
+| `colorMode` | `boolean`                | `true`  | Enable light/dark control (`data-theme`)                    |
+| `container` | `boolean`                | `true`  | Add the `.s-root` isolation class to the app root           |
+| `locale`    | `'en'`                   | `'en'`  | Locale of the library strings (the only built-in one)       |
+| `messages`  | `Record<string, string>` | —       | Override individual library strings, e.g. to translate them |
+
+## Package scripts
+
+| Script             | Description                                    |
+| ------------------ | ---------------------------------------------- |
+| `pnpm dev:prepare` | Stub + module type preparation for development |
+| `pnpm build`       | Build the module (`nuxt-module-build`)         |
+
+Run from the root: `pnpm --filter @smalt-ui/nuxt <script>`.

package/dist/module.d.mts

@@ -0,0 +1,63 @@
+import { NuxtModule } from '@nuxt/schema';
+
+interface ModuleOptions {
+    /** Component name prefix for auto-import. Defaults to `''` (e.g. `SButton`). */
+    prefix: string;
+    /** Auto-import components. Defaults to `true`. */
+    components: boolean;
+    /** Include the global `@smalt-ui/core/styles.css` styles. Defaults to `true`. */
+    css: boolean;
+    /** Initialize color mode on the client (applies `data-theme`). Defaults to `true`. */
+    colorMode: boolean;
+    /**
+     * Add the `.s-root .s-root--app` container classes to the app root (`#__nuxt`) for CSS isolation
+     * and base typography. Defaults to `true`.
+     */
+    container: boolean;
+    /**
+     * Base locale of the library strings (`aria-label`, visually hidden labels, etc.). Defaults to
+     * `'en'`, the only built-in locale; other languages are provided through `messages`. With
+     * `locale`/`messages` set, the module provides the dictionary to the whole application. The
+     * strings type is `SMessages` from `@smalt-ui/core` (a loose `Record` here keeps the module's
+     * types portable).
+     */
+    locale?: 'en';
+    /** Partial override of individual strings on top of the locale (`SMessages` keys). */
+    messages?: Record<string, string>;
+    /**
+     * App-level prop defaults (keys are `global` and component names).
+     * The type is a loose `Record` to keep the module's types portable; in core it is `SDefaults`.
+     */
+    defaults?: Record<string, Record<string, unknown>>;
+    /** Built-in preset name (`compact`/`comfortable`): "theme + defaults" in one value. */
+    preset?: 'compact' | 'comfortable';
+    /**
+     * Include the Inter font: the `@font-face` rules and serving the files from the package.
+     * Defaults to `true`: the `--s-font-sans` token starts with `Inter`, and without the font files
+     * the app silently falls back to the system font.
+     *
+     * Turn it off if the app already includes Inter itself: otherwise the same font is declared
+     * twice and preload downloads an extra copy.
+     */
+    fonts: boolean | {
+        /** Include the CSS with `@font-face`. Defaults to `true`. */
+        css?: boolean;
+        /**
+         * Subsets for `<link rel="preload">`. Defaults to basic Latin (`['latin']`), the one
+         * the first screen is set in.
+         */
+        preload?: boolean | readonly SFontFace[];
+        /** Base URL Nitro serves the files from. Defaults to `'/_fonts/smalt'`. */
+        baseURL?: string;
+    };
+}
+/** Subset of the vendored font, a key for the `fonts.preload` option. */
+type SFontFace = 'latin' | 'latin-ext' | 'cyrillic' | 'cyrillic-ext';
+/**
+ * Explicit type annotation: without it the inferred module type references @nuxt/schema in a way
+ * that cannot be named (TS2742), and rollup-plugin-dts fails when generating .d.ts.
+ */
+declare const module$1: NuxtModule<ModuleOptions>;
+
+export { module$1 as default };
+export type { ModuleOptions, SFontFace };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@smalt-ui/nuxt",
+  "configKey": "sui",
+  "compatibility": {
+    "nuxt": ">=3.0.0"
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.3",
+    "unbuild": "unknown"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,191 @@
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineNuxtModule, createResolver, addTemplate, addComponent, addPluginTemplate, addPlugin } from '@nuxt/kit';
+import { colorModeScript } from '@smalt-ui/core/color-mode-script';
+
+const COMPONENT_NAMES = [
+  "SAccordion",
+  "SAccordionItem",
+  "SAlert",
+  "SAlertDialog",
+  "SAspectRatio",
+  "SAutocomplete",
+  "SAvatar",
+  "SBadge",
+  "SBreadcrumb",
+  "SButton",
+  "SCalendar",
+  "SCard",
+  "SCheckbox",
+  "SCollapsible",
+  "SColorField",
+  "SColorPicker",
+  "SContextMenu",
+  "SDateField",
+  "SDatePicker",
+  "SDateRangePicker",
+  "SDialog",
+  "SDrawer",
+  "SDropdownMenu",
+  "SFormField",
+  "SHoverCard",
+  "SIcon",
+  "SInput",
+  "SMenubar",
+  "SNavigationMenu",
+  "SNumberField",
+  "SPagination",
+  "SPinInput",
+  "SPopover",
+  "SProgress",
+  "SRadio",
+  "SRadioGroup",
+  "SRating",
+  "SSelect",
+  "SSeparator",
+  "SSkeleton",
+  "SSlider",
+  "SSpinner",
+  "SSplitter",
+  "SStepper",
+  "SSwitch",
+  "STabs",
+  "STag",
+  "STextarea",
+  "STimeField",
+  "SToast",
+  "SToggle",
+  "SToggleGroup",
+  "SToolbar",
+  "STooltip",
+  "STree"
+];
+const PROVIDER_NAMES = ["ConfigProvider", "ConfirmProvider", "ToastProvider"];
+const EXPLICIT_ONLY_PROVIDERS = ["ConfigProvider"];
+
+const FONT_FILES = {
+  latin: "Inter-Latin.woff2",
+  "latin-ext": "Inter-LatinExt.woff2",
+  cyrillic: "Inter-Cyrillic.woff2",
+  "cyrillic-ext": "Inter-CyrillicExt.woff2"
+};
+const DEFAULT_PRELOAD = ["latin"];
+const explicitOnly = EXPLICIT_ONLY_PROVIDERS;
+const COMPONENTS = [
+  ...COMPONENT_NAMES,
+  ...PROVIDER_NAMES.filter((name) => !explicitOnly.includes(name))
+];
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@smalt-ui/nuxt",
+    configKey: "sui",
+    compatibility: { nuxt: ">=3.0.0" }
+  },
+  defaults: {
+    prefix: "",
+    components: true,
+    css: true,
+    colorMode: true,
+    container: true,
+    fonts: true
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.build.transpile.push("reka-ui", "@smalt-ui/core");
+    const fonts = options.fonts === true ? {} : options.fonts;
+    if (fonts) {
+      const baseURL = (fonts.baseURL ?? "/_fonts/smalt").replace(/\/$/, "");
+      const cssFile = fileURLToPath(import.meta.resolve("@smalt-ui/core/fonts.css"));
+      nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets ?? [];
+      nuxt.options.nitro.publicAssets.push({
+        dir: join(dirname(cssFile), "fonts"),
+        baseURL,
+        maxAge: 60 * 60 * 24 * 365
+      });
+      if (fonts.css !== false) {
+        const source = readFileSync(cssFile, "utf8");
+        const css = source.replaceAll("./fonts/", `${baseURL}/`);
+        if (css === source) {
+          throw new Error(
+            '[@smalt-ui/nuxt] no url("./fonts/\u2026") found in @smalt-ui/core/fonts.css: the core version is incompatible with the module'
+          );
+        }
+        addTemplate({ filename: "smalt-fonts.css", write: true, getContents: () => css });
+        nuxt.options.css.push(join(nuxt.options.buildDir, "smalt-fonts.css"));
+      }
+      const preload = fonts.preload ?? true;
+      const faces = preload === true ? DEFAULT_PRELOAD : preload === false ? [] : preload;
+      nuxt.options.app.head.link = nuxt.options.app.head.link ?? [];
+      for (const face of faces) {
+        nuxt.options.app.head.link.push({
+          rel: "preload",
+          as: "font",
+          type: "font/woff2",
+          crossorigin: "",
+          href: `${baseURL}/${FONT_FILES[face]}`
+        });
+      }
+    }
+    if (options.css) {
+      nuxt.options.css.push("@smalt-ui/core/styles.css");
+    }
+    if (options.container) {
+      const rootAttrs = nuxt.options.app.rootAttrs ??= {};
+      rootAttrs.class = [rootAttrs.class, "s-root", "s-root--app"].filter(Boolean).join(" ");
+    }
+    if (options.components) {
+      for (const name of COMPONENTS) {
+        addComponent({
+          name: `${options.prefix}${name}`,
+          export: name,
+          filePath: "@smalt-ui/core"
+        });
+      }
+    }
+    if (options.locale || options.messages) {
+      const localeOptions = JSON.stringify({ locale: options.locale, messages: options.messages });
+      addPluginTemplate({
+        filename: "smalt-locale.mjs",
+        getContents: () => `import { defineNuxtPlugin } from '#app'
+import { installLocale } from '@smalt-ui/core'
+export default defineNuxtPlugin((nuxtApp) => {
+  installLocale(nuxtApp.vueApp, ${localeOptions})
+})
+`
+      });
+    }
+    if (options.defaults || options.preset) {
+      for (const [component, props] of Object.entries(options.defaults ?? {})) {
+        for (const [prop, value] of Object.entries(props ?? {})) {
+          if (typeof value === "function") {
+            console.warn(
+              `[@smalt-ui/nuxt] default ${component}.${prop} is a function; module options cannot serialize it, so it will be dropped. Set it with installDefaults in your own plugin.`
+            );
+          }
+        }
+      }
+      const defaultsOption = JSON.stringify(options.defaults ?? {});
+      const presetOption = JSON.stringify(options.preset ?? null);
+      addPluginTemplate({
+        filename: "smalt-defaults.mjs",
+        getContents: () => `import { defineNuxtPlugin } from '#app'
+import { installDefaults, injectTheme, createTheme, mergeDefaults, BUILTIN_PRESETS } from '@smalt-ui/core'
+export default defineNuxtPlugin((nuxtApp) => {
+  const presetName = ${presetOption}
+  const preset = presetName ? BUILTIN_PRESETS[presetName] : undefined
+  if (preset?.tokens) injectTheme(createTheme(preset.tokens), preset.name)
+  installDefaults(nuxtApp.vueApp, mergeDefaults(preset?.defaults, ${defaultsOption}))
+})
+`
+      });
+    }
+    if (options.colorMode) {
+      nuxt.options.app.head.script = nuxt.options.app.head.script ?? [];
+      nuxt.options.app.head.script.push({ innerHTML: colorModeScript(), tagPosition: "head" });
+      addPlugin({ src: resolver.resolve("./runtime/color-mode.client"), mode: "client" });
+    }
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/color-mode.client.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/color-mode.client.js

@@ -0,0 +1,5 @@
+import { useColorMode } from "@smalt-ui/core";
+import { defineNuxtPlugin } from "#app";
+export default defineNuxtPlugin(() => {
+  useColorMode();
+});

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions, type SFontFace } from './module.mjs'

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@smalt-ui/nuxt",
+  "version": "1.0.0",
+  "description": "Nuxt module for @smalt-ui/core: component auto-import, styles, color mode",
+  "license": "MIT",
+  "author": "Stanislav Dyachenko",
+  "homepage": "https://technical-jade.github.io/smalt-ui/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/technical-jade/smalt-ui.git",
+    "directory": "packages/nuxt"
+  },
+  "bugs": {
+    "url": "https://github.com/technical-jade/smalt-ui/issues"
+  },
+  "keywords": [
+    "vue",
+    "nuxt",
+    "nuxt-module",
+    "ui",
+    "components",
+    "design-system"
+  ],
+  "type": "module",
+  "main": "./dist/module.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.0.0 || ^4.0.0"
+  },
+  "peerDependencies": {
+    "@smalt-ui/core": "*",
+    "reka-ui": "^2.10.0"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/schema": "^4.5.2",
+    "nuxt": "^4.5.2",
+    "reka-ui": "^2.0.0",
+    "vue": "^3.5.0",
+    "@smalt-ui/core": "1.0.0"
+  },
+  "scripts": {
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare",
+    "prebuild": "nuxi prepare ./playground",
+    "build": "nuxt-module-build build",
+    "pretypecheck": "pnpm --filter @smalt-ui/core build && nuxi prepare ./playground",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
+}