nuance-ui 0.2.29 → 0.2.31

package/dist/module.d.mts

@@ -1,4 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { NuanceDefaultThemeColor, NuanceGradient, NuanceIcons } from '../dist/runtime/types/index.js';
+
+/** Primary color: a theme palette name or an array of 10 shade values (0..9). */
+type PrimaryColor = NuanceDefaultThemeColor | string[];
 
 interface ModuleOptions {
     /**
@@ -17,6 +21,15 @@ interface ModuleOptions {
      * @default 'light'
      */
     theme?: 'light' | 'dark' | 'auto';
+    /**
+     * Primary color: a theme palette name or an array of 10 shade values (0..9)
+     * @default 'blue'
+     */
+    primaryColor?: PrimaryColor;
+    /** Default gradient configuration */
+    gradient?: NuanceGradient;
+    /** Icon registry overrides */
+    icons?: Partial<NuanceIcons>;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.d.ts

@@ -1,4 +1,8 @@
 import * as _nuxt_schema from '@nuxt/schema';
+import { NuanceDefaultThemeColor, NuanceGradient, NuanceIcons } from '../dist/runtime/types/index.js';
+
+/** Primary color: a theme palette name or an array of 10 shade values (0..9). */
+type PrimaryColor = NuanceDefaultThemeColor | string[];
 
 interface ModuleOptions {
     /**
@@ -17,6 +21,15 @@ interface ModuleOptions {
      * @default 'light'
      */
     theme?: 'light' | 'dark' | 'auto';
+    /**
+     * Primary color: a theme palette name or an array of 10 shade values (0..9)
+     * @default 'blue'
+     */
+    primaryColor?: PrimaryColor;
+    /** Default gradient configuration */
+    gradient?: NuanceGradient;
+    /** Icon registry overrides */
+    icons?: Partial<NuanceIcons>;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.29",
+  "version": "0.2.31",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,10 +1,80 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addTypeTemplate, addComponentsDir, addImportsDir, addTemplate } from '@nuxt/kit';
 import { defu } from 'defu';
+import { DEFAULT_GRADIENT } from '../dist/runtime/utils/color/const.js';
+import { DEFAULT_ICONS } from '../dist/runtime/utils/icons/default-icons.js';
+
+const SHADES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function fromName(name) {
+  const base = SHADES.map((shade) => `	--color-primary-${shade}: var(--color-${name}-${shade});`).join("\n");
+  return `:root {
+${base}
+
+	--color-primary-filled: var(--color-${name}-filled);
+	--color-primary-filled-hover: var(--color-${name}-filled-hover);
+	--color-primary-light: alpha(var(--color-${name}-light), .15);
+	--color-primary-light-hover: var(--color-${name}-light-hover);
+	--color-primary-light-color: var(--color-${name}-light-color);
+	--color-primary-outline: var(--color-${name}-outline);
+	--color-primary-outline-hover: alpha(var(--color-${name}-outline), .1);
+}
+`;
+}
+function derivedTokens(scheme) {
+  if (scheme === "light") {
+    return `		--color-primary-filled: var(--color-primary-6);
+		--color-primary-filled-hover: var(--color-primary-7);
+		--color-primary-light: alpha(var(--color-primary-6), .1);
+		--color-primary-light-hover: alpha(var(--color-primary-6), .12);
+		--color-primary-light-color: var(--color-primary-6);
+		--color-primary-outline: var(--color-primary-6);
+		--color-primary-outline-hover: alpha(var(--color-primary-6), .05);`;
+  }
+  return `		--color-primary-filled: var(--color-primary-8);
+		--color-primary-filled-hover: var(--color-primary-9);
+		--color-primary-light: alpha(var(--color-primary-8), .15);
+		--color-primary-light-hover: alpha(var(--color-primary-8), .2);
+		--color-primary-light-color: var(--color-primary-0);
+		--color-primary-outline: var(--color-primary-4);
+		--color-primary-outline-hover: alpha(var(--color-primary-4), .05);`;
+}
+function fromArray(shades) {
+  const base = SHADES.map((shade) => `	--color-primary-${shade}: ${shades[shade]};`).join("\n");
+  return `:root {
+${base}
+}
+
+:root {
+	@mixin light-root {
+${derivedTokens("light")}
+	}
+}
+
+:root {
+	@mixin dark-root {
+${derivedTokens("dark")}
+	}
+}
+`;
+}
+function generatePrimaryCss(primaryColor) {
+  if (Array.isArray(primaryColor)) {
+    if (primaryColor.length !== 10) {
+      throw new Error(
+        `[@nuance-ui] "primaryColor" array must contain exactly 10 shades, got ${primaryColor.length}.`
+      );
+    }
+    return fromArray(primaryColor);
+  }
+  return fromName(primaryColor);
+}
 
 const defaultConfig = {
   autoImport: true,
   theme: "light",
-  prefix: "N"
+  prefix: "N",
+  primaryColor: "blue",
+  gradient: DEFAULT_GRADIENT,
+  icons: DEFAULT_ICONS
 };
 const module$1 = defineNuxtModule({
   meta: {
@@ -43,6 +113,14 @@ const module$1 = defineNuxtModule({
     for (const key in aliases) {
       nuxt.options.alias[`@nui/${key}`] = aliases[key];
     }
+    nuxt.options.appConfig.nui = defu(nuxt.options.appConfig.nui, {
+      gradient: options.gradient,
+      icons: options.icons
+    });
+    addTypeTemplate({
+      filename: "types/nui-app-config.d.ts",
+      src: resolve("./runtime/app-config.d.ts")
+    });
     nuxt.options.postcss = nuxt.options.postcss || {};
     nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {};
     nuxt.options.postcss.plugins = defu(nuxt.options.postcss.plugins, {
@@ -86,6 +164,13 @@ const module$1 = defineNuxtModule({
       addImportsDir(aliases.utils);
     }
     nuxt.options.css.push(resolve("./runtime/styles/global.css"));
+    const primaryCss = generatePrimaryCss(options.primaryColor ?? "blue");
+    const { dst } = addTemplate({
+      filename: "nui-primary-color.css",
+      getContents: () => primaryCss,
+      write: true
+    });
+    nuxt.options.css.push(dst);
   }
 });
 

package/dist/runtime/app-config.d.ts

@@ -0,0 +1,22 @@
+import type { NuanceGradient, NuanceIcons } from './types'
+
+
+declare module '@nuxt/schema' {
+	interface AppConfigInput {
+		nui?: {
+			/** Default gradient configuration */
+			gradient?: NuanceGradient
+			/** Icon registry overrides */
+			icons?: Partial<NuanceIcons>
+		}
+	}
+
+	interface AppConfig {
+		nui: {
+			gradient: NuanceGradient
+			icons: NuanceIcons
+		}
+	}
+}
+
+export {}

package/dist/runtime/components/action-icon/action-icon-section.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getFontSize, getRadius, getSize } from "@nui/utils";
 import Box from "../box.vue";
 import css from "./action-icon.module.css";
 const {
@@ -21,8 +21,9 @@ const {
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
+const { variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
-  const { background, border, text } = createVariantColorResolver({ variant, color, theme, gradient });
+  const { background, border, text } = variantResolver({ variant, color, theme, gradient });
   return {
     root: {
       "--section-height": getSize(size, "section-height"),

package/dist/runtime/components/action-icon/action-icon.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getRadius, getSize } from "@nui/utils";
 import Box from "../box.vue";
 import Loader from "../loader/loader.vue";
 import css from "./action-icon.module.css";
@@ -27,13 +27,14 @@ const {
   variant: { type: String, required: false },
   classes: { type: Object, required: false }
 });
+const { variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
   const {
     background,
     border,
     hover,
     text
-  } = createVariantColorResolver({ variant, color, theme, gradient });
+  } = variantResolver({ variant, color, theme, gradient });
   return {
     root: {
       "--ai-size": getSize(size, "ai-size"),

package/dist/runtime/components/alert.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getRadius } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getRadius } from "@nui/utils";
 import { useId } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Box from "./box.vue";
@@ -28,8 +28,9 @@ const {
 });
 defineEmits(["close"]);
 const id = useId();
+const { icons, variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
-  const { background, border, text } = createVariantColorResolver({ variant, color, theme });
+  const { background, border, text } = variantResolver({ variant, color, theme });
   return {
     root: {
       "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
@@ -79,7 +80,7 @@ const style = useVarsResolver((theme) => {
 			v-if='withCloseButton'
 			:class='[$style.closeButton, classes?.closeButton]'
 			variant='subtle'
-			icon='gravity-ui:xmark'
+			:icon='icons.close'
 			size='sm'
 			:color
 			@click='$emit("close")'

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

@@ -19,10 +19,7 @@ export interface AvatarProps extends BoxProps {
     name?: string;
     /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /**
-     * Icon rendered when no `src` and no `name` are provided
-     * @default 'gravity-ui:person'
-     */
+    /** Icon rendered when no `src` and no `name` are provided. Defaults to the configured `person` icon. */
     placeholder?: string;
     /** Visual variant */
     variant?: AvatarVariant;

package/dist/runtime/components/avatar/avatar.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
 import css from "./avatar.module.css";
@@ -10,7 +10,7 @@ import { getInitialsColor } from "./lib/get-initials-color";
 const {
   name,
   radius,
-  placeholder = "gravity-ui:person",
+  placeholder,
   ...props
 } = defineProps({
   radius: { type: [String, Number, Object], required: false },
@@ -29,9 +29,11 @@ const {
 });
 const initials = computed(() => name && getInitials(name));
 const ctx = useAvatarGroupState();
+const { icons, variantResolver } = useConfig();
+const resolvedPlaceholder = computed(() => placeholder ?? icons.person);
 const style = useVarsResolver((theme) => {
   const color = props.color === "initials" && typeof name === "string" ? getInitialsColor(name, props.allowedInitialsColors) : props.color;
-  const { background, text, border } = createVariantColorResolver({
+  const { background, text, border } = variantResolver({
     theme,
     gradient: props.gradient,
     color: color || "gray",
@@ -57,7 +59,7 @@ const style = useVarsResolver((theme) => {
 	>
 		<span v-if='!src' :class='[css.placeholder, classes?.placeholder]' :title='alt'>
 			<slot>
-				<Icon v-if='!src && !name' :name='placeholder' />
+				<Icon v-if='!src && !name' :name='resolvedPlaceholder' />
 				{{ initials }}
 			</slot>
 		</span>

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

@@ -19,10 +19,7 @@ export interface AvatarProps extends BoxProps {
     name?: string;
     /** Palette of colors picked from for autogenerated initials. Defaults to all theme colors except gray and dark. */
     allowedInitialsColors?: NuanceColor[];
-    /**
-     * Icon rendered when no `src` and no `name` are provided
-     * @default 'gravity-ui:person'
-     */
+    /** Icon rendered when no `src` and no `name` are provided. Defaults to the configured `person` icon. */
     placeholder?: string;
     /** Visual variant */
     variant?: AvatarVariant;

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

@@ -1,7 +1,7 @@
 import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
-export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
+export type BadgeVariant = 'filled' | 'light' | 'outline' | 'default' | 'gradient' | 'subtle';
 export interface BadgeVars {
     root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-fw' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
 }
@@ -33,6 +33,8 @@ export interface BadgeProps extends BoxProps {
     variant?: BadgeVariant;
     /** Font weight */
     fw?: CSSProperties['font-weight'];
+    /** Adds a dot indicator before the label, inheriting the text color */
+    dotted?: boolean;
 }
 declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/badge.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getRadius, getSize, getThemeColor } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getRadius, getSize, getThemeColor } from "@nui/utils";
 import Box from "./box.vue";
 const {
   variant = "filled",
@@ -10,7 +10,8 @@ const {
   fullWidth = false,
   circle,
   icon,
-  fw
+  fw,
+  dotted
 } = defineProps({
   size: { type: [String, Object], required: false },
   circle: { type: Boolean, required: false },
@@ -21,13 +22,15 @@ const {
   icon: { type: String, required: false },
   variant: { type: String, required: false },
   fw: { type: void 0, required: false },
+  dotted: { type: Boolean, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
+const { variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
-  const { background, border, text } = createVariantColorResolver({
+  const { background, border, text } = variantResolver({
     theme,
-    variant: variant === "dot" ? "default" : variant,
+    variant,
     color
   });
   return {
@@ -40,7 +43,7 @@ const style = useVarsResolver((theme) => {
       "--badge-bg": color || variant ? background : void 0,
       "--badge-color": color || variant ? text : void 0,
       "--badge-bd": color || variant ? border : void 0,
-      "--badge-dot-color": variant === "dot" ? getThemeColor(color, theme) : void 0
+      "--badge-dot-color": dotted ? variant === "default" ? getThemeColor(color, theme) : text : void 0
     }
   };
 });
@@ -54,14 +57,14 @@ const style = useVarsResolver((theme) => {
   {
     "block": fullWidth,
     circle,
-    variant,
+    dotted,
     "with-left-section": !!$slots.leftSection || !!icon,
     "with-right-section": !!$slots.rightSection
   },
   mod
 ]'
 	>
-		<span v-if='variant === "dot"' :class='$style.dot' />
+		<span v-if='dotted && !circle' :class='$style.dot' />
 
 		<span v-else-if='$slots.leftSection || !!icon' :class='$style.section' data-position='left'>
 			<slot name='leftSection'>
@@ -80,5 +83,5 @@ const style = useVarsResolver((theme) => {
 </template>
 
 <style module>
-.root{--badge-height-xs:rem(16px);--badge-height-sm:rem(18px);--badge-height-md:rem(20px);--badge-height-lg:rem(26px);--badge-height-xl:rem(32px);--badge-fz-xs:rem(8px);--badge-fz-sm:rem(10px);--badge-fz-md:rem(12px);--badge-fz-lg:rem(14px);--badge-fz-xl:rem(16px);--badge-fw:400;--badge-padding-x-xs:rem(6px);--badge-padding-x-sm:rem(8px);--badge-padding-x-md:rem(10px);--badge-padding-x-lg:rem(12px);--badge-padding-x-xl:rem(16px);--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:100%;--badge-lh:calc(var(--badge-height) - rem(2px));--badge-color:var(--color-white);--badge-bg:var(--color-primary-filled);--badge-border-width:1px;--badge-bd:var(--badge-border-width) solid transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:default;display:inline-grid;font-size:var(--badge-fz);font-weight:var(--badge-fw);height:var(--badge-height);justify-content:center;letter-spacing:.25px;line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:-moz-fit-content;width:fit-content;-webkit-tap-highlight-color:transparent}.root:where([data-with-left-section],[data-variant=dot]){grid-template-columns:auto 1fr;padding-left:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-right-section]){grid-template-columns:1fr auto;padding-right:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-left-section][data-with-right-section],[data-variant=dot][data-with-right-section]){grid-template-columns:auto 1fr auto;padding:0 calc(var(--spacing-xs)/2)}.root:where([data-block]){display:flex;width:100%}.root:where([data-circle]){display:flex;padding-inline:2px;width:var(--badge-height)}.root:where([data-variant=dot]){@mixin where-light{--badge-color:var(--color-black)}@mixin where-dark{--badge-color:var(--color-white)}}.dot{--badge-dot-size:calc(var(--badge-height)/2.5);background-color:var(--badge-dot-color,var(--badge-color));border-radius:var(--badge-dot-size);display:block;height:var(--badge-dot-size);margin-inline-end:calc(var(--badge-dot-size)/2);width:var(--badge-dot-size)}.label{cursor:inherit;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.section{--badge-section-margin:calc(var(--spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center;max-height:calc(var(--badge-height) - var(--badge-border-width)*2)}.section:where([data-position=left]){margin-inline-end:var(--badge-section-margin)}.section:where([data-position=right]){margin-inline-start:var(--badge-section-margin)}
+.root{--badge-height-xs:rem(16px);--badge-height-sm:rem(18px);--badge-height-md:rem(20px);--badge-height-lg:rem(26px);--badge-height-xl:rem(32px);--badge-fz-xs:rem(8px);--badge-fz-sm:rem(10px);--badge-fz-md:rem(12px);--badge-fz-lg:rem(14px);--badge-fz-xl:rem(16px);--badge-fw:600;--badge-padding-x-xs:rem(6px);--badge-padding-x-sm:rem(8px);--badge-padding-x-md:rem(10px);--badge-padding-x-lg:rem(12px);--badge-padding-x-xl:rem(16px);--badge-height:var(--badge-height-md);--badge-fz:var(--badge-fz-md);--badge-padding-x:var(--badge-padding-x-md);--badge-radius:100%;--badge-lh:calc(var(--badge-height) - rem(2px));--badge-color:var(--color-white);--badge-bg:var(--color-primary-filled);--badge-border-width:1px;--badge-bd:var(--badge-border-width) solid transparent;align-items:center;background:var(--badge-bg);border:var(--badge-bd);border-radius:var(--badge-radius);color:var(--badge-color);cursor:default;display:inline-grid;font-size:var(--badge-fz);font-weight:var(--badge-fw);height:var(--badge-height);justify-content:center;letter-spacing:.25px;line-height:var(--badge-lh);overflow:hidden;padding:0 var(--badge-padding-x);text-decoration:none;text-overflow:ellipsis;text-transform:uppercase;width:-moz-fit-content;width:fit-content;-webkit-tap-highlight-color:transparent}.root:where([data-with-left-section],[data-dotted]){grid-template-columns:auto 1fr;padding-left:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-right-section]){grid-template-columns:1fr auto;padding-right:calc(var(--badge-padding-x) - var(--spacing-xs)/2)}.root:where([data-with-left-section][data-with-right-section],[data-dotted][data-with-right-section]){grid-template-columns:auto 1fr auto;padding:0 calc(var(--spacing-xs)/2)}.root:where([data-block]){display:flex;width:100%}.root:where([data-circle]){display:flex;padding-inline:2px;width:var(--badge-height)}.dot{--badge-dot-size:calc(var(--badge-height)/2.5);background-color:var(--badge-dot-color,var(--badge-color));border-radius:var(--badge-dot-size);display:block;height:var(--badge-dot-size);margin-inline-end:calc(var(--badge-dot-size)/2);width:var(--badge-dot-size)}.label{cursor:inherit;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.section{--badge-section-margin:calc(var(--spacing-xs)/2);align-items:center;display:inline-flex;justify-content:center;max-height:calc(var(--badge-height) - var(--badge-border-width)*2)}.section:where([data-position=left]){margin-inline-end:var(--badge-section-margin)}.section:where([data-position=right]){margin-inline-start:var(--badge-section-margin)}
 </style>

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

@@ -1,7 +1,7 @@
 import type { AnyString, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
-export type BadgeVariant = 'filled' | 'light' | 'outline' | 'dot' | 'default' | 'gradient';
+export type BadgeVariant = 'filled' | 'light' | 'outline' | 'default' | 'gradient' | 'subtle';
 export interface BadgeVars {
     root: '--badge-height' | '--badge-padding-x' | '--badge-fz' | '--badge-fw' | '--badge-radius' | '--badge-bg' | '--badge-color' | '--badge-bd' | '--badge-dot-color';
 }
@@ -33,6 +33,8 @@ export interface BadgeProps extends BoxProps {
     variant?: BadgeVariant;
     /** Font weight */
     fw?: CSSProperties['font-weight'];
+    /** Adds a dot indicator before the label, inheriting the text color */
+    dotted?: boolean;
 }
 declare var __VLS_8: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {

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

@@ -18,10 +18,7 @@ export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
 export interface BreadcrumbsProps extends BoxProps {
     /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /**
-     * Separator icon between items
-     * @default `'gravity-ui:chevron-right'`
-     */
+    /** Separator icon between items. Defaults to the configured `chevronRight` icon. */
     separator?: string;
     /** Spacing token */
     spacing?: NuanceSpacing;

package/dist/runtime/components/breadcrumbs.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composables";
+import { useConfig, useTheme } from "@nui/composables";
 import { getSpacing } from "@nui/utils";
 import { computed, unref } from "vue";
 import Box from "./box.vue";
@@ -8,7 +8,7 @@ const {
   is = "ol",
   mod,
   spacing,
-  separator = "gravity-ui:chevron-right",
+  separator: _separator,
   color = "primary",
   variant = "subtle",
   size = "compact-sm",
@@ -24,6 +24,8 @@ const {
   mod: { type: [Object, Array, null], required: false }
 });
 defineEmits(["click"]);
+const { icons } = useConfig();
+const separator = computed(() => _separator ?? icons.chevronRight);
 const style = computed(() => ({
   "--bc-spacing": getSpacing(spacing)
 }));

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

@@ -18,10 +18,7 @@ export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
 export interface BreadcrumbsProps extends BoxProps {
     /** Items array */
     items?: MaybeRef<BreadcrumbsItem[]>;
-    /**
-     * Separator icon between items
-     * @default `'gravity-ui:chevron-right'`
-     */
+    /** Separator icon between items. Defaults to the configured `chevronRight` icon. */
     separator?: string;
     /** Spacing token */
     spacing?: NuanceSpacing;

package/dist/runtime/components/button/button.module.css

@@ -1 +1 @@
-.root{--button-height-xs:rem(26px);--button-height-sm:rem(30px);--button-height-md:rem(36px);--button-height-lg:rem(42px);--button-height-xl:rem(50px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-md);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:600;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled-text);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)){background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}
+.root{--button-height-xs:rem(26px);--button-height-sm:rem(30px);--button-height-md:rem(36px);--button-height-lg:rem(42px);--button-height-xl:rem(50px);--button-height-compact-xs:rem(22px);--button-height-compact-sm:rem(26px);--button-height-compact-md:rem(30px);--button-height-compact-lg:rem(34px);--button-height-compact-xl:rem(40px);--button-padding-x-xs:rem(14px);--button-padding-x-sm:rem(18px);--button-padding-x-md:rem(22px);--button-padding-x-lg:rem(26px);--button-padding-x-xl:rem(32px);--button-padding-x-compact-xs:rem(7px);--button-padding-x-compact-sm:rem(8px);--button-padding-x-compact-md:rem(10px);--button-padding-x-compact-lg:rem(12px);--button-padding-x-compact-xl:rem(14px);--button-height:var(--button-height-sm);--button-padding-x:var(--button-padding-x-sm);--button-color:var(--color-white);--button-fz:var(--font-size-md);--button-bg:var(--color-primary-filled);--button-radius:var(--radius-default);--button-hover:var(--color-primary-filled-hover);--button-spacing:0;--button-justify:center;--button-section-size:calc(var(--button-height) - 0.25rem);background:var(--button-bg);border:var(--button-bd,rem(1px) solid transparent);border-radius:var(--button-radius);color:var(--button-color,var(--color-white));cursor:pointer;display:inline-block;font-size:var(--button-fz);font-weight:500;height:var(--button-height,var(--button-height-sm));line-height:1;overflow:hidden;padding-inline:var(--button-padding-x,var(--button-padding-x-sm));position:relative;text-align:center;transition:background-color .2s ease-in,color .2s ease-in;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:auto}.root:where([data-with-left-section]){padding-inline-start:0}.root:where([data-with-right-section]){padding-inline-end:0}.root:where([data-variant=gradient-outline]){background-clip:padding-box,border-box;background-origin:border-box}.root:where(:disabled:not([data-loading])){background:var(--color-disabled);border:1px solid transparent;color:var(--color-disabled-text);cursor:not-allowed;transform:none}.root:before{border-radius:var(--button-radius,var(--radius-default));content:"";filter:blur(12px);inset:-1px;opacity:0;pointer-events:none;position:absolute;transform:translateY(-100%);transition:transform .15s ease,opacity .1s ease;@mixin where-light{background:var(--color-gray-1);color:var(--color-gray-5)}@mixin where-dark{background:var(--color-dark-6);color:var(--color-dark-3)}}.root:where([data-loading]){cursor:not-allowed;transform:none}.root:where([data-loading]):before{opacity:1;transform:translateY(0)}.root:where([data-loading]) .inner{opacity:0;transform:translateY(100%)}.root:hover:where(:not([data-loading],:disabled)),.root[data-active]{background:var(--button-hover);color:var(--button-color)}.root:hover:where(:not([data-loading],:disabled)):where([data-variant=gradient-outline]),.root[data-active]:where([data-variant=gradient-outline]){color:#fff}.inner{gap:var(--button-spacing);justify-content:center;overflow:visible;transition:transform .15s ease,opacity .1s ease;width:100%}.inner,.label{align-items:center;display:flex;height:100%}.label{flex:1;justify-content:var(--button-justify);opacity:1;overflow:hidden;white-space:nowrap}.label:where([data-loading]){opacity:.2}.section{--section-pointer-events:none;align-items:center;display:flex;height:100%;justify-content:center;pointer-events:var(--section-pointer-events);width:var(--button-section-size)}.loader{left:calc(50% - var(--loader-size)/2);position:absolute;top:calc(50% - var(--loader-size)/2)}.group{--group-border-width:1px;display:flex}.group>:where(*):focus{position:relative;z-index:1}.group[data-orientation=horizontal]{flex-direction:row}.group[data-orientation=horizontal]>:where(*):not(:only-child):first-child{border-end-end-radius:0;border-inline-end-width:calc(var(--group-border-width)/2);border-start-end-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):last-child{border-end-start-radius:0;border-inline-start-width:calc(var(--group-border-width)/2);border-start-start-radius:0}.group[data-orientation=horizontal]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-inline-width:calc(var(--group-border-width)/2);border-radius:0}.group[data-orientation=vertical]{flex-direction:column}.group[data-orientation=vertical]>:where(*):not(:only-child):first-child{border-bottom-width:calc(var(--group-border-width)/2);border-end-end-radius:0;border-end-start-radius:0}.group[data-orientation=vertical]>:where(*):not(:only-child):last-child{border-start-end-radius:0;border-start-start-radius:0;border-top-width:calc(var(--group-border-width)/2)}.group[data-orientation=vertical]>:where(*):not(:only-child):not(:first-child):not(:last-child){border-bottom-width:calc(var(--group-border-width)/2);border-radius:0;border-top-width:calc(var(--group-border-width)/2)}

package/dist/runtime/components/button/button.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getFontSize, getRadius, getSize, getSpacing } from "@nui/utils";
 import Box from "../box.vue";
 import Loader from "../loader/loader.vue";
 import css from "./button.module.css";
@@ -33,8 +33,9 @@ const {
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
+const { variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
-  const { background, border, hover, text } = createVariantColorResolver({
+  const { background, border, hover, text } = variantResolver({
     theme,
     variant,
     color: props.color,

package/dist/runtime/components/calendar/ui/core/calendar-header.vue

@@ -1,10 +1,12 @@
 <script setup>
+import { useConfig } from "@nui/composables";
+import { computed } from "vue";
 import Box from "../../../box.vue";
 import UnstyledButton from "../../../button/unstyled-button.vue";
 const {
   is = "header",
-  prevIcon = "gravity-ui:chevron-left",
-  nextIcon = "gravity-ui:chevron-right",
+  prevIcon,
+  nextIcon,
   withPrev = true,
   withNext = true,
   nextDisabled,
@@ -23,6 +25,9 @@ const {
   mod: { type: [Object, Array, null], required: false }
 });
 defineEmits(["prev", "level", "next"]);
+const { icons } = useConfig();
+const resolvedPrevIcon = computed(() => prevIcon ?? icons.chevronLeft);
+const resolvedNextIcon = computed(() => nextIcon ?? icons.chevronRight);
 </script>
 
 <template>
@@ -34,7 +39,7 @@ defineEmits(["prev", "level", "next"]);
 			:class='$style.control'
 			@click='$emit("prev")'
 		>
-			<Icon :name='prevIcon' :class='$style.icon' />
+			<Icon :name='resolvedPrevIcon' :class='$style.icon' />
 		</UnstyledButton>
 
 		<UnstyledButton
@@ -52,7 +57,7 @@ defineEmits(["prev", "level", "next"]);
 			:class='$style.control'
 			@click='$emit("next")'
 		>
-			<Icon :name='nextIcon' :class='$style.icon' />
+			<Icon :name='resolvedNextIcon' :class='$style.icon' />
 		</UnstyledButton>
 	</Box>
 </template>

package/dist/runtime/components/card/card.module.css

@@ -1 +1 @@
-.root{--card-padding:var(--spacing-md);color:var(--color-text);display:flex;flex-direction:column;overflow:hidden;padding:var(--card-padding);position:relative;@mixin where-light{background-color:var(--color-white)}@mixin where-dark{background-color:var(--color-dark-6)}}.section{display:block;margin-inline:calc(var(--card-padding)*-1)}.section:where(:first-child){border-top:none!important;margin-top:calc(var(--card-padding)*-1)}.section:where(:last-child){border-bottom:none!important;margin-bottom:calc(var(--card-padding)*-1)}.section:where([data-inherit-padding]){padding-inline:var(--card-padding)}.section:where([data-with-border]){border-bottom:1px solid;border-top:1px solid}.section{@mixin where-light{border-color:var(--color-gray-3)}}.section{@mixin where-dark{border-color:var(--color-dark-4)}}.section+.section{border-top:none!important}
+.root{--card-padding:var(--spacing-md);color:var(--color-text);display:flex;flex-direction:column;overflow:hidden;padding:var(--card-padding);position:relative;@mixin where-light{background-color:var(--color-white)}@mixin where-dark{background-color:var(--color-dark-6)}}.section{display:block;margin-inline:calc(var(--card-padding)*-1)}.section:where([data-with-border]){border-bottom:1px solid;border-top:1px solid}.section:where(:first-of-type){border-top:none;margin-top:calc(var(--card-padding)*-1)}.section:where(:last-of-type){border-bottom:none;margin-bottom:calc(var(--card-padding)*-1)}.section:where([data-inherit-padding]){padding:var(--card-padding)}.section{@mixin where-light{border-color:var(--color-gray-3)}}.section{@mixin where-dark{border-color:var(--color-dark-4)}}.section+.section{border-top:none}

package/dist/runtime/components/checkbox/checkbox-indicator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
+import { useConfig, useVarsResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -26,6 +26,7 @@ const checked = computed(() => {
     return ctx?.value.value;
   return modelValue.value;
 });
+const { icons } = useConfig();
 const style = useVarsResolver((theme) => {
   const parsed = parseThemeColor({ color, theme });
   const outlineColor = parsed.isThemeColor && parsed.shade === void 0 ? `var(--color-${parsed.color}-outline)` : parsed.color;
@@ -43,8 +44,8 @@ const style = useVarsResolver((theme) => {
 <template>
 	<Box :style='style.root' :class='$style.indicator' :mod='{ checked }'>
 		<slot :indeterminate='indeterminate' :class='$style.icon' :mod='{ checked }'>
-			<Icon v-if='!indeterminate' name='gravity-ui:check' :class='$style.icon' :mod='{ checked }' />
-			<Icon v-else :class='$style.icon' name='gravity-ui:minus' :mod='{ checked }' />
+			<Icon v-if='!indeterminate' :name='icons.check' :class='$style.icon' :mod='{ checked }' />
+			<Icon v-else :class='$style.icon' :name='icons.minus' :mod='{ checked }' />
 		</slot>
 	</Box>
 </template>

package/dist/runtime/components/checkbox/checkbox.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
+import { useConfig, useVarsResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
@@ -35,6 +35,7 @@ const {
 });
 const modelValue = defineModel({ type: [Boolean, String] });
 const ctx = useCheckboxGroupState();
+const { icons } = useConfig();
 const checked = computed({
   get: () => {
     if (ctx && value !== void 0)
@@ -94,10 +95,10 @@ const style = useVarsResolver((theme) => {
 			>
 				<Icon
 					v-if='modelValue !== "indeterminate"'
-					name='gravity-ui:check'
+					:name='icons.check'
 					:class='$style.icon'
 				/>
-				<Icon v-else name='gravity-ui:minus' :class='$style.icon' />
+				<Icon v-else :name='icons.minus' :class='$style.icon' />
 			</slot>
 		</Box>
 	</InputInline>