@venix-sistemas/jade 1.0.0

package/dist/module.mjs

@@ -0,0 +1,249 @@
+import { addComponent, addPlugin, addServerPlugin, addTemplate, installModule, addImports, defineNuxtModule, createResolver } from '@nuxt/kit';
+import { loadTheme } from '../dist/shared/utils/load.js';
+import { NON_COLOR_PROPERTIES, DEFAULT_LOCALE_COOKIE_NAME, DEFAULT_LOCALE } from '../dist/shared/constants.js';
+import { resolveFeatureOption } from '../dist/shared/utils/options.js';
+import { processTheme } from '../dist/shared/css/index.js';
+import { createRequire } from 'node:module';
+import { realpathSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+import { getIcons } from '@iconify/utils';
+import { extractIconRefs } from '../dist/shared/utils/index.js';
+
+function customizeTheme(baseTheme, options) {
+  const customized = JSON.parse(JSON.stringify(baseTheme));
+  customized.typography = resolveFeatureOption(options.typography, customized.typography);
+  customized.customScrollbar = resolveFeatureOption(options.scrollbar, customized.customScrollbar);
+  customized.customCursor = resolveFeatureOption(options.cursor, customized.customCursor);
+  const colorOption = options.color;
+  if (colorOption === false) {
+    customized.colors.enabled = false;
+  } else if (typeof colorOption === "object" && colorOption !== null) {
+    if (colorOption.enabled === false) {
+      customized.colors.enabled = false;
+    }
+    if (colorOption.defaultColor) {
+      customized.colors.defaultColor = colorOption.defaultColor;
+    }
+    if (colorOption.themes) {
+      Object.entries(colorOption.themes).forEach(([themeName, customColors]) => {
+        if (customized.colors.themes[themeName]) {
+          customized.colors.themes[themeName] = {
+            ...customized.colors.themes[themeName],
+            ...customColors
+          };
+        } else {
+          customized.colors.themes[themeName] = {
+            dark: true,
+            ...customColors
+          };
+        }
+      });
+    }
+  }
+  return customized;
+}
+
+function registerPublicAssets(nuxt, resolver) {
+  nuxt.options.nitro = nuxt.options.nitro || {};
+  nuxt.options.nitro.publicAssets = nuxt.options.nitro.publicAssets || [];
+  nuxt.options.nitro.publicAssets.push({
+    dir: resolver.resolve("./runtime/public"),
+    maxAge: 60 * 60 * 24 * 365,
+    baseURL: "/"
+  });
+}
+
+function registerThemeComponents(resolver) {
+  addComponent({
+    name: "VenixThemeSwitcher",
+    filePath: resolver.resolve("./runtime/components/VenixThemeSwitcher")
+  });
+}
+
+function registerThemePlugins(_nuxt, resolver, shouldApplyColors) {
+  if (shouldApplyColors) {
+    addPlugin({
+      src: resolver.resolve("./runtime/plugins/theme-init.server"),
+      mode: "server"
+    });
+    addServerPlugin(resolver.resolve("./runtime/nitro/theme-init"));
+  }
+  addPlugin(resolver.resolve("./runtime/plugin"));
+}
+
+function registerThemeCSS(nuxt, theme) {
+  const css = processTheme(theme);
+  if (css) {
+    const template = addTemplate({
+      filename: "venix-theme.css",
+      getContents: () => css,
+      write: true
+    });
+    nuxt.options.css.push(template.dst);
+  }
+}
+
+function buildVuetifyThemes(colors) {
+  const themes = {};
+  for (const [name, themeColors] of Object.entries(colors.themes)) {
+    if (!themeColors.primary && !themeColors.background) continue;
+    const isDark = themeColors.dark === true;
+    const vuetifyColors = {};
+    for (const [key, value] of Object.entries(themeColors)) {
+      if (NON_COLOR_PROPERTIES.includes(key)) continue;
+      if (typeof value !== "string" || !value.startsWith("#")) continue;
+      vuetifyColors[key] = value;
+    }
+    if (themeColors.background2) vuetifyColors.surface = themeColors.background2;
+    vuetifyColors.inverse = isDark ? "#FFFFFF" : "#000000";
+    themes[name] = { dark: isDark, colors: vuetifyColors };
+  }
+  return themes;
+}
+function registerThemeVuetify(nuxt, resolver, theme, defaultColor, enabled) {
+  if (!enabled || theme.colors?.enabled === false) return;
+  const themes = buildVuetifyThemes(theme.colors);
+  if (Object.keys(themes).length === 0) return;
+  const hookRegisterModule = nuxt.hook;
+  hookRegisterModule("vuetify:registerModule", (register) => {
+    register({
+      vuetifyOptions: {
+        theme: {
+          defaultTheme: defaultColor,
+          themes
+        }
+      }
+    });
+  });
+  addPlugin(resolver.resolve("./runtime/plugins/vuetify-theme"));
+}
+
+const nodeRequire = createRequire(realpathSync(fileURLToPath(import.meta.url)));
+function loadCollectionJson(name, projectRequire) {
+  try {
+    return nodeRequire(`@iconify-json/${name}/icons.json`);
+  } catch {
+    try {
+      return projectRequire?.(`@iconify-json/${name}/icons.json`) ?? null;
+    } catch {
+      return null;
+    }
+  }
+}
+function loadFullCollection(name, projectRequire) {
+  return loadCollectionJson(name, projectRequire) ?? name;
+}
+function loadCollectionSubset(name, iconNames, projectRequire) {
+  const json = loadCollectionJson(name, projectRequire);
+  if (!json) return null;
+  return getIcons(json, [...iconNames]);
+}
+async function registerThemeIcon(nuxt, resolver, options, colors) {
+  if (!options.enabled) return;
+  let projectRequire = null;
+  try {
+    projectRequire = createRequire(join(nuxt.options.rootDir, "package.json"));
+  } catch {
+    projectRequire = null;
+  }
+  const explicit = new Set(options.collections);
+  const collections = options.collections.map((name) => loadFullCollection(name, projectRequire));
+  const refs = extractIconRefs(colors.themes, options.aliases);
+  for (const [name, iconNames] of refs) {
+    if (explicit.has(name)) continue;
+    collections.push(loadCollectionSubset(name, iconNames, projectRequire) ?? name);
+  }
+  await installModule("@nuxt/icon", {
+    aliases: options.aliases,
+    serverBundle: {
+      collections
+    }
+  });
+  addImports({
+    name: "useVenixIcon",
+    from: resolver.resolve("./runtime/composables/useVenixIcon")
+  });
+  addComponent({
+    name: "VenixIcon",
+    filePath: resolver.resolve("./runtime/components/VenixIcon")
+  });
+}
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@venix-sistemas/jade",
+    configKey: "venixTheme"
+  },
+  defaults: {
+    translation: true,
+    color: true,
+    scrollbar: true,
+    cursor: true,
+    typography: true,
+    vuetify: false,
+    icon: true
+  },
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    registerPublicAssets(nuxt, resolver);
+    const baseTheme = loadTheme();
+    const theme = customizeTheme(baseTheme, options);
+    addImports({
+      name: "useVenixTheme",
+      from: resolver.resolve("./runtime/composables/useVenixTheme")
+    });
+    registerThemeComponents(resolver);
+    const colorOptions = resolveFeatureOption(options.color, {
+      enabled: theme.colors?.enabled !== false,
+      apply: true,
+      defaultColor: theme.colors?.defaultColor || "dark",
+      themes: {},
+      iconFormat: "svg"
+    });
+    const shouldApplyColors = colorOptions.enabled && colorOptions.apply && theme.colors?.defaults !== false;
+    const translationOptions = resolveFeatureOption(options.translation, {
+      enabled: true,
+      locale: "",
+      defaultLocale: DEFAULT_LOCALE,
+      cookieSync: DEFAULT_LOCALE_COOKIE_NAME,
+      manageHtmlLang: false
+    });
+    registerThemeCSS(nuxt, theme);
+    registerThemePlugins(nuxt, resolver, shouldApplyColors);
+    const vuetifyOptions = resolveFeatureOption(options.vuetify, {
+      enabled: true
+    });
+    registerThemeVuetify(nuxt, resolver, theme, colorOptions.defaultColor, vuetifyOptions.enabled);
+    const iconOptions = resolveFeatureOption(options.icon, {
+      enabled: true,
+      collections: ["line-md"],
+      aliases: {}
+    });
+    await registerThemeIcon(nuxt, resolver, iconOptions, theme.colors);
+    nuxt.options.runtimeConfig.public.venixTheme = {
+      defaultTheme: theme.colors?.defaultColor || "dark",
+      colorThemes: colorOptions.themes,
+      applyColors: shouldApplyColors,
+      localeCookie: translationOptions.cookieSync,
+      defaultLocale: translationOptions.defaultLocale,
+      locale: translationOptions.locale,
+      iconFormat: colorOptions.iconFormat,
+      icon: {
+        aliases: iconOptions.aliases
+      },
+      enabled: {
+        typography: theme.typography?.enabled !== false,
+        scrollbar: theme.customScrollbar?.enabled !== false,
+        cursor: theme.customCursor?.enabled !== false,
+        color: colorOptions.enabled,
+        translation: translationOptions.enabled,
+        manageHtmlLang: translationOptions.manageHtmlLang,
+        vuetify: vuetifyOptions.enabled,
+        icon: iconOptions.enabled
+      }
+    };
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/components/VenixIcon.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    /** An emoji ('🎨'), an Iconify icon name ('line-md:home') or inline SVG. */
+    icon: string;
+    /**
+     * Forces `@nuxt/icon`'s rendering mode for Iconify icons: `'svg'` (a real
+     * `<svg>` element — needed for animated icons like `line-md`) or `'css'`
+     * (background/mask, lighter, no animation). No effect for emoji or inline
+     * SVG. Without a value, uses the module's configured default mode.
+     */
+    mode?: 'css' | 'svg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/VenixIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <span
+    v-if="resolved.kind === 'emoji'"
+    class="venix-icon venix-icon--emoji"
+    v-bind="$attrs"
+  >{{ resolved.value }}</span>
+  <!-- eslint-disable vue/no-v-html -- SVG comes from the theme config/consumer dev's props, not end-user input -->
+  <span
+    v-else-if="resolved.kind === 'svg'"
+    class="venix-icon venix-icon--svg"
+    v-bind="$attrs"
+    v-html="resolved.value"
+  />
+  <!-- eslint-enable vue/no-v-html -->
+  <Icon
+    v-else
+    class="venix-icon venix-icon--iconify"
+    :name="resolved.value"
+    :mode="mode"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useVenixIcon } from "../composables/useVenixIcon";
+defineOptions({ inheritAttrs: false });
+const { icon, mode } = defineProps({
+  icon: { type: String, required: true },
+  mode: { type: String, required: false }
+});
+const resolved = useVenixIcon(computed(() => icon));
+</script>
+
+<style>
+.venix-icon--svg svg{height:1em;width:1em}
+</style>

package/dist/runtime/components/VenixIcon.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    /** An emoji ('🎨'), an Iconify icon name ('line-md:home') or inline SVG. */
+    icon: string;
+    /**
+     * Forces `@nuxt/icon`'s rendering mode for Iconify icons: `'svg'` (a real
+     * `<svg>` element — needed for animated icons like `line-md`) or `'css'`
+     * (background/mask, lighter, no animation). No effect for emoji or inline
+     * SVG. Without a value, uses the module's configured default mode.
+     */
+    mode?: 'css' | 'svg';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/VenixThemeSwitcher.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** Accessible label for the button and the menu. Without a value, uses the component's own translation based on the current locale. */
+    label?: string;
+    /** Shows the active theme's name next to the icon on the button. */
+    showLabel?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/VenixThemeSwitcher.vue

@@ -0,0 +1,191 @@
+<template>
+  <div
+    ref="rootRef"
+    class="venix-theme-switcher"
+    @focusout="handleFocusOut"
+  >
+    <span
+      class="venix-theme-switcher__sr-only"
+      role="status"
+      aria-live="polite"
+    >{{ announcement }}</span>
+
+    <button
+      ref="triggerRef"
+      type="button"
+      class="venix-theme-switcher__trigger"
+      :class="{ 'venix-theme-switcher__trigger--visible': visible }"
+      :aria-label="resolvedLabel"
+      :aria-expanded="open"
+      aria-haspopup="menu"
+      @click="toggleOpen"
+    >
+      <VenixIcon
+        v-if="activeIcon"
+        :key="activeIconKey"
+        :icon="activeIcon.value"
+        :mode="activeIcon.format === 'emote' ? void 0 : activeIcon.format"
+        aria-hidden="true"
+      />
+      <span
+        v-if="showLabel"
+        class="venix-theme-switcher__trigger-label"
+      >{{ theme.data.value?.name }}</span>
+    </button>
+
+    <ul
+      v-show="open"
+      class="venix-theme-switcher__menu"
+      role="menu"
+      :aria-label="resolvedLabel"
+      @keydown="handleMenuKeydown"
+    >
+      <li
+        class="venix-theme-switcher__heading"
+        aria-hidden="true"
+      >
+        {{ resolvedLabel }}
+      </li>
+      <li
+        v-for="item in themes"
+        :key="item.value"
+        role="none"
+      >
+        <button
+          type="button"
+          role="menuitemradio"
+          class="venix-theme-switcher__item"
+          :class="{ 'venix-theme-switcher__item--active': item.value === theme.preference.value }"
+          :aria-checked="item.value === theme.preference.value"
+          @click="select(item.value)"
+        >
+          <VenixIcon
+            v-if="item.icon"
+            class="venix-theme-switcher__item-icon"
+            :icon="item.icon.value"
+            :mode="item.icon.format === 'emote' ? void 0 : item.icon.format"
+            aria-hidden="true"
+          />
+          <span>{{ item.name }}</span>
+        </button>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import { useVenixTheme } from "../composables/useVenixTheme";
+const LABEL_TRANSLATIONS = {
+  "pt-BR": "Tema de cor",
+  "en-US": "Color theme",
+  "es-ES": "Tema de color",
+  "fr-FR": "Th\xE8me de couleur",
+  "de-DE": "Farbthema",
+  "it-IT": "Tema colore",
+  "ja-JP": "\u30AB\u30E9\u30FC\u30C6\u30FC\u30DE",
+  "ko-KR": "\uC0C9\uC0C1 \uD14C\uB9C8",
+  "zh-CN": "\u989C\u8272\u4E3B\u9898"
+};
+const CHANGED_ANNOUNCEMENT_TRANSLATIONS = {
+  "pt-BR": "Tema de cor alterado para {theme}",
+  "en-US": "Color theme changed to {theme}",
+  "es-ES": "Tema de color cambiado a {theme}",
+  "fr-FR": "Th\xE8me de couleur chang\xE9 pour {theme}",
+  "de-DE": "Farbthema ge\xE4ndert zu {theme}",
+  "it-IT": "Tema colore cambiato in {theme}",
+  "ja-JP": "\u30AB\u30E9\u30FC\u30C6\u30FC\u30DE\u304C{theme}\u306B\u5909\u66F4\u3055\u308C\u307E\u3057\u305F",
+  "ko-KR": "\uC0C9\uC0C1 \uD14C\uB9C8\uAC00 {theme}(\uC73C)\uB85C \uBCC0\uACBD\uB418\uC5C8\uC2B5\uB2C8\uB2E4",
+  "zh-CN": "\u989C\u8272\u4E3B\u9898\u5DF2\u66F4\u6539\u4E3A{theme}"
+};
+const props = defineProps({
+  label: { type: String, required: false },
+  showLabel: { type: Boolean, required: false }
+});
+const { theme, themes, locale } = useVenixTheme();
+const resolvedLabel = computed(() => props.label ?? locale.translate(LABEL_TRANSLATIONS, "Color theme"));
+const open = ref(false);
+const visible = ref(false);
+const announcement = ref("");
+const rootRef = ref(null);
+const triggerRef = ref(null);
+const activeIcon = computed(() => theme.data.value?.icon ?? null);
+const activeIconKey = computed(() => `${theme.value.value}:${activeIcon.value?.format ?? ""}:${activeIcon.value?.value ?? ""}`);
+const getMenuItems = () => {
+  return Array.from(rootRef.value?.querySelectorAll(".venix-theme-switcher__item") ?? []);
+};
+const focusItemAt = (index) => {
+  const items = getMenuItems();
+  if (items.length === 0) return;
+  items[(index + items.length) % items.length]?.focus();
+};
+const toggleOpen = async () => {
+  open.value = !open.value;
+  if (!open.value) return;
+  await nextTick();
+  const items = getMenuItems();
+  const activeIndex = themes.value.findIndex((item) => item.value === theme.preference.value);
+  (items[activeIndex] ?? items[0])?.focus();
+};
+const close = (options = {}) => {
+  if (!open.value) return;
+  open.value = false;
+  if (options.restoreFocus) triggerRef.value?.focus();
+};
+const select = (value) => {
+  const selected = themes.value.find((item) => item.value === value);
+  theme.toggle(value);
+  const template = locale.translate(CHANGED_ANNOUNCEMENT_TRANSLATIONS, "Color theme changed to {theme}");
+  announcement.value = template.replace("{theme}", selected?.name ?? value);
+  close({ restoreFocus: true });
+};
+const handleMenuKeydown = (event) => {
+  const items = getMenuItems();
+  const currentIndex = items.findIndex((el) => el === document.activeElement);
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      focusItemAt(currentIndex + 1);
+      break;
+    case "ArrowUp":
+      event.preventDefault();
+      focusItemAt(currentIndex - 1);
+      break;
+    case "Home":
+      event.preventDefault();
+      focusItemAt(0);
+      break;
+    case "End":
+      event.preventDefault();
+      focusItemAt(items.length - 1);
+      break;
+  }
+};
+const handleFocusOut = (event) => {
+  const nextTarget = event.relatedTarget;
+  if (!nextTarget || !rootRef.value?.contains(nextTarget)) close();
+};
+const handleClickOutside = (event) => {
+  if (!rootRef.value?.contains(event.target)) close();
+};
+const handleKeydown = (event) => {
+  if (event.key === "Escape") close({ restoreFocus: true });
+};
+onMounted(() => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      visible.value = true;
+    });
+  });
+  document.addEventListener("click", handleClickOutside);
+  document.addEventListener("keydown", handleKeydown);
+});
+onUnmounted(() => {
+  document.removeEventListener("click", handleClickOutside);
+  document.removeEventListener("keydown", handleKeydown);
+});
+</script>
+
+<style>
+.venix-theme-switcher{display:inline-block;position:relative}.venix-theme-switcher__sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.venix-theme-switcher__trigger{align-items:center;background:transparent;border:none;border-radius:999px;color:inherit;cursor:pointer;display:inline-flex;font-size:1.25rem;gap:.5rem;line-height:1;opacity:0;padding:.5rem;transition:opacity .3s ease,background-color .2s ease}.venix-theme-switcher__trigger--visible{opacity:1}.venix-theme-switcher__trigger:focus-visible,.venix-theme-switcher__trigger:hover{background:var(--color-background3,hsla(0,0%,50%,.15))}.venix-theme-switcher__trigger-label{font-size:.875rem}.venix-theme-switcher__menu{background:#1f2128;border:1px solid #3a3d46;border-radius:.75rem;box-shadow:0 8px 24px rgba(0,0,0,.25);list-style:none;margin:0;min-width:12rem;padding:.375rem;position:absolute;right:0;top:calc(100% + .5rem);z-index:50}.venix-theme-switcher__heading{color:rgba(245,245,247,.6);font-size:.75rem;font-weight:600;letter-spacing:.04em;padding:.375rem .625rem;text-align:center;text-transform:uppercase}.venix-theme-switcher__item{align-items:center;background:transparent;border:none;border-radius:.5rem;color:#f5f5f7;cursor:pointer;display:flex;font:inherit;gap:.625rem;padding:.5rem .625rem;text-align:left;width:100%}.venix-theme-switcher__item:focus-visible,.venix-theme-switcher__item:hover{background:hsla(0,0%,100%,.08)}.venix-theme-switcher__item--active{background:hsla(0,0%,100%,.14);color:#fff;font-weight:600}.venix-theme-switcher__item-icon{flex-shrink:0}
+</style>

package/dist/runtime/components/VenixThemeSwitcher.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** Accessible label for the button and the menu. Without a value, uses the component's own translation based on the current locale. */
+    label?: string;
+    /** Shows the active theme's name next to the icon on the button. */
+    showLabel?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/useThemeColors.d.ts

@@ -0,0 +1,10 @@
+import type { ThemeConfig } from '../../shared/types/index.js';
+import type { ThemeIconFormat } from '../../shared/utils/icon.js';
+export declare const useThemeColors: (theme: ThemeConfig, translate: (translations?: Record<string, string>, fallback?: string) => string, iconFormat?: ThemeIconFormat) => {
+    themes: import("vue").ComputedRef<{
+        value: string;
+        name: string;
+        icon: import("../../shared/utils/icon.js").ResolvedThemeIcon | null;
+    }[]>;
+    themeValues: import("vue").ComputedRef<string[]>;
+};

package/dist/runtime/composables/useThemeColors.js

@@ -0,0 +1,25 @@
+import { computed } from "vue";
+import { resolveThemeIcon } from "../../shared/utils/icon";
+export const useThemeColors = (theme, translate, iconFormat = "svg") => {
+  const themes = computed(() => {
+    const list = Object.entries(theme.colors.themes).filter(([value]) => value !== "system").map(([value, themeConfig]) => ({
+      value,
+      name: translate(themeConfig.translations, value),
+      icon: resolveThemeIcon(themeConfig.icon, iconFormat)
+    }));
+    const systemTheme = theme.colors.themes["system"];
+    if (systemTheme) {
+      list.unshift({
+        value: "system",
+        name: translate(systemTheme.translations, "System"),
+        icon: resolveThemeIcon(systemTheme.icon, iconFormat)
+      });
+    }
+    return list;
+  });
+  const themeValues = computed(() => themes.value.map((t) => t.value));
+  return {
+    themes,
+    themeValues
+  };
+};

package/dist/runtime/composables/useThemeCookies.d.ts

@@ -0,0 +1,7 @@
+export declare const useThemeCookies: (localeCookieName?: string) => {
+    preferenceCookie: import("nuxt/app").CookieRef<string>;
+    resolvedCookie: import("nuxt/app").CookieRef<string>;
+    localeCookie: import("nuxt/app").CookieRef<string>;
+    persistIfConsented: (preference: string, resolved: string) => void;
+    disablePersistence: () => void;
+};

package/dist/runtime/composables/useThemeCookies.js

@@ -0,0 +1,33 @@
+import { useCookie } from "#app";
+import {
+  THEME_PREFERENCE_COOKIE,
+  THEME_RESOLVED_COOKIE,
+  DEFAULT_LOCALE_COOKIE_NAME
+} from "../../shared/constants";
+import { hasCookieConsent } from "../../shared/utils/consent";
+export const useThemeCookies = (localeCookieName = DEFAULT_LOCALE_COOKIE_NAME) => {
+  const preferenceCookie = useCookie(THEME_PREFERENCE_COOKIE);
+  const resolvedCookie = useCookie(THEME_RESOLVED_COOKIE);
+  const localeCookie = useCookie(localeCookieName);
+  const removeCookie = (name) => {
+    if (typeof document !== "undefined") {
+      document.cookie = `${name}=; path=/; max-age=0; SameSite=Lax`;
+    }
+  };
+  const persistIfConsented = (preference, resolved) => {
+    if (!hasCookieConsent()) return;
+    preferenceCookie.value = preference;
+    resolvedCookie.value = resolved;
+  };
+  const disablePersistence = () => {
+    removeCookie(THEME_PREFERENCE_COOKIE);
+    removeCookie(THEME_RESOLVED_COOKIE);
+  };
+  return {
+    preferenceCookie,
+    resolvedCookie,
+    localeCookie,
+    persistIfConsented,
+    disablePersistence
+  };
+};

package/dist/runtime/composables/useThemeLocale.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+import type { ThemeConfig } from '../../shared/types/index.js';
+export interface UseThemeLocaleOptions {
+    enabled?: boolean;
+    forcedLocale?: string;
+    defaultLocale?: string;
+}
+export declare const useThemeLocale: (theme: ThemeConfig, localeCookie: Ref<string | undefined>, options?: UseThemeLocaleOptions) => {
+    currentLocale: Ref<string, string>;
+    translate: (translations?: Record<string, string>, fallback?: string) => string;
+    setLocale: (locale: string) => void;
+};