nuance-ui 0.2.33 → 0.2.34

package/dist/module.json

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

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

@@ -1,9 +1,9 @@
-import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
-export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
 export interface AlertVars {
-    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
 }
 export interface AlertProps extends BoxProps {
     /** Border radius */
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Component size */
+    size?: NuanceSize;
     /** Visual variant */
     variant?: AlertVariant;
     /** Styles API */

package/dist/runtime/components/alert.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useConfig, useVarsResolver } from "@nui/composables";
-import { getRadius } from "@nui/utils";
+import { getFontSize, getRadius } from "@nui/utils";
 import { useId } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Box from "./box.vue";
@@ -10,6 +10,7 @@ const {
   color,
   title,
   radius,
+  size = "md",
   variant = "light",
   withCloseButton,
   classes
@@ -21,6 +22,7 @@ const {
   withCloseButton: { type: Boolean, required: false },
   onClose: { type: Function, required: false },
   closeButtonLabel: { type: String, required: false },
+  size: { type: String, required: false },
   variant: { type: String, required: false },
   classes: { type: Object, required: false },
   is: { type: null, required: false },
@@ -36,7 +38,8 @@ const style = useVarsResolver((theme) => {
       "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
       "--alert-bg": color || variant ? background : void 0,
       "--alert-color": text,
-      "--alert-bd": color || variant ? border : void 0
+      "--alert-bd": color || variant ? border : void 0,
+      "--alert-font-size": getFontSize(size)
     }
   };
 });
@@ -89,5 +92,5 @@ const style = useVarsResolver((theme) => {
 </template>
 
 <style module>
-.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-sm);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column;gap:var(--spacing-xs)}.title{align-items:center;display:flex;font-size:var(--font-size-md);font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;height:1.25rem;justify-content:flex-start;line-height:1;margin-top:1px;width:1.25rem}.message{font-size:var(--font-size-md);overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
+.root{--alert-radius:var(--radius-default);--alert-bg:var(--color-primary-light);--alert-bd:1px solid transparent;--alert-color:var(--color-primary-light-color);background-color:var(--alert-bg);border:var(--alert-bd);border-radius:var(--alert-radius);color:var(--alert-color);gap:var(--spacing-xs);overflow:hidden;padding:var(--spacing-sm);position:relative}.body,.root{display:flex}.body{flex:1;flex-direction:column}.title{align-items:center;display:flex;font-size:var(--alert-font-size,var(--font-size-md));font-weight:700;justify-content:space-between}.label{display:block;overflow:hidden;text-overflow:ellipsis}.icon{align-items:center;display:flex;font-size:var(--alert-font-size);height:calc(var(--alert-font-size)*1.3);justify-content:flex-start;line-height:1;margin-top:1px;width:calc(var(--alert-font-size)*1.3)}.message{font-size:var(--alert-font-size,var(--font-size-md));overflow:hidden;text-overflow:ellipsis}:where([data-mantine-color-scheme=light]) .message{color:var(--color-black)}:where([data-mantine-color-scheme=dark]) .message{color:var(--color-white)}.message:where([data-variant=filled]){color:var(--alert-color)}.message:where([data-variant=white]){color:var(--color-black)}.closeButton{color:var(--alert-color);height:20px;width:20px}
 </style>

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

@@ -1,9 +1,9 @@
-import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export type AlertClasses = 'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton';
-export type AlertVariant = 'filled' | 'light' | 'outline' | 'default';
+export type AlertVariant = 'filled' | 'light' | 'outline' | 'light-outline' | 'default';
 export interface AlertVars {
-    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd';
+    root: '--alert-radius' | '--alert-bg' | '--alert-color' | '--alert-bd' | '--alert-font-size';
 }
 export interface AlertProps extends BoxProps {
     /** Border radius */
@@ -20,6 +20,8 @@ export interface AlertProps extends BoxProps {
     onClose?: () => void;
     /** `aria-label` for the close button */
     closeButtonLabel?: string;
+    /** Component size */
+    size?: NuanceSize;
     /** Visual variant */
     variant?: AlertVariant;
     /** Styles API */

package/dist/runtime/components/dialog/ui/dialog-title.vue

@@ -11,6 +11,7 @@ const { size = "md", lh = "1", ...props } = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

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

@@ -0,0 +1,40 @@
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export interface DividerVars {
+    root: '--divider-color' | '--divider-border-style' | '--divider-size';
+}
+export interface DividerProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor | AnyString;
+    /**
+     * Controls width/height depending on orientation
+     * @default `'xs'`
+     */
+    size?: NuanceSize | AnyString;
+    /**
+     * Label position
+     * @default `'center'`
+     */
+    labelPosition?: 'left' | 'center' | 'right';
+    /**
+     * Divider orientation
+     * @default `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant */
+    variant?: DividerVariant;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/divider.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { useVarsResolver } from "@nui/composables";
+import { getSize, getThemeColor } from "@nui/utils";
+import Box from "./box.vue";
+const {
+  color,
+  size,
+  labelPosition = "center",
+  orientation = "horizontal",
+  variant
+} = defineProps({
+  color: { type: null, required: false },
+  size: { type: [String, Object], required: false },
+  labelPosition: { type: String, required: false },
+  orientation: { type: String, required: false },
+  variant: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = useVarsResolver((theme) => ({
+  root: {
+    "--divider-color": color ? getThemeColor(color, theme) : void 0,
+    "--divider-border-style": variant,
+    "--divider-size": getSize(size, "divider-size")
+  }
+}));
+</script>
+
+<template>
+	<Box
+		role='separator'
+		:style='style.root'
+		:class='$style.root'
+		:mod="[{ orientation, 'with-label': !!$slots.default }, mod]"
+	>
+		<Box
+			is='span'
+			v-if='$slots.default'
+			:class='$style.label'
+			:mod='{ position: labelPosition }'
+		>
+			<slot />
+		</Box>
+	</Box>
+</template>
+
+<style module>
+.root{--divider-size-xs:1px;--divider-size-sm:2px;--divider-size-md:3px;--divider-size-lg:4px;--divider-size-xl:5px;--divider-size:var(--divider-size-xs);@mixin where-light{--divider-color:var(--color-gray-3)}@mixin where-dark{--divider-color:var(--color-dark-4)}}.root:where([data-orientation=horizontal]){border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color)}.root:where([data-orientation=vertical]){align-self:stretch;border-inline-start:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);height:auto}.root:where([data-with-label]){border:0}.label{align-items:center;color:var(--color-dimmed);display:flex;font-size:var(--font-size-xs);white-space:nowrap}.label:where([data-position=left]):before{display:none}.label:where([data-position=right]):after{display:none}.label:before{margin-inline-end:var(--spacing-xs)}.label:after,.label:before{border-top:var(--divider-size) var(--divider-border-style,solid) var(--divider-color);content:"";flex:1;height:1px}.label:after{margin-inline-start:var(--spacing-xs)}
+</style>

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

@@ -0,0 +1,40 @@
+import type { AnyString, NuanceColor, NuanceSize } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export interface DividerVars {
+    root: '--divider-color' | '--divider-border-style' | '--divider-size';
+}
+export interface DividerProps extends BoxProps {
+    /** Color from theme */
+    color?: NuanceColor | AnyString;
+    /**
+     * Controls width/height depending on orientation
+     * @default `'xs'`
+     */
+    size?: NuanceSize | AnyString;
+    /**
+     * Label position
+     * @default `'center'`
+     */
+    labelPosition?: 'left' | 'center' | 'right';
+    /**
+     * Divider orientation
+     * @default `'horizontal'`
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /** Visual variant */
+    variant?: DividerVariant;
+}
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DividerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DividerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/drawer/drawer-title.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

package/dist/runtime/components/index.d.ts

@@ -14,6 +14,7 @@ export * from './combobox/index.js';
 export type * from './container.vue';
 export type * from './date-time-picker.vue';
 export * from './dialog/index.js';
+export type * from './divider.vue';
 export * from './drawer/index.js';
 export * from './files/index.js';
 export type * from './floating-indicator.vue';

package/dist/runtime/components/link/link.vue

@@ -27,6 +27,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

package/dist/runtime/components/modal/modal-title.vue

@@ -10,6 +10,7 @@ const props = defineProps({
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },

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

@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
     gradient?: NuanceGradient;
     /** Font size token */
     fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
+    /** Font family token @default 'text' */
+    ff?: 'mono' | 'headings' | 'text' | AnyString;
     /** Line height token */
     lh?: NuanceSize | AnyString;
     /** Font weight */

package/dist/runtime/components/text.vue

@@ -13,6 +13,7 @@ const {
   variant,
   gradient,
   fz,
+  ff,
   fw,
   lh,
   c,
@@ -26,6 +27,7 @@ const {
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
@@ -43,6 +45,7 @@ const _mod = computed(() => [{
 const style = useVarsResolver((theme) => ({
   root: {
     "--text-fz": getFontSize(fz || size),
+    "--text-ff": ff ? `var(--font-family${ff === "text" ? "" : ff})` : void 0,
     "--text-fw": fw?.toString(),
     "--text-lh": getLineHeight(lh || size),
     "--text-gradient": variant === "gradient" ? getGradient(gradient, theme) : void 0,
@@ -59,5 +62,5 @@ const style = useVarsResolver((theme) => ({
 </template>
 
 <style module>
-.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
+.root{--text-fz:var(--font-size-md);--text-lh:var(--line-height-md);--text-color:inherit;--text-fw:normal;--text-gradient:none;--text-line-clamp:none;color:var(--text-color);font-family:var(--text-ff,var(--font-family));font-size:var(--text-fz);font-weight:var(--text-fw);line-height:var(--text-lh);margin:0;padding:0;text-decoration:none;-webkit-tap-highlight-color:transparent}.root:where([data-truncate]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.root:where([data-truncate=start]){direction:rtl;text-align:right;@mixin where-rtl{direction:ltr;text-align:left}}.root:where([data-variant=gradient]){-webkit-background-clip:text;background-clip:text;background-image:var(--text-gradient);-webkit-text-fill-color:transparent}.root:where([data-line-clamp]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--text-line-clamp);text-overflow:ellipsis}.root:where([data-inherit]){color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit}.root:where([data-inline]){line-height:1}
 </style>

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

@@ -19,6 +19,8 @@ export interface TextProps extends BoxProps {
     gradient?: NuanceGradient;
     /** Font size token */
     fz?: NuanceFontSize | `h${TitleOrder}` | AnyString;
+    /** Font family token @default 'text' */
+    ff?: 'mono' | 'headings' | 'text' | AnyString;
     /** Line height token */
     lh?: NuanceSize | AnyString;
     /** Font weight */

package/dist/runtime/components/title.vue

@@ -5,6 +5,7 @@ const {
   order = "2",
   textWrap,
   size,
+  ff = "headings",
   ...rest
 } = defineProps({
   order: { type: String, required: false },
@@ -16,6 +17,7 @@ const {
   inherit: { type: Boolean, required: false },
   gradient: { type: Object, required: false },
   fz: { type: null, required: false },
+  ff: { type: [String, Object], required: false },
   lh: { type: [String, Object], required: false },
   fw: { type: void 0, required: false },
   c: { type: null, required: false },
@@ -29,6 +31,7 @@ const style = computed(() => ({ "--title-text-wrap": textWrap }));
 	<Text
 		:is='`h${order}`'
 		v-bind='rest'
+		:ff
 		:size='size || `h${order}`'
 		:class='$style.root'
 		:style

package/dist/runtime/utils/style/create-variant-color-resolver.d.ts

@@ -1,7 +1,7 @@
 import type { AnyString, NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 export interface VariantColorResolverOptions {
     color: NuanceColor | AnyString | undefined;
-    variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
+    variant: 'filled' | 'light' | 'outline' | 'light-outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
     gradient?: NuanceGradient;
     theme: NuanceTheme;
 }

package/dist/runtime/utils/style/create-variant-color-resolver.js

@@ -57,6 +57,22 @@ export function createVariantColorResolver({
       border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
     };
   }
+  if (variant === "light-outline") {
+    if (parsed.shade === void 0) {
+      return {
+        background: `var(--color-${color}-light)`,
+        hover: `var(--color-${color}-light-hover)`,
+        text: `var(--color-${color}-light-color)`,
+        border: `1px solid var(--color-${color}-outline)`
+      };
+    }
+    return {
+      background: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .1)`,
+      hover: `color-mix(var(--color-${parsed.color}-${parsed.shade}), .12)`,
+      text: `var(--color-${parsed.color}-${Math.min(parsed.shade, 6)})`,
+      border: `1px solid var(--color-${parsed.color}-${parsed.shade})`
+    };
+  }
   if (variant === "subtle") {
     if (parsed.shade === void 0) {
       return {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.2.33",
+	"version": "0.2.34",
 	"description": "A modern Vue UI library inspired by the best of the React ecosystem.",
 	"repository": {
 		"type": "git",