nuance-ui 0.2.6 → 0.2.8

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.2.6",
+  "version": "0.2.8",
   "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'>;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     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";
@@ -49,6 +49,7 @@ const style = computed(() => useStyleResolver((theme) => {
 <template>
 	<Box
 		is='button'
+		type='button'
 		:mod='[{ loading }, mod]'
 		:style
 		:class='[css.root, classes?.root]'

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'>;
+    /** Element modifiers transformed into `data-` attributes, falsy values are removed */
     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>

package/dist/runtime/components/app-shell/app-shell-section.d.vue.ts

@@ -1,6 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellSectionProps extends BoxProps {
-    /** Determines whether the section should take all available space, `false` by default */
+    /**
+     * Stretches the section to fill all available space
+     * @default false
+     */
     grow?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/app-shell/app-shell-section.vue.d.ts

@@ -1,6 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellSectionProps extends BoxProps {
-    /** Determines whether the section should take all available space, `false` by default */
+    /**
+     * Stretches the section to fill all available space
+     * @default false
+     */
     grow?: boolean;
 }
 declare var __VLS_8: {};

package/dist/runtime/components/app-shell/app-shell.d.vue.ts

@@ -1,10 +1,18 @@
-import type { DateConfig } from '@nui/composals';
+import type { DateConfig } from '@nui/composables';
 import type { BoxProps } from '../box.vue.js';
 export interface AppShellProps extends BoxProps {
-    /** Determines how Navbar/Aside are arranged relative to Header/Footer, `default` by default */
+    /**
+     * Layout mode. `alt` stretches Navbar/Aside to the full viewport height,
+     * pushing Header/Footer between them.
+     * @default 'default'
+     */
     layout?: 'default' | 'alt';
+    /**
+     * Renders dividers between shell sections
+     * @default false
+     */
     withBorder?: boolean;
-    /** Provide app config for dates */
+    /** Locale configuration for date-aware features */
     dateConfig?: Partial<DateConfig>;
 }
 type __VLS_Props = AppShellProps;