nuance-ui 0.2.6 → 0.2.7

package/dist/module.json

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

package/dist/module.mjs

@@ -33,10 +33,9 @@ const module$1 = defineNuxtModule({
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
     const aliases = {
-      composals: resolve("./runtime/composals"),
+      composables: resolve("./runtime/composables"),
       components: resolve("./runtime/components"),
       utils: resolve("./runtime/utils"),
-      helpers: resolve("./runtime/helpers"),
       types: resolve("./runtime/types"),
       modals: resolve("./runtime/modals")
     };
@@ -61,7 +60,7 @@ const module$1 = defineNuxtModule({
     });
     if (options.autoImport) {
       addComponentsDir({
-        path: resolve("./runtime/components"),
+        path: aliases.components,
         prefix: options.prefix,
         pathPrefix: false,
         extensions: [".vue"],
@@ -71,8 +70,8 @@ const module$1 = defineNuxtModule({
           "**/*.module.css"
         ]
       });
-      addImportsDir(resolve("./runtime/composals"));
-      addImportsDir(resolve("./runtime/helpers"));
+      addImportsDir(aliases.composables);
+      addImportsDir(aliases.utils);
     }
     nuxt.options.css.push(resolve("./runtime/styles/global.css"));
   }

package/dist/runtime/components/action-icon/action-icon-group.d.vue.ts

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -9,7 +9,7 @@ const { mod, orientation = "horizontal", is } = defineProps({
 </script>
 
 <template>
-	<Box :is :class='css.group' :mod='[mod, { orientation }]' role='group'>
-		<slot />
-	</Box>
+	<Box :is :class='css.group' :mod='[mod, { orientation }]' role='group'>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/action-icon/action-icon-group.vue.d.ts

@@ -1,5 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconGroupProps extends BoxProps {
+    /**
+     * Layout direction of the group
+     * @default 'horizontal'
+     */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,11 +1,20 @@
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconSectionProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
 }
 declare var __VLS_8: {};

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -41,7 +41,7 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box :is :mod='[mod, { variant }]' :style :class='css.section'>
-		<slot />
-	</Box>
+	<Box :is :mod='[mod, { variant }]' :style :class='css.section'>
+		<slot />
+	</Box>
 </template>

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

@@ -1,11 +1,20 @@
 import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconSectionProps extends BoxProps {
+    /** Component size */
     size?: NuanceSize | `compact-${NuanceSize}`;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
 }
 declare var __VLS_8: {};

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

@@ -1,19 +1,28 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconProps {
+    /** Component size */
     size?: NuanceSize | `input-${NuanceSize}` | string;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string;
-        icon?: string;
-    };
+    classes?: Classes<'root' | 'icon'>;
+    /** Modifiers passed through to the underlying `Box` */
     mod?: BoxProps['mod'];
+    /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;
+    /** Disables the component */
     disabled?: boolean;
 }
 declare var __VLS_19: {};

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -47,26 +47,27 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		is='button'
-		:mod='[{ loading }, mod]'
-		:style
-		:class='[css.root, classes?.root]'
-		:disabled='(!disabled ? loading : disabled) || void 0'
-	>
-		<Transition name='slide-down'>
-			<Loader
-				v-if='loading'
-				color='var(--ai-color)'
-				size='calc(var(--ai-size) * .55)'
-				:class='css.loader'
-			/>
-		</Transition>
-
-		<span :class='[css.icon, classes?.icon]'>
-			<slot>
-				<Icon v-if='icon' :name='icon' :class='css["icon-element"]' />
-			</slot>
-		</span>
-	</Box>
+	<Box
+		is='button'
+		type='button'
+		:mod='[{ loading }, mod]'
+		:style
+		:class='[css.root, classes?.root]'
+		:disabled='(!disabled ? loading : disabled) || void 0'
+	>
+		<Transition name='slide-down'>
+			<Loader
+				v-if='loading'
+				color='var(--ai-color)'
+				size='calc(var(--ai-size) * .55)'
+				:class='css.loader'
+			/>
+		</Transition>
+
+		<span :class='[css.icon, classes?.icon]'>
+			<slot>
+				<Icon v-if='icon' :name='icon' :class='css["icon-element"]' />
+			</slot>
+		</span>
+	</Box>
 </template>

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

@@ -1,19 +1,28 @@
-import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+import type { Classes, NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconProps {
+    /** Component size */
     size?: NuanceSize | `input-${NuanceSize}` | string;
+    /**
+     * Visual variant
+     * @default 'default'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
+    /** Gradient configuration (used with `variant="gradient"`) */
     gradient?: NuanceGradient;
+    /** Loading state */
     loading?: boolean;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Border radius */
     radius?: NuanceRadius;
     /** Styles API */
-    classes?: {
-        root?: string;
-        icon?: string;
-    };
+    classes?: Classes<'root' | 'icon'>;
+    /** Modifiers passed through to the underlying `Box` */
     mod?: BoxProps['mod'];
+    /** Icon name rendered inside the button when no default slot is provided */
     icon?: string;
+    /** Disables the component */
     disabled?: boolean;
 }
 declare var __VLS_19: {};

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

@@ -1,31 +1,27 @@
-import type { NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface AlertProps extends BoxProps {
+    /**
+     * Visual variant
+     * @default 'light'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'default';
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor`  */
+    /** Color from theme */
     color?: NuanceColor;
     /** Alert title */
     title?: string;
     /** Icon displayed next to the title */
     icon?: string;
-    /** Determines whether close button should be displayed @default `false` */
+    /** Renders a close button in the top-right corner */
     withCloseButton?: boolean;
     /** Called when the close button is clicked */
     onClose?: () => void;
-    /** Close button `aria-label` */
+    /** `aria-label` for the close button */
     closeButtonLabel?: string;
     /** Styles API */
-    classes?: {
-        root?: string;
-        icon?: string;
-        body?: string;
-        title?: string;
-        label?: string;
-        message?: string;
-        closeButton?: string;
-    };
+    classes?: Classes<'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton'>;
 }
 declare var __VLS_19: {}, __VLS_27: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/alert.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getRadius } from "@nui/utils";
 import { computed, useId } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
@@ -44,135 +44,135 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<Box
-		role='alert'
-		:style
-		:class='[$style.root, classes?.root]'
-		:mod='[{ variant }, mod]'
-		:aria-describedby='$slots.default ? `${id}-body` : void 0'
-		:aria-labelledby='$slots.label ? `${id}-title` : void 0'
-	>
-		<Icon
-			v-if='icon'
-			:name='icon'
-			:class='[$style.icon, classes?.icon]'
-		/>
-
-		<div :class='[$style.body, classes?.body]'>
-			<Box v-if='title || $slots.title' :class='[$style.title, classes?.title]'>
-				<span :id='`${id}-title`' :class='[$style.label, classes?.label]'>
-					<slot name='title'>
-						{{ title }}
-					</slot>
-				</span>
-			</Box>
-
-			<Box
-				v-if='$slots.default'
-				:id='`${id}-body`'
-				:class='[$style.message, classes?.message]'
-				:mod='{ variant }'
-			>
-				<slot />
-			</Box>
-		</div>
-
-		<ActionIcon
-			v-if='withCloseButton'
-			:class='[$style.closeButton, classes?.closeButton]'
-			variant='subtle'
-			icon='gravity-ui:xmark'
-			size='sm'
-			:color
-			@click='$emit("close")'
-		/>
-	</Box>
+	<Box
+		role='alert'
+		:style
+		:class='[$style.root, classes?.root]'
+		:mod='[{ variant }, mod]'
+		:aria-describedby='$slots.default ? `${id}-body` : void 0'
+		:aria-labelledby='$slots.label ? `${id}-title` : void 0'
+	>
+		<Icon
+			v-if='icon'
+			:name='icon'
+			:class='[$style.icon, classes?.icon]'
+		/>
+
+		<div :class='[$style.body, classes?.body]'>
+			<Box v-if='title || $slots.title' :class='[$style.title, classes?.title]'>
+				<span :id='`${id}-title`' :class='[$style.label, classes?.label]'>
+					<slot name='title'>
+						{{ title }}
+					</slot>
+				</span>
+			</Box>
+
+			<Box
+				v-if='$slots.default'
+				:id='`${id}-body`'
+				:class='[$style.message, classes?.message]'
+				:mod='{ variant }'
+			>
+				<slot />
+			</Box>
+		</div>
+
+		<ActionIcon
+			v-if='withCloseButton'
+			:class='[$style.closeButton, classes?.closeButton]'
+			variant='subtle'
+			icon='gravity-ui:xmark'
+			size='sm'
+			:color
+			@click='$emit("close")'
+		/>
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--alert-radius: var(--radius-default);
-	--alert-bg: var(--color-primary-light);
-	--alert-bd: 1px solid transparent;
-	--alert-color: var(--color-primary-light-color);
-
-	position: relative;
-
-	overflow: hidden;
-	display: flex;
-	gap: var(--spacing-md);
-
-	padding: var(--spacing-md) var(--spacing-md);
-	border: var(--alert-bd);
-	border-radius: var(--alert-radius);
-
-	color: var(--alert-color);
-
-	background-color: var(--alert-bg);
-}
-
-.body {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: var(--spacing-xs);
-}
-
-.title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	font-size: var(--font-size-sm);
-	font-weight: 700;
-}
-
-.label {
-	overflow: hidden;
-	display: block;
-
-	text-overflow: ellipsis;
-}
-
-.icon {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-
-	width: 1.25rem;
-	height: 1.25rem;
-	margin-top: 1px;
-
-	line-height: 1;
-}
-
-.message {
-	overflow: hidden;
-
-	font-size: var(--font-size-sm);
-	text-overflow: ellipsis;
-
-	:where([data-mantine-color-scheme='light']) & {
-		color: var(--color-black);
-	}
-
-	:where([data-mantine-color-scheme='dark']) & {
-		color: var(--color-white);
-	}
-
-	&:where([data-variant='filled']) {
-		color: var(--alert-color);
-	}
-
-	&:where([data-variant='white']) {
-		color: var(--color-black);
-	}
-}
-
-.closeButton {
-	width: 20px;
-	height: 20px;
-
-	color: var(--alert-color);
-}
+.root {
+	--alert-radius: var(--radius-default);
+	--alert-bg: var(--color-primary-light);
+	--alert-bd: 1px solid transparent;
+	--alert-color: var(--color-primary-light-color);
+
+	position: relative;
+
+	overflow: hidden;
+	display: flex;
+	gap: var(--spacing-md);
+
+	padding: var(--spacing-md) var(--spacing-md);
+	border: var(--alert-bd);
+	border-radius: var(--alert-radius);
+
+	color: var(--alert-color);
+
+	background-color: var(--alert-bg);
+}
+
+.body {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	font-size: var(--font-size-sm);
+	font-weight: 700;
+}
+
+.label {
+	overflow: hidden;
+	display: block;
+
+	text-overflow: ellipsis;
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+
+	width: 1.25rem;
+	height: 1.25rem;
+	margin-top: 1px;
+
+	line-height: 1;
+}
+
+.message {
+	overflow: hidden;
+
+	font-size: var(--font-size-sm);
+	text-overflow: ellipsis;
+
+	:where([data-mantine-color-scheme='light']) & {
+		color: var(--color-black);
+	}
+
+	:where([data-mantine-color-scheme='dark']) & {
+		color: var(--color-white);
+	}
+
+	&:where([data-variant='filled']) {
+		color: var(--alert-color);
+	}
+
+	&:where([data-variant='white']) {
+		color: var(--color-black);
+	}
+}
+
+.closeButton {
+	width: 20px;
+	height: 20px;
+
+	color: var(--alert-color);
+}
 </style>

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

@@ -1,31 +1,27 @@
-import type { NuanceColor, NuanceRadius } from '@nui/types';
+import type { Classes, NuanceColor, NuanceRadius } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface AlertProps extends BoxProps {
+    /**
+     * Visual variant
+     * @default 'light'
+     */
     variant?: 'filled' | 'light' | 'outline' | 'default';
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    /** Border radius */
     radius?: NuanceRadius;
-    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor`  */
+    /** Color from theme */
     color?: NuanceColor;
     /** Alert title */
     title?: string;
     /** Icon displayed next to the title */
     icon?: string;
-    /** Determines whether close button should be displayed @default `false` */
+    /** Renders a close button in the top-right corner */
     withCloseButton?: boolean;
     /** Called when the close button is clicked */
     onClose?: () => void;
-    /** Close button `aria-label` */
+    /** `aria-label` for the close button */
     closeButtonLabel?: string;
     /** Styles API */
-    classes?: {
-        root?: string;
-        icon?: string;
-        body?: string;
-        title?: string;
-        label?: string;
-        message?: string;
-        closeButton?: string;
-    };
+    classes?: Classes<'root' | 'icon' | 'body' | 'title' | 'label' | 'message' | 'closeButton'>;
 }
 declare var __VLS_19: {}, __VLS_27: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/app-shell/app-shell-main.vue

@@ -7,25 +7,25 @@ const { mod } = defineProps({
 </script>
 
 <template>
-	<Box is='main' :mod :class='$style.root'>
-		<slot />
-	</Box>
+	<Box is='main' :mod :class='$style.root'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	display: flex;
-	flex-direction: column;
-
-	min-height: 100dvh;
-	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
-	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
-	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
-
-	transition-timing-function: var(--app-shell-transition-timing-function);
-	transition-duration: var(--app-shell-transition-duration);
-
-	transition-property: padding;
-}
+.root {
+	display: flex;
+	flex-direction: column;
+
+	min-height: 100dvh;
+	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));
+	padding-bottom: calc(var(--app-shell-footer-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-start: calc(var(--app-shell-navbar-offset, 0rem) + var(--app-shell-padding));
+	padding-inline-end: calc(var(--app-shell-aside-offset, 0rem) + var(--app-shell-padding));
+
+	transition-timing-function: var(--app-shell-transition-timing-function);
+	transition-duration: var(--app-shell-transition-duration);
+
+	transition-property: padding;
+}
 </style>